refactor(cms): strapi 5 compatibility (#1553)

* feat(cms): add strapi 5 compatibility * refactor: remove attributes/data nesting * refator(getStrapiEntry): move locale decision up * refator(locale): remove locale=all * test(getStrapiEntries): remove unneeded * refactor(test): more expressive mock
digitalservicebund · Dec 16, 2024 · b1447ed · b1447ed
1 parent d64a9ec
commit b1447ed
Show file tree

Hide file tree

Showing 29 changed files with 321 additions and 493 deletions.
diff --git a/app/routes/shared/result.server.ts b/app/routes/shared/result.server.ts
@@ -59,8 +59,8 @@ export const loader = async ({ request, context }: LoaderFunctionArgs) => {
     stepId,
   });
 
-  const documents = cmsContent.documents.data?.attributes.element ?? [];
-  const nextSteps = cmsContent.nextSteps.data?.attributes.element ?? [];
+  const documents = cmsContent.documents?.element ?? [];
+  const nextSteps = cmsContent.nextSteps?.element ?? [];
 
   const cmsData = { ...cmsContent, nextSteps, documents };
 

diff --git a/app/services/cms/__test__/getStrapiEntryFromApi.test.ts b/app/services/cms/__test__/getStrapiEntryFromApi.test.ts
@@ -1,9 +1,6 @@
 import axios from "axios";
 import { getStrapiEntryFromApi } from "~/services/cms/getStrapiEntryFromApi";
-import {
-  defaultLocale,
-  stagingLocale,
-} from "~/services/cms/models/StrapiLocale";
+import { stagingLocale } from "~/services/cms/models/StrapiLocale";
 import type { GetStrapiEntryOpts } from "../filters";
 
 const API_URL = "test://cms/api/";
@@ -18,45 +15,23 @@ describe("services/cms", () => {
   });
 
   describe("getStrapiEntryFromApi", () => {
-    const dataResponse = [{ attributes: "data" }];
+    const dataResponse = [{ testField: "testData" }];
     const defaultOptions: GetStrapiEntryOpts = {
       apiId: "pages",
       locale: stagingLocale,
     };
-    const defaultResponseData = { data: { data: dataResponse } };
-    const emptyResponseData = { data: [] };
-    const expectedRequestUrl = `${API_URL}pages?populate=deep&locale=de`;
-    const expectedStagingRequestUrl = `${API_URL}pages?populate=deep&locale=sg`;
+    const expectedStagingRequestUrl = `${API_URL}pages?populate=*&pLevel&locale=sg`;
 
     const axiosGetSpy = vi.spyOn(axios, "get");
 
     beforeEach(() => {
-      axiosGetSpy
-        .mockResolvedValue(defaultResponseData)
-        .mockResolvedValueOnce(emptyResponseData);
+      axiosGetSpy.mockResolvedValue({ data: { data: dataResponse } });
     });
 
     afterEach(() => {
       axiosGetSpy.mockClear();
     });
 
-    test("first requests staging locale before", async () => {
-      await getStrapiEntryFromApi({
-        ...defaultOptions,
-        locale: defaultLocale,
-      });
-      expect(axiosGetSpy).toHaveBeenNthCalledWith(
-        1,
-        expectedStagingRequestUrl,
-        expect.anything(),
-      );
-      expect(axiosGetSpy).toHaveBeenNthCalledWith(
-        2,
-        expectedRequestUrl,
-        expect.anything(),
-      );
-    });
-
     test("request url with property filter", async () => {
       await getStrapiEntryFromApi({
         ...defaultOptions,

diff --git a/app/services/cms/__test__/getStrapiEntryFromFile.test.ts b/app/services/cms/__test__/getStrapiEntryFromFile.test.ts
@@ -25,36 +25,32 @@ describe("services/cms", () => {
 
     const fileContent = {
       "page-header": [],
-      footer: [{ attributes: footerData }],
-      pages: [{ attributes: impressum }],
+      footer: [footerData],
+      pages: [impressum],
       "cookie-banner": [],
       "result-pages": [],
       "vorab-check-pages": [],
       "form-flow-pages": [
         {
-          attributes: {
-            heading: "",
-            locale: StrapiLocaleSchema.Values.de,
-            preHeading: null,
-            nextButtonLabel: null,
-            backButtonLabel: null,
-            stepId: "/stepId",
-            meta: {
-              title: "",
-              description: null,
-              ogTitle: null,
-              breadcrumb: "",
-            },
-            pre_form: [],
-            post_form: [],
-            form: [],
-            flow_ids: {
-              data: [
-                { attributes: { flowId: "/geld-einklagen/formular" } },
-                { attributes: { flowId: "/fluggastrechte/formular" } },
-              ],
-            },
+          heading: "",
+          locale: StrapiLocaleSchema.Values.de,
+          preHeading: null,
+          nextButtonLabel: null,
+          backButtonLabel: null,
+          stepId: "/stepId",
+          meta: {
+            title: "",
+            description: null,
+            ogTitle: null,
+            breadcrumb: "",
           },
+          pre_form: [],
+          post_form: [],
+          form: [],
+          flow_ids: [
+            { flowId: "/geld-einklagen/formular" },
+            { flowId: "/fluggastrechte/formular" },
+          ],
         },
       ],
       translations: [],
@@ -67,18 +63,7 @@ describe("services/cms", () => {
           apiId: "footer",
           locale: "de",
         }),
-      ).toEqual([{ attributes: footerData }]);
-    });
-
-    describe("when no entry exists for the given locale", () => {
-      it("returns default entry", async () => {
-        expect(
-          await getStrapiEntryFromFile({
-            apiId: "footer",
-            locale: "en",
-          }),
-        ).toEqual([{ attributes: footerData }]);
-      });
+      ).toEqual([footerData]);
     });
 
     it("can filter by property", async () => {
@@ -88,7 +73,7 @@ describe("services/cms", () => {
           filters: [{ field: "slug", value: impressumPath }],
           locale: "de",
         }),
-      ).toEqual([{ attributes: impressum }]);
+      ).toEqual([impressum]);
     });
 
     it("can filter by nested property", async () => {
@@ -131,15 +116,5 @@ describe("services/cms", () => {
         }),
       ).toStrictEqual([]);
     });
-
-    it("falls back to default locale", async () => {
-      expect(
-        await getStrapiEntryFromFile({
-          apiId: "pages",
-          filters: [{ field: "slug", value: impressumPath }],
-          locale: "en",
-        }),
-      ).toEqual([{ attributes: impressum }]);
-    });
   });
 });
