Browse Source

Added some tests.

Kamil Piechaczek 7 years ago
parent
commit
35fe0e28af

+ 3 - 0
packages/ckeditor5-media-embed/package.json

@@ -17,7 +17,10 @@
     "@ckeditor/ckeditor5-widget": "^10.2.0"
   },
   "devDependencies": {
+    "@ckeditor/ckeditor5-basic-styles": "^10.0.2",
     "@ckeditor/ckeditor5-editor-classic": "^11.0.0",
+    "@ckeditor/ckeditor5-link": "^10.0.3",
+    "@ckeditor/ckeditor5-paragraph": "^10.0.2",
     "eslint": "^4.15.0",
     "eslint-config-ckeditor5": "^1.0.7",
     "husky": "^0.14.3",

+ 16 - 2
packages/ckeditor5-media-embed/src/mediaembed.js

@@ -14,7 +14,7 @@ import MediaEmbedUI from './mediaembedui';
 import Widget from '@ckeditor/ckeditor5-widget/src/widget';
 import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 
-const URL_REGEXP = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w\-._~:/?#[\]@!$&'()*+,;=.]+$/;
+const URL_REGEXP = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w\-._~:/?#[\]@!$&'()*+,;=]+$/;
 
 /**
  * The media embed plugin.
@@ -49,12 +49,26 @@ export default class MediaEmbed extends Plugin {
 		const mediaRegistry = editor.plugins.get( MediaEmbedEditing ).mediaRegistry;
 
 		this.listenTo( editor.plugins.get( Clipboard ), 'inputTransformation', ( evt, data ) => {
-			const url = data.content.getChild( 0 ).data;
+			// We assume that single node was pasted.
+			if ( data.content.childCount > 1 ) {
+				return;
+			}
+
+			const firstChild = data.content.getChild( 0 );
+
+			// If the node is not a text, skip it.
+			if ( !firstChild.is( 'text' ) ) {
+				return;
+			}
+
+			const url = firstChild.data;
 
+			// If the url does not match to universal url regexp, let's skip that.
 			if ( !url.match( URL_REGEXP ) ) {
 				return;
 			}
 
+			// If the url is valid from MediaEmbed plugin, let's use it.
 			if ( mediaRegistry.hasMedia( url ) ) {
 				this.editor.commands.execute( 'mediaEmbed', url );
 				evt.stop();

+ 178 - 1
packages/ckeditor5-media-embed/tests/mediaembed.js

@@ -8,7 +8,12 @@ import MediaEmbed from '../src/mediaembed';
 import MediaEmbedEditing from '../src/mediaembedediting';
 import MediaEmbedUI from '../src/mediaembedui';
 import Widget from '@ckeditor/ckeditor5-widget/src/widget';
+import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
+import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import Link from '@ckeditor/ckeditor5-link/src/link';
+import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+import { getData, setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 describe( 'MediaEmbed', () => {
 	let editorElement, editor;
@@ -19,7 +24,7 @@ describe( 'MediaEmbed', () => {
 
 		return ClassicTestEditor
 			.create( editorElement, {
-				plugins: [ MediaEmbed ]
+				plugins: [ MediaEmbed, Paragraph, Link, Bold ]
 			} )
 			.then( newEditor => {
 				editor = newEditor;
@@ -44,6 +49,10 @@ describe( 'MediaEmbed', () => {
 		expect( editor.plugins.get( Widget ) ).to.instanceOf( Widget );
 	} );
 
+	it( 'should load Clipboard plugin', () => {
+		expect( editor.plugins.get( Clipboard ) ).to.instanceOf( Clipboard );
+	} );
+
 	it( 'should load MediaEmbedUI plugin', () => {
 		expect( editor.plugins.get( MediaEmbedUI ) ).to.instanceOf( MediaEmbedUI );
 	} );
@@ -51,4 +60,172 @@ describe( 'MediaEmbed', () => {
 	it( 'has proper name', () => {
 		expect( MediaEmbed.pluginName ).to.equal( 'MediaEmbed' );
 	} );
+
+	describe.only( 'auto-media embed', () => {
+		it( 'works for a full URL (https + "www" sub-domain)', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'https://www.youtube.com/watch?v=H08tGjXNHO4' );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph></paragraph>[<media url="https://www.youtube.com/watch?v=H08tGjXNHO4"></media>]'
+			);
+		} );
+
+		it( 'works for a full URL (https without "wwww" sub-domain)', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'https://youtube.com/watch?v=H08tGjXNHO4' );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph></paragraph>[<media url="https://youtube.com/watch?v=H08tGjXNHO4"></media>]'
+			);
+		} );
+
+		it( 'works for a full URL (http + "www" sub-domain)', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'http://www.youtube.com/watch?v=H08tGjXNHO4' );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph></paragraph>[<media url="http://www.youtube.com/watch?v=H08tGjXNHO4"></media>]'
+			);
+		} );
+
+		it( 'works for a full URL (http without "wwww" sub-domain)', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'http://youtube.com/watch?v=H08tGjXNHO4' );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph></paragraph>[<media url="http://youtube.com/watch?v=H08tGjXNHO4"></media>]'
+			);
+		} );
+
+		it( 'works for a URL without protocol (with "www" sub-domain)', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'www.youtube.com/watch?v=H08tGjXNHO4' );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph></paragraph>[<media url="www.youtube.com/watch?v=H08tGjXNHO4"></media>]'
+			);
+		} );
+
+		it( 'works for a URL without protocol (without "www" sub-domain)', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'youtube.com/watch?v=H08tGjXNHO4' );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph></paragraph>[<media url="youtube.com/watch?v=H08tGjXNHO4"></media>]'
+			);
+		} );
+
+		it( 'works fine if a media has no preview', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'https://twitter.com/ckeditor/status/1035181110140063749' );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph></paragraph>[<media url="https://twitter.com/ckeditor/status/1035181110140063749"></media>]'
+			);
+		} );
+
+		it( 'does nothing if a URL is invalid', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'https://youtube.com' );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph>https://youtube.com[]</paragraph>'
+			);
+		} );
+
+		it( 'does nothing if pasted two links as text', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'https://www.youtube.com/watch?v=H08tGjXNHO4 https://www.youtube.com/watch?v=H08tGjXNHO4' );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph>https://www.youtube.com/watch?v=H08tGjXNHO4 https://www.youtube.com/watch?v=H08tGjXNHO4[]</paragraph>'
+			);
+		} );
+
+		it( 'does nothing if pasted link', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, '<a href="https://www.youtube.com/watch?v=H08tGjXNHO4">https://www.youtube.com/watch?v=H08tGjXNHO4</a>' );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph>' +
+					'<$text linkHref="https://www.youtube.com/watch?v=H08tGjXNHO4">https://www.youtube.com/watch?v=H08tGjXNHO4[]</$text>' +
+				'</paragraph>'
+			);
+		} );
+
+		it( 'does nothing if node contains a valid URL but it is not a text', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, '<b>https://www.youtube.com/watch?v=H08tGjXNHO4</b>' );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph>' +
+					'<$text bold="true">https://www.youtube.com/watch?v=H08tGjXNHO4[]</$text>' +
+				'</paragraph>'
+			);
+		} );
+
+		it( 'does nothing if pasted more than single node', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor,
+				'https://www.youtube.com/watch?v=H08tGjXNHO4 ' +
+				'<a href="https://www.youtube.com/watch?v=H08tGjXNHO4">https://www.youtube.com/watch?v=H08tGjXNHO4</a>'
+			);
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph>https://www.youtube.com/watch?v=H08tGjXNHO4 ' +
+					'<$text linkHref="https://www.youtube.com/watch?v=H08tGjXNHO4">https://www.youtube.com/watch?v=H08tGjXNHO4[]</$text>' +
+				'</paragraph>'
+			);
+		} );
+
+		it( 'does nothing if a URL is invalid (space inside URL)', () => {
+			setData( editor.model, '<paragraph>[]</paragraph>' );
+			pasteHtml( editor, 'youtube.com/watch?v=H08tGjXNHO4&amp;param=foo bar' );
+
+			expect( getData( editor.model ) ).to.equal(
+				'<paragraph>youtube.com/watch?v=H08tGjXNHO4&param=foo bar[]</paragraph>'
+			);
+		} );
+
+		it( 'does nothing if URL match to media but it was removed', () => {
+			return ClassicTestEditor
+				.create( editorElement, {
+					plugins: [ MediaEmbed, Paragraph ],
+					mediaEmbed: {
+						removeProviders: [ 'youtube' ]
+					}
+				} )
+				.then( newEditor => {
+					editor = newEditor;
+
+					setData( editor.model, '<paragraph>[]</paragraph>' );
+					pasteHtml( editor, 'https://www.youtube.com/watch?v=H08tGjXNHO4' );
+
+					expect( getData( editor.model ) ).to.equal(
+						'<paragraph>https://www.youtube.com/watch?v=H08tGjXNHO4[]</paragraph>'
+					);
+
+					editorElement.remove();
+
+					return editor.destroy();
+				} );
+		} );
+
+		function pasteHtml( editor, html ) {
+			editor.editing.view.document.fire( 'paste', {
+				dataTransfer: createDataTransfer( { 'text/html': html } ),
+				preventDefault() {
+				}
+			} );
+		}
+
+		function createDataTransfer( data ) {
+			return {
+				getData( type ) {
+					return data[ type ];
+				}
+			};
+		}
+	} );
 } );