Add jest setup for site

package.json

@@ -12,6 +12,7 @@
         "lint:site": "npm --prefix site run lint",
         "test:ci": "run-p test:ci:*",
         "test:ci:api": "npm --prefix api run test:ci",
+        "test:ci:site": "npm --prefix site run test:ci",
         "build": "run-p build:*",
         "build:api": "npm --prefix api run build",
         "build:admin": "npm --prefix admin run build",

site/.gitignore

@@ -11,6 +11,7 @@
 
 # testing
 /coverage
+junit.xml
 
 # next.js
 /.next/

site/jest.config.ts

@@ -0,0 +1,14 @@
+import type { Config } from "jest";
+import nextJest from "next/jest.js";
+
+const createJestConfig = nextJest({
+    dir: "./",
+});
+
+const config: Config = {
+    coverageProvider: "v8",
+    testEnvironment: "jsdom",
+    setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+};
+
+export default createJestConfig(config);

site/jest.setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

site/package.json

@@ -16,7 +16,10 @@
         "generate-block-types": "comet generate-block-types",
         "generate-block-types:watch": "chokidar -s \"**/block-meta.json\" -c \"npm run generate-block-types\"",
         "intl:extract": "formatjs extract \"src/**/*.ts*\" --ignore **/*.d.ts --out-file lang-extracted/en.json --format simple --throws",
