Add jest setup for site

site/.gitignore

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

site/jest.config.ts

@@ -0,0 +1,19 @@
+import type { Config } from "jest";
+import nextJest from "next/jest.js";
+
+const createJestConfig = nextJest({
+    // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+    dir: "./",
+});
+
+// Add any custom config to be passed to Jest
+const config: Config = {
+    coverageProvider: "v8",
+    testEnvironment: "jsdom",
+    setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
+    // Add more setup options before each test is run
+    // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+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",
@@ -47,12 +50,18 @@
         "@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.5.0",
+        "@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",
         "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__/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)),
+    );
+};