Kaynağa Gözat

Tests: Added resizer state test suite.

Marek Lewandowski 5 yıl önce
ebeveyn
işleme
23d7d0d1ad

+ 100 - 0
packages/ckeditor5-widget/tests/widgetresize/resizerstate.js

@@ -0,0 +1,100 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals document */
+
+import ResizerState from '../../src/widgetresize/resizerstate';
+
+describe( 'ResizerState', () => {
+	describe( 'constructor', () => {
+		it( 'sets up proper default values', () => {
+			const state = new ResizerState();
+
+			expect( state.activeHandlePosition, 'activeHandlePosition' ).to.be.null;
+			expect( state.proposedWidthPercents, 'proposedWidthPercents' ).to.be.null;
+			expect( state.proposedWidth, 'proposedWidth' ).to.be.null;
+			expect( state.proposedHeight, 'proposedHeight' ).to.be.null;
+			expect( state.proposedHandleHostWidth, 'proposedHandleHostWidth' ).to.be.null;
+			expect( state.proposedHandleHostHeight, 'proposedHandleHostHeight' ).to.be.null;
+		} );
+
+		it( 'sets up observable properties', () => {
+			const state = new ResizerState();
+
+			expect( isObservable( 'activeHandlePosition' ), 'activeHandlePosition' ).to.be.true;
+			expect( isObservable( 'proposedWidthPercents' ), 'proposedWidthPercents' ).to.be.true;
+			expect( isObservable( 'proposedWidth' ), 'proposedWidth' ).to.be.true;
+			expect( isObservable( 'proposedHeight' ), 'proposedHeight' ).to.be.true;
+			expect( isObservable( 'proposedHandleHostWidth' ), 'proposedHandleHostWidth' ).to.be.true;
+			expect( isObservable( 'proposedHandleHostHeight' ), 'proposedHandleHostHeight' ).to.be.true;
+
+			function isObservable( propertyName ) {
+				const listener = sinon.stub();
+				state.on( `change:${ propertyName }`, listener );
+				state[ propertyName ] = true;
+
+				return listener.calledOnce;
+			}
+		} );
+	} );
+
+	describe( 'begin', () => {
+		const domContentWrapper = document.createElement( 'div' );
+
+		before( () => {
+			const htmlMockup = `<div class="dom-element" style="width: 25%;">
+				<div class="ck ck-reset_all ck-widget__resizer" style="width: 400px; height: 200px;">
+					<div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-right"></div>
+				</div>
+			</div>`;
+
+			domContentWrapper.style.width = '1600px';
+			domContentWrapper.innerHTML = htmlMockup;
+			document.body.append( domContentWrapper );
+		} );
+
+		after( () => {
+			domContentWrapper.remove();
+		} );
+
+		it( 'fetches sizes of real DOM elements', () => {
+			const domResizeHandle = domContentWrapper.querySelector( '.ck-widget__resizer__handle' );
+			const domHandleHost = domContentWrapper.querySelector( '.dom-element' );
+			const domResizeHost = domHandleHost;
+
+			const state = new ResizerState();
+			state.begin( domResizeHandle, domHandleHost, domResizeHost );
+
+			expect( state.activeHandlePosition, 'activeHandlePosition' ).to.be.equal( 'bottom-right' );
+
+			expect( state.originalWidth, 'originalWidth' ).to.be.equal( 400 );
+			expect( state.originalHeight, 'originalHeight' ).to.be.equal( 200 );
+
+			expect( state.aspectRatio, 'aspectRatio' ).to.be.equal( 2 );
+
+			expect( state.originalWidthPercents, 'originalWidthPercents' ).to.be.equal( 25 );
+		} );
+	} );
+
+	describe( 'update', () => {
+		it( 'changes the properties', () => {
+			const state = new ResizerState();
+
+			state.update( {
+				width: 100,
+				height: 200,
+				widthPercents: 25,
+				handleHostWidth: 80,
+				handleHostHeight: 160,
+			} );
+
+			expect( state.proposedWidthPercents, 'proposedWidthPercents' ).to.be.equal( 25 );
+			expect( state.proposedWidth, 'proposedWidth' ).to.be.equal( 100 );
+			expect( state.proposedHeight, 'proposedHeight' ).to.be.equal( 200 );
+			expect( state.proposedHandleHostWidth, 'proposedHandleHostWidth' ).to.be.equal( 80 );
+			expect( state.proposedHandleHostHeight, 'proposedHandleHostHeight' ).to.be.equal( 160 );
+		} );
+	} );
+} );