✅ - test: improve coverage for frontend

svenvandescheur · svenvandescheur · commit db69f7958de8 · 2024-12-16T13:07:05.000+01:00
diff --git a/frontend/.storybook/decorators.tsx b/frontend/.storybook/decorators.tsx
@@ -29,6 +29,7 @@ export const ReactRouterDecorator = (
   Story: StoryFn,
   { parameters }: StoryContext,
 ) => {
+  const { id, ...params } = parameters.reactRouterDecorator?.route || {};
   const router = createBrowserRouter([
     {
       path: "",
@@ -39,9 +40,22 @@ export const ReactRouterDecorator = (
       },
       children: [
         {
+          id: id,
           path: "/iframe.html",
           element: <Story />,
-          ...parameters.reactRouterDecorator?.route,
+          ...params,
+        },
+        {
+          path: "*?", // On redirect.
+          Component: () => {
+            const container = window.frameElement
+              ? // @ts-expect-error - This does exist.
+                window.frameElement.contentWindow
+              : window;
+            container.history.go(-1);
+          },
+          ...params,
+          id: "foo",
         },
       ],
     },
diff --git a/frontend/.storybook/mockData.ts b/frontend/.storybook/mockData.ts
@@ -1,11 +1,16 @@
 import { auditLogFactory } from "../src/fixtures/auditLog";
 import { coReviewsFactory } from "../src/fixtures/coReview";
-import { destructionListAssigneesFactory } from "../src/fixtures/destructionList";
+import {
+  FIXTURE_DESTRUCTION_LIST,
+  destructionListAssigneesFactory,
+} from "../src/fixtures/destructionList";
+import { FIXTURE_DESTRUCTION_LIST_ITEM } from "../src/fixtures/destructionListItem";
 import { FIXTURE_SELECTIELIJSTKLASSE_CHOICES } from "../src/fixtures/selectieLijstKlasseChoices";
 import { userFactory, usersFactory } from "../src/fixtures/user";
 import { zaaktypeChoicesFactory } from "../src/fixtures/zaaktypeChoices";
 
 export const MOCKS = {
+  // READS
   AUDIT_LOG: {
     url: "http://localhost:8000/api/v1/logs?destruction-list=00000000-0000-0000-0000-000000000000",
     method: "GET",
@@ -93,6 +98,38 @@ export const MOCKS = {
     status: 200,
     response: zaaktypeChoicesFactory(),
   },
+
+  // WRITES
+  DESTRUCTION_LIST_CREATE: {
+    url: "http://localhost:8000/api/v1/destruction-lists/",
+    method: "POST",
+    status: "201",
+    response: FIXTURE_DESTRUCTION_LIST,
+  },
+  DESTRUCTION_LIST_UPDATE: {
+    url: "http://localhost:8000/api/v1/destruction-lists/undefined", // FIXME
+    method: "PATCH",
+    status: "200",
+    response: FIXTURE_DESTRUCTION_LIST,
+  },
+  DESTRUCTION_LIST_DELETE: {
+    url: "http://localhost:8000/api/v1/destruction-lists/00000000-0000-0000-0000-000000000000", // FIXME
+    method: "DELETE",
+    status: "200",
+    response: {},
+  },
+  DESTRUCTION_LIST_PROCESS_ABORT: {
+    url: "http://localhost:8000/api/v1/destruction-lists/00000000-0000-0000-0000-000000000000/abort",
+    method: "POST",
+    status: "200",
+    response: {},
+  },
+  REVIEW_RESPONSE_CREATE: {
+    url: "http://localhost:8000/api/v1/review-responses/",
+    method: "POST",
+    status: "201",
+    response: {},
+  },
 };
 
 export const MOCK_BASE = Object.values(MOCKS);
diff --git a/frontend/.storybook/playFunctions.ts b/frontend/.storybook/playFunctions.ts
@@ -9,6 +9,7 @@ import { PlayFunction } from "@storybook/types";
 /**
  * Selects and deselects the "Identificatie" column and asserts whether it's shown/hidden based on the selected state.
  * @param canvasElement
+ * @param parameters
  */
 export const assertCheckboxSelection: PlayFunction<ReactRenderer> = async ({
   canvasElement,
@@ -49,7 +50,7 @@ export const assertCheckboxSelection: PlayFunction<ReactRenderer> = async ({
   }
 
   // Stop if forwards direction is used.
-  if (parameters?.direction === "forwards") {
+  if (parameters?.assertCheckboxSelection?.direction === "forwards") {
     return;
   }
 
@@ -149,7 +150,7 @@ export const clickButton: PlayFunction<ReactRenderer> = async (context) => {
   await clickElement({
     ...context,
     parameters: {
-      ...context.parameters,
+      clickElement: { role: "button", ...context.parameters?.clickButton },
       role: "button",
     },
   });
@@ -163,7 +164,7 @@ export const clickCheckbox: PlayFunction<ReactRenderer> = async (context) => {
   await clickElement({
     ...context,
     parameters: {
-      ...context.parameters,
+      clickElement: { role: "checkbox", ...context.parameters.clickCheckbox },
       role: "checkbox",
     },
   });
@@ -175,12 +176,12 @@ export const clickCheckbox: PlayFunction<ReactRenderer> = async (context) => {
  */
 export const clickElement: PlayFunction<ReactRenderer> = async (context) => {
   const {
-    checked,
+    checked = false,
     elementIndex = 0,
     inTBody = false,
     role,
     name,
-  } = context.parameters as ClickElementParameters;
+  } = context.parameters.clickElement as ClickElementParameters;
 
   console.assert(
     role,
@@ -201,13 +202,6 @@ export const clickElement: PlayFunction<ReactRenderer> = async (context) => {
 
   const element = elements[elementIndex];
 
-  const checkedState = (element as HTMLInputElement).checked;
-
-  // Normalize state.
-  if (typeof checked !== "undefined" && checked === checkedState) {
-    await userEvent.click(element, { delay: 10 });
-  }
-
   await userEvent.click(element, { delay: 10 });
 };
 
@@ -225,14 +219,22 @@ export const fillForm: PlayFunction<ReactRenderer> = async (context) => {
   const canvas = within(context.canvasElement);
 
   const {
-    form = await canvas.findByRole("form"),
+    form = (await canvas.queryByRole("form")) ||
+      (await canvas.findByRole("dialog")), // Fixme
     formValues = {},
     submitForm = true,
-  } = context.parameters as FillFormParameters;
+  } = context.parameters.fillForm as FillFormParameters;
+
+  await waitFor(() => expect(form).toBeVisible());
 
   for (const [name, value] of Object.entries(formValues)) {
-    const field: HTMLInputElement | HTMLSelectElement =
-      await within(form).findByLabelText(name);
+    const fields: (HTMLInputElement | HTMLSelectElement)[] =
+      await within(form).findAllByLabelText(name);
+
+    const field =
+      fields.length > 1
+        ? await within(form).findByLabelText(value as string)
+        : fields[0]; // Exception if not found.
 
     switch (typeof value) {
       case "boolean":
@@ -261,46 +263,3 @@ export const fillForm: PlayFunction<ReactRenderer> = async (context) => {
     await userEvent.click(submit, { delay: 100 });
   }
 };
-
-type FillConfirmationFormParameters = ClickElementParameters &
-  FillFormParameters;
-
-/**
- * Clicks element at position `elementIndex`, within <tbody> if `inTbody` is truthy.
- * Then fills in dialog form, submits if `submitForm` is truthy.
- * @param context
- */
-export const fillButtonConfirmationForm: PlayFunction<ReactRenderer> = async (
-  context,
-) => {
-  await fillConfirmationForm({
-    ...context,
-    parameters: { ...context.parameters, role: "button" },
-  });
-};
-
-/**
- * Clicks element at position `elementIndex`, within <tbody> if `inTbody` is truthy.
- * Then fills in dialog form, submits if `submitForm` is truthy.
- * @param context
- */
-export const fillConfirmationForm: PlayFunction<ReactRenderer> = async (
-  context,
-) => {
-  const parameters = context.parameters as FillConfirmationFormParameters;
-  const _context = { ...context, parameters };
-  await clickElement(_context);
-
-  const canvas = within(context.canvasElement);
-  const modal = await canvas.findByRole("dialog");
-  // FIXME: Fix in admin-ui form should be picked up by role.
-  // const form = await within(modal).findByRole("form", {}, { timeout: 3000 });
-
-  await fillForm({
-    ..._context,
-    parameters: {
-      ...parameters,
-      form: modal,
-    },
-  });
-};
diff --git a/frontend/src/components/DestructionListReviewer/DestructionListReviewer.stories.tsx b/frontend/src/components/DestructionListReviewer/DestructionListReviewer.stories.tsx
@@ -105,12 +105,14 @@ const assertEditReviewer: PlayFunction<ReactRenderer> = async (context) => {
   await fillForm({
     ...context,
     parameters: {
-      form: form,
-      formValues: {
-        Beoordelaar: "Proces ei Genaar (Proces ei Genaar)",
-        Reden: "Edit reviewer",
+      fillForm: {
+        form: form,
+        formValues: {
+          Beoordelaar: "Proces ei Genaar (Proces ei Genaar)",
+          Reden: "Edit reviewer",
+        },
+        submitForm: true,
       },
-      submitForm: true,
     },
   });
   await waitFor(() => {
@@ -149,12 +151,14 @@ const assertEditCoReviewers: PlayFunction<ReactRenderer> = async (context) => {
   await fillForm({
     ...context,
     parameters: {
-      form: form,
-      formValues: {
-        "Medebeoordelaar 2": "Co Reviewer (co-reviewer)",
-        Reden: "Edit co-reviewers",
+      fillForm: {
+        form: form,
+        formValues: {
+          "Medebeoordelaar 2": "Co Reviewer (co-reviewer)",
+          Reden: "Edit co-reviewers",
+        },
+        submitForm: true,
       },
-      submitForm: true,
     },
   });
 
diff --git a/frontend/src/fixtures/destructionList.ts b/frontend/src/fixtures/destructionList.ts
@@ -6,7 +6,7 @@ import { createArrayFactory, createObjectFactory } from "./factory";
 import { defaultAssignees } from "./reviewers";
 import { beoordelaarFactory, procesEigenaarFactory, userFactory } from "./user";
 
-const FIXTURE_DESTRUCTION_LIST: DestructionList = {
+export const FIXTURE_DESTRUCTION_LIST: DestructionList = {
   pk: 1,
   uuid: "00000000-0000-0000-0000-000000000000",
   name: "My First Destruction List",
@@ -22,12 +22,10 @@ const FIXTURE_DESTRUCTION_LIST: DestructionList = {
   statusChanged: "2024-07-11:16:57",
 };
 
-const destructionListFactory = createObjectFactory<DestructionList>(
+export const destructionListFactory = createObjectFactory<DestructionList>(
   FIXTURE_DESTRUCTION_LIST,
 );
 
-export { destructionListFactory };
-
 const FIXTURE_DESTRUCTION_LIST_ASSIGNEE: DestructionListAssignee = {
   user: beoordelaarFactory(),
   role: "main_reviewer",
diff --git a/frontend/src/pages/destructionlist/create/DestructionListCreate.stories.tsx b/frontend/src/pages/destructionlist/create/DestructionListCreate.stories.tsx
@@ -1,10 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { userEvent, within } from "@storybook/test";
 
-import { ReactRouterDecorator } from "../../../../.storybook/decorators";
+import {
+  ClearSessionStorageDecorator,
+  ReactRouterDecorator,
+} from "../../../../.storybook/decorators";
 import {
   assertCheckboxSelection,
   assertColumnSelection,
+  clickButton,
+  fillForm,
 } from "../../../../.storybook/playFunctions";
 import { paginatedZakenFactory } from "../../../fixtures/paginatedZaken";
 import {
@@ -23,18 +28,7 @@ import { DestructionListCreateContext } from "./DestructionListCreate.loader";
 const meta: Meta<typeof DestructionListCreatePage> = {
   title: "Pages/DestructionList/DestructionListCreatePage",
   component: DestructionListCreatePage,
-  decorators: [ReactRouterDecorator],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const FIXTURE: DestructionListCreateContext = {
-  reviewers: usersFactory(),
-  paginatedZaken: paginatedZakenFactory(),
-};
-
-export const DestructionListCreatePageStory: Story = {
+  decorators: [ClearSessionStorageDecorator, ReactRouterDecorator],
   parameters: {
     reactRouterDecorator: {
       route: {
@@ -46,40 +40,39 @@ export const DestructionListCreatePageStory: Story = {
       },
     },
   },
-  play: async (context) => {
-    await assertCheckboxSelection(context);
-    await assertColumnSelection(context);
-    await assertCheckboxSelection({
-      ...context,
-      parameters: { direction: "forwards" },
-    });
+};
 
-    const canvas = within(context.canvasElement);
-    const buttonCreate = await canvas.findByRole("button", {
-      name: "Vernietigingslijst opstellen",
-    });
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-    await userEvent.click(buttonCreate, { delay: 10 });
+const FIXTURE: DestructionListCreateContext = {
+  reviewers: usersFactory(),
+  paginatedZaken: paginatedZakenFactory(),
+};
 
-    const modal = await canvas.findByRole("dialog");
-    const inputName = await within(modal).findByLabelText("Naam");
-    await userEvent.type(
-      inputName,
-      [recordManagerFactory().firstName, recordManagerFactory().lastName].join(
-        " ",
-      ),
-      { delay: 10 },
-    );
+export const CheckboxSelection: Story = {
+  play: assertCheckboxSelection,
+};
 
-    const selectFirstReviewer = await within(modal).findByLabelText("Reviewer");
-    await userEvent.click(selectFirstReviewer, { delay: 10 });
+export const ColumnSelection: Story = {
+  play: assertColumnSelection,
+};
 
-    const beoordelaar = beoordelaarFactory();
-    const selectReviewerBeoordelaarOption = await within(modal).findAllByText(
-      `${beoordelaar.firstName} ${beoordelaar.lastName} (${beoordelaar.username})`,
-    );
-    await userEvent.click(selectReviewerBeoordelaarOption[0], {
-      delay: 10,
-    });
+export const CreateDestructionList: Story = {
+  parameters: {
+    assertCheckboxSelection: { direction: "forwards" },
+    clickButton: { name: "Vernietigingslijst opstellen" },
+    fillForm: {
+      formValues: {
+        Naam: "My First Destruction List",
+        Reviewer: "Beoor del Laar (Beoor del Laar)",
+        Opmerking: "CreateDestructionList",
+      },
+    },
+  },
+  play: async (context) => {
+    await assertCheckboxSelection(context);
+    await clickButton(context);
+    await fillForm(context);
   },
 };
diff --git a/frontend/src/pages/destructionlist/detail/pages/DestructionListEditPage/DestructionListEditPage.stories.tsx b/frontend/src/pages/destructionlist/detail/pages/DestructionListEditPage/DestructionListEditPage.stories.tsx
diff --git a/frontend/src/pages/destructionlist/detail/pages/DestructionListProcessReviewPage/DestructionListProcessReviewPage.stories.tsx b/frontend/src/pages/destructionlist/detail/pages/DestructionListProcessReviewPage/DestructionListProcessReviewPage.stories.tsx
