ui: set up and write unit tests

* ref: cern-sis/issues-scoap3#228

.pre-commit-config.yaml

@@ -6,6 +6,7 @@ repos:
     rev: v4.4.0
     hooks:
       - id: trailing-whitespace
+        exclude: ^__snapshots__/
       - id: end-of-file-fixer
       - id: check-yaml
 

ui/.eslintrc.json

@@ -1,15 +1,5 @@
 {
-  "root": true,
-  "extends": ["next/core-web-vitals"],
-  "overrides": [
-    {
-      "files": ["*.js"],
-      "parser": "espree",
-      "parserOptions": {
-        "ecmaVersion": 2020
-      }
-    }
-  ],
+  "extends": ["next", "next/core-web-vitals", "prettier"],
   "rules": {
     "react/display-name": "off",
     "react-hooks/exhaustive-deps": "off"

ui/README.md

@@ -1,4 +1,10 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# SCOAP# Repository
+
+www.repo.scoap3.org
+
+SCOAP3 is a one-of-its-kind partnership of over three-thousand libraries, key funding agencies and research centers in 43 countries and 3 intergovernmental organizations. Working with leading publishers, SCOAP3 has converted key journals in the field of high-energy physics to open access at no cost for authors. SCOAP3 centrally pays publishers for costs involved in providing their services, publishers, in turn, reduce subscription fees to all their customers, who can redirect these funds to contribute to SCOAP3. Each country contributes in a way commensurate to its scientific output in the field. In addition, existing open access journals are also centrally supported, removing any existing financial barrier for authors.
+
+SCOAP3 journals are open for any scientist to publish without any financial barriers. Copyright stays with authors, and a permissive CC-BY license allows text- and data-mining. SCOAP3 addresses open access mandates at no burden for authors. All articles appear in the SCOAP3 repository for further distribution, as well as being open access on publishers’ websites.
 
 ## Getting Started
 
@@ -15,7 +21,3 @@ bun dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.

ui/jest.config.mjs

@@ -0,0 +1,13 @@
+import nextJest from 'next/jest.js'
+
+const createJestConfig = nextJest({
+  dir: './',
+})
+
+/** @type {import('jest').Config} */
+const config = {
+  setupFilesAfterEnv: ['./jest.setup.ts'],
+  testEnvironment: 'jest-environment-jsdom',
+}
+
+export default createJestConfig(config)

ui/jest.setup.ts

@@ -0,0 +1,26 @@
+import '@testing-library/jest-dom';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+jest.mock("next/navigation", () => {
+  return {
+    useRouter: jest.fn(() => ({
+      push: jest.fn(),
+    })),
+    useSearchParams: jest.fn(() => ({
+      get: jest.fn(),
+    })),
+  };
+});

ui/package.json

@@ -2,14 +2,17 @@
   "name": "ui",
   "version": "0.1.0",
   "private": true,
+  "license": "GPL-2.0",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "yarn lint && jest && yarn build"
   },
   "dependencies": {
     "@ant-design/cssinjs": "^1.17.2",
+    "@testing-library/user-event": "^14.5.1",
     "antd": "^5.10.1",
     "better-react-mathjax": "^2.0.3",
     "lodash.isequal": "^4.5.0",
@@ -22,12 +25,18 @@
     "react-vis": "^1.12.1"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.1.2",
+    "@types/jest": "^29.5.10",
     "@types/lodash.isequal": "^4.5.8",
     "@types/node": "^20",
     "@types/react-html-parser": "^2.0.4",
     "autoprefixer": "^10",
     "eslint": "^8",
     "eslint-config-next": "13.5.5",
+    "eslint-config-prettier": "^9.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8",
     "tailwindcss": "^3",
     "typescript": "^5"

ui/src/__tests__/404.test.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from "@testing-library/react";
+
+import PageNotFound from "@/pages/404";
+
+describe("PageNotFound", () => {
+  it("renders 404 page", () => {
+    const { container } = render(<PageNotFound />);
+
+    expect(container).toMatchSnapshot();
+    expect(screen.getByText("Page not found")).toBeInTheDocument();
+  });
+});

ui/src/__tests__/500.test.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { useRouter } from "next/navigation";
+
+import ServerErrorPage from "@/pages/500";
+
+jest.mock("next/navigation", () => ({
+  useRouter: jest.fn(),
+}));
+
+const mockPush = jest.fn();
+(useRouter as jest.Mock).mockImplementation(() => ({
+  push: mockPush,
+}));
+
+describe("ServerErrorPage", () => {
+  it("renders error page", () => {
+    const { container } = render(<ServerErrorPage />);
+
+    expect(container).toMatchSnapshot();
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+    expect(screen.getByTestId("go-back")).toBeInTheDocument();
+  });
+
+  it("triggers router.push on 'go to home page' button click", () => {
+    render(<ServerErrorPage />);
+
+    fireEvent.click(screen.getByTestId("go-back"));
+
+    expect(mockPush).toHaveBeenCalledWith("/");
+  });
+});

ui/src/__tests__/__snapshots__/404.test.tsx.snap

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageNotFound renders 404 page 1`] = `
+<div>
+  <div
+    class="error-page"
+  >
+    <span
+      aria-label="search"
+      class="anticon anticon-search"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="search"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+        />
+      </svg>
+    </span>
+    <h1>
+      Page not found
+    </h1>
+    <p>
+      The page you are looking for could not be found.
+    </p>
+  </div>
+</div>
+`;

ui/src/__tests__/__snapshots__/500.test.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ServerErrorPage renders error page 1`] = `
+<div>
+  <div
+    class="error-page"
+  >
+    <span
+      aria-label="exclamation-circle"
+      class="anticon anticon-exclamation-circle"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="exclamation-circle"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+        />
+        <path
+          d="M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"
+        />
+      </svg>
+    </span>
+    <h1>
+      Something went wrong
+    </h1>
+    <p>
+      Please try again later or
+       
+      <a
+        data-testid="go-back"
+        type="button"
+      >
+        go to home page
+      </a>
+    </p>
+  </div>
+</div>
+`;