[BOOKINGSG-9114][RYN] migrate error-display component

e2e/nextjs-app/src/app/components/error-display/custom-error.e2e.tsx

@@ -0,0 +1,16 @@
+"use client";
+import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
+
+export default function Story() {
+    return (
+        <ErrorDisplay
+            type="404"
+            title="My Custom 404"
+            description={
+                <>
+                    You can pass a <strong>JSX component</strong> here as well
+                </>
+            }
+        />
+    );
+}

e2e/nextjs-app/src/app/components/error-display/default.e2e.tsx

@@ -0,0 +1,10 @@
+"use client";
+import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
+
+export default function Story() {
+    return (
+        <div className="story-background">
+            <ErrorDisplay type="404" />
+        </div>
+    );
+}

e2e/nextjs-app/src/app/components/error-display/image-only.e2e.tsx

@@ -0,0 +1,6 @@
+"use client";
+import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
+
+export default function Story() {
+    return <ErrorDisplay type="500" imageOnly />;
+}

e2e/nextjs-app/src/app/components/error-display/maintenance.e2e.tsx

@@ -0,0 +1,11 @@
+"use client";
+import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
+
+export default function Story() {
+    return (
+        <ErrorDisplay
+            type="maintenance"
+            additionalProps={{ dateString: "1 January 2023, 8:00am" }}
+        />
+    );
+}

e2e/nextjs-app/src/app/components/error-display/with-action-button.e2e.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { ErrorDisplay } from "@lifesg/react-design-system/error-display";
+import { useState } from "react";
+
+export default function Story() {
+    const [clicked, setClicked] = useState(false);
+
+    return (
+        <>
+            <ErrorDisplay
+                type="unsupported-browser"
+                actionButton={{
+                    children: "Continue anyway",
+                    onClick: () => setClicked(true),
+                }}
+            />
+            {clicked && (
+                <div data-testid="continue-button-click-result">clicked</div>
+            )}
+        </>
+    );
+}

e2e/nextjs-app/src/app/globals.css

@@ -15,3 +15,9 @@
 .story-padding {
     padding: 1rem;
 }
+
+@media (prefers-color-scheme: dark) {
+    .story-background {
+        background-color: #000000;
+    }
+}

e2e/tests/components/error-display/error-display.e2e.spec.ts

@@ -0,0 +1,130 @@
+import { expect, test as base, Page } from "@playwright/test";
+import { AbstractStoryPage, compareScreenshot } from "../../utils";
+
+class StoryPage extends AbstractStoryPage {
+    protected readonly component = "error-display";
+    constructor(page: Page) {
+        super(page);
+    }
+}
+
+const test = base.extend<{ story: StoryPage }>({
+    story: async ({ page }, use) => {
+        const story = new StoryPage(page);
+        await use(story);
+    },
+});
+
+test.describe("ErrorDisplay", () => {
+    test.describe(() => {
+        test.beforeEach(async ({ story }) => {
+            await story.init("default");
+        });
+
+        test("Default", async ({ story }) => {
+            await compareScreenshot(story, "default-mount");
+        });
+    });
+
+    test.describe(() => {
+        test.beforeEach(async ({ story }) => {
+            await story.init("default", { mode: "dark" });
+        });
+
+        test("Default (dark mode)", async ({ story }) => {
+            await compareScreenshot(story, "default-dark");
+        });
+    });
+
+    test.describe(() => {
+        test.beforeEach(async ({ story }) => {
+            await story.init("default", { size: "mobile" });
+        });
+
+        test("Default (mobile viewport)", async ({ story }) => {
+            await compareScreenshot(story, "default-mobile");
+        });
+    });
+
+    test.describe(() => {
+        test.beforeEach(async ({ story }) => {
+            await story.init("with-action-button");
+        });
+
+        test("With action button renders and fires onClick", async ({
+            story,
+        }) => {
+            const button = story.page.getByRole("button", {
+                name: "Continue anyway",
+            });
+
+            await test.step("Screenshot matches on mount", async () => {
+                await compareScreenshot(story, "with-action-button-mount");
+            });
+
+            await test.step("Clicking the button fires the handler", async () => {
+                await button.click();
+                await expect(
+                    story.page.getByTestId("continue-button-click-result")
+                ).toBeVisible();
+            });
+        });
+    });
+
+    test.describe(() => {
+        test.beforeEach(async ({ story }) => {
+            await story.init("image-only");
+        });
+
+        test("Image only renders without title and description", async ({
+            story,
+        }) => {
+            await expect(
+                story.page.getByTestId("error-display--title")
+            ).not.toBeVisible();
+            await expect(
+                story.page.getByTestId("error-display--description")
+            ).not.toBeVisible();
+            await compareScreenshot(story, "image-only-mount");
+        });
+    });
+
+    test.describe(() => {
+        test.beforeEach(async ({ story }) => {
+            await story.init("custom-error");
+        });
+
+        test("Custom error renders custom title and description", async ({
+            story,
+        }) => {
+            await test.step("Custom title is rendered", async () => {
+                await expect(
+                    story.page.getByRole("heading", {
+                        level: 2,
+                        name: "My Custom 404",
+                    })
+                ).toBeVisible();
+            });
+
+            await test.step("Custom description with JSX is rendered", async () => {
+                await expect(
+                    story.page.getByTestId("error-display--description")
+                ).toContainText("JSX component");
+            });
+
+            await compareScreenshot(story, "custom-error-mount");
+        });
+    });
+
+    test.describe(() => {
+        test.beforeEach(async ({ story }) => {
+            await story.init("maintenance");
+        });
+
+        test("Maintenance renders dateString in description", async ({
+            story,
+        }) => {
+            await compareScreenshot(story, "maintenance-mount");
+        });
+    });
+});