Add an integration test, which accesses the KG rather than using mock…

… data.

.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:

apps/nar-v3/__tests__/globals.js

@@ -0,0 +1,3 @@
+const authToken = null; // for local testing, provide an EBRAINS IAM token
+
+export { authToken };

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);
+  });
+});

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();

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": {

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} />
   );
 }
 

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>