8
0

imageloadobserver.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* globals document, Event */
  6. import ImageLoadObserver from '../../src/image/imageloadobserver';
  7. import View from '@ckeditor/ckeditor5-engine/src/view/view';
  8. import Position from '@ckeditor/ckeditor5-engine/src/view/position';
  9. import Range from '@ckeditor/ckeditor5-engine/src/view/range';
  10. import createViewRoot from '@ckeditor/ckeditor5-engine/tests/view/_utils/createroot';
  11. import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
  12. describe( 'ClickObserver', () => {
  13. let view, viewDocument, observer, domRoot, viewRoot;
  14. beforeEach( () => {
  15. view = new View();
  16. viewDocument = view.document;
  17. observer = view.addObserver( ImageLoadObserver );
  18. viewRoot = createViewRoot( viewDocument );
  19. domRoot = document.createElement( 'div' );
  20. view.attachDomRoot( domRoot );
  21. } );
  22. afterEach( () => {
  23. view.destroy();
  24. } );
  25. it( 'should fire `loadImage` event for images in the document that are loaded with a delay', () => {
  26. const spy = sinon.spy();
  27. viewDocument.on( 'imageLoaded', spy );
  28. setData( view, '<img src="foo.png" />' );
  29. sinon.assert.notCalled( spy );
  30. domRoot.querySelector( 'img' ).dispatchEvent( new Event( 'load' ) );
  31. sinon.assert.calledOnce( spy );
  32. } );
  33. it( 'should not fire `loadImage` event for images removed from document', () => {
  34. const spy = sinon.spy();
  35. viewDocument.on( 'imageLoaded', spy );
  36. setData( view, '<img src="foo.png" />' );
  37. sinon.assert.notCalled( spy );
  38. const img = domRoot.querySelector( 'img' );
  39. setData( view, '' );
  40. img.dispatchEvent( new Event( 'load' ) );
  41. sinon.assert.notCalled( spy );
  42. } );
  43. it( 'should do nothing with an image when changes are in the other parent', () => {
  44. setData( view, '<container:p><attribute:b>foo</attribute:b></container:p><container:div><img src="foo.png" /></container:div>' );
  45. const viewP = viewRoot.getChild( 0 );
  46. const viewDiv = viewRoot.getChild( 1 );
  47. const mapSpy = sinon.spy( view.domConverter, 'mapViewToDom' );
  48. // Change only the paragraph.
  49. view.change( writer => {
  50. const text = writer.createText( 'foo', { b: true } );
  51. writer.insert( Position.createAt( viewRoot.getChild( 0 ).getChild( 0 ) ), text );
  52. writer.wrap( Range.createOn( text ), writer.createAttributeElement( 'b' ) );
  53. } );
  54. sinon.assert.calledWith( mapSpy, viewP );
  55. sinon.assert.neverCalledWith( mapSpy, viewDiv );
  56. } );
  57. it( 'should not throw when synced child was removed in the meanwhile', () => {
  58. let viewDiv;
  59. const mapSpy = sinon.spy( view.domConverter, 'mapViewToDom' );
  60. view.change( writer => {
  61. viewDiv = writer.createContainerElement( 'div' );
  62. viewRoot.fire( 'change:children', viewDiv );
  63. } );
  64. expect( () => {
  65. view._renderer.render();
  66. sinon.assert.calledWith( mapSpy, viewDiv );
  67. } ).to.not.throw();
  68. } );
  69. it( 'should call `layoutChanged` along with `imageLoaded` event', () => {
  70. const layoutChangedSpy = sinon.spy();
  71. const imageLoadedSpy = sinon.spy();
  72. view.document.on( 'layoutChanged', layoutChangedSpy );
  73. view.document.on( 'imageLoaded', imageLoadedSpy );
  74. observer.onDomEvent( {} );
  75. sinon.assert.calledOnce( layoutChangedSpy );
  76. sinon.assert.calledOnce( imageLoadedSpy );
  77. } );
  78. } );