Merge d4d7aa5 into 829b5da

README.md

@@ -25,6 +25,9 @@ npm install
 
 ### Executing tests
 
+Before starting tests execution, you need to build the package. You can use `npm run build` in order to build the production-ready version
+or `npm run develop` which produces a development version with attached watcher for all sources files.
+
 ```bash
 npm run test -- [additional options]
 # or
@@ -46,8 +49,6 @@ an environment variable, e.g.:
 BROWSER_STACK_USERNAME=[...] BROWSER_STACK_ACCESS_KEY=[...] npm t -- -b BrowserStack_Edge,BrowserStack_Safari -c
 ```
 
-If you are going to change the source (`src/ckeditor.jsx`) file, remember about rebuilding the package. You can use `npm run develop` in order to do it automatically.
-
 ### Building the package
 
 Build a minified version of the package that is ready to publish:

src/ckeditor.jsx

@@ -17,18 +17,13 @@ export default class CKEditor extends React.Component {
 		this.domContainer = React.createRef();
 	}
 
-	componentDidUpdate() {
-		if ( !this.editor ) {
-			return;
+	// This component should never be updated by React itself.
+	shouldComponentUpdate( nextProps ) {
+		if ( 'disabled' in nextProps ) {
+			this.editor.isReadOnly = nextProps.disabled;
 		}
 
-		if ( 'data' in this.props && this.props.data !== this.editor.getData() ) {
-			this.editor.setData( this.props.data );
-		}
-
-		if ( 'disabled' in this.props ) {
-			this.editor.isReadOnly = this.props.disabled;
-		}
+		return false;
 	}
 
 	// Initialize the editor when the component is mounted.

tests/ckeditor.jsx

@@ -87,6 +87,21 @@ describe( 'CKEditor Component', () => {
 			} );
 		} );
 
+		it( 'must not update the component by React itself', done => {
+			sandbox.stub( Editor, 'create' ).resolves( new Editor() );
+
+			wrapper = mount( <CKEditor editor={ Editor }/> );
+
+			setTimeout( () => {
+				const component = wrapper.instance();
+
+				// This method always is called with an object with component's properties.
+				expect( component.shouldComponentUpdate( {} ) ).to.equal( false );
+
+				done();
+			} );
+		} );
+
 		it( 'displays an error if something went wrong', done => {
 			const error = new Error( 'Something went wrong.' );
 			const consoleErrorStub = sandbox.stub( console, 'error' );
@@ -108,59 +123,6 @@ describe( 'CKEditor Component', () => {
 	} );
 
 	describe( 'properties', () => {
-		it( 'sets editor\'s data if properties have changed and contain the "data" key', done => {
-			const editorInstance = new Editor();
-
-			sandbox.stub( Editor, 'create' ).resolves( editorInstance );
-			sandbox.stub( editorInstance, 'setData' );
-			sandbox.stub( editorInstance, 'getData' ).returns( '<p>&nbsp;</p>' );
-
-			wrapper = mount( <CKEditor editor={ Editor } /> );
-
-			setTimeout( () => {
-				wrapper.setProps( { data: '<p>Foo Bar.</p>' });
-
-				expect( editorInstance.setData.calledOnce ).to.be.true;
-				expect( editorInstance.setData.firstCall.args[ 0 ] ).to.equal( '<p>Foo Bar.</p>' );
-
-				done();
-			} );
-		} );
-
-		it( 'does not update the editor\'s data if value under "data" key is equal to editor\'s data', done => {
-			const editorInstance = new Editor();
-
-			sandbox.stub( Editor, 'create' ).resolves( editorInstance );
-			sandbox.stub( editorInstance, 'setData' );
-			sandbox.stub( editorInstance, 'getData' ).returns( '<p>Foo Bar.</p>' );
-
-			wrapper = mount( <CKEditor editor={ Editor } /> );
-
-			setTimeout( () => {
-				wrapper.setProps( { data: '<p>Foo Bar.</p>' });
-
-				expect( editorInstance.setData.calledOnce ).to.be.false;
-
-				done();
-			} );
-		} );
-
-		it( 'does not set editor\'s data if the editor is not ready', () => {
-			const editorInstance = new Editor();
-
-			sandbox.stub( Editor, 'create' ).resolves( editorInstance );
-			sandbox.stub( editorInstance, 'setData' );
-
-			wrapper = mount( <CKEditor editor={ Editor } /> );
-
-			const component = wrapper.instance();
-
-			component.componentDidUpdate( { data: 'Foo' } );
-
-			expect( component.editor ).to.be.null;
-			expect( editorInstance.setData.called ).to.be.false;
-		} );
-
 		describe( '#config', () => {
 			it( 'should replace all react DOM references with the `current` DOM element', done => {
 				const spy = sinon.spy( Editor, 'create' );