|
1 |
| -import { ReactRenderer } from "@storybook/react"; |
| 1 | +import { contexts } from "@maykin-ui/admin-ui"; |
| 2 | +import { Parameters, ReactRenderer } from "@storybook/react"; |
2 | 3 | import { expect, userEvent, waitFor, within } from "@storybook/test";
|
3 | 4 | import { PlayFunction } from "@storybook/types";
|
4 | 5 |
|
| 6 | +// |
| 7 | +// Assertions |
| 8 | +// |
| 9 | + |
5 | 10 | /**
|
6 | 11 | * Selects and deselects the "Identificatie" column and asserts whether it's shown/hidden based on the selected state.
|
7 | 12 | * @param canvasElement
|
@@ -124,3 +129,193 @@ export const assertColumnSelection: PlayFunction<ReactRenderer> = async ({
|
124 | 129 | });
|
125 | 130 | expect(identificatieColumn2).toBeVisible();
|
126 | 131 | };
|
| 132 | + |
| 133 | +// |
| 134 | +// Utils |
| 135 | +// |
| 136 | + |
| 137 | +type ClickElementParameters = Parameters & { |
| 138 | + checked?: boolean; |
| 139 | + elementIndex?: number; |
| 140 | + inTBody?: boolean; |
| 141 | + role?: string; |
| 142 | + name?: string; |
| 143 | +}; |
| 144 | + |
| 145 | +/** |
| 146 | + * Clicks button at position `elementIndex`, within <tbody> if `inTbody` is truthy. |
| 147 | + * @param context |
| 148 | + */ |
| 149 | +export const clickButton: PlayFunction<ReactRenderer> = async (context) => { |
| 150 | + await clickElement({ |
| 151 | + ...context, |
| 152 | + parameters: { |
| 153 | + ...context.parameters, |
| 154 | + role: "button", |
| 155 | + }, |
| 156 | + }); |
| 157 | +}; |
| 158 | + |
| 159 | +/** |
| 160 | + * Clicks checkbox at position `elementIndex`, within <tbody> if `inTbody` is truthy. |
| 161 | + * @param context |
| 162 | + */ |
| 163 | +export const clickCheckbox: PlayFunction<ReactRenderer> = async (context) => { |
| 164 | + await clickElement({ |
| 165 | + ...context, |
| 166 | + parameters: { |
| 167 | + ...context.parameters, |
| 168 | + role: "checkbox", |
| 169 | + }, |
| 170 | + }); |
| 171 | +}; |
| 172 | + |
| 173 | +/** |
| 174 | + * Clicks element at position `elementIndex`, within <tbody> if `inTbody` is truthy. |
| 175 | + * @param context |
| 176 | + */ |
| 177 | +export const clickElement: PlayFunction<ReactRenderer> = async (context) => { |
| 178 | + const { |
| 179 | + checked, |
| 180 | + elementIndex = 0, |
| 181 | + inTBody = false, |
| 182 | + role, |
| 183 | + name, |
| 184 | + } = context.parameters as ClickElementParameters; |
| 185 | + |
| 186 | + console.assert( |
| 187 | + role, |
| 188 | + 'clickElement requires an element role be set using the "role" parameter!', |
| 189 | + ); |
| 190 | + |
| 191 | + const canvas = within(context.canvasElement); |
| 192 | + const rowGroups = await canvas.findAllByRole("rowgroup"); |
| 193 | + |
| 194 | + const tbody = rowGroups.find((rg) => { |
| 195 | + return rg.tagName === "TBODY"; |
| 196 | + }) as HTMLTableSectionElement; |
| 197 | + |
| 198 | + const elements = await within( |
| 199 | + inTBody ? tbody : context.canvasElement, |
| 200 | + // @ts-expect-error - role now set. |
| 201 | + ).findAllByRole(role, { name }); |
| 202 | + |
| 203 | + const element = elements[elementIndex]; |
| 204 | + |
| 205 | + const checkedState = (element as HTMLInputElement).checked; |
| 206 | + |
| 207 | + // Normalize state. |
| 208 | + if (typeof checked !== "undefined" && checked === checkedState) { |
| 209 | + await userEvent.click(element, { delay: 10 }); |
| 210 | + } |
| 211 | + |
| 212 | + await userEvent.click(element, { delay: 10 }); |
| 213 | +}; |
| 214 | + |
| 215 | +type FillFormParameters = Parameters & { |
| 216 | + form?: HTMLFormElement; |
| 217 | + formValues?: Record<string, boolean | string>; |
| 218 | + submitForm?: boolean; |
| 219 | +}; |
| 220 | + |
| 221 | +/** |
| 222 | + * Fills in `form` with `formValues`, then submits if `submitForm` is truthy. |
| 223 | + * @param context |
| 224 | + */ |
| 225 | +export const fillForm: PlayFunction<ReactRenderer> = async (context) => { |
| 226 | + const canvas = within(context.canvasElement); |
| 227 | + |
| 228 | + const { |
| 229 | + form = await canvas.findByRole("form"), |
| 230 | + formValues = {}, |
| 231 | + submitForm = true, |
| 232 | + } = context.parameters as FillFormParameters; |
| 233 | + |
| 234 | + for (const [name, value] of Object.entries(formValues)) { |
| 235 | + const field: HTMLInputElement | HTMLSelectElement = |
| 236 | + await within(form).findByLabelText(name); |
| 237 | + |
| 238 | + switch (typeof value) { |
| 239 | + case "boolean": |
| 240 | + const checkbox = field as HTMLInputElement; |
| 241 | + if (checkbox.checked !== value) { |
| 242 | + await userEvent.click(checkbox, { delay: 100 }); |
| 243 | + } |
| 244 | + break; |
| 245 | + case "string": |
| 246 | + if ((field as HTMLSelectElement).options) { |
| 247 | + const select = field as HTMLSelectElement; |
| 248 | + await userEvent.click(select, { delay: 100 }); |
| 249 | + const option = (await within(form).findAllByText(value))[0]; |
| 250 | + await userEvent.click(option, { delay: 100 }); |
| 251 | + } else { |
| 252 | + const input = field as HTMLInputElement; |
| 253 | + await userEvent.type(input, value, { delay: 10 }); |
| 254 | + } |
| 255 | + } |
| 256 | + } |
| 257 | + |
| 258 | + if (submitForm) { |
| 259 | + const buttons = await within(form).findAllByRole("button"); |
| 260 | + // Assume that last button is submit. |
| 261 | + const submit = buttons[buttons.length - 1]; |
| 262 | + await userEvent.click(submit, { delay: 100 }); |
| 263 | + } |
| 264 | +}; |
| 265 | + |
| 266 | +type FillConfirmationFormParameters = ClickElementParameters & |
| 267 | + FillFormParameters; |
| 268 | + |
| 269 | +/** |
| 270 | + * Clicks element at position `elementIndex`, within <tbody> if `inTbody` is truthy. |
| 271 | + * Then fills in dialog form, submits if `submitForm` is truthy. |
| 272 | + * @param context |
| 273 | + */ |
| 274 | +export const fillButtonConfirmationForm: PlayFunction<ReactRenderer> = async ( |
| 275 | + context, |
| 276 | +) => { |
| 277 | + await fillConfirmationForm({ |
| 278 | + ...context, |
| 279 | + parameters: { ...context.parameters, role: "button" }, |
| 280 | + }); |
| 281 | +}; |
| 282 | + |
| 283 | +/** |
| 284 | + * Clicks element at position `elementIndex`, within <tbody> if `inTbody` is truthy. |
| 285 | + * Then fills in dialog form, submits if `submitForm` is truthy. |
| 286 | + * @param context |
| 287 | + */ |
| 288 | +export const fillCheckboxConfirmationForm: PlayFunction<ReactRenderer> = async ( |
| 289 | + context, |
| 290 | +) => { |
| 291 | + await fillConfirmationForm({ |
| 292 | + ...context, |
| 293 | + parameters: { ...context.parameters, checked: true, role: "checkbox" }, |
| 294 | + }); |
| 295 | +}; |
| 296 | + |
| 297 | +/** |
| 298 | + * Clicks element at position `elementIndex`, within <tbody> if `inTbody` is truthy. |
| 299 | + * Then fills in dialog form, submits if `submitForm` is truthy. |
| 300 | + * @param context |
| 301 | + */ |
| 302 | +export const fillConfirmationForm: PlayFunction<ReactRenderer> = async ( |
| 303 | + context, |
| 304 | +) => { |
| 305 | + const parameters = context.parameters as FillConfirmationFormParameters; |
| 306 | + const _context = { ...context, parameters }; |
| 307 | + await clickElement(_context); |
| 308 | + |
| 309 | + const canvas = within(context.canvasElement); |
| 310 | + const modal = await canvas.findByRole("dialog"); |
| 311 | + // FIXME: Fix in admin-ui form should be picked up by role. |
| 312 | + // const form = await within(modal).findByRole("form", {}, { timeout: 3000 }); |
| 313 | + |
| 314 | + await fillForm({ |
| 315 | + ..._context, |
| 316 | + parameters: { |
| 317 | + ...parameters, |
| 318 | + form: modal, |
| 319 | + }, |
| 320 | + }); |
| 321 | +}; |
0 commit comments