Moved the check version from plugin to the component.

ckeditor · Apr 11, 2022 · 8226817 · 8226817
1 parent 540a58f
commit 8226817
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 16 deletions.
diff --git a/src/ckeditor.js b/src/ckeditor.js
@@ -13,6 +13,23 @@ const INPUT_EVENT_DEBOUNCE_WAIT = 300;
 export default {
 	name: 'ckeditor',
 
+	created() {
+		const { CKEDITOR_VERSION } = window;
+
+		// Starting from v34.0.0, CKEditor 5 introduces a lock mechanism enabling/disabling the read-only mode.
+		// As it is a breaking change between major releases of the integration, the component requires using
+		// CKEditor 5 in version 34 or higher.
+		if ( CKEDITOR_VERSION ) {
+			const [ major ] = CKEDITOR_VERSION.split( '.' ).map( Number );
+
+			if ( major < 34 ) {
+				console.warn( 'The <CKEditor> component requires using CKEditor 5 in version 34 or higher.' );
+			}
+		} else {
+			console.warn( 'Cannot find the "CKEDITOR_VERSION" in the "window" scope.' );
+		}
+	},
+
 	render( createElement ) {
 		return createElement( this.tagName );
 	},

diff --git a/src/plugin.js b/src/plugin.js
@@ -21,21 +21,6 @@ if ( major !== 2 ) {
 	);
 }
 
-const { CKEDITOR_VERSION } = window;
-
-// Starting from v34.0.0, CKEditor 5 introduces a lock mechanism enabling/disabling the read-only mode.
-// As it is a breaking change between major releases of the integration, the component requires using
-// CKEditor 5 in version 34 or higher.
-if ( CKEDITOR_VERSION ) {
-	const [ major ] = CKEDITOR_VERSION.split( '.' ).map( Number );
-
-	if ( major < 34 ) {
-		console.warn( 'The <CKEditor> component requires using CKEditor 5 in version 34 or higher.' );
-	}
-} else {
-	console.warn( 'Cannot find the "CKEDITOR_VERSION" in the "window" scope.' );
-}
-
 const CKEditor = {
 	/**
 	 * Installs the plugin, registering the `<ckeditor>` component.

diff --git a/tests/ckeditor.js b/tests/ckeditor.js
@@ -15,15 +15,20 @@ import {
 } from './_utils/mockeditor';
 
 describe( 'CKEditor Component', () => {
-	let sandbox, wrapper, vm;
+	let sandbox, wrapper, vm, CKEDITOR_VERSION;
 
 	beforeEach( () => {
+		CKEDITOR_VERSION = window.CKEDITOR_VERSION;
+		window.CKEDITOR_VERSION = '34.0.0';
+
 		( { wrapper, vm } = createComponent() );
 
 		sandbox = sinon.createSandbox();
 	} );
 
 	afterEach( () => {
+		window.CKEDITOR_VERSION = CKEDITOR_VERSION;
+
 		sandbox.restore();
 		wrapper.destroy();
 	} );
@@ -32,6 +37,50 @@ describe( 'CKEditor Component', () => {
 		expect( CKEditorComponent.name ).to.equal( 'ckeditor' );
 	} );
 
+	it( 'should print a warning if the "window.CKEDITOR_VERSION" variable is not available', async () => {
+		const warnStub = sandbox.stub( console, 'warn' );
+
+		delete window.CKEDITOR_VERSION;
+
+		sandbox.stub( MockEditor, 'create' ).resolves( new MockEditor() );
+		const { wrapper } = createComponent();
+
+		await Vue.nextTick();
+		wrapper.destroy();
+
+		expect( warnStub.callCount ).to.equal( 1 );
+		expect( warnStub.firstCall.args[ 0 ] ).to.equal( 'Cannot find the "CKEDITOR_VERSION" in the "window" scope.' );
+	} );
+
+	it( 'should print a warning if using CKEditor 5 in version lower than 34', async () => {
+		const warnStub = sandbox.stub( console, 'warn' );
+
+		window.CKEDITOR_VERSION = '30.0.0';
+
+		sandbox.stub( MockEditor, 'create' ).resolves( new MockEditor() );
+		const { wrapper } = createComponent();
+
+		await Vue.nextTick();
+		wrapper.destroy();
+
+		expect( warnStub.callCount ).to.equal( 1 );
+		expect( warnStub.firstCall.args[ 0 ] ).to.equal( 'The <CKEditor> component requires using CKEditor 5 in version 34 or higher.' );
+	} );
+
+	it( 'should not print any warninig if using CKEditor 5 in version 34 or higher', async () => {
+		const warnStub = sandbox.stub( console, 'warn' );
+
+		window.CKEDITOR_VERSION = '34.0.0';
+
+		sandbox.stub( MockEditor, 'create' ).resolves( new MockEditor() );
+		const { wrapper } = createComponent();
+
+		await Vue.nextTick();
+		wrapper.destroy();
+
+		expect( warnStub.callCount ).to.equal( 0 );
+	} );
+
 	it( 'should call editor#create when initializing', async () => {
 		const stub = sandbox.stub( MockEditor, 'create' ).resolves( new MockEditor() );
 		const { wrapper } = createComponent();
@@ -243,6 +292,12 @@ describe( 'CKEditor Component', () => {
 
 			expect( vm.$_instance._readOnlyLocks.size ).to.equal( 0 );
 
+			wrapper.setProps( { disabled: true } );
+
+			await Vue.nextTick();
+
+			expect( vm.$_instance._readOnlyLocks.size ).to.equal( 1 );
+
 			wrapper.destroy();
 		} );