Editor: Refactor AutosaveMonitor tests to @testing-library/react

packages/editor/src/components/autosave-monitor/test/index.js

@@ -1,25 +1,21 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
 import { AutosaveMonitor } from '../';
 
 describe( 'AutosaveMonitor', () => {
-	let wrapper;
 	let setAutosaveTimerSpy;
 	beforeEach( () => {
 		jest.useFakeTimers( 'legacy' );
 		setAutosaveTimerSpy = jest.spyOn(
 			AutosaveMonitor.prototype,
 			'setAutosaveTimer'
 		);
-		wrapper = shallow( <AutosaveMonitor isDirty />, {
-			lifecycleExperimental: true,
-		} );
 	} );
 
 	afterEach( () => {
@@ -29,128 +25,167 @@ describe( 'AutosaveMonitor', () => {
 		setAutosaveTimerSpy.mockClear();
 	} );
 
+	it( 'should render nothing', () => {
+		const { container } = render( <AutosaveMonitor isDirty /> );
+
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
 	it( 'should start autosave timer after being mounted', () => {
+		render( <AutosaveMonitor isDirty /> );
+
 		expect( setAutosaveTimerSpy ).toHaveBeenCalled();
 	} );
 
 	it( 'should clear the autosave timer after being unmounted', () => {
-		wrapper.unmount();
+		const { rerender } = render( <AutosaveMonitor isDirty /> );
+
+		rerender( <div /> );
+
+		expect( clearTimeout ).toHaveBeenCalled();
+	} );
+
+	it( 'should clear and restart autosave timer when the interval changes', () => {
+		const { rerender } = render( <AutosaveMonitor isDirty /> );
+
+		rerender( <AutosaveMonitor isDirty interval={ 999 } /> );
+
 		expect( clearTimeout ).toHaveBeenCalled();
+		expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 2 );
 	} );
 
-	describe( '#componentDidUpdate()', () => {
-		it( 'should clear and restart autosave timer when the interval changes', () => {
-			wrapper.setProps( { interval: 999 } );
-			expect( clearTimeout ).toHaveBeenCalled();
-			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 2 );
-		} );
-
-		it( 'should set needsAutosave=true when editReference changes', () => {
-			expect( wrapper.instance().needsAutosave ).toBe( false );
-			wrapper.setProps( {
-				editsReference: [],
-			} );
-			expect( wrapper.instance().needsAutosave ).toBe( true );
-		} );
-
-		it( 'should set needsAutosave=true when editReference changes and the post becomes dirty', () => {
-			expect( wrapper.instance().needsAutosave ).toBe( false );
-			wrapper.setProps( {
-				isDirty: true,
-				editsReference: [],
-			} );
-			expect( wrapper.instance().needsAutosave ).toBe( true );
-		} );
-
-		it( 'should not set needsAutosave=true when editReference changes and the post is not dirty anymore', () => {
-			expect( wrapper.instance().needsAutosave ).toBe( false );
-			wrapper.setProps( {
-				isDirty: true,
-				editsReference: [],
-			} );
-			wrapper.setProps( {
-				isDirty: false,
-				editsReference: [],
-			} );
-			expect( wrapper.instance().needsAutosave ).toBe( false );
-		} );
-
-		it( 'should set needsAutosave=true when editReference changes and the post is not autosaving', () => {
-			expect( wrapper.instance().needsAutosave ).toBe( false );
-			wrapper.setProps( {
-				isAutosaving: false,
-				editsReference: [],
-			} );
-			expect( wrapper.instance().needsAutosave ).toBe( true );
-		} );
-
-		it( 'should not set needsAutosave=true when editReference changes and the post started autosaving', () => {
-			expect( wrapper.instance().needsAutosave ).toBe( false );
-			wrapper.setProps( {
-				isAutosaving: false,
-				editsReference: [],
-			} );
-			wrapper.setProps( {
-				isAutosaving: true,
-				editsReference: [],
-			} );
-			expect( wrapper.instance().needsAutosave ).toBe( false );
-		} );
+	it( 'should autosave when `editReference` changes', () => {
+		const autosave = jest.fn();
+		const { rerender } = render(
+			<AutosaveMonitor isDirty isAutosaveable autosave={ autosave } />
+		);
+
+		expect( autosave ).not.toHaveBeenCalled();
+
+		rerender(
+			<AutosaveMonitor
+				isDirty
+				isAutosaveable
+				autosave={ autosave }
+				editsReference={ [] }
+			/>
+		);
+
+		jest.runOnlyPendingTimers();
+
+		expect( autosave ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	describe( '#autosaveTimerHandler()', () => {
-		it( 'should schedule itself in another {interval} ms', () => {
-			wrapper.setProps( {
-				isAutosaveable: true,
-				interval: 5,
-			} );
-			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 2 );
-			wrapper.instance().autosaveTimerHandler();
-			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 3 );
-			expect( setTimeout ).lastCalledWith( expect.any( Function ), 5000 );
-		} );
-
-		it( 'should schedule itself in 1000 ms if the post is not autosaveable at a time', () => {
-			wrapper.setProps( {
-				isAutosaveable: false,
-				interval: 5,
-			} );
-			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 2 );
-			wrapper.instance().autosaveTimerHandler();
-			expect( setAutosaveTimerSpy ).toHaveBeenCalledTimes( 3 );
-			expect( setTimeout ).lastCalledWith( expect.any( Function ), 1000 );
-		} );
-
-		it( 'should call autosave if needsAutosave=true', () => {
-			const autosave = jest.fn();
-			wrapper.setProps( {
-				isAutosaveable: true,
-				interval: 5,
-				autosave,
-			} );
-			wrapper.instance().needsAutosave = true;
-			expect( autosave ).toHaveBeenCalledTimes( 0 );
-			wrapper.instance().autosaveTimerHandler();
-			expect( autosave ).toHaveBeenCalledTimes( 1 );
-		} );
-
-		it( 'should not call autosave if needsAutosave is not true', () => {
-			const autosave = jest.fn();
-			wrapper.setProps( {
-				isAutosaveable: true,
-				interval: 5,
-				autosave,
-			} );
-			wrapper.instance().needsAutosave = false;
-			expect( autosave ).toHaveBeenCalledTimes( 0 );
-			wrapper.instance().autosaveTimerHandler();
-			expect( autosave ).toHaveBeenCalledTimes( 0 );
-		} );
+	it( 'should autosave when `editReference` changes and the post becomes dirty', () => {
+		const autosave = jest.fn();
+		const { rerender } = render(
+			<AutosaveMonitor isAutosaveable autosave={ autosave } />
+		);
+
+		expect( autosave ).not.toHaveBeenCalled();
+
+		rerender(
+			<AutosaveMonitor
+				isDirty
+				isAutosaveable
+				autosave={ autosave }
+				editsReference={ [] }
+			/>
+		);
+
+		jest.runOnlyPendingTimers();
+
+		expect( autosave ).toHaveBeenCalledTimes( 1 );
 	} );
 
-	describe( '#render()', () => {
-		it( 'should render nothing', () => {
-			expect( wrapper.type() ).toBe( null );
-		} );
+	it( 'should not autosave when `editReference` changes and the post is not dirty anymore', () => {
+		const autosave = jest.fn();
+		const { rerender } = render(
+			<AutosaveMonitor isDirty isAutosaveable autosave={ autosave } />
+		);
+
+		expect( autosave ).not.toHaveBeenCalled();
+
+		rerender(
+			<AutosaveMonitor
+				isAutosaveable
+				autosave={ autosave }
+				editsReference={ [] }
+			/>
+		);
+
+		jest.runOnlyPendingTimers();
+
+		expect( autosave ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should not autosave when `editReference` changes and the post is not autosaving', () => {
+		const autosave = jest.fn();
+		const { rerender } = render(
+			<AutosaveMonitor isAutosaveable autosave={ autosave } />
+		);
+
+		expect( autosave ).not.toHaveBeenCalled();
+
+		rerender(
+			<AutosaveMonitor
+				isAutosaveable
+				autosave={ autosave }
+				isAutosaving={ false }
+				editsReference={ [] }
+			/>
+		);
+
+		jest.runOnlyPendingTimers();
+
+		expect( autosave ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should not autosave when `editReference` changes and the post started autosaving', () => {
+		const autosave = jest.fn();
+		const { rerender } = render(
+			<AutosaveMonitor
+				isAutosaveable
+				autosave={ autosave }
+				isAutosaving={ false }
+			/>
+		);
+
+		expect( autosave ).not.toHaveBeenCalled();
+
+		rerender(
+			<AutosaveMonitor
+				isAutosaveable
+				autosave={ autosave }
+				isAutosaving
+				editsReference={ [] }
+			/>
+		);
+
+		jest.runOnlyPendingTimers();
+
+		expect( autosave ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should schedule itself in another {interval} ms', () => {
+		const { rerender } = render( <AutosaveMonitor isDirty /> );
+
+		rerender( <AutosaveMonitor isDirty isAutosaveable interval={ 5 } /> );
+
+		jest.runOnlyPendingTimers();
+
+		expect( setTimeout ).lastCalledWith( expect.any( Function ), 5000 );
+	} );
+
+	it( 'should schedule itself in 1000 ms if the post is not autosaveable at a time', () => {
+		const { rerender } = render( <AutosaveMonitor isDirty /> );
+
+		rerender(
+			<AutosaveMonitor isDirty isAutosaveable={ false } interval={ 5 } />
+		);
+
+		jest.runOnlyPendingTimers();
+
+		expect( setTimeout ).lastCalledWith( expect.any( Function ), 1000 );
 	} );
 } );