diff --git a/app/services/cms/__test__/index.test.ts b/app/services/cms/__test__/index.test.ts
@@ -16,28 +16,23 @@ describe("services/cms", () => {
   describe("fetchSingleEntry", () => {
     test("returns a footer entry", async () => {
       const footerData = getStrapiFooter();
-      vi.mocked(getStrapiEntry).mockReturnValue(
-        Promise.resolve([{ attributes: footerData }]),
-      );
+      vi.mocked(getStrapiEntry).mockReturnValue(Promise.resolve([footerData]));
       expect(await fetchSingleEntry("footer")).toEqual(footerData);
     });
   });
 
   describe("fetchAllFormFields", () => {
     test("returns steps with it's form field names", async () => {
       vi.mocked(getStrapiEntry).mockResolvedValue([
-        {
-          attributes: getStrapiFlowPage({
-            stepId: "step1",
-            form: [getStrapiFormComponent({ name: "formFieldForStep1" })],
-          }),
-        },
-        {
-          attributes: getStrapiFlowPage({
-            stepId: "step2",
-            form: [getStrapiFormComponent({ name: "formFieldForStep2" })],
-          }),
-        },
+        getStrapiFlowPage({
+          stepId: "step1",
+          form: [getStrapiFormComponent({ name: "formFieldForStep1" })],
+        }),
+
+        getStrapiFlowPage({
+          stepId: "step2",
+          form: [getStrapiFormComponent({ name: "formFieldForStep2" })],
+        }),
       ]);
 
       expect(await fetchAllFormFields("/beratungshilfe/antrag")).toStrictEqual({
@@ -48,16 +43,14 @@ describe("services/cms", () => {
 
     test("returns steps with multiple form field names", async () => {
       vi.mocked(getStrapiEntry).mockResolvedValue([
-        {
-          attributes: getStrapiFlowPage({
-            stepId: "step1",
-            form: [
-              getStrapiFormComponent({ name: "formField1ForStep1" }),
-              getStrapiFormComponent({ name: "formField2ForStep1" }),
-              getStrapiFormComponent({ name: "formField3ForStep1" }),
-            ],
-          }),
-        },
+        getStrapiFlowPage({
+          stepId: "step1",
+          form: [
+            getStrapiFormComponent({ name: "formField1ForStep1" }),
+            getStrapiFormComponent({ name: "formField2ForStep1" }),
+            getStrapiFormComponent({ name: "formField3ForStep1" }),
+          ],
+        }),
       ]);
 
       expect(await fetchAllFormFields("/beratungshilfe/antrag")).toStrictEqual({
@@ -71,23 +64,19 @@ describe("services/cms", () => {
 
     test("overwrites formfields from staging", async () => {
       vi.mocked(getStrapiEntry).mockResolvedValue([
-        {
-          attributes: getStrapiFlowPage({
-            stepId: "step1",
-            form: [
-              getStrapiFormComponent({
-                name: "formFieldForStepProd",
-              }),
-            ],
-          }),
-        },
-        {
-          attributes: getStrapiFlowPage({
-            stepId: "step1",
-            locale: "sg",
-            form: [getStrapiFormComponent({ name: "formFieldForStage" })],
-          }),
-        },
+        getStrapiFlowPage({
+          stepId: "step1",
+          form: [
+            getStrapiFormComponent({
+              name: "formFieldForStepProd",
+            }),
+          ],
+        }),
+        getStrapiFlowPage({
+          stepId: "step1",
+          locale: "sg",
+          form: [getStrapiFormComponent({ name: "formFieldForStage" })],
+        }),
       ]);
 
       expect(await fetchAllFormFields("/beratungshilfe/antrag")).toStrictEqual({
@@ -96,19 +85,19 @@ describe("services/cms", () => {
     });
 
     test("disregards staging formfields in production", async () => {
-      vi.mocked(getStrapiEntry).mockResolvedValue([
-        {
-          attributes: getStrapiFlowPage({
+      vi.mocked(getStrapiEntry)
+        .mockResolvedValueOnce([
+          getStrapiFlowPage({
             stepId: "step1",
             form: [
               getStrapiFormComponent({
                 name: "formFieldForStepProd",
               }),
             ],
           }),
-        },
-        {
-          attributes: getStrapiFlowPage({
+        ])
+        .mockResolvedValueOnce([
+          getStrapiFlowPage({
             stepId: "step2",
             locale: "sg",
             form: [
@@ -117,8 +106,7 @@ describe("services/cms", () => {
               }),
             ],
           }),
-        },
-      ]);
+        ]);
 
       expect(
         await fetchAllFormFields("/beratungshilfe/antrag", "production"),
@@ -129,28 +117,25 @@ describe("services/cms", () => {
 
     test("adds staging steps when not in production", async () => {
       vi.mocked(getStrapiEntry).mockResolvedValue([
-        {
-          attributes: getStrapiFlowPage({
-            stepId: "step1",
-            locale: "de",
-            form: [
-              getStrapiFormComponent({
-                name: "formFieldForStepProd",
-              }),
-            ],
-          }),
-        },
-        {
-          attributes: getStrapiFlowPage({
-            stepId: "step2",
-            locale: "sg",
-            form: [
-              getStrapiFormComponent({
-                name: "formFieldForStepStage",
-              }),
-            ],
-          }),
-        },
+        getStrapiFlowPage({
+          stepId: "step1",
+          locale: "de",
+          form: [
+            getStrapiFormComponent({
+              name: "formFieldForStepProd",
+            }),
+          ],
+        }),
+
+        getStrapiFlowPage({
+          stepId: "step2",
+          locale: "sg",
+          form: [
+            getStrapiFormComponent({
+              name: "formFieldForStepStage",
+            }),
+          ],
+        }),
       ]);
 
       expect(await fetchAllFormFields("/beratungshilfe/antrag")).toStrictEqual({
@@ -161,12 +146,10 @@ describe("services/cms", () => {
 
     test("filters out steps without forms", async () => {
       vi.mocked(getStrapiEntry).mockResolvedValue([
-        {
-          attributes: getStrapiFlowPage({
-            stepId: "step1",
-            form: [],
-          }),
-        },
+        getStrapiFlowPage({
+          stepId: "step1",
+          form: [],
+        }),
       ]);
 
       expect(await fetchAllFormFields("/beratungshilfe/antrag")).toStrictEqual(

diff --git a/app/services/cms/components/StrapiCheckbox.tsx b/app/services/cms/components/StrapiCheckbox.tsx
@@ -10,11 +10,8 @@ const StrapiCheckboxSchema = z
   .object({
     name: z.string(),
     label: z.string(),
-    isRequiredError: z.object({
-      data: HasStrapiIdSchema.extend({
-        attributes: StrapiErrorCategorySchema,
-      }).nullable(),
-    }),
+    isRequiredError:
+      StrapiErrorCategorySchema.merge(HasStrapiIdSchema).nullable(),
   })
   .merge(HasOptionalStrapiIdSchema);
 
@@ -27,8 +24,8 @@ export const StrapiCheckbox = ({
   ...props
 }: z.infer<typeof StrapiCheckboxSchema>) => (
   <Checkbox
-    required={isRequiredError.data !== null}
-    errorMessage={isRequiredError?.data?.attributes.errorCodes[0].text}
+    required={isRequiredError !== null}
+    errorMessage={isRequiredError?.errorCodes[0].text}
     {...props}
   />
 );