Add unit tests to hooks useViewportMatch and useMediaQuery

packages/compose/src/hooks/use-media-query/test/index.js

@@ -0,0 +1,81 @@
+/**
+ * External dependencies
+ */
+import { create, act } from 'react-test-renderer';
+
+/**
+ * Internal dependencies
+ */
+import useMediaQuery from '../';
+
+describe( 'useMediaQuery', () => {
+	let addListener, removeListener;
+
+	beforeAll( () => {
+		jest.spyOn( global, 'matchMedia' );
+
+		addListener = jest.fn();
+		removeListener = jest.fn();
+	} );
+
+	afterEach( () => {
+		global.matchMedia.mockClear();
+		addListener.mockClear();
+		removeListener.mockClear();
+	} );
+
+	afterAll( () => {
+		global.matchMedia.mockRestore();
+	} );
+
+	const TestComponent = ( { query } ) => {
+		const queryResult = useMediaQuery( query );
+		return `useMediaQuery: ${ queryResult }`;
+	};
+
+	it( 'should return true when query matches', async () => {
+		global.matchMedia.mockReturnValue( { addListener, removeListener, matches: true } );
+
+		let root;
+
+		await act( async () => {
+			root = create( <TestComponent query="(min-width: 782px)" /> );
+		} );
+
+		expect( root.toJSON() ).toBe( 'useMediaQuery: true' );
+	} );
+
+	it( 'should correctly update the value when the query evaluation matches', async () => {
+		global.matchMedia.mockReturnValueOnce( { addListener, removeListener, matches: true } );
+		global.matchMedia.mockReturnValueOnce( { addListener, removeListener, matches: true } );
+		global.matchMedia.mockReturnValueOnce( { addListener, removeListener, matches: false } );
+
+		let root, updateMatchFunction;
+		await act( async () => {
+			root = create( <TestComponent query="(min-width: 782px)" /> );
+		} );
+		expect( root.toJSON() ).toBe( 'useMediaQuery: true' );
+
+		await act( async () => {
+			updateMatchFunction = addListener.mock.calls[ 0 ][ 0 ];
+			updateMatchFunction();
+		} );
+		expect( root.toJSON() ).toBe( 'useMediaQuery: false' );
+
+		await act( async () => {
+			root.unmount();
+		} );
+		expect( removeListener.mock.calls ).toEqual( [
+			[ updateMatchFunction ],
+		] );
+	} );
+
+	it( 'should return false when the query does not matches', async () => {
+		global.matchMedia.mockReturnValue( { addListener, removeListener, matches: false } );
+		let root;
+		await act( async () => {
+			root = create( <TestComponent query="(min-width: 782px)" /> );
+		} );
+		expect( root.toJSON() ).toBe( 'useMediaQuery: false' );
+	} );
+} );

packages/compose/src/hooks/use-viewport-match/test/index.js

@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import { create, act } from 'react-test-renderer';
+
+/**
+ * Internal dependencies
+ */
+import useViewportMatch from '../';
+
+jest.mock( '../../use-media-query', () => {
+	return jest.fn();
+} );
+
+import useMediaQueryMock from '../../use-media-query';
+
+describe( 'useViewportMatch', () => {
+	afterEach( () => {
+		useMediaQueryMock.mockClear();
+	} );
+
+	const TestComponent = ( { breakpoint, operator } ) => {
+		const result = useViewportMatch( breakpoint, operator );
+		return `useViewportMatch: ${ result }`;
+	};
+
+	it( 'should return true when the viewport matches', async () => {
+		let root;
+		useMediaQueryMock.mockReturnValue( true );
+
+		await act( async () => {
+			root = create( <TestComponent breakpoint="wide" operator="<" /> );
+		} );
+		expect( root.toJSON() ).toBe( 'useViewportMatch: true' );
+
+		await act( async () => {
+			root = create( <TestComponent breakpoint="medium" operator=">=" /> );
+		} );
+		expect( root.toJSON() ).toBe( 'useViewportMatch: true' );
+
+		await act( async () => {
+			root = create( <TestComponent breakpoint="small" operator=">=" /> );
+		} );
+		expect( root.toJSON() ).toBe( 'useViewportMatch: true' );
+
+		expect( useMediaQueryMock.mock.calls ).toEqual( [
+			[ '(max-width: 1280px)' ],
+			[ '(min-width: 782px)' ],
+			[ '(min-width: 600px)' ],
+		] );
+	} );
+
+	it( 'should return false when the viewport matches', async () => {
+		let root;
+		useMediaQueryMock.mockReturnValue( false );
+
+		await act( async () => {
+			root = create( <TestComponent breakpoint="huge" operator=">=" /> );
+		} );
+		expect( root.toJSON() ).toBe( 'useViewportMatch: false' );
+
+		await act( async () => {
+			root = create( <TestComponent breakpoint="large" operator="<" /> );
+		} );
+		expect( root.toJSON() ).toBe( 'useViewportMatch: false' );
+
+		await act( async () => {
+			root = create( <TestComponent breakpoint="mobile" operator="<" /> );
+		} );
+		expect( root.toJSON() ).toBe( 'useViewportMatch: false' );
+
+		expect( useMediaQueryMock.mock.calls ).toEqual( [
+			[ '(min-width: 1440px)' ],
+			[ '(max-width: 960px)' ],
+			[ '(max-width: 480px)' ],
+		] );
+	} );
+} );