Skip to content

Commit b4b0552

Browse files
metonymmetonym
committed
test: use assert instead of casting HTMLElement
1 parent 3f09e3f commit b4b0552

File tree

2 files changed

+69
-52
lines changed

2 files changed

+69
-52
lines changed

‎tests/Checkbox/Checkbox.test.ts‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { render, screen } from "@testing-library/svelte";
22
import { user } from "../setup-tests";
3-
import Checkbox from "./Checkbox.test.svelte";
4-
import CheckboxSkeleton from "./Checkbox.skeleton.test.svelte";
53
import CheckboxGroup from "./Checkbox.group.test.svelte";
4+
import CheckboxSkeleton from "./Checkbox.skeleton.test.svelte";
65
import CheckboxSlot from "./Checkbox.slot.test.svelte";
6+
import Checkbox from "./Checkbox.test.svelte";
77

88
describe("Checkbox", () => {
99
beforeEach(() => {
@@ -17,13 +17,15 @@ describe("Checkbox", () => {
1717
expect(checkbox).toBeInTheDocument();
1818

1919
const input = checkbox.querySelector("input[type='checkbox']");
20+
assert(input);
2021
expect(input).not.toBeChecked();
2122
expect(input).not.toBeDisabled();
2223
expect(input).not.toHaveAttribute("indeterminate");
2324

2425
const label = checkbox.querySelector("label");
26+
assert(label);
2527
expect(label).toHaveTextContent("Checkbox label");
26-
const hiddenElement = label?.querySelector(".bx--visually-hidden");
28+
const hiddenElement = label.querySelector(".bx--visually-hidden");
2729
expect(hiddenElement).not.toBeInTheDocument();
2830
});
2931

@@ -33,6 +35,7 @@ describe("Checkbox", () => {
3335
const input = screen
3436
.getByTestId("checkbox")
3537
.querySelector("input[type='checkbox']");
38+
assert(input);
3639
expect(input).toBeChecked();
3740
});
3841

@@ -42,7 +45,8 @@ describe("Checkbox", () => {
4245

4346
const input = screen
4447
.getByTestId("checkbox")
45-
.querySelector("input[type='checkbox']") as HTMLInputElement;
48+
.querySelector("input[type='checkbox']");
49+
assert(input);
4650
await user.click(input);
4751
expect(consoleLog).toHaveBeenCalledWith("check");
4852
expect(consoleLog).toHaveBeenCalledWith("click");
@@ -54,7 +58,9 @@ describe("Checkbox", () => {
5458

5559
const input = screen
5660
.getByTestId("checkbox")
57-
.querySelector("input[type='checkbox']") as HTMLInputElement;
61+
.querySelector("input[type='checkbox']");
62+
assert(input);
63+
assert(input instanceof HTMLInputElement);
5864
expect(input.indeterminate).toBe(true);
5965
});
6066

@@ -64,21 +70,24 @@ describe("Checkbox", () => {
6470
const input = screen
6571
.getByTestId("checkbox")
6672
.querySelector("input[type='checkbox']");
73+
assert(input);
6774
expect(input).toBeDisabled();
6875
});
6976

7077
it("renders with hidden label", () => {
7178
render(Checkbox, { hideLabel: true });
7279

7380
const label = screen.getByTestId("checkbox").querySelector("label");
74-
const hiddenElement = label?.querySelector(".bx--visually-hidden");
81+
assert(label);
82+
const hiddenElement = label.querySelector(".bx--visually-hidden");
7583
expect(hiddenElement).toBeInTheDocument();
7684
});
7785

7886
it("renders with custom label text", () => {
7987
render(Checkbox, { labelText: "Custom label" });
8088

8189
const label = screen.getByTestId("checkbox").querySelector("label");
90+
assert(label);
8291
expect(label).toHaveTextContent("Custom label");
8392
});
8493

@@ -101,13 +110,16 @@ describe("Checkbox", () => {
101110

102111
const checkbox1 = screen
103112
.getByTestId("checkbox-1")
104-
.querySelector("input[type='checkbox']") as HTMLInputElement;
113+
.querySelector("input[type='checkbox']");
105114
const checkbox2 = screen
106115
.getByTestId("checkbox-2")
107-
.querySelector("input[type='checkbox']") as HTMLInputElement;
116+
.querySelector("input[type='checkbox']");
108117
const checkbox3 = screen
109118
.getByTestId("checkbox-3")
110-
.querySelector("input[type='checkbox']") as HTMLInputElement;
119+
.querySelector("input[type='checkbox']");
120+
assert(checkbox1);
121+
assert(checkbox2);
122+
assert(checkbox3);
111123

112124
expect(checkbox1).not.toBeChecked();
113125
expect(checkbox2).toBeChecked();

‎tests/Select/Select.test.ts‎

Lines changed: 48 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { render, screen } from "@testing-library/svelte";
22
import { user } from "../setup-tests";
3-
import Select from "./Select.test.svelte";
3+
import SelectFalsy from "./Select.falsy.test.svelte";
44
import SelectGroup from "./Select.group.test.svelte";
55
import SelectSkeleton from "./Select.skeleton.test.svelte";
6-
import SelectFalsy from "./Select.falsy.test.svelte";
6+
import Select from "./Select.test.svelte";
77

88
describe("Select", () => {
99
beforeEach(() => {
@@ -17,10 +17,12 @@ describe("Select", () => {
1717
expect(select).toBeInTheDocument();
1818

1919
const label = select.querySelector("label");
20+
assert(label);
2021
expect(label).toHaveTextContent("Select label");
2122
expect(label).not.toHaveClass("bx--visually-hidden");
2223

23-
const selectElement = select.querySelector("select") as HTMLSelectElement;
24+
const selectElement = select.querySelector("select");
25+
assert(selectElement);
2426
expect(selectElement).not.toBeDisabled();
2527
expect(selectElement).not.toHaveAttribute("aria-invalid");
2628

@@ -33,19 +35,17 @@ describe("Select", () => {
3335
it("renders with selected value", () => {
3436
render(Select, { selected: "option-2" });
3537

36-
const selectElement = screen
37-
.getByTestId("select")
38-
.querySelector("select") as HTMLSelectElement;
38+
const selectElement = screen.getByTestId("select").querySelector("select");
39+
assert(selectElement);
3940
expect(selectElement).toHaveValue("option-2");
4041
});
4142

4243
it("emits events", async () => {
4344
const consoleLog = vi.spyOn(console, "log");
4445
render(Select);
4546

46-
const selectElement = screen
47-
.getByTestId("select")
48-
.querySelector("select") as HTMLSelectElement;
47+
const selectElement = screen.getByTestId("select").querySelector("select");
48+
assert(selectElement);
4949
await user.selectOptions(selectElement, "option-2");
5050

5151
expect(consoleLog).toHaveBeenCalledWith("change");
@@ -56,27 +56,24 @@ describe("Select", () => {
5656

5757
it("renders default size", () => {
5858
render(Select);
59-
const selectElement = screen
60-
.getByTestId("select")
61-
.querySelector("select") as HTMLSelectElement;
59+
const selectElement = screen.getByTestId("select").querySelector("select");
60+
assert(selectElement);
6261
expect(selectElement).not.toHaveClass("bx--select-input--sm");
6362
expect(selectElement).not.toHaveClass("bx--select-input--xl");
6463
});
6564

6665
it("renders small size variant", () => {
6766
render(Select, { size: "sm" });
68-
const selectElement = screen
69-
.getByTestId("select")
70-
.querySelector("select") as HTMLSelectElement;
67+
const selectElement = screen.getByTestId("select").querySelector("select");
68+
assert(selectElement);
7169
expect(selectElement).toHaveClass("bx--select-input--sm");
7270
expect(selectElement).not.toHaveClass("bx--select-input--xl");
7371
});
7472

7573
it("renders extra large size variant", () => {
7674
render(Select, { size: "xl" });
77-
const selectElement = screen
78-
.getByTestId("select")
79-
.querySelector("select") as HTMLSelectElement;
75+
const selectElement = screen.getByTestId("select").querySelector("select");
76+
assert(selectElement);
8077
expect(selectElement).not.toHaveClass("bx--select-input--sm");
8178
expect(selectElement).toHaveClass("bx--select-input--xl");
8279
});
@@ -85,55 +82,59 @@ describe("Select", () => {
8582
render(Select);
8683
const selectWrapper = screen
8784
.getByTestId("select")
88-
.querySelector(".bx--select") as HTMLElement;
85+
.querySelector(".bx--select");
86+
assert(selectWrapper);
8987
expect(selectWrapper).not.toHaveClass("bx--select--inline");
9088
});
9189

9290
it("renders inline variant", () => {
9391
render(Select, { inline: true });
9492
const selectWrapper = screen
9593
.getByTestId("select")
96-
.querySelector(".bx--select") as HTMLElement;
94+
.querySelector(".bx--select");
95+
assert(selectWrapper);
9796
expect(selectWrapper).toHaveClass("bx--select--inline");
9897
});
9998

10099
it("renders default theme", () => {
101100
render(Select);
102101
const selectWrapper = screen
103102
.getByTestId("select")
104-
.querySelector(".bx--select") as HTMLElement;
103+
.querySelector(".bx--select");
104+
assert(selectWrapper);
105105
expect(selectWrapper).not.toHaveClass("bx--select--light");
106106
});
107107

108108
it("renders light theme", () => {
109109
render(Select, { light: true });
110110
const selectWrapper = screen
111111
.getByTestId("select")
112-
.querySelector(".bx--select") as HTMLElement;
112+
.querySelector(".bx--select");
113+
assert(selectWrapper);
113114
expect(selectWrapper).toHaveClass("bx--select--light");
114115
});
115116

116117
it("renders enabled by default", () => {
117118
render(Select);
118-
const selectElement = screen
119-
.getByTestId("select")
120-
.querySelector("select") as HTMLSelectElement;
119+
const selectElement = screen.getByTestId("select").querySelector("select");
120+
assert(selectElement);
121121
expect(selectElement).not.toBeDisabled();
122122
});
123123

124124
it("renders disabled state", () => {
125125
render(Select, { disabled: true });
126-
const selectElement = screen
127-
.getByTestId("select")
128-
.querySelector("select") as HTMLSelectElement;
126+
const selectElement = screen.getByTestId("select").querySelector("select");
127+
assert(selectElement);
129128
expect(selectElement).toBeDisabled();
130129
});
131130

132131
it("renders valid by default", () => {
133132
render(Select);
134133
const wrapper = screen.getByTestId("select");
135-
const selectElement = wrapper.querySelector("select") as HTMLSelectElement;
136-
const selectWrapper = wrapper.querySelector(".bx--select") as HTMLElement;
134+
const selectElement = wrapper.querySelector("select");
135+
const selectWrapper = wrapper.querySelector(".bx--select");
136+
assert(selectElement);
137+
assert(selectWrapper);
137138

138139
expect(selectWrapper).not.toHaveClass("bx--select--invalid");
139140
expect(selectElement).not.toHaveAttribute("aria-invalid");
@@ -149,8 +150,10 @@ describe("Select", () => {
149150
});
150151

151152
const wrapper = screen.getByTestId("select");
152-
const selectElement = wrapper.querySelector("select") as HTMLSelectElement;
153-
const selectWrapper = wrapper.querySelector(".bx--select") as HTMLElement;
153+
const selectElement = wrapper.querySelector("select");
154+
const selectWrapper = wrapper.querySelector(".bx--select");
155+
assert(selectElement);
156+
assert(selectWrapper);
154157

155158
expect(selectWrapper).toHaveClass("bx--select--invalid");
156159
expect(selectElement).toHaveAttribute("aria-invalid", "true");
@@ -162,7 +165,8 @@ describe("Select", () => {
162165
it("renders without warning by default", () => {
163166
render(Select);
164167
const wrapper = screen.getByTestId("select");
165-
const selectWrapper = wrapper.querySelector(".bx--select") as HTMLElement;
168+
const selectWrapper = wrapper.querySelector(".bx--select");
169+
assert(selectWrapper);
166170

167171
expect(selectWrapper).not.toHaveClass("bx--select--warning");
168172
expect(
@@ -177,7 +181,8 @@ describe("Select", () => {
177181
});
178182

179183
const wrapper = screen.getByTestId("select");
180-
const selectWrapper = wrapper.querySelector(".bx--select") as HTMLElement;
184+
const selectWrapper = wrapper.querySelector(".bx--select");
185+
assert(selectWrapper);
181186
expect(selectWrapper).toHaveClass("bx--select--warning");
182187
expect(wrapper.querySelector(".bx--form-requirement")).toHaveTextContent(
183188
"Warning message",
@@ -195,31 +200,31 @@ describe("Select", () => {
195200
render(Select, { helperText: "Helper text" });
196201
const helperElement = screen
197202
.getByTestId("select")
198-
.querySelector(".bx--form__helper-text") as HTMLElement;
203+
.querySelector(".bx--form__helper-text");
204+
assert(helperElement);
199205
expect(helperElement).toHaveTextContent("Helper text");
200206
});
201207

202208
it("renders visible label by default", () => {
203209
render(Select);
204-
const label = screen
205-
.getByTestId("select")
206-
.querySelector("label") as HTMLElement;
210+
const label = screen.getByTestId("select").querySelector("label");
211+
assert(label);
207212
expect(label).not.toHaveClass("bx--visually-hidden");
208213
});
209214

210215
it("renders with hidden label", () => {
211216
render(Select, { hideLabel: true });
212-
const label = screen
213-
.getByTestId("select")
214-
.querySelector("label") as HTMLElement;
217+
const label = screen.getByTestId("select").querySelector("label");
218+
assert(label);
215219
expect(label).toHaveClass("bx--visually-hidden");
216220
});
217221

218222
it("renders with SelectItemGroup", () => {
219223
render(SelectGroup);
220224

221225
const select = screen.getByTestId("select-group");
222-
const selectElement = select.querySelector("select") as HTMLSelectElement;
226+
const selectElement = select.querySelector("select");
227+
assert(selectElement);
223228
const optgroups = selectElement.querySelectorAll("optgroup");
224229

225230
expect(optgroups).toHaveLength(2);
@@ -246,7 +251,7 @@ describe("Select", () => {
246251
expect(screen.getByLabelText("Falsy text")).toHaveValue("-1");
247252
expect(screen.getByRole("option", { name: "" })).toBeInTheDocument();
248253
});
249-
254+
250255
it("renders value if `text` is undefined", () => {
251256
render(SelectFalsy);
252257

0 commit comments

Comments
 (0)