-        "intl:compile": "formatjs compile-folder --format simple --ast lang/starter-lang/site lang-compiled/"
+        "intl:compile": "formatjs compile-folder --format simple --ast lang/starter-lang/site lang-compiled/",
+        "test": "jest --passWithNoTests",
+        "test:watch": "npm run test -- --watch",
+        "test:ci": "npm run test -- --ci --reporters=default --reporters=jest-junit"
     },
     "dependencies": {
         "@comet/cms-site": "^7.5.0",
@@ -50,13 +53,19 @@
         "@graphql-codegen/near-operation-file-preset": "^2.5.0",
         "@graphql-codegen/typescript": "^2.0.0",
         "@graphql-codegen/typescript-operations": "^2.0.0",
+        "@testing-library/jest-dom": "^6.6.2",
+        "@testing-library/react": "^16.0.1",
+        "@types/jest": "^29.5.13",
         "@types/node": "^20.0.0",
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.2.0",
         "chokidar-cli": "^3.0.0",
         "cspell": "^8.14.4",
         "dotenv-cli": "^7.0.0",
         "eslint": "^8.0.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "jest-junit": "^16.0.0",
         "npm-run-all": "^4.1.5",
         "postcss-styled-syntax": "^0.6.4",
         "prettier": "^2.0.0",

site/src/common/blocks/RichTextBlock.tsx

@@ -2,11 +2,11 @@
 import { hasRichTextBlockContent, PreviewSkeleton, PropsWithData, withPreview } from "@comet/cms-site";
 import { LinkBlockData, RichTextBlockData } from "@src/blocks.generated";
 import { Typography, TypographyProps } from "@src/common/components/Typography";
-import { isValidLink } from "@src/common/helpers/HiddenIfInvalidLink";
 import { PageLayout } from "@src/layout/PageLayout";
 import redraft, { Renderers, TextBlockRenderFn } from "redraft";
 import styled, { css } from "styled-components";
 
+import { isValidLink } from "../helpers/isValidLink";
 import { LinkBlock } from "./LinkBlock";
 
 export const createTextBlockRenderFn =

site/src/common/helpers/HiddenIfInvalidLink.tsx

@@ -1,14 +1,9 @@
 import { usePreview } from "@comet/cms-site";
-import {
-    DamFileDownloadLinkBlockData,
-    EmailLinkBlockData,
-    ExternalLinkBlockData,
-    InternalLinkBlockData,
-    LinkBlockData,
-    PhoneLinkBlockData,
-} from "@src/blocks.generated";
+import { LinkBlockData } from "@src/blocks.generated";
 import { PropsWithChildren } from "react";
 
+import { isValidLink } from "./isValidLink";
+
 export function HiddenIfInvalidLink({ link, children }: PropsWithChildren<{ link: LinkBlockData }>) {
     const { previewType } = usePreview();
 
@@ -22,14 +17,3 @@ export function HiddenIfInvalidLink({ link, children }: PropsWithChildren<{ link
 
     return children;
 }
-
-export const isValidLink = (link: LinkBlockData) => {
-    return Boolean(
-        link.block &&
-            ((link.block.type === "internal" && (link.block.props as InternalLinkBlockData).targetPage) ||
-                (link.block.type === "external" && (link.block.props as ExternalLinkBlockData).targetUrl) ||
-                (link.block.type === "damFileDownload" && (link.block.props as DamFileDownloadLinkBlockData).file) ||
-                (link.block.type === "email" && (link.block.props as EmailLinkBlockData).email) ||
-                (link.block.type === "phone" && (link.block.props as PhoneLinkBlockData).phone)),
-    );
-};

site/src/common/helpers/__tests__/HiddenIfInvalidLink.test.tsx

@@ -0,0 +1,53 @@
+import { render } from "@testing-library/react";
+
+const usePreview = jest.fn();
+
+jest.mock("@comet/cms-site", () => {
+    return {
+        usePreview: () => usePreview(),
+    };
+});
+
+import { HiddenIfInvalidLink } from "../HiddenIfInvalidLink";
+
+describe("HiddenIfInvalidLink", () => {
+    it("should render children if previewType is BlockPreview", () => {
+        usePreview.mockReturnValue({ previewType: "BlockPreview" });
+
+        const { getByText } = render(
+            <HiddenIfInvalidLink link={{ block: { type: "internal", props: {} }, attachedBlocks: [] }}>
+                <div>Valid Link</div>
+            </HiddenIfInvalidLink>,
+        );
+
+        expect(getByText("Valid Link")).toBeInTheDocument();
+    });
+
+    it("should render children if link is valid", () => {
+        usePreview.mockReturnValue({ previewType: "OtherPreview" });
+
+        const validLink = {
+            block: { type: "internal", props: { targetPage: { id: "", name: "", path: "", documentType: "" } } },
+            attachedBlocks: [],
+        };
+        const { getByText } = render(
+            <HiddenIfInvalidLink link={validLink}>
+                <div>Valid Link</div>
+            </HiddenIfInvalidLink>,
+        );
+
+        expect(getByText("Valid Link")).toBeInTheDocument();
+    });
+
+    it("should not render children if link is invalid", () => {
+        usePreview.mockReturnValue({ previewType: "OtherPreview" });
+        const invalidLink = { block: { type: "internal", props: {} }, attachedBlocks: [] };
+        const { queryByText } = render(
+            <HiddenIfInvalidLink link={invalidLink}>
+                <div>Invalid Link</div>
+            </HiddenIfInvalidLink>,
+        );
+
+        expect(queryByText("Invalid Link")).toBeNull();
+    });
+});

site/src/common/helpers/__tests__/isValidLink.test.ts

@@ -0,0 +1,79 @@
+import {
+    DamFileDownloadLinkBlockData,
+    EmailLinkBlockData,
+    ExternalLinkBlockData,
+    InternalLinkBlockData,
+    PhoneLinkBlockData,
+} from "@src/blocks.generated";
+
+import { isValidLink } from "../isValidLink";
+
+describe("isValidLink", () => {
+    it("should return true for valid internal link", () => {
+        const blockProps: InternalLinkBlockData = { targetPage: { id: "", name: "", path: "", documentType: "" } };
+        const link = { block: { type: "internal", props: blockProps }, attachedBlocks: [] };
+
+        expect(isValidLink(link)).toBe(true);
+    });
+
+    it("should return false for invalid internal link", () => {
+        const link = { block: { type: "internal", props: {} }, attachedBlocks: [] };
+
+        expect(isValidLink(link)).toBe(false);
+    });
+
+    it("should return true for valid external link", () => {
+        const blockProps: ExternalLinkBlockData = { targetUrl: "http://example.com", openInNewWindow: false };
+        const link = {
+            block: { type: "external", props: blockProps },
+            attachedBlocks: [],
+        };
+
+        expect(isValidLink(link)).toBe(true);
+    });
+
+    it("should return false for invalid external link", () => {
+        const link = { block: { type: "external", props: {} }, attachedBlocks: [] };
+
+        expect(isValidLink(link)).toBe(false);
+    });
+
+    it("should return true for valid damFileDownload link", () => {
+        const blockProps: DamFileDownloadLinkBlockData = { openFileType: "Download", file: { id: "", name: "", fileUrl: "", size: 0 } };
+        const link = { block: { type: "damFileDownload", props: blockProps }, attachedBlocks: [] };
+
+        expect(isValidLink(link)).toBe(true);
+    });
+
+    it("should return false for invalid damFileDownload link", () => {
+        const link = { block: { type: "damFileDownload", props: {} }, attachedBlocks: [] };
+
+        expect(isValidLink(link)).toBe(false);
+    });
+
+    it("should return true for valid email link", () => {
+        const blockProps: EmailLinkBlockData = { email: "foo@mail.com" };
+        const link = { block: { type: "email", props: blockProps }, attachedBlocks: [] };
+
+        expect(isValidLink(link)).toBe(true);
+    });
+
+    it("should return false for invalid email link", () => {
+        const link = { block: { type: "email", props: {} }, attachedBlocks: [] };
+
+        expect(isValidLink(link)).toBe(false);
+    });
+
+    it("should return true for valid phone link", () => {
+        const blockProps: PhoneLinkBlockData = { phone: "1234567890" };
+        const link = { block: { type: "phone", props: blockProps }, attachedBlocks: [] };
+
+        expect(isValidLink(link)).toBe(true);
+    });
+
+    it("should return false for invalid phone link", () => {
+        const link = { block: { type: "phone", props: {} }, attachedBlocks: [] };
+
+        expect(isValidLink(link)).toBe(false);
+    });
+});

site/src/common/helpers/isValidLink.ts

@@ -0,0 +1,19 @@
+import {
+    DamFileDownloadLinkBlockData,
+    EmailLinkBlockData,
+    ExternalLinkBlockData,
+    InternalLinkBlockData,
+    LinkBlockData,
+    PhoneLinkBlockData,
+} from "@src/blocks.generated";
+
+export const isValidLink = (link: LinkBlockData) => {
+    return Boolean(
+        link.block &&
+            ((link.block.type === "internal" && (link.block.props as InternalLinkBlockData).targetPage) ||
+                (link.block.type === "external" && (link.block.props as ExternalLinkBlockData).targetUrl) ||
+                (link.block.type === "damFileDownload" && (link.block.props as DamFileDownloadLinkBlockData).file) ||
+                (link.block.type === "email" && (link.block.props as EmailLinkBlockData).email) ||
+                (link.block.type === "phone" && (link.block.props as PhoneLinkBlockData).phone)),
+    );
+};

site/tsconfig.json

@@ -29,6 +29,6 @@
             }
         ]
     },
-    "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx", ".next/types/**/*.ts"],
+    "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx", ".next/types/**/*.ts", "./jest.setup.ts"],
     "exclude": ["node_modules"]
 }