🎨 - added story for auditlogdetails

Author: Julian Roeland

frontend/src/components/DestructionListAuditLog/DestructionListAuditLogDetails.stories.tsx

@@ -0,0 +1,48 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { expect, within } from "@storybook/test";
+
+import { auditLogItemFactory } from "../../fixtures/auditLog";
+import { userFactory } from "../../fixtures/user";
+import { DestructionListEditPage } from "../../pages";
+import { DestructionListAuditLogDetails } from "./DestructionListAuditLogDetails";
+
+const meta: Meta<typeof DestructionListEditPage> = {
+  title: "Components/Audit Log/DestructionListAuditLogDetails",
+  component: DestructionListAuditLogDetails,
+};
+
+export default meta;
+
+// Story for DestructionListAuditLogDetails
+export const AuditLogDetails: StoryObj<typeof DestructionListAuditLogDetails> =
+  {
+    render: (args) => <DestructionListAuditLogDetails {...args} />,
+    args: {
+      readyForFirstReviewLogItem: auditLogItemFactory({
+        extraData: {
+          minArchiefactiedatum: "2021-01-01T00:00:00Z",
+          maxArchiefactiedatum: "2021-12-31T00:00:00Z",
+          comment: "This is a comment",
+          numberOfZaken: 10,
+        },
+        user: userFactory({
+          username: "johndoe",
+          firstName: "John",
+          lastName: "Doe",
+        }),
+      }),
+    },
+    play: async ({ canvasElement }) => {
+      const canvas = within(canvasElement);
+
+      const rows = canvas.getAllByRole("row");
+      expect(rows).toHaveLength(7);
+
+      expect(canvas.getByText("John Doe (johndoe)")).toBeInTheDocument();
+      expect(
+        canvas.getByText("van 01/01/2021 01:00 tot 31/12/2021 01:00"),
+      ).toBeInTheDocument();
+      expect(canvas.getByText("This is a comment")).toBeInTheDocument();
+      expect(canvas.getByText("10")).toBeInTheDocument;
+    },
+  };

frontend/src/components/DestructionListAuditLog/DestructionListAuditLogHistory.stories.tsx

@@ -7,7 +7,7 @@ import { formatDate } from "../../lib/format/date";
 import { DestructionListAuditLogHistory } from "./DestructionListAuditLogHistory";
 
 const meta: Meta<typeof DestructionListAuditLogHistory> = {
-  title: "Components/DestructionListAuditLogHistory",
+  title: "Components/Audit Log/DestructionListAuditLogHistory",
   component: DestructionListAuditLogHistory,
   args: {
     logItems: [

frontend/src/fixtures/auditLog.ts

@@ -20,6 +20,13 @@ export const FIXTURE_AUDIT_LOG_ITEM: AuditLogItem = {
     pk: destructionList.pk,
     name: destructionList.name,
     author: recordManager,
+    minArchiefactiedatum: "2023-09-15T21:36:00+02:00",
+    maxArchiefactiedatum: "2023-09-15T21:36:00+02:00",
+    zaaktypen: [],
+    resultaten: [],
+    archiefnominaties: [],
+    comment: "This is a comment",
+    numberOfZaken: 123,
     assignees: [beoordelaarFactory(), procesEigenaarFactory()],
   },
 };