-
Notifications
You must be signed in to change notification settings - Fork 14
/
Switch.test.js
104 lines (103 loc) · 5.63 KB
/
Switch.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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import React from "react";
import { render, fireEvent } from "@testing-library/react";
import DxcSwitch from "./Switch";
describe("Switch component tests", () => {
test("Switch renders with correct text", () => {
const onChange = jest.fn((returnedValue) => {
expect(returnedValue).toBe(true);
});
const { getByText } = render(<DxcSwitch label="SwitchComponent" checked={false} onChange={onChange} />);
expect(getByText("SwitchComponent")).toBeTruthy();
});
test("Calls correct function on click", () => {
const onChange = jest.fn();
const { getByText } = render(<DxcSwitch label="SwitchComponent" checked={false} onChange={onChange} />);
fireEvent.click(getByText("SwitchComponent"));
expect(onChange).toHaveBeenCalled();
});
test("Calls correct function on key down", () => {
const onChange = jest.fn();
const { getByText } = render(<DxcSwitch label="SwitchComponent" checked={false} onChange={onChange} />);
fireEvent.focus(getByText("SwitchComponent"));
fireEvent.keyDown(getByText("SwitchComponent"), { key: "Enter" });
expect(onChange).toHaveBeenCalled();
fireEvent.keyDown(getByText("SwitchComponent"), { key: " " });
expect(onChange).toHaveBeenCalled();
});
test("Everytime the user clicks the component the onchange function is called with the correct value CONTROLLED COMPONENT", () => {
const onChange = jest.fn();
const { getByText } = render(<DxcSwitch label="SwitchComponent" checked={false} onChange={onChange} />);
fireEvent.click(getByText("SwitchComponent"));
fireEvent.click(getByText("SwitchComponent"));
expect(onChange.mock.calls[0][0]).toBe(true);
expect(onChange.mock.calls[1][0]).toBe(true);
});
test("Everytime the user use enter in the component, the onchange function is called with the correct value CONTROLLED COMPONENT", () => {
const onChange = jest.fn();
const { getByText } = render(<DxcSwitch label="SwitchComponent" checked={false} onChange={onChange} />);
fireEvent.focus(getByText("SwitchComponent"));
fireEvent.keyDown(getByText("SwitchComponent"), { key: "Enter" });
fireEvent.keyDown(getByText("SwitchComponent"), { key: "Enter" });
expect(onChange.mock.calls[0][0]).toBe(true);
expect(onChange.mock.calls[1][0]).toBe(true);
});
test("Everytime the user use space in the component, the onchange function is called with the correct value CONTROLLED COMPONENT", () => {
const onChange = jest.fn();
const { getByText } = render(<DxcSwitch label="SwitchComponent" checked={false} onChange={onChange} />);
fireEvent.focus(getByText("SwitchComponent"));
fireEvent.keyDown(getByText("SwitchComponent"), { key: " " });
fireEvent.keyDown(getByText("SwitchComponent"), { key: " " });
expect(onChange.mock.calls[0][0]).toBe(true);
expect(onChange.mock.calls[1][0]).toBe(true);
});
test("Everytime the user clicks the component the onchange function is called with the correct value UNCONTROLLED COMPONENT", () => {
const onChange = jest.fn();
const { getByText } = render(<DxcSwitch label="SwitchComponent" onChange={onChange} />);
fireEvent.click(getByText("SwitchComponent"));
fireEvent.click(getByText("SwitchComponent"));
expect(onChange.mock.calls[0][0]).toBe(true);
expect(onChange.mock.calls[1][0]).toBe(false);
});
test("Everytime the user use enter in the component, the onchange function is called with the correct value UNCONTROLLED COMPONENT", () => {
const onChange = jest.fn();
const { getByText } = render(<DxcSwitch label="SwitchComponent" onChange={onChange} />);
fireEvent.focus(getByText("SwitchComponent"));
fireEvent.keyDown(getByText("SwitchComponent"), { key: "Enter" });
fireEvent.keyDown(getByText("SwitchComponent"), { key: "Enter" });
expect(onChange.mock.calls[0][0]).toBe(true);
expect(onChange.mock.calls[1][0]).toBe(false);
});
test("Everytime the user use space in the component, the onchange function is called with the correct value UNCONTROLLED COMPONENT", () => {
const onChange = jest.fn();
const { getByText } = render(<DxcSwitch label="SwitchComponent" onChange={onChange} />);
fireEvent.focus(getByText("SwitchComponent"));
fireEvent.keyDown(getByText("SwitchComponent"), { key: " " });
fireEvent.keyDown(getByText("SwitchComponent"), { key: " " });
expect(onChange.mock.calls[0][0]).toBe(true);
expect(onChange.mock.calls[1][0]).toBe(false);
});
test("Renders with correct initial value and initial state when it is uncontrolled", () => {
const component = render(
<DxcSwitch label="Default label" defaultChecked value="test-defaultChecked" name="test" />
);
const switchEl = component.getByRole("switch");
const inputEl = component.container.querySelector(`input[name="test"]`);
expect(inputEl.value).toBe("test-defaultChecked");
expect(switchEl.getAttribute("aria-checked")).toBe("true");
});
test("Renders with correct aria attributes", () => {
const { getByText, getByRole } = render(<DxcSwitch label="Default label" />);
const switchEl = getByRole("switch");
const label = getByText("Default label");
expect(switchEl.getAttribute("aria-labelledby")).toBe(label.id);
expect(switchEl.getAttribute("aria-checked")).toBe("false");
});
test("Renders disabled switch correctly", () => {
const { getByText, getByRole } = render(<DxcSwitch label="Default label" disabled />);
const switchEl = getByRole("switch");
const label = getByText("Default label");
expect(switchEl.getAttribute("aria-labelledby")).toBe(label.id);
expect(switchEl.getAttribute("aria-checked")).toBe("false");
expect(switchEl.getAttribute("aria-disabled")).toBe("true");
});
});