浏览代码

Code refactoring in View tests. Moved listener tests from Template to View.

Aleksander Nowodzinski 10 年之前
父节点
当前提交
97d36fc8a7
共有 2 个文件被更改,包括 122 次插入129 次删除
  1. 0 48
      packages/ckeditor5-ui/tests/ui/template.js
  2. 122 81
      packages/ckeditor5-ui/tests/ui/view.js

+ 0 - 48
packages/ckeditor5-ui/tests/ui/template.js

@@ -124,54 +124,6 @@ describe( 'callback value', function() {
 	} );
 } );
 
-describe( 'listeners', function() {
-	it( 'accept plain definitions', function() {
-		var el = new Template( {
-			tag: 'p',
-			listeners: {
-				x: 'a',
-				y: [ 'b', 'c' ],
-			}
-		} ).render();
-
-		el.dispatchEvent( new Event( 'x' ) );
-		el.dispatchEvent( new Event( 'y' ) );
-	} );
-
-	it( 'accept definition with selectors', function() {
-		var el = new Template( {
-			tag: 'p',
-			children: [
-				{
-					tag: 'span',
-					'class': '.y'
-				},
-				{
-					tag: 'div',
-					children: [
-						{
-							tag: 'span',
-							'class': '.y'
-						}
-					],
-				}
-			],
-			listeners: {
-				'x@.y': 'a',
-				'y@div': 'b'
-			}
-		} ).render();
-
-		el.childNodes[ 0 ].dispatchEvent( new Event( 'x' ) );
-		el.childNodes[ 1 ].dispatchEvent( new Event( 'x' ) ); // false
-		el.childNodes[ 1 ].childNodes[ 0 ].dispatchEvent( new Event( 'x' ) );
-
-		el.childNodes[ 0 ].dispatchEvent( new Event( 'y' ) ); // false
-		el.childNodes[ 1 ].dispatchEvent( new Event( 'y' ) );
-		el.childNodes[ 1 ].childNodes[ 0 ].dispatchEvent( new Event( 'y' ) ); // false
-	} );
-} );
-
 function createClassReferences() {
 	Template = modules[ 'ui/template' ];
 }

+ 122 - 81
packages/ckeditor5-ui/tests/ui/view.js

