resizerstate.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /* globals document */
  6. import ResizerState from '../../src/widgetresize/resizerstate';
  7. describe( 'ResizerState', () => {
  8. describe( 'constructor', () => {
  9. it( 'sets up proper default values', () => {
  10. const state = new ResizerState();
  11. expect( state.activeHandlePosition, 'activeHandlePosition' ).to.be.null;
  12. expect( state.proposedWidthPercents, 'proposedWidthPercents' ).to.be.null;
  13. expect( state.proposedWidth, 'proposedWidth' ).to.be.null;
  14. expect( state.proposedHeight, 'proposedHeight' ).to.be.null;
  15. expect( state.proposedHandleHostWidth, 'proposedHandleHostWidth' ).to.be.null;
  16. expect( state.proposedHandleHostHeight, 'proposedHandleHostHeight' ).to.be.null;
  17. } );
  18. it( 'sets up observable properties', () => {
  19. const state = new ResizerState();
  20. expect( isObservable( 'activeHandlePosition' ), 'activeHandlePosition' ).to.be.true;
  21. expect( isObservable( 'proposedWidthPercents' ), 'proposedWidthPercents' ).to.be.true;
  22. expect( isObservable( 'proposedWidth' ), 'proposedWidth' ).to.be.true;
  23. expect( isObservable( 'proposedHeight' ), 'proposedHeight' ).to.be.true;
  24. expect( isObservable( 'proposedHandleHostWidth' ), 'proposedHandleHostWidth' ).to.be.true;
  25. expect( isObservable( 'proposedHandleHostHeight' ), 'proposedHandleHostHeight' ).to.be.true;
  26. function isObservable( propertyName ) {
  27. const listener = sinon.stub();
  28. state.on( `change:${ propertyName }`, listener );
  29. state[ propertyName ] = true;
  30. return listener.calledOnce;
  31. }
  32. } );
  33. } );
  34. describe( 'begin()', () => {
  35. const domContentWrapper = document.createElement( 'div' );
  36. before( () => {
  37. const htmlMockup = `<div class="dom-element" style="width: 25%;">
  38. <div class="ck ck-reset_all ck-widget__resizer" style="width: 400px; height: 200px;">
  39. <div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-right"></div>
  40. </div>
  41. </div>`;
  42. domContentWrapper.style.width = '1600px';
  43. domContentWrapper.innerHTML = htmlMockup;
  44. document.body.append( domContentWrapper );
  45. } );
  46. after( () => {
  47. domContentWrapper.remove();
  48. } );
  49. it( 'fetches sizes of real DOM elements', () => {
  50. const domResizeHandle = domContentWrapper.querySelector( '.ck-widget__resizer__handle' );
  51. const domHandleHost = domContentWrapper.querySelector( '.dom-element' );
  52. const domResizeHost = domHandleHost;
  53. const state = new ResizerState();
  54. state.begin( domResizeHandle, domHandleHost, domResizeHost );
  55. expect( state.activeHandlePosition, 'activeHandlePosition' ).to.be.equal( 'bottom-right' );
  56. expect( state.originalWidth, 'originalWidth' ).to.be.equal( 400 );
  57. expect( state.originalHeight, 'originalHeight' ).to.be.equal( 200 );
  58. expect( state.aspectRatio, 'aspectRatio' ).to.be.equal( 2 );
  59. expect( state.originalWidthPercents, 'originalWidthPercents' ).to.be.equal( 25 );
  60. } );
  61. } );
  62. describe( 'update()', () => {
  63. it( 'changes the properties', () => {
  64. const state = new ResizerState();
  65. state.update( {
  66. width: 100,
  67. height: 200,
  68. widthPercents: 25,
  69. handleHostWidth: 80,
  70. handleHostHeight: 160
  71. } );
  72. expect( state.proposedWidthPercents, 'proposedWidthPercents' ).to.be.equal( 25 );
  73. expect( state.proposedWidth, 'proposedWidth' ).to.be.equal( 100 );
  74. expect( state.proposedHeight, 'proposedHeight' ).to.be.equal( 200 );
  75. expect( state.proposedHandleHostWidth, 'proposedHandleHostWidth' ).to.be.equal( 80 );
  76. expect( state.proposedHandleHostHeight, 'proposedHandleHostHeight' ).to.be.equal( 160 );
  77. } );
  78. } );
  79. } );