Skip to content

Commit 869e599

Browse files
tomodwyertomodwyer
committed
Add tests for codelist-table file
1 parent f3186b1 commit 869e599

3 files changed

Lines changed: 182 additions & 12 deletions

File tree

‎assets/src/scripts/__tests__/codelists-table.test.ts‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
import "@testing-library/jest-dom";
2+
import { screen } from "@testing-library/dom";
3+
import userEvent from "@testing-library/user-event";
4+
import { beforeEach, describe, expect, it, vi } from "vitest";
5+
6+
const loadScript = async () => {
7+
await import("../codelists-table");
8+
};
9+
10+
const getSearchInput = (): HTMLInputElement => {
11+
const searchInput = screen.getByRole("searchbox", {
12+
name: "Search codelists",
13+
});
14+
15+
if (!(searchInput instanceof HTMLInputElement)) {
16+
throw new Error("Expected search input to be an HTMLInputElement");
17+
}
18+
19+
return searchInput;
20+
};
21+
22+
describe("codelists-table", () => {
23+
beforeEach(() => {
24+
vi.resetModules();
25+
document.body.innerHTML = "";
26+
});
27+
28+
it("filters on module init and on subsequent input events", async () => {
29+
document.body.innerHTML = `
30+
<label for="codelist-search">Search codelists</label>
31+
<input id="codelist-search" data-codelist-search-input type="search" />
32+
<table data-codelist-search-table>
33+
<tbody>
34+
<tr>
35+
<td data-codelist-search-cell>Asthma</td>
36+
<td data-codelist-search-cell>SNOMED</td>
37+
<td>8 codes</td>
38+
<td>01 Jan 2026</td>
39+
</tr>
40+
<tr>
41+
<td data-codelist-search-cell>Breathlessness</td>
42+
<td data-codelist-search-cell>dm+d</td>
43+
<td>12 codes</td>
44+
<td>04 Feb 2026</td>
45+
</tr>
46+
<tr>
47+
<td data-codelist-search-cell>Dyspnea</td>
48+
<td data-codelist-search-cell>CTV3</td>
49+
<td>12 codes</td>
50+
<td>04 Feb 2026</td>
51+
</tr>
52+
<tr class="hidden bg-white text-slate-700" data-codelist-search-no-results>
53+
<td colspan="4">No codelists found</td>
54+
</tr>
55+
</tbody>
56+
</table>
57+
`;
58+
59+
await loadScript();
60+
const user = userEvent.setup();
61+
const searchInput = getSearchInput();
62+
63+
expect(
64+
screen.getByRole("cell", { name: "Asthma" }).parentElement,
65+
).not.toHaveClass("hidden");
66+
expect(
67+
screen.getByRole("cell", { name: "Breathlessness" }).parentElement,
68+
).not.toHaveClass("hidden");
69+
expect(
70+
screen.getByRole("cell", { name: "Dyspnea" }).parentElement,
71+
).not.toHaveClass("hidden");
72+
expect(screen.getByRole("row", { name: "No codelists found" })).toHaveClass(
73+
"hidden",
74+
);
75+
76+
await user.type(searchInput, " not a match ");
77+
78+
expect(
79+
screen.getByRole("cell", { name: "Asthma" }).parentElement,
80+
).toHaveClass("hidden");
81+
expect(
82+
screen.getByRole("cell", { name: "Breathlessness" }).parentElement,
83+
).toHaveClass("hidden");
84+
expect(
85+
screen.getByRole("cell", { name: "Dyspnea" }).parentElement,
86+
).toHaveClass("hidden");
87+
expect(
88+
screen.getByRole("row", { name: "No codelists found" }),
89+
).not.toHaveClass("hidden");
90+
91+
await user.clear(searchInput);
92+
93+
expect(
94+
screen.getByRole("cell", { name: "Asthma" }).parentElement,
95+
).not.toHaveClass("hidden");
96+
expect(
97+
screen.getByRole("cell", { name: "Breathlessness" }).parentElement,
98+
).not.toHaveClass("hidden");
99+
expect(
100+
screen.getByRole("cell", { name: "Dyspnea" }).parentElement,
101+
).not.toHaveClass("hidden");
102+
expect(screen.getByRole("row", { name: "No codelists found" })).toHaveClass(
103+
"hidden",
104+
);
105+
106+
await user.type(searchInput, " Breathless ");
107+
108+
expect(
109+
screen.getByRole("cell", { name: "Asthma" }).parentElement,
110+
).toHaveClass("hidden");
111+
expect(
112+
screen.getByRole("cell", { name: "Breathlessness" }).parentElement,
113+
).not.toHaveClass("hidden");
114+
expect(
115+
screen.getByRole("cell", { name: "Dyspnea" }).parentElement,
116+
).toHaveClass("hidden");
117+
expect(screen.getByRole("row", { name: "No codelists found" })).toHaveClass(
118+
"hidden",
119+
);
120+
});
121+
122+
it("returns early when required DOM elements are missing", async () => {
123+
document.body.innerHTML = "<p>No table on this page</p>";
124+
125+
await expect(loadScript()).resolves.toBeUndefined();
126+
});
127+
128+
it("filters using text from searchable cells", async () => {
129+
document.body.innerHTML = `
130+
<label for="codelist-search">Search codelists</label>
131+
<input id="codelist-search" data-codelist-search-input type="search" />
132+
<table data-codelist-search-table>
133+
<tbody>
134+
<tr>
135+
<td data-codelist-search-cell></td>
136+
<td data-codelist-search-cell>SNOMED</td>
137+
<td>8 codes</td>
138+
<td>01 Jan 2026</td>
139+
</tr>
140+
<tr>
141+
<td data-codelist-search-cell>Breathlessness</td>
142+
<td data-codelist-search-cell>dm+d</td>
143+
<td>12 codes</td>
144+
<td>04 Feb 2026</td>
145+
</tr>
146+
<tr>
147+
<td data-codelist-search-cell>Dyspnea</td>
148+
<td data-codelist-search-cell>CTV3</td>
149+
<td>12 codes</td>
150+
<td>04 Feb 2026</td>
151+
</tr>
152+
<tr class="hidden bg-white text-slate-700" data-codelist-search-no-results>
153+
<td colspan="4">No codelists found</td>
154+
</tr>
155+
</tbody>
156+
</table>
157+
`;
158+
159+
await loadScript();
160+
const user = userEvent.setup();
161+
const searchInput = getSearchInput();
162+
await user.type(searchInput, "snomed");
163+
164+
expect(
165+
screen.getByRole("cell", { name: "SNOMED" }).parentElement,
166+
).not.toHaveClass("hidden");
167+
expect(
168+
screen.getByRole("cell", { name: "Breathlessness" }).parentElement,
169+
).toHaveClass("hidden");
170+
expect(
171+
screen.getByRole("cell", { name: "Dyspnea" }).parentElement,
172+
).toHaveClass("hidden");
173+
expect(screen.getByRole("row", { name: "No codelists found" })).toHaveClass(
174+
"hidden",
175+
);
176+
});
177+
});

‎package-lock.json‎

Lines changed: 4 additions & 12 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
},
1616
"devDependencies": {
1717
"@biomejs/biome": "^2.3.11",
18+
"@testing-library/dom": "^10.4.1",
1819
"@testing-library/jest-dom": "^6.9.1",
1920
"@testing-library/react": "^16.3.2",
2021
"@testing-library/user-event": "^14.6.1",

0 commit comments

Comments
 (0)