-
Notifications
You must be signed in to change notification settings - Fork 174
/
search-bar.spec.js
75 lines (59 loc) · 2.31 KB
/
search-bar.spec.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
import { screen } from "@testing-library/vue"
import { beforeEach, describe, expect, it, vi } from "vitest"
import { render } from "~~/test/unit/test-utils/render"
import { useMatchHomeRoute } from "~/composables/use-match-routes"
import VSearchBar from "~/components/VHeader/VSearchBar/VSearchBar.vue"
import { FIELD_SIZES } from "~/components/VInputField/VInputField.vue"
vi.mock("~/composables/use-match-routes", () => ({
useMatchHomeRoute: vi.fn(),
}))
const sizes = Object.keys(FIELD_SIZES)
const defaultPlaceholder = "Enter search query"
describe("VSearchBar", () => {
let options
beforeEach(() => {
options = {
props: { placeholder: defaultPlaceholder, size: "medium" },
stubs: { ClientOnly: true },
}
})
it.each(sizes)(
'renders an input field with placeholder and type="search" (%s size)',
async (size) => {
useMatchHomeRoute.mockImplementation(() => false)
options.props.size = size
await render(VSearchBar, options)
const inputElement = screen.getByPlaceholderText(defaultPlaceholder)
expect(inputElement.tagName).toBe("INPUT")
expect(inputElement).toHaveAttribute("type", "search")
expect(inputElement).toHaveAttribute("placeholder", defaultPlaceholder)
}
)
it.each(sizes)(
'renders a button with type="submit", ARIA label and SR text (%s size)',
async (size) => {
useMatchHomeRoute.mockImplementation(() => false)
options.props.size = size
await render(VSearchBar, options)
const btnElement = screen.getByRole("button", { name: /search/i })
expect(btnElement.tagName).toBe("BUTTON")
expect(btnElement).toHaveAttribute("type", "submit")
expect(btnElement).toHaveAttribute("aria-label", "Search")
}
)
describe("placeholder", () => {
it("should default to hero.search.placeholder", async () => {
delete options.props.placeholder
await render(VSearchBar, options)
expect(
screen.queryByPlaceholderText(/Search for content/i)
).not.toBeNull()
})
it("should use the prop when provided", async () => {
const placeholder = "This is a different placeholder from the default"
options.props.placeholder = placeholder
await render(VSearchBar, options)
expect(screen.queryByPlaceholderText(placeholder)).not.toBeNull()
})
})
})