99 lines
2.8 KiB
JavaScript
99 lines
2.8 KiB
JavaScript
// We need to disable the following eslint check as it's only applicable
|
|
// to testing-library/react not `react-test-renderer` used here
|
|
/* eslint-disable testing-library/await-async-query */
|
|
/**
|
|
* External dependencies
|
|
*/
|
|
import TestRenderer, { act } from 'react-test-renderer';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import { usePrevious } from '../use-previous';
|
|
|
|
describe( 'usePrevious', () => {
|
|
const TestComponent = ( { testValue, validation } ) => {
|
|
const previousValue = usePrevious( testValue, validation );
|
|
return (
|
|
<div
|
|
data-testValue={ testValue }
|
|
data-previousValue={ previousValue }
|
|
/>
|
|
);
|
|
};
|
|
|
|
let renderer;
|
|
beforeEach( () => ( renderer = null ) );
|
|
|
|
it( 'should be undefined at first pass', () => {
|
|
act( () => {
|
|
renderer = TestRenderer.create( <TestComponent testValue={ 1 } /> );
|
|
} );
|
|
const testValue =
|
|
renderer.root.findByType( 'div' ).props[ 'data-testValue' ];
|
|
const testPreviousValue =
|
|
renderer.root.findByType( 'div' ).props[ 'data-previousValue' ];
|
|
|
|
expect( testValue ).toBe( 1 );
|
|
expect( testPreviousValue ).toBe( undefined );
|
|
} );
|
|
|
|
it( 'test new and previous value', () => {
|
|
let testValue;
|
|
let testPreviousValue;
|
|
act( () => {
|
|
renderer = TestRenderer.create( <TestComponent testValue={ 1 } /> );
|
|
} );
|
|
|
|
act( () => {
|
|
renderer.update( <TestComponent testValue={ 2 } /> );
|
|
} );
|
|
testValue = renderer.root.findByType( 'div' ).props[ 'data-testValue' ];
|
|
testPreviousValue =
|
|
renderer.root.findByType( 'div' ).props[ 'data-previousValue' ];
|
|
expect( testValue ).toBe( 2 );
|
|
expect( testPreviousValue ).toBe( 1 );
|
|
|
|
act( () => {
|
|
renderer.update( <TestComponent testValue={ 3 } /> );
|
|
} );
|
|
testValue = renderer.root.findByType( 'div' ).props[ 'data-testValue' ];
|
|
testPreviousValue =
|
|
renderer.root.findByType( 'div' ).props[ 'data-previousValue' ];
|
|
expect( testValue ).toBe( 3 );
|
|
expect( testPreviousValue ).toBe( 2 );
|
|
} );
|
|
|
|
it( 'should not update value if validation fails', () => {
|
|
let testValue;
|
|
let testPreviousValue;
|
|
act( () => {
|
|
renderer = TestRenderer.create(
|
|
<TestComponent testValue={ 1 } validation={ Number.isFinite } />
|
|
);
|
|
} );
|
|
|
|
act( () => {
|
|
renderer.update(
|
|
<TestComponent testValue="abc" validation={ Number.isFinite } />
|
|
);
|
|
} );
|
|
testValue = renderer.root.findByType( 'div' ).props[ 'data-testValue' ];
|
|
testPreviousValue =
|
|
renderer.root.findByType( 'div' ).props[ 'data-previousValue' ];
|
|
expect( testValue ).toBe( 'abc' );
|
|
expect( testPreviousValue ).toBe( 1 );
|
|
|
|
act( () => {
|
|
renderer.update(
|
|
<TestComponent testValue={ 3 } validation={ Number.isFinite } />
|
|
);
|
|
} );
|
|
testValue = renderer.root.findByType( 'div' ).props[ 'data-testValue' ];
|
|
testPreviousValue =
|
|
renderer.root.findByType( 'div' ).props[ 'data-previousValue' ];
|
|
expect( testValue ).toBe( 3 );
|
|
expect( testPreviousValue ).toBe( 1 );
|
|
} );
|
|
} );
|