Browse Source

Tests: Updated tests to the latest decoupled editor API.

Aleksander Nowodzinski 7 năm trước cách đây
mục cha
commit
a5eb7c0d7a

+ 183 - 157
packages/ckeditor5-build-decoupled-document/tests/ckeditor.js

@@ -9,13 +9,19 @@ import DecoupledDocumentEditor from '../src/ckeditor';
 import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor';
 
 describe( 'DecoupledDocumentEditor build', () => {
-	let editor, editorData;
+	let editor, editorData, editorElement;
 
 	beforeEach( () => {
 		editorData = '<p><strong>foo</strong> bar</p>';
+
+		editorElement = document.createElement( 'div' );
+		editorElement.innerHTML = editorData;
+
+		document.body.appendChild( editorElement );
 	} );
 
 	afterEach( () => {
+		editorElement.remove();
 		editor = null;
 	} );
 
@@ -29,173 +35,193 @@ describe( 'DecoupledDocumentEditor build', () => {
 		} );
 	} );
 
-	describe( 'create()', () => {
-		beforeEach( () => {
-			return DecoupledDocumentEditor.create( editorData )
-				.then( newEditor => {
-					editor = newEditor;
-				} );
-		} );
-
-		afterEach( () => {
-			return editor.destroy();
-		} );
-
-		it( 'creates an instance which inherits from the DecoupledDocumentEditor', () => {
-			expect( editor ).to.be.instanceof( DecoupledDocumentEditor );
-			expect( editor ).to.be.instanceof( DecoupledEditor );
-		} );
-
-		it( 'loads passed data', () => {
-			expect( editor.getData() ).to.equal( '<p><strong>foo</strong> bar</p>' );
-		} );
+	describe( 'editor with data', () => {
+		test( () => editorData );
 
 		it( 'does not define the UI DOM structure', () => {
-			expect( editor.ui.view.element ).to.be.null;
-			expect( editor.ui.view.toolbar.element.parentElement ).to.be.null;
-			expect( editor.ui.view.editable.element.parentElement ).to.be.null;
-		} );
-	} );
-
-	describe( 'destroy()', () => {
-		beforeEach( () => {
-			return DecoupledDocumentEditor.create( editorData )
-				.then( newEditor => {
-					editor = newEditor;
-				} );
-		} );
-	} );
-
-	describe( 'plugins', () => {
-		beforeEach( () => {
 			return DecoupledDocumentEditor.create( editorData )
 				.then( newEditor => {
-					editor = newEditor;
+					expect( newEditor.ui.view.element ).to.be.null;
+					expect( newEditor.ui.view.toolbar.element.parentElement ).to.be.null;
+					expect( newEditor.ui.view.editable.element.parentElement ).to.be.null;
 				} );
 		} );
-
-		afterEach( () => {
-			return editor.destroy();
-		} );
-
-		it( 'paragraph works', () => {
-			const data = '<p>Some text inside a paragraph.</p>';
-
-			editor.setData( data );
-			expect( editor.getData() ).to.equal( data );
-		} );
-
-		it( 'basic-styles work', () => {
-			const data = [
-				'<p>',
-				'<strong>Test:strong</strong>',
-				'<i>Test:i</i>',
-				'<u>Test:u</u>',
-				'<s>Test:s</s>',
-				'</p>'
-			].join( '' );
-
-			editor.setData( data );
-			expect( editor.getData() ).to.equal( data );
-		} );
-
-		it( 'block-quote works', () => {
-			const data = '<blockquote><p>Quote</p></blockquote>';
-
-			editor.setData( data );
-			expect( editor.getData() ).to.equal( data );
-		} );
-
-		it( 'heading works', () => {
-			const data = [
-				'<h2>Heading 1.</h2>',
-				'<h3>Heading 1.1</h3>',
-				'<h4>Heading 1.1.1</h4>',
-				'<h4>Heading 1.1.2</h4>',
-				'<h3>Heading 1.2</h3>',
-				'<h4>Heading 1.2.1</h4>',
-				'<h2>Heading 2</h2>'
-			].join( '' );
-
-			editor.setData( data );
-			expect( editor.getData() ).to.equal( data );
-		} );
-
-		it( 'image works', () => {
-			const data = '<figure class="image"><img src="./manual/sample.jpg"></figure>';
-
-			editor.setData( data );
-			expect( editor.getData() ).to.equal( data );
-		} );
-
-		it( 'list works', () => {
-			const data = [
-				'<ul>',
-				'<li>Item 1.</li>',
-				'<li>Item 2.</li>',
-				'</ul>',
-				'<ol>',
-				'<li>Item 1.</li>',
-				'<li>Item 2.</li>',
-				'</ol>'
-			].join( '' );
-
-			editor.setData( data );
-			expect( editor.getData() ).to.equal( data );
-		} );
-
-		it( 'link works', () => {
-			const data = '<p><a href="//ckeditor.com">CKEditor.com</a></p>';
-
-			editor.setData( data );
-			expect( editor.getData() ).to.equal( data );
-		} );
-
-		it( 'font size works', () => {
-			const data = '<p><span class="text-big">foo</span></p>';
-
-			editor.setData( data );
-			expect( editor.getData() ).to.equal( data );
-		} );
-
-		it( 'font family works', () => {
-			const data = '<p><span style="font-family:Georgia, serif;">foo</span></p>';
-
-			editor.setData( data );
-			expect( editor.getData() ).to.equal( data );
-		} );
-
-		it( 'highlight works', () => {
-			const data = '<p><mark class="marker-green">foo</mark></p>';
-
-			editor.setData( data );
-			expect( editor.getData() ).to.equal( data );
-		} );
-
-		it( 'alignment works', () => {
-			const data = '<p style="text-align:right;">foo</p>';
-
-			editor.setData( data );
-			expect( editor.getData() ).to.equal( data );
-		} );
 	} );
 
-	describe( 'config', () => {
-		afterEach( () => {
-			return editor.destroy();
-		} );
+	describe( 'editor with editable element', () => {
+		test( () => editorElement );
 
-		// https://github.com/ckeditor/ckeditor5/issues/572
-		it( 'allows configure toolbar items through config.toolbar', () => {
-			return DecoupledDocumentEditor
-				.create( editorData, {
-					toolbar: [ 'bold' ]
-				} )
+		it( 'uses the provided editable element', () => {
+			return DecoupledDocumentEditor.create( editorElement )
 				.then( newEditor => {
-					editor = newEditor;
-
-					expect( editor.ui.view.toolbar.items.length ).to.equal( 1 );
+					expect( newEditor.ui.view.editable.element.parentElement ).to.equal( document.body );
 				} );
 		} );
 	} );
+
+	function test( getEditorDataOrElement ) {
+		describe( 'create()', () => {
+			beforeEach( () => {
+				return DecoupledDocumentEditor.create( getEditorDataOrElement() )
+					.then( newEditor => {
+						editor = newEditor;
+					} );
+			} );
+
+			afterEach( () => {
+				return editor.destroy();
+			} );
+
+			it( 'creates an instance which inherits from the DecoupledDocumentEditor', () => {
+				expect( editor ).to.be.instanceof( DecoupledDocumentEditor );
+				expect( editor ).to.be.instanceof( DecoupledEditor );
+			} );
+
+			it( 'loads passed data', () => {
+				expect( editor.getData() ).to.equal( '<p><strong>foo</strong> bar</p>' );
+			} );
+		} );
+
+		describe( 'destroy()', () => {
+			beforeEach( () => {
+				return DecoupledDocumentEditor.create( getEditorDataOrElement() )
+					.then( newEditor => {
+						editor = newEditor;
+					} );
+			} );
+		} );
+
+		describe( 'plugins', () => {
+			beforeEach( () => {
+				return DecoupledDocumentEditor.create( getEditorDataOrElement() )
+					.then( newEditor => {
+						editor = newEditor;
+					} );
+			} );
+
+			afterEach( () => {
+				return editor.destroy();
+			} );
+
+			it( 'paragraph works', () => {
+				const data = '<p>Some text inside a paragraph.</p>';
+
+				editor.setData( data );
+				expect( editor.getData() ).to.equal( data );
+			} );
+
+			it( 'basic-styles work', () => {
+				const data = [
+					'<p>',
+					'<strong>Test:strong</strong>',
+					'<i>Test:i</i>',
+					'<u>Test:u</u>',
+					'<s>Test:s</s>',
+					'</p>'
+				].join( '' );
+
+				editor.setData( data );
+				expect( editor.getData() ).to.equal( data );
+			} );
+
+			it( 'block-quote works', () => {
+				const data = '<blockquote><p>Quote</p></blockquote>';
+
+				editor.setData( data );
+				expect( editor.getData() ).to.equal( data );
+			} );
+
+			it( 'heading works', () => {
+				const data = [
+					'<h2>Heading 1.</h2>',
+					'<h3>Heading 1.1</h3>',
+					'<h4>Heading 1.1.1</h4>',
+					'<h4>Heading 1.1.2</h4>',
+					'<h3>Heading 1.2</h3>',
+					'<h4>Heading 1.2.1</h4>',
+					'<h2>Heading 2</h2>'
+				].join( '' );
+
+				editor.setData( data );
+				expect( editor.getData() ).to.equal( data );
+			} );
+
+			it( 'image works', () => {
+				const data = '<figure class="image"><img src="./manual/sample.jpg"></figure>';
+
+				editor.setData( data );
+				expect( editor.getData() ).to.equal( data );
+			} );
+
+			it( 'list works', () => {
+				const data = [
+					'<ul>',
+					'<li>Item 1.</li>',
+					'<li>Item 2.</li>',
+					'</ul>',
+					'<ol>',
+					'<li>Item 1.</li>',
+					'<li>Item 2.</li>',
+					'</ol>'
+				].join( '' );
+
+				editor.setData( data );
+				expect( editor.getData() ).to.equal( data );
+			} );
+
+			it( 'link works', () => {
+				const data = '<p><a href="//ckeditor.com">CKEditor.com</a></p>';
+
+				editor.setData( data );
+				expect( editor.getData() ).to.equal( data );
+			} );
+
+			it( 'font size works', () => {
+				const data = '<p><span class="text-big">foo</span></p>';
+
+				editor.setData( data );
+				expect( editor.getData() ).to.equal( data );
+			} );
+
+			it( 'font family works', () => {
+				const data = '<p><span style="font-family:Georgia, serif;">foo</span></p>';
+
+				editor.setData( data );
+				expect( editor.getData() ).to.equal( data );
+			} );
+
+			it( 'highlight works', () => {
+				const data = '<p><mark class="marker-green">foo</mark></p>';
+
+				editor.setData( data );
+				expect( editor.getData() ).to.equal( data );
+			} );
+
+			it( 'alignment works', () => {
+				const data = '<p style="text-align:right;">foo</p>';
+
+				editor.setData( data );
+				expect( editor.getData() ).to.equal( data );
+			} );
+		} );
+
+		describe( 'config', () => {
+			afterEach( () => {
+				return editor.destroy();
+			} );
+
+			// https://github.com/ckeditor/ckeditor5/issues/572
+			it( 'allows configure toolbar items through config.toolbar', () => {
+				return DecoupledDocumentEditor
+					.create( getEditorDataOrElement(), {
+						toolbar: [ 'bold' ]
+					} )
+					.then( newEditor => {
+						editor = newEditor;
+
+						expect( editor.ui.view.toolbar.items.length ).to.equal( 1 );
+					} );
+			} );
+		} );
+	}
 } );

+ 42 - 1
packages/ckeditor5-build-decoupled-document/tests/manual/ckeditor-cjs-version.html

@@ -2,7 +2,48 @@
 <div class="toolbar-container"></div>
 
 <h2>The editable</h2>
-<div class="editable-container"></div>
+<div class="editable-container">
+	<div id="editor">
+		<h2>About CKEditor&nbsp;5</h2>
+
+		<p>This is <a href="https://ckeditor.com">CKEditor&nbsp;5</a>.</p>
+
+		<figure class="image">
+			<img src="./sample.jpg" alt="Autumn fields" />
+		</figure>
+
+		<p>After more than 2 years of building the next generation editor from scratch and closing over 980 tickets,
+		we created a highly <strong>extensible and flexible architecture</strong> which consists of an <strong>amazing
+		editing framework</strong> and <strong>editing solutions</strong> that will be built on top of it.</p>
+
+		<p>We explained this design choice in
+		<a href="https://medium.com/content-uneditable/ckeditor-5-the-future-of-rich-text-editing-2b9300f9df2c">&ldquo;CKEditor 5:
+		The future of rich text editing&ldquo;</a>:</p>
+
+		<blockquote><p>(…) we are changing our approach with CKEditor 5. We will no longer have only two solutions
+		available, instead CKEditor will be seen as a framework for editing solutions. At the same time, we will be
+		developing several out-of-the-box solutions based on it, which will be available to use in many different contexts.
+		It will be a real “one size fits all” approach, from little requirements, to super advanced full featured
+		applications.</p></blockquote>
+
+		<h3>Notes</h3>
+
+		<p><a href="https://ckeditor.com">CKEditor&nbsp;5</a> is <i>under heavy development</i> and this demo
+		is not production-ready software. For example:</p>
+
+		<ul>
+			<li><strong>Only Chrome, Opera and Safari are supported</strong>.</li>
+			<li>Firefox requires enabling the
+			<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/onselectionchange">
+			&ldquo;dom.select_events.enabled&rdquo;</a> option.</li>
+			<li><a href="https://github.com/ckeditor/ckeditor5/issues/342">Support for pasting</a>
+			is under development (content filtering is unstable).</li>
+		</ul>
+
+		<p>It has <em>bugs</em> that we are aware of &mdash; and that we will be working on in the next few
+		iterations of the project. Stay tuned for some updates soon!</p>
+	</div>
+</div>
 
 <style>
 	.editable-container,

+ 3 - 43
packages/ckeditor5-build-decoupled-document/tests/manual/ckeditor-cjs-version.js

@@ -4,51 +4,11 @@
  */
 
 const DecoupledDocumentEditor = require( '../../build/ckeditor' );
-const editorData = `<h2>About CKEditor&nbsp;5</h2>
 
-<p>This is <a href="https://ckeditor.com">CKEditor&nbsp;5</a>.</p>
-
-<figure class="image">
-	<img src="./sample.jpg" alt="Autumn fields" />
-</figure>
-
-<p>After more than 2 years of building the next generation editor from scratch and closing over 980 tickets,
-we created a highly <strong>extensible and flexible architecture</strong> which consists of an <strong>amazing
-editing framework</strong> and <strong>editing solutions</strong> that will be built on top of it.</p>
-
-<p>We explained this design choice in
-<a href="https://medium.com/content-uneditable/ckeditor-5-the-future-of-rich-text-editing-2b9300f9df2c">&ldquo;CKEditor 5:
-The future of rich text editing&ldquo;</a>:</p>
-
-<blockquote><p>(…) we are changing our approach with CKEditor 5. We will no longer have only two solutions
-available, instead CKEditor will be seen as a framework for editing solutions. At the same time, we will be
-developing several out-of-the-box solutions based on it, which will be available to use in many different contexts.
-It will be a real “one size fits all” approach, from little requirements, to super advanced full featured
-applications.</p></blockquote>
-
-<h3>Notes</h3>
-
-<p><a href="https://ckeditor.com">CKEditor&nbsp;5</a> is <i>under heavy development</i> and this demo
-is not production-ready software. For example:</p>
-
-<ul>
-	<li><strong>Only Chrome, Opera and Safari are supported</strong>.</li>
-	<li>Firefox requires enabling the
-	<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/onselectionchange">
-	&ldquo;dom.select_events.enabled&rdquo;</a> option.</li>
-	<li><a href="https://github.com/ckeditor/ckeditor5/issues/342">Support for pasting</a>
-	is under development (content filtering is unstable).</li>
-</ul>
-
-<p>It has <em>bugs</em> that we are aware of &mdash; and that we will be working on in the next few
-iterations of the project. Stay tuned for some updates soon!</p>`;
-
-DecoupledDocumentEditor
-	.create( editorData, {
-		toolbarContainer: document.querySelector( '.toolbar-container' ),
-		editableContainer: document.querySelector( '.editable-container' )
-	} )
+DecoupledDocumentEditor.create( document.querySelector( '#editor' ) )
 	.then( editor => {
+		document.querySelector( '.toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
+
 		window.editor = editor;
 	} )
 	.catch( err => {

+ 42 - 1
packages/ckeditor5-build-decoupled-document/tests/manual/ckeditor.html

@@ -2,7 +2,48 @@
 <div class="toolbar-container"></div>
 
 <h2>The editable</h2>
-<div class="editable-container"></div>
+<div class="editable-container">
+	<div id="editor">
+		<h2>About CKEditor&nbsp;5</h2>
+
+		<p>This is <a href="https://ckeditor.com">CKEditor&nbsp;5</a>.</p>
+
+		<figure class="image">
+			<img src="./sample.jpg" alt="Autumn fields" />
+		</figure>
+
+		<p>After more than 2 years of building the next generation editor from scratch and closing over 980 tickets,
+		we created a highly <strong>extensible and flexible architecture</strong> which consists of an <strong>amazing
+		editing framework</strong> and <strong>editing solutions</strong> that will be built on top of it.</p>
+
+		<p>We explained this design choice in
+		<a href="https://medium.com/content-uneditable/ckeditor-5-the-future-of-rich-text-editing-2b9300f9df2c">&ldquo;CKEditor 5:
+		The future of rich text editing&ldquo;</a>:</p>
+
+		<blockquote><p>(…) we are changing our approach with CKEditor 5. We will no longer have only two solutions
+		available, instead CKEditor will be seen as a framework for editing solutions. At the same time, we will be
+		developing several out-of-the-box solutions based on it, which will be available to use in many different contexts.
+		It will be a real “one size fits all” approach, from little requirements, to super advanced full featured
+		applications.</p></blockquote>
+
+		<h3>Notes</h3>
+
+		<p><a href="https://ckeditor.com">CKEditor&nbsp;5</a> is <i>under heavy development</i> and this demo
+		is not production-ready software. For example:</p>
+
+		<ul>
+			<li><strong>Only Chrome, Opera and Safari are supported</strong>.</li>
+			<li>Firefox requires enabling the
+			<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/onselectionchange">
+			&ldquo;dom.select_events.enabled&rdquo;</a> option.</li>
+			<li><a href="https://github.com/ckeditor/ckeditor5/issues/342">Support for pasting</a>
+			is under development (content filtering is unstable).</li>
+		</ul>
+
+		<p>It has <em>bugs</em> that we are aware of &mdash; and that we will be working on in the next few
+		iterations of the project. Stay tuned for some updates soon!</p>
+	</div>
+</div>
 
 <style>
 	.editable-container,

+ 3 - 44
packages/ckeditor5-build-decoupled-document/tests/manual/ckeditor.js

@@ -5,51 +5,10 @@
 
 import DecoupledDocumentEditor from '../../build/ckeditor';
 
-const editorData = `<h2>About CKEditor&nbsp;5</h2>
-
-<p>This is <a href="https://ckeditor.com">CKEditor&nbsp;5</a>.</p>
-
-<figure class="image">
-	<img src="./sample.jpg" alt="Autumn fields" />
-</figure>
-
-<p>After more than 2 years of building the next generation editor from scratch and closing over 980 tickets,
-we created a highly <strong>extensible and flexible architecture</strong> which consists of an <strong>amazing
-editing framework</strong> and <strong>editing solutions</strong> that will be built on top of it.</p>
-
-<p>We explained this design choice in
-<a href="https://medium.com/content-uneditable/ckeditor-5-the-future-of-rich-text-editing-2b9300f9df2c">&ldquo;CKEditor 5:
-The future of rich text editing&ldquo;</a>:</p>
-
-<blockquote><p>(…) we are changing our approach with CKEditor 5. We will no longer have only two solutions
-available, instead CKEditor will be seen as a framework for editing solutions. At the same time, we will be
-developing several out-of-the-box solutions based on it, which will be available to use in many different contexts.
-It will be a real “one size fits all” approach, from little requirements, to super advanced full featured
-applications.</p></blockquote>
-
-<h3>Notes</h3>
-
-<p><a href="https://ckeditor.com">CKEditor&nbsp;5</a> is <i>under heavy development</i> and this demo
-is not production-ready software. For example:</p>
-
-<ul>
-	<li><strong>Only Chrome, Opera and Safari are supported</strong>.</li>
-	<li>Firefox requires enabling the
-	<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/onselectionchange">
-	&ldquo;dom.select_events.enabled&rdquo;</a> option.</li>
-	<li><a href="https://github.com/ckeditor/ckeditor5/issues/342">Support for pasting</a>
-	is under development (content filtering is unstable).</li>
-</ul>
-
-<p>It has <em>bugs</em> that we are aware of &mdash; and that we will be working on in the next few
-iterations of the project. Stay tuned for some updates soon!</p>`;
-
-DecoupledDocumentEditor
-	.create( editorData, {
-		toolbarContainer: document.querySelector( '.toolbar-container' ),
-		editableContainer: document.querySelector( '.editable-container' )
-	} )
+DecoupledDocumentEditor.create( document.querySelector( '#editor' ) )
 	.then( editor => {
+		document.querySelector( '.toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
+
 		window.editor = editor;
 	} )
 	.catch( err => {