Skip to content

Commit 70be0e6

Browse files
✅ - test: improve Storybook (play) tests
1 parent 8a40102 commit 70be0e6

16 files changed

+962
-575
lines changed

frontend/.storybook/playFunctions.ts

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
import { ReactRenderer } from "@storybook/react";
2+
import { expect, userEvent, waitFor, within } from "@storybook/test";
3+
import { PlayFunction } from "@storybook/types";
4+
5+
/**
6+
* Selects and deselects the "Identificatie" column and asserts whether it's shown/hidden based on the selected state.
7+
* @param canvasElement
8+
*/
9+
export const assertCheckboxSelection: PlayFunction<ReactRenderer> = async ({
10+
canvasElement,
11+
parameters,
12+
}) => {
13+
const canvas = within(canvasElement);
14+
15+
// Get checkboxes.
16+
const rowGroups = await canvas.findAllByRole("rowgroup");
17+
const tbody = rowGroups.find((rg) => {
18+
return rg.tagName === "TBODY";
19+
}) as HTMLTableSectionElement;
20+
const checkboxes =
21+
await within(tbody).findAllByRole<HTMLInputElement>("checkbox");
22+
23+
await waitFor(() => new Promise((resolve) => setTimeout(resolve)));
24+
25+
// Normalize state.
26+
for (const checkbox of checkboxes) {
27+
if (checkbox.checked) {
28+
await userEvent.click(checkbox, { delay: 10 });
29+
}
30+
}
31+
32+
// Check if all (are/remain) unchecked.
33+
for (const checkbox of checkboxes) {
34+
expect(checkbox).not.toBeChecked();
35+
}
36+
37+
// One by one check every checkbox.
38+
for (const checkbox of checkboxes) {
39+
await userEvent.click(checkbox, { delay: 10 });
40+
}
41+
42+
// Check if all (are/remain) checked.
43+
for (const checkbox of checkboxes) {
44+
expect(checkbox).toBeChecked();
45+
}
46+
47+
// Stop if forwards direction is used.
48+
if (parameters?.direction === "forwards") {
49+
return;
50+
}
51+
52+
// One by one uncheck every checkbox.
53+
for (const checkbox of checkboxes) {
54+
await userEvent.click(checkbox, { delay: 10 });
55+
}
56+
57+
// Check if all (are/remain) unchecked.
58+
for (const checkbox of checkboxes) {
59+
expect(checkbox).not.toBeChecked();
60+
}
61+
};
62+
63+
/**
64+
* Selects and deselects the "Identificatie" column and asserts whether it's shown/hidden based on the selected state.
65+
* @param canvasElement
66+
*/
67+
export const assertColumnSelection: PlayFunction<ReactRenderer> = async ({
68+
canvasElement,
69+
}) => {
70+
const canvas = within(canvasElement);
71+
72+
// Get grid and "Select columns" button.
73+
const grid = await canvas.findByRole("grid");
74+
const selectColumnsButton = await canvas.findByRole<HTMLButtonElement>(
75+
"button",
76+
{
77+
name: "Select columns",
78+
},
79+
);
80+
81+
// Modal should not be present at this time.
82+
expect(within(grid).queryByRole("dialog")).toBeNull();
83+
84+
// Modal should when "Select columns" is clicked.
85+
await userEvent.click(selectColumnsButton, { delay: 100 });
86+
const modal = await canvas.findByRole("dialog");
87+
await expect(modal).toBeVisible();
88+
89+
// Get "Identificatie" checkbox in modal.
90+
const identificatieCheckbox =
91+
within(modal).getByLabelText<HTMLInputElement>("Identificatie");
92+
const saveColumnSelection = await within(modal).findByRole<HTMLButtonElement>(
93+
"button",
94+
{
95+
name: "Save column selection",
96+
},
97+
);
98+
99+
// Normalize state.
100+
if (!identificatieCheckbox.checked) {
101+
await userEvent.click(identificatieCheckbox);
102+
await userEvent.click(saveColumnSelection);
103+
await userEvent.click(selectColumnsButton);
104+
}
105+
106+
// Expect the "Identificatie" column to be visible.
107+
const identificatieColumnHeader = await canvas.findByRole("columnheader", {
108+
name: "Identificatie",
109+
});
110+
expect(identificatieColumnHeader).toBeVisible();
111+
112+
// Unselecting the column and saving should hide the "Identificatie" column.
113+
await userEvent.click(identificatieCheckbox, { delay: 100 });
114+
await userEvent.click(saveColumnSelection, { delay: 100 });
115+
expect(identificatieColumnHeader).not.toBeVisible();
116+
117+
// Unselecting the column and saving should show the "Identificatie" column.
118+
await userEvent.click(selectColumnsButton, { delay: 100 });
119+
await userEvent.click(identificatieCheckbox, { delay: 100 });
120+
await userEvent.click(saveColumnSelection, { delay: 100 });
121+
// Re-fetch node.
122+
const identificatieColumn2 = await canvas.findByRole("columnheader", {
123+
name: "Identificatie",
124+
});
125+
expect(identificatieColumn2).toBeVisible();
126+
};

frontend/package-lock.json

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

frontend/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@maykin-ui/admin-ui": "^0.0.17",
6+
"@maykin-ui/admin-ui": "^0.0.18",
77
"@storybook/test-runner": "^0.18.2",
88
"@testing-library/jest-dom": "^5.17.0",
99
"@testing-library/react": "^13.4.0",

frontend/src/fixtures/destructionList.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { DestructionList } from "../lib/api/destructionLists";
2-
import { FIXTURE_USERS } from "./users";
2+
import { FIXTURE_USERS } from "./user";
33

44
export const FIXTURE_DESTRUCTION_LIST: DestructionList = {
55
pk: 1,
@@ -10,6 +10,6 @@ export const FIXTURE_DESTRUCTION_LIST: DestructionList = {
1010
status: "ready_to_review",
1111
assignees: FIXTURE_USERS.map((u, i) => ({ user: u, order: i })),
1212
assignee: FIXTURE_USERS[0],
13-
created: "2024-07-11:16:57",
13+
created: "2024-07-11T16:57",
1414
statusChanged: "2024-07-11:16:57",
1515
};

0 commit comments

Comments
 (0)