Răsfoiți Sursa

Add more styles utils tests.

Maciej Gołaszewski 6 ani în urmă
părinte
comite
f23ee5c210

+ 2 - 2
packages/ckeditor5-engine/src/view/styles/borderstyles.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-import { getParts, getTopRightBottomLeftValueReducer, getTopRightBottomLeftValues, isLength, isLineStyle } from './utils';
+import { getShorthandValues, getTopRightBottomLeftValueReducer, getTopRightBottomLeftValues, isLength, isLineStyle } from './utils';
 
 /**
  * @module engine/view/styles
@@ -156,7 +156,7 @@ function extractBorderPosition( border, which ) {
 function normalizeBorderShorthand( string ) {
 	const result = {};
 
-	const parts = getParts( string );
+	const parts = getShorthandValues( string );
 
 	for ( const part of parts ) {
 		if ( isLength( part ) || /thin|medium|thick/.test( part ) ) {

+ 3 - 3
packages/ckeditor5-engine/src/view/styles/utils.js

@@ -16,7 +16,7 @@ export function isLineStyle( string ) {
 }
 
 export function isLength( string ) {
-	return /^[+-]?[0-9]?[.]?[0-9]+([a-z]+|%)$/.test( string );
+	return /(^[+-]?[0-9]*[.]?[0-9]+([a-z]+|%)$|0)/.test( string );
 }
 
 export function isRepeat( string ) {
@@ -40,7 +40,7 @@ export function getTopRightBottomLeftValues( value = '' ) {
 		return { top: undefined, right: undefined, bottom: undefined, left: undefined };
 	}
 
-	const values = getParts( value );
+	const values = getShorthandValues( value );
 
 	const top = values[ 0 ];
 	const bottom = values[ 2 ] || top;
@@ -103,6 +103,6 @@ export function getPositionShorthandNormalizer( longhand ) {
 	};
 }
 
-export function getParts( string ) {
+export function getShorthandValues( string ) {
 	return string.replace( /, /g, ',' ).split( ' ' ).map( string => string.replace( /,/g, ', ' ) );
 }

+ 96 - 6
packages/ckeditor5-engine/tests/view/styles/utils.js

@@ -3,7 +3,14 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-import { isColor, isLineStyle } from '../../../src/view/styles/utils';
+import {
+	getShorthandValues,
+	getTopRightBottomLeftShorthandValue,
+	getTopRightBottomLeftValues,
+	isColor,
+	isLength,
+	isLineStyle
+} from '../../../src/view/styles/utils';
 
 describe( 'Styles utils', () => {
 	describe( 'isColor()', () => {
@@ -54,17 +61,100 @@ describe( 'Styles utils', () => {
 	} );
 
 	describe( 'isLength()', () => {
-		it( 'returns true for named widths', () => {
+		it( 'returns true for various units', () => {
 			testValues(
-				[ 'none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset' ],
-				isLineStyle
+				[ '1px', '2rem', '34.5px', '.2em', '0', '1346vmax' ],
+				isLength
 			);
 		} );
 	} );
 
-	describe( 'isRepeat()', () => {} );
+	describe( 'getTopRightBottomLeftShorthandValue()', () => {
+		it( 'should output one value for same values', () => {
+			expect( getTopRightBottomLeftShorthandValue( { top: 'foo', right: 'foo', bottom: 'foo', left: 'foo' } ) ).to.equal( 'foo' );
+		} );
+
+		it( 'should output two value for top == bottom and right == left', () => {
+			expect( getTopRightBottomLeftShorthandValue( { top: 'foo', right: 'bar', bottom: 'foo', left: 'bar' } ) ).to.equal( 'foo bar' );
+		} );
+
+		it( 'should output three values if bottom is different then top', () => {
+			expect( getTopRightBottomLeftShorthandValue( { top: 'foo', right: 'foo', bottom: 'bar', left: 'foo' } ) )
+				.to.equal( 'foo foo bar' );
+		} );
+
+		it( 'should output four values if left is different then right', () => {
+			expect( getTopRightBottomLeftShorthandValue( { top: 'foo', right: 'foo', bottom: 'foo', left: 'bar' } ) )
+				.to.equal( 'foo foo foo bar' );
+		} );
+	} );
+
+	describe( 'getTopRightBottomLeftValues()', () => {
+		it( 'should parse empty string', () => {
+			expect( getTopRightBottomLeftValues( '' ) ).to.deep.equal( {
+				top: undefined,
+				right: undefined,
+				bottom: undefined,
+				left: undefined
+			} );
+		} );
+
+		it( 'should parse one value', () => {
+			expect( getTopRightBottomLeftValues( 'foo' ) ).to.deep.equal( {
+				top: 'foo',
+				right: 'foo',
+				bottom: 'foo',
+				left: 'foo'
+			} );
+		} );
 
-	describe( 'isPosition()', () => {} );
+		it( 'should parse one value', () => {
+			expect( getTopRightBottomLeftValues( 'foo' ) ).to.deep.equal( {
+				top: 'foo',
+				right: 'foo',
+				bottom: 'foo',
+				left: 'foo'
+			} );
+		} );
+
+		it( 'should parse two value', () => {
+			expect( getTopRightBottomLeftValues( 'foo bar' ) ).to.deep.equal( {
+				top: 'foo',
+				right: 'bar',
+				bottom: 'foo',
+				left: 'bar'
+			} );
+		} );
+
+		it( 'should parse three values', () => {
+			expect( getTopRightBottomLeftValues( 'foo foo bar' ) ).to.deep.equal( {
+				top: 'foo',
+				right: 'foo',
+				bottom: 'bar',
+				left: 'foo'
+			} );
+		} );
+
+		it( 'should output four values if left is different then right', () => {
+			expect( getTopRightBottomLeftValues( 'foo foo foo bar' ) ).to.deep.equal( {
+				top: 'foo',
+				right: 'foo',
+				bottom: 'foo',
+				left: 'bar'
+			} );
+		} );
+	} );
+
+	describe( 'getParts()', () => {
+		it( 'should split string to separate values', () => {
+			expect( getShorthandValues( 'foo bar' ) ).to.deep.equal( [ 'foo', 'bar' ] );
+		} );
+
+		it( 'should split string to separate values when value contain grouping parens', () => {
+			expect( getShorthandValues( 'foo bar(1, 3, 5) url("example.com:foo/bar?q=b")' ) )
+				.to.deep.equal( [ 'foo', 'bar(1, 3, 5)', 'url("example.com:foo/bar?q=b")' ] );
+		} );
+	} );
 
 	function testValues( values, callback ) {
 		values.map( string => expect( callback( string ), string ).to.be.true );