/
index.js
87 lines (73 loc) · 1.92 KB
/
index.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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
/**
* External dependencies
*/
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
/**
* WordPress dependencies
*/
import { useRef } from '@wordpress/element';
/**
* Internal dependencies
*/
import { getAutoCompleterUI } from '../autocompleter-ui';
describe( 'AutocompleterUI', () => {
describe( 'click outside behavior', () => {
it( 'should call reset function when a click on another element occurs', async () => {
const user = userEvent.setup();
const resetSpy = jest.fn();
const autocompleter = {
name: 'fruit',
// The prefix that triggers this completer
triggerPrefix: '~',
// Mock useItems function to return a autocomplete item.
useItems: () => {
return [
[
{
isDisabled: false,
key: 'Apple',
value: 'Apple',
label: (
<span>
<span className="icon">🍎</span>
{ 'Apple' }
</span>
),
},
],
];
},
};
const AutocompleterUI = getAutoCompleterUI( autocompleter );
const OtherElement = <div>Other Element</div>;
const Container = () => {
const contentRef = useRef();
return (
<div>
<AutocompleterUI
className={ 'test' }
filterValue={ '~' }
instanceId={ '1' }
listBoxId={ '1' }
selectedIndex={ 0 }
onChangeOptions={ () => {} }
onSelect={ () => {} }
value={ { visual: '🍎', name: 'Apple', id: 1 } }
contentRef={ contentRef }
reset={ resetSpy }
/>
{ OtherElement }
</div>
);
};
render( <Container /> );
// Click on autocompleter.
await user.click( screen.getByText( 'Apple' ) );
expect( resetSpy ).toHaveBeenCalledTimes( 0 );
// Click on other element out side of the tree.
await user.click( screen.getByText( 'Other Element' ) );
expect( resetSpy ).toHaveBeenCalledTimes( 1 );
} );
} );
} );