imageloadobserver.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  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, Event */
  6. import ImageLoadObserver from '../../src/image/imageloadobserver';
  7. import Observer from '@ckeditor/ckeditor5-engine/src/view/observer/observer';
  8. import View from '@ckeditor/ckeditor5-engine/src/view/view';
  9. import createViewRoot from '@ckeditor/ckeditor5-engine/tests/view/_utils/createroot';
  10. import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
  11. describe( 'ImageLoadObserver', () => {
  12. let view, viewDocument, observer, domRoot, viewRoot;
  13. beforeEach( () => {
  14. view = new View();
  15. viewDocument = view.document;
  16. observer = view.addObserver( ImageLoadObserver );
  17. viewRoot = createViewRoot( viewDocument );
  18. domRoot = document.createElement( 'div' );
  19. view.attachDomRoot( domRoot );
  20. } );
  21. afterEach( () => {
  22. view.destroy();
  23. } );
  24. it( 'should extend Observer', () => {
  25. expect( observer ).instanceof( Observer );
  26. } );
  27. it( 'should fire `loadImage` event for images in the document that are loaded with a delay', () => {
  28. const spy = sinon.spy();
  29. viewDocument.on( 'imageLoaded', spy );
  30. setData( view, '<img src="/assets/sample.png" />' );
  31. sinon.assert.notCalled( spy );
  32. domRoot.querySelector( 'img' ).dispatchEvent( new Event( 'load' ) );
  33. sinon.assert.calledOnce( spy );
  34. } );
  35. it( 'should fire `layoutChanged` along with `imageLoaded` event', () => {
  36. const layoutChangedSpy = sinon.spy();
  37. const imageLoadedSpy = sinon.spy();
  38. view.document.on( 'layoutChanged', layoutChangedSpy );
  39. view.document.on( 'imageLoaded', imageLoadedSpy );
  40. observer._fireEvents( {} );
  41. sinon.assert.calledOnce( layoutChangedSpy );
  42. sinon.assert.calledOnce( imageLoadedSpy );
  43. } );
  44. it( 'should not fire events when observer is disabled', () => {
  45. const layoutChangedSpy = sinon.spy();
  46. const imageLoadedSpy = sinon.spy();
  47. view.document.on( 'layoutChanged', layoutChangedSpy );
  48. view.document.on( 'imageLoaded', imageLoadedSpy );
  49. observer.isEnabled = false;
  50. observer._fireEvents( {} );
  51. sinon.assert.notCalled( layoutChangedSpy );
  52. sinon.assert.notCalled( imageLoadedSpy );
  53. } );
  54. it( 'should not fire `loadImage` event for images removed from document', () => {
  55. const spy = sinon.spy();
  56. viewDocument.on( 'imageLoaded', spy );
  57. setData( view, '<img src="/assets/sample.png" />' );
  58. sinon.assert.notCalled( spy );
  59. const img = domRoot.querySelector( 'img' );
  60. setData( view, '' );
  61. img.dispatchEvent( new Event( 'load' ) );
  62. sinon.assert.notCalled( spy );
  63. } );
  64. it( 'should not fire `loadImage` event for non-image elements', () => {
  65. const spy = sinon.spy();
  66. viewDocument.on( 'imageLoaded', spy );
  67. setData( view, '<p>foo</p>' );
  68. sinon.assert.notCalled( spy );
  69. const img = domRoot.querySelector( 'p' );
  70. img.dispatchEvent( new Event( 'load' ) );
  71. sinon.assert.notCalled( spy );
  72. } );
  73. it( 'should do nothing with an image when changes are in the other parent', () => {
  74. setData(
  75. view,
  76. '<container:p><attribute:b>foo</attribute:b></container:p><container:div><img src="/assets/sample.png" /></container:div>'
  77. );
  78. const viewP = viewRoot.getChild( 0 );
  79. const viewDiv = viewRoot.getChild( 1 );
  80. const mapSpy = sinon.spy( view.domConverter, 'mapViewToDom' );
  81. // Change only the paragraph.
  82. view.change( writer => {
  83. const text = writer.createText( 'foo', { b: true } );
  84. writer.insert( writer.createPositionAt( viewRoot.getChild( 0 ).getChild( 0 ), 0 ), text );
  85. writer.wrap( writer.createRangeOn( text ), writer.createAttributeElement( 'b' ) );
  86. } );
  87. sinon.assert.calledWith( mapSpy, viewP );
  88. sinon.assert.neverCalledWith( mapSpy, viewDiv );
  89. } );
  90. it( 'should not throw when synced child was removed in the meanwhile', () => {
  91. let viewDiv;
  92. const mapSpy = sinon.spy( view.domConverter, 'mapViewToDom' );
  93. view.change( writer => {
  94. viewDiv = writer.createContainerElement( 'div' );
  95. viewRoot.fire( 'change:children', viewDiv );
  96. } );
  97. expect( () => {
  98. view._renderer.render();
  99. sinon.assert.calledWith( mapSpy, viewDiv );
  100. } ).to.not.throw();
  101. } );
  102. it( 'should stop observing images on destroy', () => {
  103. const spy = sinon.spy();
  104. viewDocument.on( 'imageLoaded', spy );
  105. setData( view, '<img src="/assets/sample.png" />' );
  106. observer.destroy();
  107. domRoot.querySelector( 'img' ).dispatchEvent( new Event( 'load' ) );
  108. sinon.assert.notCalled( spy );
  109. } );
  110. } );