From 61e6576a13579ba03599b44a0e9083470897b674 Mon Sep 17 00:00:00 2001
From: Andrew Davison <andrew.davison@cnrs.fr>
Date: Thu, 8 Aug 2024 11:21:35 +0200
Subject: [PATCH] Add an integration test, which accesses the KG rather than
 using mock data.

---
 .gitlab-ci.yml                             | 11 +++++++++
 apps/nar-v3/__tests__/globals.js           |  3 +++
 apps/nar-v3/__tests__/routes/home.test.jsx | 27 ++++++++++++++++++++++
 apps/nar-v3/__tests__/setup.js             |  2 +-
 apps/nar-v3/package.json                   |  1 +
 apps/nar-v3/src/main.jsx                   | 13 +++++++++--
 apps/nar-v3/src/routes/home.jsx            |  2 +-
 7 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 apps/nar-v3/__tests__/globals.js
 create mode 100644 apps/nar-v3/__tests__/routes/home.test.jsx

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 31283f9..907a26e 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -1,6 +1,17 @@
 stages:
+  - test
   - build
 
+test_app:
+  stage: test
+  script:
+    - cd apps/nar-v3
+    - npm ci
+    - npm run testci  # runs all tests whose name does _not_ contain "KG"
+  tags:
+    - docker-runner
+  image: docker-registry.ebrains.eu/neuralactivity/node:20-alpine
+
 build_image_production:
   stage: build
   only:
diff --git a/apps/nar-v3/__tests__/globals.js b/apps/nar-v3/__tests__/globals.js
new file mode 100644
index 0000000..3dc981e
--- /dev/null
+++ b/apps/nar-v3/__tests__/globals.js
@@ -0,0 +1,3 @@
+const authToken = null; // for local testing, provide an EBRAINS IAM token
+
+export { authToken };
diff --git a/apps/nar-v3/__tests__/routes/home.test.jsx b/apps/nar-v3/__tests__/routes/home.test.jsx
new file mode 100644
index 0000000..f4681e3
--- /dev/null
+++ b/apps/nar-v3/__tests__/routes/home.test.jsx
@@ -0,0 +1,27 @@
+import { describe, test, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import App from "../../src/main";
+import { authToken } from "../globals";
+
+describe("test with real KG queries", () => {
+  // this test requires a valid auth token to have been set in globals.js,
+  // since it actually makes KG queries
+  test("check home route with KG", { timeout: 10000 }, async () => {
+    const auth = {
+      token: authToken,
+    };
+    render(<App auth={auth} />);
+
+    expect(screen.getByText("EBRAINS: Neural Activity Resource (alpha)")).toBeDefined();
+
+    const label = await screen.findByText("Patch clamp recording", {}, { timeout: 10000 });
+    expect(label).toBeDefined();
+
+    const datasetCountChip = await screen.findByTitle(
+      "All neural activity datasets count",
+      {},
+      { timeout: 10000 }
+    );
+    expect(parseInt(datasetCountChip.textContent)).toBeGreaterThan(0);
+  });
+});
diff --git a/apps/nar-v3/__tests__/setup.js b/apps/nar-v3/__tests__/setup.js
index 5bbe909..18c274a 100644
--- a/apps/nar-v3/__tests__/setup.js
+++ b/apps/nar-v3/__tests__/setup.js
@@ -3,5 +3,5 @@ import { vi } from "vitest";
 
 const fetchMocker = createFetchMock(vi);
 
-// sets globalThis.fetch and globalThis.fetchMock to our mocked version
 fetchMocker.enableMocks();
+fetchMocker.dontMock();
diff --git a/apps/nar-v3/package.json b/apps/nar-v3/package.json
index a9def26..708dc40 100644
--- a/apps/nar-v3/package.json
+++ b/apps/nar-v3/package.json
@@ -9,6 +9,7 @@
     "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "test": "vitest",
+    "testci": "vitest -t '^((?!KG).)*$'",
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
diff --git a/apps/nar-v3/src/main.jsx b/apps/nar-v3/src/main.jsx
index a1fa59d..cffec22 100644
--- a/apps/nar-v3/src/main.jsx
+++ b/apps/nar-v3/src/main.jsx
@@ -88,8 +88,10 @@ function getRouter(auth) {
   ]);
 }
 
-function renderApp(auth) {
-  ReactDOM.createRoot(document.getElementById("root")).render(
+export default function App(props) {
+  const auth = props.auth;
+
+  return (
     <React.StrictMode>
       <ThemeProvider theme={theme}>
         <CssBaseline />
@@ -113,6 +115,13 @@ function renderApp(auth) {
         </main>
       </ThemeProvider>
     </React.StrictMode>
+  )
+
+}
+
+function renderApp(auth) {
+  ReactDOM.createRoot(document.getElementById("root")).render(
+    <App auth={auth} />
   );
 }
 
diff --git a/apps/nar-v3/src/routes/home.jsx b/apps/nar-v3/src/routes/home.jsx
index 612f983..819beaa 100644
--- a/apps/nar-v3/src/routes/home.jsx
+++ b/apps/nar-v3/src/routes/home.jsx
@@ -70,7 +70,7 @@ function ModalityCard(props) {
           <CardMedia component="img" height="200" image={image} title={label} />
           <CardContent>
             <Typography gutterBottom variant="h5" component="h2">
-              {label} <Chip label={count} />
+              {label} <Chip label={count} title={`${label} count`} />
             </Typography>
           </CardContent>
         </CardActionArea>