ui: set up and write unit tests

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

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"
   },
   "dependencies": {
     "@ant-design/cssinjs": "^1.17.2",
+    "@testing-library/user-event": "^14.5.1",
     "antd": "^5.10.1",
     "lodash.isequal": "^4.5.0",
     "moment": "^2.29.4",
@@ -21,12 +24,17 @@
     "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",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8",
     "tailwindcss": "^3",
     "typescript": "^5"

ui/src/components/shared/JsonPreview.tsx → ui/src/components/detail/JsonPreview.tsx

@@ -15,7 +15,7 @@ export const JsonPreview = ({ article }: JsonPreviewProps) => {
           key: "1",
           label: "Metadata preview. Preview of JSON metadata for this article.",
           children: (
-            <p className="p-8 json-preview-content">
+            <p className="p-8 json-preview-content" data-testid="json-preview-content" >
               <pre className="whitespace-pre-wrap font-mono text-sm leading-relaxed">
                 {JSON.stringify(article, undefined, 2)}
               </pre>

ui/src/components/detail/__tests__/DetailPageInfo.test.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import DetailPageInfo from "../DetailPageInfo";
+import { record } from '@/mocks/record';
+
+describe("DetailPageInfo", () => {
+  it("renders detail page info correctly", () => {
+    const { container } = render(<DetailPageInfo article={record} />);
+
+    expect(container).toMatchSnapshot();
+    expect(screen.getByText("Published on:")).toBeInTheDocument();
+    expect(screen.getByText("25 June 2015")).toBeInTheDocument();
+    expect(screen.getByText("Created on:")).toBeInTheDocument();
+    expect(screen.getByText("30 April 2018")).toBeInTheDocument();
+    expect(screen.getByText("Springer/SISSA")).toBeInTheDocument();
+    expect(screen.getByText("Published in:")).toBeInTheDocument();
+    expect(screen.getByText("Journal of High Energy Physics")).toBeInTheDocument();
+    expect(screen.getByText("(2015)")).toBeInTheDocument();
+    expect(screen.getByText("Page 171")).toBeInTheDocument();
+    expect(screen.getByText("DOI:")).toBeInTheDocument();
+    expect(screen.getByText("10.1007/JHEP06(2015)171")).toBeInTheDocument();
+    expect(screen.getByText("arXiv:")).toBeInTheDocument();
+    expect(screen.getByText("hep-th")).toBeInTheDocument();
+    expect(screen.getByText("1504.07579")).toBeInTheDocument();
+    expect(screen.getByText("Copyrights:")).toBeInTheDocument();
+    expect(screen.getByText("The Author(s)")).toBeInTheDocument();
+    expect(screen.getByText("Licence:")).toBeInTheDocument();
+    expect(screen.getByText("CC-BY-4.0")).toBeInTheDocument();
+    expect(screen.getByText("Fulltext files:")).toBeInTheDocument();
+    expect(screen.getByText("XML")).toBeInTheDocument();
+    expect(screen.getByText("PDF/A")).toBeInTheDocument();
+  });
+});

ui/src/components/detail/__tests__/JsonPreview.test.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { JsonPreview } from "../JsonPreview";
+import { record } from "../../../mocks/index";
+
+describe("JsonPreview", () => {
+  it("renders JSON preview correctly", async () => {
+    render(<JsonPreview article={record} />);
+
+    await waitFor(() =>
+      userEvent.click(
+        screen.getByText(
+          "Metadata preview. Preview of JSON metadata for this article."
+        )
+      )
+    );
+
+    expect(
+      screen.getByText(
+        "Metadata preview. Preview of JSON metadata for this article."
+      )
+    ).toBeInTheDocument();
+    expect(screen.getByTestId("json-preview-content")?.textContent).toContain(
+      "Strings from 3D gravity: asymptotic dynamics of AdS 3 gravity with free boundary conditions"
+    );
+    expect(screen.getByTestId("json-preview-content")?.textContent).toContain(
+      "Sundborg"
+    );
+    expect(screen.getByTestId("json-preview-content")?.textContent).toContain(
+      "2015-06-25"
+    );
+    expect(screen.getByTestId("json-preview-content")?.textContent).toContain(
+      "Springer/SISSA"
+    );
+    expect(screen.getByTestId("json-preview-content")?.textContent).toContain(
+      "Journal of High Energy Physics"
+    );
+    expect(screen.getByTestId("json-preview-content")?.textContent).toContain(
+      "10.1007/JHEP06(2015)171"
+    );
+  });
+
+  it("collapses and expands the content correctly", async () => {
+    render(<JsonPreview article={record} />);
+
+    expect(screen.queryByTestId("json-preview-content")).toBeNull();
+
+    userEvent.click(
+      screen.getByText(
+        "Metadata preview. Preview of JSON metadata for this article."
+      )
+    );
+
+    await waitFor(() =>
+      expect(screen.getByTestId("json-preview-content")?.textContent).toContain(
+        "Strings from 3D gravity: asymptotic dynamics of AdS 3 gravity with free boundary conditions"
+      )
+    );
+  });
+});

ui/src/components/detail/__tests__/__snapshots__/DetailPageInfo.test.js.snap

@@ -0,0 +1,162 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DetailPageInfo renders detail page info correctly 1`] = `
+<div>
+  <dl
+    class="m-0 pb-5"
+  >
+    <dt>
+      Published on:
+    </dt>
+    <dd>
+      25 June 2015
+    </dd>
+    <dt>
+      Created on:
+    </dt>
+    <dd>
+      30 April 2018
+    </dd>
+    <dt>
+      Publisher:
+    </dt>
+    <dd>
+      Springer/SISSA
+    </dd>
+    <dt>
+      Published in:
+    </dt>
+    <dd>
+      <p
+        class="publication-info-detail false inline-block mb-1"
+      >
+        <span
+          class="publication-info-title"
+        >
+          Journal of High Energy Physics
+        </span>
+        <span
+          class="publication-info-volume_year"
+        >
+           (2015)
+        </span>
+        <span
+          class="publication-info-pages"
+        >
+          Page 171
+        </span>
+      </p>
+    </dd>
+    <div>
+      <dt>
+        DOI
+        :
+      </dt>
+      <dd>
+        <a
+          href="https://doi.org/10.1007/JHEP06(2015)171"
+        >
+          10.1007/JHEP06(2015)171
+        </a>
+      </dd>
+    </div>
+    <div>
+      <dt>
+        arXiv
+        :
+      </dt>
+      <dd>
+        hep-th
+      </dd>
+      <dd>
+        <a
+          href="https://arxiv.org/abs/1504.07579"
+        >
+          1504.07579
+        </a>
+      </dd>
+    </div>
+    <dt>
+      Copyrights:
+    </dt>
+    <dd>
+      The Author(s)
+    </dd>
+    <dt>
+      Licence:
+    </dt>
+    <dd>
+      <a
+        href="http://creativecommons.org/licenses/by/4.0/"
+      >
+        CC-BY-4.0
+      </a>
+    </dd>
+    <div
+      class="ant-divider css-dev-only-do-not-override-2i2tap ant-divider-horizontal"
+      role="separator"
+    />
+    <dt>
+      Fulltext files:
+    </dt>
+    <dd
+      class="flex mt-2"
+    >
+      <a
+        class="file-big mr-2"
+        download=""
+        href="https://scoap3-dev-backend.s3.cern.ch/media/files/10913/10.1007/JHEP06(2015)171.xml"
+        target="_blank"
+      >
+        <span
+          aria-label="file-text"
+          class="anticon anticon-file-text"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="file-text"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"
+            />
+          </svg>
+        </span>
+         XML
+      </a>
+      <a
+        class="file-big mr-2"
+        download=""
+        href="https://scoap3-dev-backend.s3.cern.ch/media/files/10913/10.1007/JHEP06(2015)171_a.pdf"
+        target="_blank"
+      >
+        <span
+          aria-label="file-pdf"
+          class="anticon anticon-file-pdf"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="file-pdf"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M531.3 574.4l.3-1.4c5.8-23.9 13.1-53.7 7.4-80.7-3.8-21.3-19.5-29.6-32.9-30.2-15.8-.7-29.9 8.3-33.4 21.4-6.6 24-.7 56.8 10.1 98.6-13.6 32.4-35.3 79.5-51.2 107.5-29.6 15.3-69.3 38.9-75.2 68.7-1.2 5.5.2 12.5 3.5 18.8 3.7 7 9.6 12.4 16.5 15 3 1.1 6.6 2 10.8 2 17.6 0 46.1-14.2 84.1-79.4 5.8-1.9 11.8-3.9 17.6-5.9 27.2-9.2 55.4-18.8 80.9-23.1 28.2 15.1 60.3 24.8 82.1 24.8 21.6 0 30.1-12.8 33.3-20.5 5.6-13.5 2.9-30.5-6.2-39.6-13.2-13-45.3-16.4-95.3-10.2-24.6-15-40.7-35.4-52.4-65.8zM421.6 726.3c-13.9 20.2-24.4 30.3-30.1 34.7 6.7-12.3 19.8-25.3 30.1-34.7zm87.6-235.5c5.2 8.9 4.5 35.8.5 49.4-4.9-19.9-5.6-48.1-2.7-51.4.8.1 1.5.7 2.2 2zm-1.6 120.5c10.7 18.5 24.2 34.4 39.1 46.2-21.6 4.9-41.3 13-58.9 20.2-4.2 1.7-8.3 3.4-12.3 5 13.3-24.1 24.4-51.4 32.1-71.4zm155.6 65.5c.1.2.2.5-.4.9h-.2l-.2.3c-.8.5-9 5.3-44.3-8.6 40.6-1.9 45 7.3 45.1 7.4zm191.4-388.2L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z"
+            />
+          </svg>
+        </span>
+         PDF/A
+      </a>
+    </dd>
+  </dl>
+</div>
+`;