| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100 |
- /**
- * @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 );
- } );
- } );
- } );
|