瀏覽代碼

Added test checking if image upload handles responsive images. Fix to converting server response to proper image attribute.

Szymon Kupś 8 年之前
父節點
當前提交
378046cf56

+ 5 - 2
packages/ckeditor5-upload/src/imageuploadengine.js

@@ -127,8 +127,11 @@ export default class ImageUploadEngine extends Plugin {
 						// Filter out keys that are not integers.
 						.filter( key => !isNaN( parseInt( key, 10 ) ) )
 
-						// Create `srcset` attribute value from all elements in the array.
-						.reduce( ( acc, key ) => `${ data[ key ] } ${ key }w,`, '' );
+						// Convert each key to srcset entry.
+						.map( key => `${ data[ key ] } ${ key }w` )
+
+						// Join all entries.
+						.join( ', ' );
 
 					if ( srcsetAttribute != '' ) {
 						batch.setAttribute( imageElement, 'srcset', srcsetAttribute );

+ 23 - 0
packages/ckeditor5-upload/tests/imageuploadengine.js

@@ -234,4 +234,27 @@ describe( 'ImageUploadEngine', () => {
 		expect( loader.status ).to.equal( 'aborted' );
 		sinon.assert.calledOnce( abortSpy );
 	} );
+
+	it( 'should create responsive image if server return multiple images', done => {
+		const file = createNativeFileMock();
+		setModelData( document, '<paragraph>{}foo bar</paragraph>' );
+		editor.execute( 'imageUpload', { file } );
+
+		document.once( 'changesDone', () => {
+			document.once( 'changesDone', () => {
+				expect( getViewData( viewDocument ) ).to.equal(
+					'[<figure class="image ck-widget" contenteditable="false">' +
+						'<img sizes="100vw" src="image.png" srcset="image-500.png 500w, image-800.png 800w"></img>' +
+					'</figure>]<p>foo bar</p>'
+				);
+				expect( loader.status ).to.equal( 'idle' );
+
+				done();
+			} );
+
+			adapterMock.mockSuccess( { original: 'image.png', 500: 'image-500.png', 800: 'image-800.png' } );
+		} );
+
+		nativeReaderMock.mockSuccess( base64Sample );
+	} );
 } );