-
Notifications
You must be signed in to change notification settings - Fork 14
/
Slider.test.js
127 lines (126 loc) · 5.41 KB
/
Slider.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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import React from "react";
import { render, fireEvent, act } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import DxcSlider from "./Slider";
describe("Slider component tests", () => {
test("Slider renders with correct text and label id", () => {
const { getByText, getByRole } = render(<DxcSlider label="label" minValue={0} maxValue={100} showLimitsValues />);
expect(getByText("0")).toBeTruthy();
expect(getByText("100")).toBeTruthy();
const sliderId = getByText("label").getAttribute("id");
expect(getByRole("slider").getAttribute("aria-labelledby")).toBe(sliderId);
expect(getByRole("slider").getAttribute("aria-orientation")).toBe("horizontal");
});
test("Slider renders with correct initial value when it is uncontrolled", () => {
const { getByRole } = render(
<DxcSlider defaultValue={30} minValue={0} maxValue={100} showLimitsValues showInput />
);
const slider = getByRole("slider");
const input = getByRole("textbox");
expect(slider.getAttribute("aria-valuenow")).toBe("30");
expect(input.value).toBe("30");
});
test("Slider correct limit values", () => {
const { getByRole, getByText } = render(
<DxcSlider defaultValue={125} minValue={30} maxValue={125} showLimitsValues />
);
const slider = getByRole("slider");
expect(slider.getAttribute("aria-valuemin")).toBe("30");
expect(slider.getAttribute("aria-valuemax")).toBe("125");
userEvent.tab();
fireEvent.keyDown(slider, { key: "ArrowRight", code: "ArrowRight", keyCode: 39, charCode: 39 });
expect(slider.getAttribute("aria-valuenow")).toBe("125");
expect(getByText("30")).toBeTruthy();
expect(getByText("125")).toBeTruthy();
});
test("Calls correct function onChange in controlled slider", () => {
const onChange = jest.fn();
const { getByRole } = render(
<DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues value={13} showInput />
);
expect(getByRole("slider").getAttribute("aria-valuenow")).toBe("13");
expect(getByRole("textbox").value).toBe("13");
act(() => {
fireEvent.change(getByRole("textbox"), { target: { value: 25 } });
});
expect(onChange).toHaveBeenCalledWith(25);
expect(getByRole("slider").getAttribute("aria-valuenow")).toBe("13");
expect(getByRole("textbox").value).toBe("13");
});
test("Calls correct function onChange in uncontrolled slider", () => {
const onChange = jest.fn();
const { getByRole } = render(
<DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues showInput />
);
act(() => {
fireEvent.change(getByRole("textbox"), { target: { value: 25 } });
});
expect(onChange).toHaveBeenCalledWith(25);
expect(getByRole("slider").getAttribute("aria-valuenow")).toBe("25");
expect(getByRole("textbox").value).toBe("25");
});
test("Disabled slider have disabled input and slider", () => {
const onChange = jest.fn();
const { getByRole } = render(
<DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues disabled showInput value={13} />
);
act(() => {
fireEvent.change(getByRole("textbox"), { target: { value: 25 } });
});
expect(getByRole("textbox").hasAttribute("disabled")).toBeTruthy();
expect(getByRole("textbox").value).toBe("13");
expect(getByRole("slider").hasAttribute("disabled")).toBeTruthy();
});
test("Calls correct function onDragEnd when it is uncontrolled", () => {
const onDragEnd = jest.fn();
const { getByRole } = render(<DxcSlider minValue={0} maxValue={150} onDragEnd={onDragEnd} showInput />);
const slider = getByRole("slider");
act(() => {
fireEvent.mouseDown(slider);
});
act(() => {
fireEvent.mouseUp(slider, { target: { value: 120 } });
});
expect(onDragEnd).toHaveBeenCalledWith("120");
});
test("Calls correct function onDragEnd when it is controlled", () => {
const onDragEnd = jest.fn();
const { getByRole } = render(<DxcSlider minValue={0} maxValue={150} value={50} onDragEnd={onDragEnd} showInput />);
const slider = getByRole("slider");
act(() => {
fireEvent.mouseDown(slider);
});
act(() => {
fireEvent.mouseUp(slider, { target: { value: 120 } });
});
expect(onDragEnd).toHaveBeenCalledWith("120");
expect(slider.getAttribute("aria-valuenow")).toBe("50");
});
test("Calls correct function labelFormatCallback", () => {
const labelFormatCallback = jest.fn((x) => `${x}$`);
const { getByText } = render(
<DxcSlider
minValue={0}
maxValue={100}
showLimitsValues
showInput
value={25}
labelFormatCallback={labelFormatCallback}
/>
);
expect(getByText("0$")).toBeTruthy();
expect(getByText("100$")).toBeTruthy();
expect(labelFormatCallback).toHaveBeenCalledTimes(2);
});
test("Change value correctly to 0 from external function", () => {
const onChange = jest.fn();
const { rerender, getByRole } = render(
<DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues value={13} showInput />
);
const slider = getByRole("slider");
userEvent.tab();
fireEvent.keyDown(slider, { key: "ArrowRight", code: "ArrowRight", keyCode: 39, charCode: 39 });
rerender(<DxcSlider minValue={0} maxValue={100} onChange={onChange} showLimitsValues value={0} showInput />);
expect(slider.getAttribute("aria-valuenow")).toBe("0");
});
});