/
if-viewport-matches.js
50 lines (39 loc) · 1.33 KB
/
if-viewport-matches.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/**
* External dependencies
*/
import TestRenderer, { act } from 'react-test-renderer';
/**
* WordPress dependencies
*/
import { useViewportMatch as useViewportMatchMock } from '@wordpress/compose';
/**
* Internal dependencies
*/
import '../store';
import ifViewportMatches from '../if-viewport-matches';
describe( 'ifViewportMatches()', () => {
const Component = () => <div>Hello</div>;
afterEach( () => {
useViewportMatchMock.mockClear();
} );
it( 'should not render if query does not match', () => {
useViewportMatchMock.mockReturnValueOnce( false );
const EnhancedComponent = ifViewportMatches( '< wide' )( Component );
let testRenderer;
act( () => {
testRenderer = TestRenderer.create( <EnhancedComponent /> );
} );
expect( useViewportMatchMock.mock.calls ).toEqual( [ [ 'wide', '<' ] ] );
expect( testRenderer.root.findAllByType( Component ) ).toHaveLength( 0 );
} );
it( 'should render if query does match', () => {
useViewportMatchMock.mockReturnValueOnce( true );
const EnhancedComponent = ifViewportMatches( '>= wide' )( Component );
let testRenderer;
act( () => {
testRenderer = TestRenderer.create( <EnhancedComponent /> );
} );
expect( useViewportMatchMock.mock.calls ).toEqual( [ [ 'wide', '>=' ] ] );
expect( testRenderer.root.findAllByType( Component ) ).toHaveLength( 1 );
} );
} );