-
Notifications
You must be signed in to change notification settings - Fork 880
/
search.test.js
86 lines (75 loc) · 2.72 KB
/
search.test.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
import Search from "../../src/settings/components/search";
import "../__mocks__/intersection-observer";
import "../__mocks__/navigator";
import { fireEvent, render, screen, waitFor } from "../test-utils";
jest.mock( "@wordpress/data", () => ( {
useSelect: select => select( () => ( {
selectQueryableSearchIndex: () => ( {
test: {
fieldId: "id",
fieldLabel: "Item",
keywords: "test",
route: "/group",
routeLabel: "Group",
},
} ),
} ) ),
} ) );
describe( "Search", () => {
beforeEach( () => {
global.navigator.userAgent = "Mozilla/5.0 (Macintosh)";
render( <Search /> );
} );
it( "should have a search button", () => {
const button = screen.getByRole( "button" );
expect( button ).toHaveTextContent( "Quick search..." );
expect( button ).toMatchSnapshot();
} );
describe( "modal", () => {
beforeEach( async() => {
fireEvent.click( screen.getByRole( "button" ) );
await screen.findByRole( "dialog" );
} );
it( "should open", () => {
const modal = screen.getByRole( "dialog" );
expect( modal ).toBeTruthy();
expect( modal ).toMatchSnapshot();
} );
it( "should contain a combobox", () => {
const input = screen.getByRole( "combobox" );
expect( input.placeholder ).toBe( "Search..." );
expect( input ).toHaveFocus();
} );
describe( "close button", () => {
it( "should be present", () => {
expect( screen.getByRole( "button", { name: "Close" } ) ).toBeTruthy();
} );
it( "should close on click", async() => {
expect( screen.getByRole( "dialog" ) ).toBeTruthy();
fireEvent.click( screen.getByRole( "button", { name: "Close" } ) );
await waitFor( () => {
expect( screen.queryByRole( "dialog" ) ).toBe( null );
}, { timeout: 1000 } );
} );
} );
it( "should contain title and description", () => {
expect( screen.getByText( "Search" ) ).toBeTruthy();
expect( screen.getByText( "Please enter a search term with at least 2 characters." ) ).toBeTruthy();
} );
it( "should show search results", async() => {
fireEvent.change( screen.getByRole( "combobox" ), { target: { value: "test" } } );
await waitFor( () => {
const items = screen.getAllByRole( "presentation" );
expect( items.length ).toBe( 2 );
expect( items[ 0 ] ).toHaveTextContent( "Group" );
expect( items[ 1 ] ).toHaveTextContent( "Item" );
expect( screen.getByRole( "listbox" ) ).toMatchSnapshot();
}, { timeout: 1000 } );
} );
it( "should show no results found", async() => {
fireEvent.change( screen.getByRole( "combobox" ), { target: { value: "somethingthatisnotfound" } } );
expect( screen.getByText( "No results found" ) ).toBeTruthy();
expect( screen.getByText( "We couldn’t find anything with that term." ) ).toBeTruthy();
} );
} );
} );