✅ - test: update stories for the destruction list edit page

maykinmedia · Feb 6, 2025 · 3e99434 · 3e99434
1 parent 3635ee9
commit 3e99434
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 121 deletions.
diff --git a/frontend/src/lib/api/zaakSelection.ts b/frontend/src/lib/api/zaakSelection.ts
@@ -1,5 +1,6 @@
-import { Zaak } from "../../types";
-import { ZaakSelection, _getZaakUrl } from "../zaakSelection";
+import type { Zaak } from "../../types";
+import type { ZaakSelection } from "../zaakSelection/types";
+import { _getZaakUrl } from "../zaakSelection/utils";
 import { request } from "./request";
 
 /**

diff --git a/frontend/src/lib/zaakSelection/types.d.ts b/frontend/src/lib/zaakSelection/types.d.ts
@@ -1,4 +1,4 @@
-import { Zaak } from "../../types";
+import type { Zaak } from "../../types";
 
 /**
  * A type describing an object with a `Zaak`'s url and optionally other `Zaak`

diff --git a/frontend/src/lib/zaakSelection/zaakSelection.ts b/frontend/src/lib/zaakSelection/zaakSelection.ts
@@ -1,5 +1,5 @@
 import { SessionStorageBackend, _getZaakSelection } from "./backends";
-import {
+import type {
   ZaakIdentifier,
   ZaakSelection,
   ZaakSelectionBackendMeta,

diff --git a/frontend/src/pages/destructionlist/detail/DestructionListDetail.action.ts b/frontend/src/pages/destructionlist/detail/DestructionListDetail.action.ts
@@ -14,7 +14,7 @@ import {
   ReviewResponse,
   createReviewResponse,
 } from "../../../lib/api/reviewResponse";
-import { clearZaakSelection } from "../../../lib/zaakSelection/zaakSelection";
+import { clearZaakSelection } from "../../../lib/zaakSelection";
 
 export type UpdateDestructionListAction<P = JsonValue> = TypedAction<
   | "DELETE_LIST"

diff --git a/frontend/src/pages/destructionlist/detail/pages/edit/DestructionListEditPage.stories.tsx b/frontend/src/pages/destructionlist/detail/pages/edit/DestructionListEditPage.stories.tsx
@@ -4,61 +4,84 @@ import {
   ClearSessionStorageDecorator,
   ReactRouterDecorator,
 } from "../../../../../../.storybook/decorators";
+import { MOCK_BASE } from "../../../../../../.storybook/mockData";
 import {
   clickButton,
   clickCheckbox,
   fillForm,
 } from "../../../../../../.storybook/playFunctions";
-import { destructionListFactory } from "../../../../../fixtures/destructionList";
-import { paginatedDestructionListItemsFactory } from "../../../../../fixtures/destructionListItem";
-import { paginatedZakenFactory } from "../../../../../fixtures/paginatedZaken";
-import { usersFactory } from "../../../../../fixtures/user";
-import { getZaakSelection } from "../../../../../lib/zaakSelection";
+import {
+  destructionListFactory,
+  paginatedDestructionListItemsFactory,
+  paginatedZakenFactory,
+  recordManagerFactory, // usersFactory,
+} from "../../../../../fixtures";
 import { destructionListUpdateAction } from "../../DestructionListDetail.action";
-import { DestructionListDetailContext } from "../../DestructionListDetail.loader";
+import { destructionListDetailLoader } from "../../DestructionListDetail.loader";
 import { DestructionListEditPage } from "./DestructionListEditPage";
 
 const meta: Meta<typeof DestructionListEditPage> = {
   title: "Pages/DestructionList/DestructionListEditPage",
   component: DestructionListEditPage,
   decorators: [ClearSessionStorageDecorator, ReactRouterDecorator],
+  parameters: {
+    reactRouterDecorator: {
+      route: {
+        id: "destruction-list:detail",
+        loader: destructionListDetailLoader,
+        action: destructionListUpdateAction,
+      },
+      params: {
+        uuid: "00000000-0000-0000-0000-000000000000",
+      },
+    },
+    mockData: [
+      ...MOCK_BASE,
+      {
+        url: "http://localhost:8000/api/v1/whoami/",
+        method: "GET",
+        status: 200,
+        response: recordManagerFactory(),
+      },
+      {
+        url: "http://localhost:8000/api/v1/destruction-list-reviews/?destructionList__uuid=00000000-0000-0000-0000-000000000000&ordering=-created",
+        method: "GET",
+        status: 200,
+        response: [],
+      },
+      {
+        url: "http://localhost:8000/api/v1/destruction-list-items/?item-destruction_list=00000000-0000-0000-0000-000000000000&item-status=suggested&viewMode=story&id=pages-destructionlist-destructionlisteditpage--edit-destruction-list&globals=",
+        method: "GET",
+        status: 200,
+        response: paginatedDestructionListItemsFactory(),
+      },
+      {
+        url: "http://localhost:8000/api/v1/zaken/?viewMode=story&id=pages-destructionlist-destructionlisteditpage--edit-destruction-list&globals=&not_in_destruction_list_except=00000000-0000-0000-0000-000000000000",
+        method: "GET",
+        status: 200,
+        response: paginatedZakenFactory(),
+      },
+    ],
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const FIXTURE_BASE: DestructionListDetailContext = {
-  storageKey: "storybook-storage-key",
-
-  destructionList: destructionListFactory({ status: "new" }),
-  destructionListItems: paginatedDestructionListItemsFactory(),
-
-  zaakSelection: {},
-  selectableZaken: paginatedZakenFactory(),
-
-  archivists: usersFactory(),
-  user: usersFactory()[0],
-
-  review: null,
-  reviewItems: null,
-
-  selectieLijstKlasseChoicesMap: null,
-};
-
-const FIXTURE_EDIT = { ...FIXTURE_BASE };
-
 export const EditDestructionList: Story = {
   parameters: {
-    reactRouterDecorator: {
-      route: {
-        id: "destruction-list:detail",
-        loader: async () => {
-          const zaakSelection = await getZaakSelection(FIXTURE_EDIT.storageKey);
-          return { ...FIXTURE_EDIT, zaakSelection };
-        },
-        action: destructionListUpdateAction,
+    mockData: [
+      ...(meta?.parameters?.mockData || []),
+      {
+        url: "http://localhost:8000/api/v1/destruction-lists/00000000-0000-0000-0000-000000000000/?",
+        method: "GET",
+        status: 200,
+        response: destructionListFactory({
+          uuid: "00000000-0000-0000-0000-000000000000",
+          status: "new",
+        }),
       },
-    },
+    ],
   },
   play: async (context) => {
     await clickButton({
@@ -76,32 +99,57 @@ export const EditDestructionList: Story = {
   },
 };
 
-const FIXTURE_FINAL_DESTRUCTION: DestructionListDetailContext = {
-  ...FIXTURE_BASE,
-  destructionList: {
-    ...FIXTURE_BASE.destructionList,
-    status: "internally_reviewed",
+export const DeleteDestructionList: Story = {
+  parameters: {
+    mockData: [
+      ...(meta?.parameters?.mockData || []),
+      {
+        url: "http://localhost:8000/api/v1/destruction-lists/00000000-0000-0000-0000-000000000000/?",
+        method: "GET",
+        status: 200,
+        response: destructionListFactory({
+          uuid: "00000000-0000-0000-0000-000000000000",
+          status: "new",
+        }),
+      },
+      {
+        url: "http://localhost:8000/api/v1/destruction-lists/00000000-0000-0000-0000-000000000000/?",
+        method: "DELETE",
+        status: 200,
+        response: {},
+      },
+    ],
+    clickButton: { name: "Lijst verwijderen" },
+    fillForm: {
+      formValues: {
+        "Type naam van de lijst ter bevestiging": "My first destruction list",
+      },
+    },
+  },
+  play: async (context) => {
+    await clickButton(context);
+    await fillForm(context);
   },
 };
 
 export const MarkDestructionListAsFinal: Story = {
   parameters: {
-    reactRouterDecorator: {
-      route: {
-        id: "destruction-list:detail",
-        loader: async () => {
-          const zaakSelection = await getZaakSelection(
-            FIXTURE_FINAL_DESTRUCTION.storageKey,
-          );
-          return { ...FIXTURE_FINAL_DESTRUCTION, zaakSelection };
-        },
-        action: destructionListUpdateAction,
+    mockData: [
+      ...(meta?.parameters?.mockData || []),
+      {
+        url: "http://localhost:8000/api/v1/destruction-lists/00000000-0000-0000-0000-000000000000/?",
+        method: "GET",
+        status: 200,
+        response: destructionListFactory({
+          uuid: "00000000-0000-0000-0000-000000000000",
+          status: "internally_reviewed",
+        }),
       },
-    },
+    ],
     clickButton: { name: "Markeren als definitief" },
     fillForm: {
       formValues: {
-        Archivaris: "Proces ei Genaar (Proces ei Genaar)",
+        Archivaris: "Archi Varis (Archivaris)",
         Opmerking: "MarkDestructionListAsFinal",
       },
     },
@@ -112,29 +160,20 @@ export const MarkDestructionListAsFinal: Story = {
   },
 };
 
-const FIXTURE_DELETE: DestructionListDetailContext = {
-  ...FIXTURE_BASE,
-  destructionList: {
-    ...FIXTURE_BASE.destructionList,
-    status: "ready_to_delete",
-    processingStatus: "new",
-  },
-};
-
-export const DeleteDestructionList: Story = {
+export const QueueDestruction: Story = {
   parameters: {
-    reactRouterDecorator: {
-      route: {
-        id: "destruction-list:detail",
-        loader: async () => {
-          const zaakSelection = await getZaakSelection(
-            FIXTURE_DELETE.storageKey,
-          );
-          return { ...FIXTURE_DELETE, zaakSelection };
-        },
-        action: destructionListUpdateAction,
+    mockData: [
+      ...(meta?.parameters?.mockData || []),
+      {
+        url: "http://localhost:8000/api/v1/destruction-lists/00000000-0000-0000-0000-000000000000/?",
+        method: "GET",
+        status: 200,
+        response: destructionListFactory({
+          uuid: "00000000-0000-0000-0000-000000000000",
+          status: "ready_to_delete",
+        }),
       },
-    },
+    ],
     clickButton: { name: "Vernietigen starten" },
     fillForm: {
       formValues: {
@@ -148,68 +187,59 @@ export const DeleteDestructionList: Story = {
   },
 };
 
-const FIXTURE_FAILED_DELETE: DestructionListDetailContext = {
-  ...FIXTURE_DELETE,
-  destructionList: {
-    ...FIXTURE_DELETE.destructionList,
-    processingStatus: "failed",
-  },
-};
-
-export const DeleteFailedDestructionList: Story = {
+export const QueueFailedDestructionList: Story = {
   parameters: {
-    reactRouterDecorator: {
-      route: {
-        id: "destruction-list:detail",
-        loader: async () => {
-          const zaakSelection = await getZaakSelection(
-            FIXTURE_FAILED_DELETE.storageKey,
-          );
-          return { ...FIXTURE_FAILED_DELETE, zaakSelection };
-        },
-        action: destructionListUpdateAction,
+    mockData: [
+      ...(meta?.parameters?.mockData || []),
+      {
+        url: "http://localhost:8000/api/v1/destruction-lists/00000000-0000-0000-0000-000000000000/?",
+        method: "GET",
+        status: 200,
+        response: destructionListFactory({
+          uuid: "00000000-0000-0000-0000-000000000000",
+          status: "ready_to_delete",
+          processingStatus: "failed",
+        }),
       },
-    },
+    ],
     clickButton: { name: "Vernietigen herstarten" },
     fillForm: {
       formValues: {
         "Type naam van de lijst ter bevestiging": "My first destruction list",
       },
     },
   },
-  play: DeleteDestructionList.play,
-};
-
-const FIXTURE_PLANNED_DELETE: DestructionListDetailContext = {
-  ...FIXTURE_DELETE,
-  destructionList: {
-    ...FIXTURE_DELETE.destructionList,
-    status: "ready_to_delete",
-    processingStatus: "queued",
-    plannedDestructionDate: "2026-01-01T00:00:00Z",
+  play: async (context) => {
+    await clickButton(context);
+    await fillForm(context);
   },
 };
 
 export const CancelPlannedDestructionList: Story = {
   parameters: {
-    reactRouterDecorator: {
-      route: {
-        id: "destruction-list:detail",
-        loader: async () => {
-          const zaakSelection = await getZaakSelection(
-            FIXTURE_PLANNED_DELETE.storageKey,
-          );
-          return { ...FIXTURE_PLANNED_DELETE, zaakSelection };
-        },
-        action: destructionListUpdateAction,
+    mockData: [
+      ...(meta?.parameters?.mockData || []),
+      {
+        url: "http://localhost:8000/api/v1/destruction-lists/00000000-0000-0000-0000-000000000000/?",
+        method: "GET",
+        status: 200,
+        response: destructionListFactory({
+          uuid: "00000000-0000-0000-0000-000000000000",
+          status: "ready_to_delete",
+          processingStatus: "queued",
+          plannedDestructionDate: "2026-01-01T00:00:00Z",
+        }),
       },
-    },
+    ],
     clickButton: { name: "Proces afbreken" },
     fillForm: {
       formValues: {
-        Opmerking: "CancelPlannedDestructionList",
+        Opmerking: "My first destruction list",
       },
     },
   },
-  play: DeleteDestructionList.play,
+  play: async (context) => {
+    await clickButton(context);
+    await fillForm(context);
+  },
 };