enable testing

Signed-off-by: Xe Iaso <me@xeiaso.net>

.gitea/workflows/tests.yml

@@ -0,0 +1,17 @@
+name: Tests
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  tests:
+    name: Build and deploy
+    runs-on: ubuntu-latest
+    steps:
+      - name: npm install
+        run: npm ci --include=dev
+      - name: run tests
+        run: npm run test

__tests__/app/about/page.test.jsx

@@ -0,0 +1,14 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import AboutPage from "@/app/about/page";
+import { allAuthors } from "@/.content-collections/generated";
+
+describe("AboutPage", () => {
+  test.each(allAuthors.map(a => a.displayName))("%s: in page", name => {
+    render(<AboutPage />);
+
+    const person = screen.getByText(name);
+
+    expect(person).toBeInTheDocument();
+  })
+});

__tests__/app/blog/[...slug]/page.test.jsx

@@ -0,0 +1,24 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import BlogPage from "@/app/blog/[...slug]/page";
+import { describe, expect, test, it } from "@jest/globals";
+import { allPosts } from "@/.content-collections/generated";
+
+test.each(allPosts)("BlogPage $slug", (p) => {
+  render(<BlogPage params={{ slug: p._meta.path.split("/") }} />);
+
+  it("properly renders the title", () => {
+    const heading = screen.getByRole("heading", {
+      level: 1,
+      name: p.title,
+    });
+
+    expect(heading)
+      //@ts-ignore
+      .toBeInTheDocument();
+  });
+});
+
+describe("placeholder", () => {
+  it("works", () => { });
+})

__tests__/app/page.test.jsx

@@ -0,0 +1,13 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import Page from "@/app/page";
+
+describe("Page", () => {
+  it("renders a heading", () => {
+    render(<Page />);
+
+    const heading = screen.getByRole("heading", { level: 1 });
+
+    expect(heading).toBeInTheDocument();
+  });
+});

__tests__/components/author-chip.test.tsx

@@ -0,0 +1,37 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import AuthorChip from "@/components/author-chip";
+import { describe, expect, test, it } from "@jest/globals";
+import { allAuthors } from "@/.content-collections/generated";
+
+describe("AuthorChip", () => {
+  test.each(allAuthors)("$displayName", (a) => {
+    render(<AuthorChip {...a!} />);
+
+    const person = screen.getByText(a.displayName);
+    expect(person)
+      //@ts-ignore
+      .toBeInTheDocument();
+
+    const avatarUrl = screen.getByRole("img", {
+      name: /Picture of/i,
+    });
+    expect(avatarUrl)
+      //@ts-ignore
+      .toBeInTheDocument();
+
+    if (a.bluesky !== undefined) {
+      const bluesky = screen.getByText(`@${a.bluesky!}`);
+      expect(bluesky)
+        //@ts-ignore
+        .toBeInTheDocument();
+    }
+
+    if (a.x !== undefined) {
+      const x = screen.getByText(`@${a.x!}`);
+      expect(x)
+        //@ts-ignore
+        .toBeInTheDocument();
+    }
+  });
+});

components/author-chip.tsx

@@ -2,7 +2,6 @@ import { IconBrandBluesky, IconBrandXFilled } from "@tabler/icons-react";
 import Image from "next/image";
 
 export interface AuthorChipParams {
-  name: string;
   displayName: string;
   avatarUrl: string;
   bluesky?: string;
@@ -10,7 +9,6 @@ export interface AuthorChipParams {
 }
 
 export default function AuthorChip({
-  name,
   displayName,
   avatarUrl,
   bluesky,
@@ -47,6 +45,18 @@ export default function AuthorChip({
                 </div>
               </>
             )}
+            {x !== undefined && (
+              <div className="text-sm font-medium text-gray-700 group-hover:text-gray-900">
+                <a href={`https://bsky.app/profile/${bluesky}`}>
+                  <IconBrandXFilled
+                    size={16}
+                    fill="gray-700"
+                    className="inline-block"
+                  />{" "}
+                  @{x}
+                </a>
+              </div>
+            )}
           </div>
         </div>
       </div>

jest.config.ts

@@ -0,0 +1,21 @@
+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',
+  // Add more setup options before each test is run
+  // setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/$1"
+  },
+}
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+export default createJestConfig(config)

package.json

@@ -7,7 +7,8 @@
     "build": "content-collections build && next build",
     "start": "next start",
     "lint": "next lint",
-    "deploy": "earthly --push +run && kubectl apply -k manifest && kubectl rollout restart -n default deployment/techaro-lol"
+    "deploy": "earthly --push +run && kubectl apply -k manifest && kubectl rollout restart -n default deployment/techaro-lol",
+    "test": "content-collections build && jest"
   },
   "dependencies": {
     "@arcjet/next": "^1.0.0-alpha.26",
@@ -25,6 +26,9 @@
     "@content-collections/mdx": "^0.1.5",
     "@content-collections/next": "^0.2.2",
     "@flydotio/dockerfile": "^0.5.7",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
@@ -32,8 +36,12 @@
     "eslint": "^8",
     "eslint-config-next": "^14.2.9",
     "husky": "^9.1.6",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
     "typescript": "^5"
   }
 }

tsconfig.json

@@ -27,7 +27,9 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    "scripts/generate-rss-feed.mjs"
+    "scripts/generate-rss-feed.mjs",
+    "__tests__/**/*.jsx",
+    "__tests__/**/*.tsx"
   ],
   "exclude": ["node_modules"]
 }