Skip to content

Commit

Permalink
Add some tests to useSelectWithDebounce
Browse files Browse the repository at this point in the history
The test is not complete, since we're having an issue to simulate the debounce timers.
  • Loading branch information
renatho committed May 13, 2022
1 parent 2e9c6bf commit 859125c
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 1 deletion.
1 change: 0 additions & 1 deletion assets/react-hooks/use-select-with-debounce.js
Expand Up @@ -9,7 +9,6 @@ import { debounce } from 'lodash';
import { useSelect } from '@wordpress/data';
import { useState, useEffect, useCallback } from '@wordpress/element';

// TODO: Write tests.
/**
* Use select hook with debounce.
*
Expand Down
44 changes: 44 additions & 0 deletions assets/react-hooks/use-select-with-debounce.test.js
@@ -0,0 +1,44 @@
/**
* External dependencies
*/
import { render } from '@testing-library/react';

/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';

/**
* Internal dependencies
*/
import useSelectWithDebounce from './use-select-with-debounce';

jest.mock( '@wordpress/data' );

describe( 'useSelectWithDebounce', () => {
it( 'Should change the deps to call useSelect after timer only', () => {
jest.useFakeTimers();
const mapSelect = () => {};
const timer = 1000;
const mockFn = jest.fn();
useSelect.mockImplementation( mockFn );

const TestComponent = ( { deps } ) => {
useSelectWithDebounce( mapSelect, deps, timer );
return <div />;
};

const deps1 = [ 1 ];
const deps2 = [ 2 ];

const { rerender } = render( <TestComponent deps={ deps1 } /> );
expect( mockFn ).toBeCalledWith( mapSelect, deps1 );

rerender( <TestComponent deps={ deps2 } /> );
expect( mockFn ).toBeCalledWith( mapSelect, deps1 );

// TODO: Complete test running debounce to make sure it was called after the time.
// jest.runAllTimers();
// expect( mockFn ).toBeCalledWith( mapSelect, deps2 );
} );
} );

0 comments on commit 859125c

Please sign in to comment.