From a84243581a81e034169032e8188a548be32e798c Mon Sep 17 00:00:00 2001 From: Marek Lewandowski Date: Mon, 19 Aug 2019 12:01:02 +0200 Subject: [PATCH 1/8] Tests: Added some integration tests for percent-based resizing. --- tests/imageresize.js | 66 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) diff --git a/tests/imageresize.js b/tests/imageresize.js index b905b2dc..0678ed7a 100644 --- a/tests/imageresize.js +++ b/tests/imageresize.js @@ -435,6 +435,72 @@ describe( 'ImageResize', () => { } } ); + describe( 'percent resizing', () => { + describe( 'standard image', () => { + beforeEach( async () => { + await editor.destroy(); + + editor = await ClassicEditor + .create( editorElement, { + plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ] + } ); + + setData( editor.model, `foo[]` ); + + view = editor.editing.view; + viewDocument = view.document; + widget = viewDocument.getRoot().getChild( 1 ); + } ); + + it( 'shrinks correctly with left-bottom handler', generateResizeTest( { + expectedWidth: 16, + modelRegExp: /foo<\/paragraph><\/image>/, + pointerOffset: { + x: 10, + y: -10 + }, + resizerPosition: 'bottom-left' + } ) ); + + it( 'enlarges correctly with right-bottom handler', generateResizeTest( { + expectedWidth: 22, + modelRegExp: /foo<\/paragraph><\/image>/, + pointerOffset: { + x: 0, + y: 5 + }, + resizerPosition: 'bottom-right' + } ) ); + } ); + + describe( 'side image', () => { + beforeEach( async () => { + await editor.destroy(); + + editor = await ClassicEditor + .create( editorElement, { + plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ] + } ); + + setData( editor.model, `foo[]` ); + + view = editor.editing.view; + viewDocument = view.document; + widget = viewDocument.getRoot().getChild( 1 ); + } ); + + it( 'shrinks correctly with left-bottom handler', generateResizeTest( { + expectedWidth: 18, + modelRegExp: /foo<\/paragraph><\/image>/, + pointerOffset: { + x: 10, + y: -10 + }, + resizerPosition: 'bottom-left' + } ) ); + } ); + } ); + describe( 'undo integration', () => { beforeEach( () => { setData( editor.model, `foo[]` ); From c8f9181e7a91df36feb679a9707436ab9f790c01 Mon Sep 17 00:00:00 2001 From: Marek Lewandowski Date: Mon, 19 Aug 2019 12:22:22 +0200 Subject: [PATCH 2/8] Tests: Added test for other fixed case. --- tests/imageresize.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/tests/imageresize.js b/tests/imageresize.js index 0678ed7a..d74c141e 100644 --- a/tests/imageresize.js +++ b/tests/imageresize.js @@ -471,6 +471,24 @@ describe( 'ImageResize', () => { }, resizerPosition: 'bottom-right' } ) ); + + it( 'enlarges correctly an image with unsupported width unit', async () => { + setData( editor.model, `foo[]` ); + + view = editor.editing.view; + viewDocument = view.document; + widget = viewDocument.getRoot().getChild( 1 ); + + await generateResizeTest( { + expectedWidth: 15, + modelRegExp: /foo<\/paragraph><\/image>/, + pointerOffset: { + x: 0, + y: 5 + }, + resizerPosition: 'bottom-right' + } )(); + } ); } ); describe( 'side image', () => { From bc1c6d2e8aef1b928e3b64a5a8fc9f8f70264ad3 Mon Sep 17 00:00:00 2001 From: Marek Lewandowski Date: Tue, 17 Sep 2019 09:09:39 +0200 Subject: [PATCH 3/8] Tests: Avoid creating multiple editors. --- tests/imageresize.js | 34 ++++++++++++++++++++-------------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/tests/imageresize.js b/tests/imageresize.js index d74c141e..52a5e22b 100644 --- a/tests/imageresize.js +++ b/tests/imageresize.js @@ -26,7 +26,11 @@ describe( 'ImageResize', () => { const IMAGE_SRC_FIXTURE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAQAAAAAPLY1AAAAQklEQVR42u3PQREAAAgDoK1/' + 'aM3g14MGNJMXKiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiJysRFNMgH0RpujAAAAAElFTkSuQmCC'; - let absoluteContainer, widget, editor, view, viewDocument, editorElement; + const CONFIG_RESIZE_IN_PIXELS = { + plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ] + }; + + let absoluteContainer, widget, editor, view, viewDocument, editorElement, customConfig; before( () => { // This container is required to position editor element in a reliable element. @@ -50,7 +54,7 @@ describe( 'ImageResize', () => { absoluteContainer.appendChild( editorElement ); return ClassicEditor - .create( editorElement, { + .create( editorElement, customConfig || { plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ], image: { resizeUnit: 'px' @@ -437,14 +441,15 @@ describe( 'ImageResize', () => { describe( 'percent resizing', () => { describe( 'standard image', () => { - beforeEach( async () => { - await editor.destroy(); + before( () => { + customConfig = CONFIG_RESIZE_IN_PIXELS; + } ); - editor = await ClassicEditor - .create( editorElement, { - plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ] - } ); + after( () => { + customConfig = null; + } ); + beforeEach( () => { setData( editor.model, `foo[]` ); view = editor.editing.view; @@ -492,14 +497,15 @@ describe( 'ImageResize', () => { } ); describe( 'side image', () => { - beforeEach( async () => { - await editor.destroy(); + before( () => { + customConfig = CONFIG_RESIZE_IN_PIXELS; + } ); - editor = await ClassicEditor - .create( editorElement, { - plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ] - } ); + after( () => { + customConfig = null; + } ); + beforeEach( () => { setData( editor.model, `foo[]` ); view = editor.editing.view; From 729047f19269deef3d0113766f85fc9ecd9f939f Mon Sep 17 00:00:00 2001 From: Marek Lewandowski Date: Fri, 20 Sep 2019 11:04:54 +0200 Subject: [PATCH 4/8] Test: Corrected variable name. --- tests/imageresize.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/imageresize.js b/tests/imageresize.js index 52a5e22b..5b9415b1 100644 --- a/tests/imageresize.js +++ b/tests/imageresize.js @@ -26,7 +26,7 @@ describe( 'ImageResize', () => { const IMAGE_SRC_FIXTURE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAQAAAAAPLY1AAAAQklEQVR42u3PQREAAAgDoK1/' + 'aM3g14MGNJMXKiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiJysRFNMgH0RpujAAAAAElFTkSuQmCC'; - const CONFIG_RESIZE_IN_PIXELS = { + const CONFIG_RESIZE_IN_PERCENTS = { plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ] }; @@ -442,7 +442,7 @@ describe( 'ImageResize', () => { describe( 'percent resizing', () => { describe( 'standard image', () => { before( () => { - customConfig = CONFIG_RESIZE_IN_PIXELS; + customConfig = CONFIG_RESIZE_IN_PERCENTS; } ); after( () => { @@ -498,7 +498,7 @@ describe( 'ImageResize', () => { describe( 'side image', () => { before( () => { - customConfig = CONFIG_RESIZE_IN_PIXELS; + customConfig = CONFIG_RESIZE_IN_PERCENTS; } ); after( () => { From a8bdc8625d3ce5c6de9c3662b851ebe787264d56 Mon Sep 17 00:00:00 2001 From: Marek Lewandowski Date: Fri, 20 Sep 2019 11:08:54 +0200 Subject: [PATCH 5/8] Tests: Removed duplicated code. --- tests/imageresize.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/tests/imageresize.js b/tests/imageresize.js index 5b9415b1..f227d7df 100644 --- a/tests/imageresize.js +++ b/tests/imageresize.js @@ -452,8 +452,6 @@ describe( 'ImageResize', () => { beforeEach( () => { setData( editor.model, `foo[]` ); - view = editor.editing.view; - viewDocument = view.document; widget = viewDocument.getRoot().getChild( 1 ); } ); @@ -480,8 +478,6 @@ describe( 'ImageResize', () => { it( 'enlarges correctly an image with unsupported width unit', async () => { setData( editor.model, `foo[]` ); - view = editor.editing.view; - viewDocument = view.document; widget = viewDocument.getRoot().getChild( 1 ); await generateResizeTest( { From c771a72584bb19167ac5524ce039f91e8235fb86 Mon Sep 17 00:00:00 2001 From: Marek Lewandowski Date: Fri, 20 Sep 2019 11:18:12 +0200 Subject: [PATCH 6/8] Tests: Extracted common code. --- tests/imageresize.js | 22 +++++++--------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/tests/imageresize.js b/tests/imageresize.js index f227d7df..6a476dde 100644 --- a/tests/imageresize.js +++ b/tests/imageresize.js @@ -440,15 +440,15 @@ describe( 'ImageResize', () => { } ); describe( 'percent resizing', () => { - describe( 'standard image', () => { - before( () => { - customConfig = CONFIG_RESIZE_IN_PERCENTS; - } ); + before( () => { + customConfig = CONFIG_RESIZE_IN_PERCENTS; + } ); - after( () => { - customConfig = null; - } ); + after( () => { + customConfig = null; + } ); + describe( 'standard image', () => { beforeEach( () => { setData( editor.model, `foo[]` ); @@ -493,14 +493,6 @@ describe( 'ImageResize', () => { } ); describe( 'side image', () => { - before( () => { - customConfig = CONFIG_RESIZE_IN_PERCENTS; - } ); - - after( () => { - customConfig = null; - } ); - beforeEach( () => { setData( editor.model, `foo[]` ); From 183862201453be06ab15d924cdf8c503ab3e49fe Mon Sep 17 00:00:00 2001 From: Marek Lewandowski Date: Fri, 20 Sep 2019 11:26:09 +0200 Subject: [PATCH 7/8] Tests: Removed stray assignment. --- tests/imageresize.js | 1 - 1 file changed, 1 deletion(-) diff --git a/tests/imageresize.js b/tests/imageresize.js index 6a476dde..0db1cbd3 100644 --- a/tests/imageresize.js +++ b/tests/imageresize.js @@ -206,7 +206,6 @@ describe( 'ImageResize', () => { } ); it( 'is shown when image is focused', () => { - const widget = viewDocument.getRoot().getChild( 1 ); const allResizers = editor.ui.getEditableElement().querySelectorAll( '.ck-widget__resizer__handle' ); const domEventDataMock = { target: widget, From 90cee77fefae02ee637a33ff5e45dc58436b10ed Mon Sep 17 00:00:00 2001 From: Marek Lewandowski Date: Fri, 20 Sep 2019 11:25:00 +0200 Subject: [PATCH 8/8] Tests: Editor is now created for 2st level test suites. --- tests/imageresize.js | 84 ++++++++++++++++++++++++++------------------ 1 file changed, 50 insertions(+), 34 deletions(-) diff --git a/tests/imageresize.js b/tests/imageresize.js index 0db1cbd3..0a5d70fe 100644 --- a/tests/imageresize.js +++ b/tests/imageresize.js @@ -26,11 +26,7 @@ describe( 'ImageResize', () => { const IMAGE_SRC_FIXTURE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAQAAAAAPLY1AAAAQklEQVR42u3PQREAAAgDoK1/' + 'aM3g14MGNJMXKiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiJysRFNMgH0RpujAAAAAElFTkSuQmCC'; - const CONFIG_RESIZE_IN_PERCENTS = { - plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ] - }; - - let absoluteContainer, widget, editor, view, viewDocument, editorElement, customConfig; + let absoluteContainer, widget, editor, view, viewDocument, editorElement; before( () => { // This container is required to position editor element in a reliable element. @@ -48,33 +44,19 @@ describe( 'ImageResize', () => { absoluteContainer.remove(); } ); - beforeEach( () => { - editorElement = document.createElement( 'div' ); - - absoluteContainer.appendChild( editorElement ); - - return ClassicEditor - .create( editorElement, customConfig || { - plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ], - image: { - resizeUnit: 'px' - } - } ) - .then( newEditor => { - editor = newEditor; - view = editor.editing.view; - viewDocument = view.document; - widget = viewDocument.getRoot().getChild( 1 ); - } ); - } ); - afterEach( () => { - editorElement.remove(); + if ( editorElement ) { + editorElement.remove(); + } - return editor.destroy(); + if ( editor ) { + return editor.destroy(); + } } ); describe( 'conversion', () => { + beforeEach( () => createEditor() ); + it( 'upcasts 100px width correctly', () => { editor.setData( `
` ); @@ -103,6 +85,8 @@ describe( 'ImageResize', () => { } ); describe( 'schema', () => { + beforeEach( () => createEditor() ); + it( 'allows the width attribute', () => { expect( editor.model.schema.checkAttribute( 'image', 'width' ) ).to.be.true; } ); @@ -113,6 +97,8 @@ describe( 'ImageResize', () => { } ); describe( 'command', () => { + beforeEach( () => createEditor() ); + it( 'defines the imageResize command', () => { expect( editor.commands.get( 'imageResize' ) ).to.be.instanceOf( ImageResizeCommand ); } ); @@ -184,6 +170,8 @@ describe( 'ImageResize', () => { } ); describe( 'visual resizers', () => { + beforeEach( () => createEditor() ); + beforeEach( () => { setData( editor.model, `foo[]` ); @@ -224,6 +212,8 @@ describe( 'ImageResize', () => { } ); describe( 'standard image resizing', () => { + beforeEach( () => createEditor() ); + beforeEach( () => { setData( editor.model, `foo[]` ); @@ -324,6 +314,8 @@ describe( 'ImageResize', () => { } ); describe( 'side image resizing', () => { + beforeEach( () => createEditor() ); + beforeEach( () => { setData( editor.model, `foo[]` ); @@ -439,13 +431,9 @@ describe( 'ImageResize', () => { } ); describe( 'percent resizing', () => { - before( () => { - customConfig = CONFIG_RESIZE_IN_PERCENTS; - } ); - - after( () => { - customConfig = null; - } ); + beforeEach( () => createEditor( { + plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ] + } ) ); describe( 'standard image', () => { beforeEach( () => { @@ -513,6 +501,8 @@ describe( 'ImageResize', () => { } ); describe( 'undo integration', () => { + beforeEach( () => createEditor() ); + beforeEach( () => { setData( editor.model, `foo[]` ); @@ -542,6 +532,8 @@ describe( 'ImageResize', () => { } ); describe( 'table integration', () => { + beforeEach( () => createEditor() ); + beforeEach( () => { setData( editor.model, '' + @@ -565,6 +557,8 @@ describe( 'ImageResize', () => { } ); describe( 'srcset integration', () => { + beforeEach( () => createEditor() ); + // The image is 96x96 pixels. const imageBaseUrl = '/assets/sample.png'; const getModel = () => editor.model.document.getRoot().getChild( 0 ); @@ -638,6 +632,8 @@ describe( 'ImageResize', () => { // TODO move to Resizer tests. describe( 'Resizer', () => { + beforeEach( () => createEditor() ); + it( 'uses rounded (int) values', async () => { setData( editor.model, `foo[]` ); @@ -765,4 +761,24 @@ describe( 'ImageResize', () => { editor.editing.view.focus(); editor.ui.focusTracker.isFocused = true; } + + function createEditor( config ) { + editorElement = document.createElement( 'div' ); + + absoluteContainer.appendChild( editorElement ); + + return ClassicEditor + .create( editorElement, config || { + plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ], + image: { + resizeUnit: 'px' + } + } ) + .then( newEditor => { + editor = newEditor; + view = editor.editing.view; + viewDocument = view.document; + widget = viewDocument.getRoot().getChild( 1 ); + } ); + } } );