@@ -55,21 +55,18 @@ describe( 'bind', function() {
 	} );
 
 	it( 'allows binding attribute to the model', function() {
-		class TestView extends View {
-			constructor( model ) {
-				super( model );
-
-				this.template = {
-					tag: 'p',
-					attributes: {
-						'class': this.bind( 'foo' )
-					},
-					text: 'abc'
-				};
-			}
-		}
+		setTestViewClass( function() {
+			return {
+				tag: 'p',
+				attributes: {
+					'class': this.bind( 'foo' )
+				},
+				text: 'abc'
+			};
+		} );
 
 		view = new TestView( { foo: 'bar' } );
+
 		expect( view.el.outerHTML ).to.be.equal( '<p class="bar">abc</p>' );
 
 		view.model.foo = 'baz';
@@ -77,22 +74,18 @@ describe( 'bind', function() {
 	} );
 
 	it( 'allows binding "text" to the model', function() {
-		class TestView extends View {
-			constructor( model ) {
-				super( model );
-
-				this.template = {
-					tag: 'p',
-					children: [
-						{
-							tag: 'b',
-							text: 'baz'
-						}
-					],
-					text: this.bind( 'foo' )
-				};
-			}
-		}
+		setTestViewClass( function() {
+			return {
+				tag: 'p',
+				children: [
+					{
+						tag: 'b',
+						text: 'baz'
+					}
+				],
+				text: this.bind( 'foo' )
+			};
+		} );
 
 		view = new TestView( { foo: 'bar' } );
 
@@ -104,22 +97,18 @@ describe( 'bind', function() {
 	} );
 
 	it( 'allows binding to the model with value processing', function() {
-		class TestView extends View {
-			constructor( model ) {
-				super( model );
-
-				var callback = ( el, value ) =>
-					( value > 0 ? 'positive' : 'negative' );
-
-				this.template = {
-					tag: 'p',
-					attributes: {
-						'class': this.bind( 'foo', callback )
-					},
-					text: this.bind( 'foo', callback )
-				};
-			}
-		}
+		var callback = ( el, value ) =>
+			( value > 0 ? 'positive' : 'negative' );
+
+		setTestViewClass( function() {
+			return {
+				tag: 'p',
+				attributes: {
+					'class': this.bind( 'foo', callback )
+				},
+				text: this.bind( 'foo', callback )
+			};
+		} );
 
 		view = new TestView( { foo: 3 } );
 		expect( view.el.outerHTML ).to.be.equal( '<p class="positive">positive</p>' );
@@ -129,25 +118,21 @@ describe( 'bind', function() {
 	} );
 
 	it( 'allows binding to the model with custom callback', function() {
-		class TestView extends View {
-			constructor( model ) {
-				super( model );
-
-				this.template = {
-					tag: 'p',
-					attributes: {
-						'class': this.bind( 'foo', ( el, value ) => {
-							el.innerHTML = value;
-
-							if ( value == 'changed' ) {
-								return value;
-							}
-						} )
-					},
-					text: 'bar'
-				};
-			}
-		}
+		setTestViewClass( function() {
+			return {
+				tag: 'p',
+				attributes: {
+					'class': this.bind( 'foo', ( el, value ) => {
+						el.innerHTML = value;
+
+						if ( value == 'changed' ) {
+							return value;
+						}
+					} )
+				},
+				text: 'bar'
+			};
+		} );
 
 		view = new TestView( { foo: 'moo' } );
 		expect( view.el.outerHTML ).to.be.equal( '<p>moo</p>' );
@@ -157,6 +142,62 @@ describe( 'bind', function() {
 	} );
 } );
 
+describe( 'listeners', function() {
+	it( 'accept plain definitions', function() {
+		setTestViewClass( function() {
+			return {
+				tag: 'p',
+				listeners: {
+					x: 'a',
+					y: [ 'b', 'c' ],
+				}
+			};
+		} );
+
+		view = new TestView();
+
+		view.el.dispatchEvent( new Event( 'x' ) );
+		view.el.dispatchEvent( new Event( 'y' ) );
+	} );
+
+	it( 'accept definition with selectors', function() {
+		setTestViewClass( function() {
+			return {
+				tag: 'p',
+				children: [
+					{
+						tag: 'span',
+						'class': '.y'
+					},
+					{
+						tag: 'div',
+						children: [
+							{
+								tag: 'span',
+								'class': '.y'
+							}
+						],
+					}
+				],
+				listeners: {
+					'x@.y': 'a',
+					'y@div': 'b'
+				}
+			};
+		} );
+
+		view = new TestView();
+
+		view.el.childNodes[ 0 ].dispatchEvent( new Event( 'x' ) );
+		view.el.childNodes[ 1 ].dispatchEvent( new Event( 'x' ) ); // false
+		view.el.childNodes[ 1 ].childNodes[ 0 ].dispatchEvent( new Event( 'x' ) );
+
+		view.el.childNodes[ 0 ].dispatchEvent( new Event( 'y' ) ); // false
+		view.el.childNodes[ 1 ].dispatchEvent( new Event( 'y' ) );
+		view.el.childNodes[ 1 ].childNodes[ 0 ].dispatchEvent( new Event( 'y' ) ); // false
+	} );
+} );
+
 describe( 'render', function() {
 	it( 'creates an element from template', function() {
 		view = new TestView( { a: 1 } );
@@ -205,16 +246,12 @@ describe( 'destroy', function() {
 	} );
 
 	it( 'detaches bound model listeners', function() {
-		class TestView extends View {
-			constructor( model ) {
-				super( model );
-
-				this.template = {
-					tag: 'p',
-					text: this.bind( 'foo' )
-				};
-			}
-		}
+		setTestViewClass( function() {
+			return {
+				tag: 'p',
+				text: this.bind( 'foo' )
+			};
+		} );
 
 		view = new TestView( { foo: 'bar' } );
 		var model = view.model;
@@ -235,12 +272,16 @@ function createViewInstance() {
 	View = modules[ 'ui/view' ];
 	view = new View( { a: 'foo', b: 42 } );
 
-	class T extends View {
-		constructor() {
-			super();
-			this.template = { tag: 'a' };
-		}
-	}
+	setTestViewClass( () => {
+		return { tag: 'a' };
+	} );
+}
 
-	TestView = T;
+function setTestViewClass( template ) {
+	TestView = class V extends View {
+		constructor( model ) {
+			super( model );
+			this.template = template.call( this );
+		}
+	};
 }