Design

__tests__/Animations/Matrix.test.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import ReactMatrixAnimation from "../../src/components/Animations/Matrix.component";
+
+describe("ReactMatrixAnimation", () => {
+  test("renders the canvas element", () => {
+    render(<ReactMatrixAnimation />);
+    const canvas = screen.getByTestId("matrix-canvas");
+    expect(canvas).toBeInTheDocument();
+    expect(canvas).toHaveAttribute("id", "matrixCanvas");
+    expect(canvas).toHaveStyle("width: 100%");
+  });
+
+  test("initializes with default props", () => {
+    render(<ReactMatrixAnimation />);
+    const canvas = screen.getByTestId("matrix-canvas");
+    expect(canvas).toBeInTheDocument();
+  });
+
+  test("initializes with custom props", () => {
+    render(
+      <ReactMatrixAnimation
+        tileSize={30}
+        fadeFactor={0.1}
+        backgroundColor="#000000"
+        fontColor="#FFFFFF"
+        tileSet={["A", "B", "C"]}
+      />
+    );
+    const canvas = screen.getByTestId("matrix-canvas");
+    expect(canvas).toBeInTheDocument();
+  });
+
+  test("throws error for invalid background color", () => {
+    expect(() => {
+      render(<ReactMatrixAnimation backgroundColor="invalid" />);
+    }).toThrow("Invalid background color. Use a hex value e.g. #030303");
+  });
+
+  test("throws error for invalid font color", () => {
+    expect(() => {
+      render(<ReactMatrixAnimation fontColor="invalid" />);
+    }).toThrow("Invalid font color. Use a hex value e.g. #030303");
+  });
+});

__tests__/Index/IndexContent.test.tsx

@@ -1,7 +1,4 @@
-/**
- * @jest-environment jsdom
- */
-
+/*
 import { render, screen } from "@testing-library/react";
 import { mockIntersectionObserver } from "jsdom-testing-mocks";
 
@@ -32,4 +29,94 @@ describe("IndexContent", () => {
     const prosjekter = screen.getByRole("heading", { name: /prosjekter/i });
     expect(prosjekter).toBeInTheDocument();
   });
+});*/
+
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import IndexContent from "../../src/components/Index/IndexContent.component";
+
+import BounceInScroll from "../../src/components/Animations/BounceInScroll.component";
+import { PortableText } from "@portabletext/react";
+
+// Mock the BounceInScroll component
+jest.mock(
+  "../../src/components/Animations/BounceInScroll.component",
+  () =>
+    ({ children }) => <div>{children}</div>
+);
+
+// Mock the PortableText component
+jest.mock("@portabletext/react", () => ({
+  PortableText: ({ value, components }) => (
+    <div>
+      {value.map((block) => (
+        <div key={block._key}>
+          {block.children.map((child) => {
+            const MarkComponent = components.marks[child.marks[0]];
+            return MarkComponent ? (
+              <MarkComponent key={child._key}>{child.text}</MarkComponent>
+            ) : (
+              <span key={child._key}>{child.text}</span>
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  ),
+}));
+
+const mockContent = [
+  {
+    id: "1",
+    title: "Test Title 1",
+    text: [
+      {
+        _key: "a",
+        _type: "block",
+        children: [
+          { _key: "a1", _type: "span", marks: ["bold"], text: "Bold Text" },
+          { _key: "a2", _type: "span", marks: [], text: " Normal Text" },
+        ],
+        markDefs: [],
+        style: "normal",
+      },
+    ],
+  },
+  {
+    id: "2",
+    title: "Test Title 2",
+    text: [
+      {
+        _key: "b",
+        _type: "block",
+        children: [
+          { _key: "b1", _type: "span", marks: ["italic"], text: "Italic Text" },
+        ],
+        markDefs: [],
+        style: "normal",
+      },
+    ],
+  },
+];
+
+// Define the mark components
+const Bold = ({ children }) => <strong>{children}</strong>;
+const Italic = ({ children }) => <em>{children}</em>;
+
+const components = {
+  marks: {
+    bold: Bold,
+    italic: Italic,
+  },
+};
+
+describe("IndexContent Component", () => {
+  test("renders IndexContent with given content", () => {
+    render(<IndexContent pageContent={mockContent} components={components} />);
+
+    // Check if the titles are rendered
+    const titles = screen.getAllByTestId("sanity-title");
+    expect(titles[0]).toHaveTextContent("Test Title 1");
+  });
 });

__tests__/Prosjekter/ProsjektCard.test.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import ProsjektCard from "../../src/components/Prosjekter/ProsjektCard";
+
+// Mock the Button component
+jest.mock(
+  "../../src/components/UI/Button.component",
+  () =>
+    ({ href, renderAs, children }) => <a href={href}>{children}</a>
+);
+
+const mockProjectProps = {
+  id: "1",
+  name: "Test Project",
+  description: "This is a test project",
+  subdescription: "This is a subdescription",
+  projectimage: "test-image.jpg",
+  urlwww: [{ url: "https://example.com", _key: "1" }],
+  urlgithub: [{ url: "https://github.com/example", _key: "1" }],
+};
+
+describe("ProsjektCard", () => {
+  it("renders the project details correctly", () => {
+    render(<ProsjektCard {...mockProjectProps} />);
+
+    // Check if the project name is rendered
+    expect(screen.getByText("Test Project")).toBeInTheDocument();
+
+    // Check if the project description is rendered
+    expect(screen.getByText("This is a test project")).toBeInTheDocument();
+
+    // Check if the project subdescription is rendered
+    expect(screen.getByText("This is a subdescription")).toBeInTheDocument();
+
+    // Check if the project image is rendered
+    const img = screen.getByAltText("Test Project");
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute("src", "test-image.jpg");
+
+    // Check if the "Besøk" button is rendered with the correct href
+    const visitButton = screen.getByText("Besøk");
+    expect(visitButton).toBeInTheDocument();
+    expect(visitButton.closest("a")).toHaveAttribute(
+      "href",
+      "https://example.com"
+    );
+
+    // Check if the "GitHub" button is rendered with the correct href
+    const githubButton = screen.getByText("GitHub");
+    expect(githubButton).toBeInTheDocument();
+    expect(githubButton.closest("a")).toHaveAttribute(
+      "href",
+      "https://github.com/example"
+    );
+  });
+
+  it("does not render buttons if urls are not provided", () => {
+    const propsWithoutUrls = {
+      ...mockProjectProps,
+      urlwww: [],
+      urlgithub: [],
+    };
+
+    render(<ProsjektCard {...propsWithoutUrls} />);
+
+    // Check that the "Besøk" button is not rendered
+    expect(screen.queryByText("Besøk")).not.toBeInTheDocument();
+
+    // Check that the "GitHub" button is not rendered
+    expect(screen.queryByText("GitHub")).not.toBeInTheDocument();
+  });
+});