Przeglądaj źródła

Tests: introduce tests for body collection. Update tests broken after changes.

Piotr Jasiun 6 lat temu
rodzic
commit
65e2761cdb

+ 1 - 1
packages/ckeditor5-ui/src/editorui/bodycollection.js

@@ -49,7 +49,7 @@ export default class BodyCollection extends ViewCollection {
 
 		const wrapper = document.querySelector( '.ck-body-wrapper' );
 
-		if ( wrapper.childElementCount == 0 ) {
+		if ( wrapper && wrapper.childElementCount == 0 ) {
 			wrapper.remove();
 		}
 	}

+ 1 - 1
packages/ckeditor5-ui/src/notification/notification.js

@@ -21,7 +21,7 @@ import ContextPlugin from '@ckeditor/ckeditor5-core/src/contextplugin';
  * Note that every unhandled and not stopped `warning` notification will be displayed as a system alert.
  * See {@link module:ui/notification/notification~Notification#showWarning}.
  *
- * @extends module:core/plugin~Plugin
+ * @extends module:core/contextplugin~ContextPlugin
  */
 export default class Notification extends ContextPlugin {
 	/**

+ 186 - 0
packages/ckeditor5-ui/tests/editorui/bodycollection.js

@@ -0,0 +1,186 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* global document */
+
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import Locale from '@ckeditor/ckeditor5-utils/src/locale';
+
+import BodyCollection from '../../src/editorui/bodycollection';
+import View from '../../src/view';
+
+describe( 'BodyCollection', () => {
+	let locale;
+
+	testUtils.createSinonSandbox();
+
+	beforeEach( () => {
+		locale = new Locale();
+	} );
+
+	afterEach( () => {
+		const wrappers = Array.from( document.querySelectorAll( '.ck-body-wrapper' ) );
+
+		for ( const wrapper of wrappers ) {
+			wrapper.remove();
+		}
+	} );
+
+	describe( 'attachToDOM', () => {
+		it( 'should create wrapper and put the collection in that wrapper', () => {
+			const body = new BodyCollection( locale );
+
+			body.attachToDOM();
+
+			const wrappers = Array.from( document.querySelectorAll( '.ck-body-wrapper' ) );
+
+			expect( wrappers.length ).to.equal( 1 );
+			expect( wrappers[ 0 ].parentNode ).to.equal( document.body );
+
+			const el = body._bodyCollectionContainer;
+
+			expect( el.parentNode ).to.equal( wrappers[ 0 ] );
+			expect( el.classList.contains( 'ck' ) ).to.be.true;
+			expect( el.classList.contains( 'ck-body' ) ).to.be.true;
+			expect( el.classList.contains( 'ck-rounded-corners' ) ).to.be.true;
+			expect( el.classList.contains( 'ck-reset_all' ) ).to.be.true;
+		} );
+
+		it( 'sets the right dir attribute to the body region (LTR)', () => {
+			const body = new BodyCollection( locale );
+
+			body.attachToDOM();
+
+			const el = body._bodyCollectionContainer;
+
+			expect( el.getAttribute( 'dir' ) ).to.equal( 'ltr' );
+		} );
+
+		it( 'sets the right dir attribute to the body region (RTL)', () => {
+			const locale = new Locale( { uiLanguage: 'ar' } );
+			const body = new BodyCollection( locale );
+
+			body.attachToDOM();
+
+			const el = body._bodyCollectionContainer;
+
+			expect( el.getAttribute( 'dir' ) ).to.equal( 'rtl' );
+		} );
+
+		it( 'should put all body elements to the same wrapper', () => {
+			const body1 = new BodyCollection( locale );
+			body1.attachToDOM();
+
+			expect( document.querySelectorAll( '.ck-body-wrapper' ).length ).to.equal( 1 );
+			expect( document.querySelectorAll( '.ck-body' ).length ).to.equal( 1 );
+
+			const body2 = new BodyCollection( locale );
+			body2.attachToDOM();
+
+			const bodyElements = document.querySelectorAll( '.ck-body' );
+
+			expect( document.querySelectorAll( '.ck-body-wrapper' ).length ).to.equal( 1 );
+			expect( bodyElements.length ).to.equal( 2 );
+			expect( bodyElements[ 0 ].parentNode ).to.equal( bodyElements[ 1 ].parentNode );
+		} );
+
+		it( 'should render views in proper body collections', () => {
+			const body1 = new BodyCollection( locale );
+
+			const view1 = new View();
+			view1.setTemplate( {
+				tag: 'div',
+				attributes: {
+					class: [ 'foo' ]
+				}
+			} );
+
+			// Should work if body is attached before the view is added...
+			body1.attachToDOM();
+			body1.add( view1 );
+
+			const body2 = new BodyCollection( locale );
+
+			const view2 = new View();
+			view2.setTemplate( {
+				tag: 'div',
+				attributes: {
+					class: [ 'bar' ]
+				}
+			} );
+
+			// ...and it should work if body is attached after the view is added.
+			body2.add( view2 );
+			body2.attachToDOM();
+
+			const wrappers = Array.from( document.querySelectorAll( '.ck-body-wrapper' ) );
+
+			expect( wrappers.length ).to.equal( 1 );
+
+			const wrapper = wrappers[ 0 ];
+			const body1Element = body1._bodyCollectionContainer;
+			const body2Element = body2._bodyCollectionContainer;
+
+			expect( body1Element.parentNode ).to.equal( wrapper );
+			expect( body1Element.childNodes.length ).to.equal( 1 );
+			expect( body1Element.childNodes[ 0 ].classList.contains( 'foo' ) ).to.be.true;
+
+			expect( body2Element.parentNode ).to.equal( wrapper );
+			expect( body2Element.childNodes.length ).to.equal( 1 );
+			expect( body2Element.childNodes[ 0 ].classList.contains( 'bar' ) ).to.be.true;
+		} );
+	} );
+
+	describe( 'detachFromDOM', () => {
+		it( 'removes the body collection from DOM', () => {
+			const body = new BodyCollection( locale );
+
+			body.attachToDOM();
+			body.detachFromDOM();
+
+			expect( document.querySelectorAll( '.ck-body-wrapper' ).length ).to.equal( 0 );
+			expect( document.querySelectorAll( '.ck-body' ).length ).to.equal( 0 );
+		} );
+
+		it( 'removes the multiple body collections from dom and remove the wrapper when the last is removed', () => {
+			const body1 = new BodyCollection( locale );
+			body1.attachToDOM();
+
+			const body2 = new BodyCollection( locale );
+			body2.attachToDOM();
+
+			expect( document.querySelectorAll( '.ck-body-wrapper' ).length ).to.equal( 1 );
+			expect( document.querySelectorAll( '.ck-body' ).length ).to.equal( 2 );
+
+			body1.detachFromDOM();
+
+			expect( document.querySelectorAll( '.ck-body-wrapper' ).length ).to.equal( 1 );
+			expect( document.querySelectorAll( '.ck-body' ).length ).to.equal( 1 );
+
+			body2.detachFromDOM();
+
+			expect( document.querySelectorAll( '.ck-body-wrapper' ).length ).to.equal( 0 );
+			expect( document.querySelectorAll( '.ck-body' ).length ).to.equal( 0 );
+		} );
+
+		it( 'should not throw when be called multiple times', () => {
+			const body = new BodyCollection( locale );
+			body.attachToDOM();
+
+			expect( () => {
+				body.detachFromDOM();
+				body.detachFromDOM();
+			} ).to.not.throw();
+		} );
+
+		it( 'should not throw if attachToDOM was not called before', () => {
+			const body = new BodyCollection( locale );
+
+			expect( () => {
+				body.detachFromDOM();
+			} ).to.not.throw();
+		} );
+	} );
+} );

+ 6 - 29
packages/ckeditor5-ui/tests/editorui/editoruiview.js

@@ -37,41 +37,18 @@ describe( 'EditorUIView', () => {
 	} );
 
 	describe( 'render()', () => {
-		it( 'sets the right class set to the body region', () => {
-			const el = view._bodyCollectionContainer;
-
-			expect( el.parentNode ).to.equal( document.body );
-			expect( el.classList.contains( 'ck' ) ).to.be.true;
-			expect( el.classList.contains( 'ck-body' ) ).to.be.true;
-			expect( el.classList.contains( 'ck-rounded-corners' ) ).to.be.true;
-			expect( el.classList.contains( 'ck-reset_all' ) ).to.be.true;
-		} );
-
-		it( 'sets the right dir attribute to the body region (LTR)', () => {
-			const el = view._bodyCollectionContainer;
-
-			expect( el.getAttribute( 'dir' ) ).to.equal( 'ltr' );
-		} );
-
-		it( 'sets the right dir attribute to the body region (RTL)', () => {
-			const locale = new Locale( { uiLanguage: 'ar' } );
-			const view = new EditorUIView( locale );
-
-			view.render();
-
-			const el = view._bodyCollectionContainer;
-
-			expect( el.getAttribute( 'dir' ) ).to.equal( 'rtl' );
-
-			view.destroy();
+		it( 'attach the body collection', () => {
+			expect( view.body._bodyCollectionContainer.parentNode.classList.contains( 'ck-body-wrapper' ) ).to.be.true;
+			expect( view.body._bodyCollectionContainer.parentNode.parentNode ).to.equal( document.body );
 		} );
 	} );
 
 	describe( 'destroy()', () => {
-		it( 'removes the body region container', () => {
-			const el = view._bodyCollectionContainer;
+		it( 'detach the body collection', () => {
+			const el = view.body._bodyCollectionContainer;
 
 			view.destroy();
+
 			expect( el.parentNode ).to.be.null;
 		} );
 

+ 2 - 2
packages/ckeditor5-ui/tests/notification/notification.js

@@ -7,7 +7,7 @@
 
 import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ContextPlugin from '@ckeditor/ckeditor5-core/src/contextplugin';
 import Notification from '../../src/notification/notification';
 
 describe( 'Notification', () => {
@@ -29,7 +29,7 @@ describe( 'Notification', () => {
 	describe( 'init()', () => {
 		it( 'should create notification plugin', () => {
 			expect( notification ).to.instanceof( Notification );
-			expect( notification ).to.instanceof( Plugin );
+			expect( notification ).to.instanceof( ContextPlugin );
 		} );
 	} );