8
0
Quellcode durchsuchen

Tests: Refactoring in Template tests. Added new style attribute rendering tests.

Aleksander Nowodzinski vor 9 Jahren
Ursprung
Commit
cf66951200
1 geänderte Dateien mit 55 neuen und 41 gelöschten Zeilen
  1. 55 41
      packages/ckeditor5-ui/tests/template.js

+ 55 - 41
packages/ckeditor5-ui/tests/template.js

@@ -316,7 +316,7 @@ describe( 'Template', () => {
 			expect( el.firstChild.textContent ).to.equal( 'baz static' );
 		} );
 
-		describe( '`style` attribute', () => {
+		describe( 'style attribute', () => {
 			let observable, emitter, bind;
 
 			beforeEach( () => {
@@ -329,70 +329,84 @@ describe( 'Template', () => {
 				bind = Template.bind( observable, emitter );
 			} );
 
-			it( 'renders with static and bound properties', () => {
+			it( 'renders as a static value', () => {
 				setElement( {
 					tag: 'p',
 					attributes: {
-						style: {
-							width: bind.to( 'width' ),
-							height: '10px',
-							backgroundColor: bind.to( 'backgroundColor' )
-						}
+						style: 'color: red'
 					}
 				} );
 
-				expect( el.outerHTML ).to.equal( '<p style="width: 10px; height: 10px; background-color: yellow;"></p>' );
-
-				observable.width = '20px';
-				observable.backgroundColor = 'green';
-
-				expect( el.outerHTML ).to.equal( '<p style="width: 20px; height: 10px; background-color: green;"></p>' );
+				expect( el.outerHTML ).to.equal( '<p style="color: red;"></p>' );
 			} );
 
-			it( 'renders with empty properties', () => {
+			it( 'renders as a value bound to the model', () => {
 				setElement( {
 					tag: 'p',
 					attributes: {
-						style: {
-							width: '',
-							backgroundColor: bind.to( 'backgroundColor' )
-						}
+						style: bind.to( 'width', w => `width: ${ w }` )
 					}
 				} );
 
-				observable.backgroundColor = '';
+				expect( el.outerHTML ).to.equal( '<p style="width: 10px"></p>' );
+
+				observable.width = '1em';
 
-				expect( el.outerHTML ).to.be.equal( '<p></p>' );
+				expect( el.outerHTML ).to.equal( '<p style="width: 1em"></p>' );
 			} );
 
-			it( 'renders with falsy values', () => {
-				setElement( {
-					tag: 'p',
-					attributes: {
-						style: {
-							width: null,
-							height: false
+			describe( 'object', () => {
+				it( 'renders with static and bound attributes', () => {
+					setElement( {
+						tag: 'p',
+						attributes: {
+							style: {
+								width: bind.to( 'width' ),
+								height: '10px',
+								backgroundColor: bind.to( 'backgroundColor' )
+							}
 						}
-					}
-				} );
+					} );
 
-				expect( el.outerHTML ).to.be.equal( '<p></p>' );
-			} );
+					expect( el.outerHTML ).to.equal( '<p style="width: 10px; height: 10px; background-color: yellow;"></p>' );
 
-			it( 'renders with empty properties', () => {
-				setElement( {
-					tag: 'p',
-					attributes: {
-						style: {
-							width: '',
-							backgroundColor: bind.to( 'backgroundColor' )
+					observable.width = '20px';
+					observable.backgroundColor = 'green';
+
+					expect( el.outerHTML ).to.equal( '<p style="width: 20px; height: 10px; background-color: green;"></p>' );
+				} );
+
+				it( 'renders with empty string attributes', () => {
+					setElement( {
+						tag: 'p',
+						attributes: {
+							style: {
+								width: '',
+								backgroundColor: bind.to( 'backgroundColor' )
+							}
 						}
-					}
+					} );
+
+					expect( el.outerHTML ).to.be.equal( '<p style="background-color: yellow;"></p>' );
+
+					observable.backgroundColor = '';
+
+					expect( el.outerHTML ).to.be.equal( '<p></p>' );
 				} );
 
-				observable.backgroundColor = '';
+				it( 'renders with falsy values', () => {
+					setElement( {
+						tag: 'p',
+						attributes: {
+							style: {
+								width: null,
+								height: false
+							}
+						}
+					} );
 
-				expect( el.outerHTML ).to.be.equal( '<p></p>' );
+					expect( el.outerHTML ).to.be.equal( '<p></p>' );
+				} );
 			} );
 		} );
 	} );