Merge pull request #567 from ONSdigital/BLAIS5-3956-james

Promote from BLAIS5-3956-james to main
ONSdigital · Nov 6, 2023 · bc5dc53 · bc5dc53
2 parents b78b9d4 + df53e5e
commit bc5dc53
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 38 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -1,4 +1,6 @@
 process.env = Object.assign(process.env, {
+    NODE_ENV: "development",
+    REACT_APP_CATI_DASHBOARD_URL: "cati-dashboard-url/Blaise/CaseInfo",
     VM_EXTERNAL_CLIENT_URL: "external-client-url",
     VM_EXTERNAL_WEB_URL: "external-web-url",
     BLAISE_API_URL: "mock",

diff --git a/server/Config.ts b/server/Config.ts
@@ -8,12 +8,12 @@ export interface EnvironmentVariables {
 }
 
 export function getEnvironmentVariables(): EnvironmentVariables {
-    let {VM_EXTERNAL_CLIENT_URL, 
-        VM_EXTERNAL_WEB_URL, 
-        BLAISE_API_URL, 
-        BIMS_CLIENT_ID, 
-        BIMS_API_URL} = process.env;
-    const CATI_DASHBOARD_URL = "https://" + VM_EXTERNAL_WEB_URL + "/Blaise";
+    let { VM_EXTERNAL_CLIENT_URL,
+        VM_EXTERNAL_WEB_URL,
+        BLAISE_API_URL,
+        BIMS_CLIENT_ID,
+        BIMS_API_URL } = process.env;
+    const CATI_DASHBOARD_URL = "https://" + VM_EXTERNAL_WEB_URL + "/Blaise/CaseInfo";
 
     if (BLAISE_API_URL === undefined) {
         console.error("BLAISE_API_URL environment variable has not been set");
@@ -40,12 +40,14 @@ export function getEnvironmentVariables(): EnvironmentVariables {
         BIMS_API_URL = "ENV_VAR_NOT_SET";
     }
 
-    return {VM_EXTERNAL_CLIENT_URL, 
-        VM_EXTERNAL_WEB_URL, 
+    return {
+        VM_EXTERNAL_CLIENT_URL,
+        VM_EXTERNAL_WEB_URL,
         BLAISE_API_URL: fixURL(BLAISE_API_URL),
-        CATI_DASHBOARD_URL, 
-        BIMS_CLIENT_ID, 
-        BIMS_API_URL};
+        CATI_DASHBOARD_URL,
+        BIMS_CLIENT_ID,
+        BIMS_API_URL
+    };
 }
 
 function fixURL(url: string): string {

diff --git a/server/index.ts b/server/index.ts
@@ -4,7 +4,7 @@ import * as profiler from "@google-cloud/profiler";
 import { getEnvironmentVariables } from "./Config";
 import dotenv from "dotenv";
 
-profiler.start({logLevel: 4}).catch((err: unknown) => {
+profiler.start({ logLevel: 4 }).catch((err: unknown) => {
     console.log(`Failed to start profiler: ${err}`);
 });
 
@@ -24,4 +24,4 @@ const app = nodeServer(environmentVariables, blaiseApiClient);
 
 app.listen(port);
 
-console.log("App is listening on port " + port);
+console.log("App is listening on port " + port);
diff --git a/server/tests/config.test.ts b/server/tests/config.test.ts
@@ -1,4 +1,4 @@
-import {getEnvironmentVariables} from "../Config";
+import { getEnvironmentVariables } from "../Config";
 
 describe("Config setup", () => {
     afterEach(() => {
@@ -20,7 +20,7 @@ describe("Config setup", () => {
         expect(VM_EXTERNAL_CLIENT_URL).toBe("external-client-url");
         expect(VM_EXTERNAL_WEB_URL).toBe("external-web-url");
         expect(BLAISE_API_URL).toBe("http://mock");
-        expect(CATI_DASHBOARD_URL).toBe("https://external-web-url/Blaise");
+        expect(CATI_DASHBOARD_URL).toBe("https://external-web-url/Blaise/CaseInfo");
         expect(BIMS_CLIENT_ID).toBe("mock@id");
         expect(BIMS_API_URL).toBe("mock-bims-api");
     });
@@ -46,7 +46,7 @@ describe("Config setup", () => {
         expect(VM_EXTERNAL_CLIENT_URL).toBe("ENV_VAR_NOT_SET");
         expect(VM_EXTERNAL_WEB_URL).toBe("ENV_VAR_NOT_SET");
         expect(BLAISE_API_URL).toBe("ENV_VAR_NOT_SET");
-        expect(CATI_DASHBOARD_URL).toBe("https://undefined/Blaise");
+        expect(CATI_DASHBOARD_URL).toBe("https://undefined/Blaise/CaseInfo");
         expect(BIMS_CLIENT_ID).toBe("ENV_VAR_NOT_SET");
         expect(BIMS_API_URL).toBe("ENV_VAR_NOT_SET");
     });

diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 import { render, waitFor, fireEvent, screen, cleanup } from "@testing-library/react";
-import App from "./App";
 import "@testing-library/jest-dom";
 import flushPromises from "./tests/utils";
 import { act } from "react-dom/test-utils";
 import { createMemoryHistory } from "history";
 import { Router } from "react-router-dom";
 import { Survey } from "blaise-api-node-client";
+import App from "./App";
 
 const surveyListReturned: Survey[] = [
     {
@@ -103,6 +103,8 @@ describe("React homepage", () => {
 
         await waitFor(() => {
             expect(getByText(/Telephone Operations Blaise Interface/i)).toBeDefined();
+            expect(queryByText(/Link to CATI dashboard/i)).toBeInTheDocument();
+            expect(queryByText(/Link to CATI dashboard/i)?.getAttribute("href")).toContain("/Blaise/CaseInfo");
             expect(getByText(/OPN/i)).toBeDefined();
             expect(queryByText(/Loading/i)).not.toBeInTheDocument();
         });

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,12 +1,12 @@
-import React, {ReactElement, useEffect, useState} from "react";
-import {DefaultErrorBoundary} from "./Components/ErrorHandling/DefaultErrorBoundary";
-import {isDevEnv, isTrainingEnv} from "./Functions";
-import {Switch, Route} from "react-router-dom";
+import React, { ReactElement, useEffect, useState } from "react";
+import { DefaultErrorBoundary } from "./Components/ErrorHandling/DefaultErrorBoundary";
+import { isDevEnv, isTrainingEnv } from "./Functions";
+import { Switch, Route } from "react-router-dom";
 import InstrumentList from "./Components/InstrumentList";
 import SurveyList from "./Components/SurveyList";
-import {Survey} from "blaise-api-node-client";
-import {ErrorBoundary} from "./Components/ErrorHandling/ErrorBoundary";
-import {Footer, Header, ONSErrorPanel, ExternalLink} from "blaise-design-system-react-components";
+import { Survey } from "blaise-api-node-client";
+import { ErrorBoundary } from "./Components/ErrorHandling/ErrorBoundary";
+import { Footer, Header, ONSErrorPanel, ExternalLink } from "blaise-design-system-react-components";
 
 interface listError {
     error: boolean,
@@ -28,10 +28,10 @@ function App(): ReactElement {
 
     useEffect(() => {
         if (isTrainingEnv()) setHeaderText("Telephone Operations Blaise Interface (training)");
-      });
+    });
 
     const [externalClientUrl, setExternalClientUrl] = useState<string>("External URL should be here");
-    const [externalCATIUrl, setExternalCATIUrl] = useState<string>("/Blaise");
+    const [externalCATIUrl, setExternalCATIUrl] = useState<string>("/Blaise/CaseInfo");
 
     useEffect(function retrieveVariables() {
         setExternalClientUrl(isDevEnv() ?
@@ -41,7 +41,7 @@ function App(): ReactElement {
     }, [externalClientUrl, externalCATIUrl]);
 
     const [surveys, setSurveys] = useState<Survey[]>([]);
-    const [listError, setListError] = useState<listError>({error: false, message: "Loading ..."});
+    const [listError, setListError] = useState<listError>({ error: false, message: "Loading ..." });
 
     useEffect(() => {
         getList();
@@ -61,20 +61,20 @@ function App(): ReactElement {
                         console.log("Retrieved instrument list, " + json.length + " items/s");
                         isDevEnv() && console.log(json);
                         setSurveys(json);
-                        setListError({error: false, message: ""});
+                        setListError({ error: false, message: "" });
 
                         // If the list is empty then show this message in the list
-                        if (json.length === 0) setListError({error: false, message: "No active surveys found."});
+                        if (json.length === 0) setListError({ error: false, message: "No active surveys found." });
                     })
                     .catch((error) => {
                         isDevEnv() && console.error("Unable to read json from response, error: " + error);
-                        setListError({error: true, message: "Unable to load surveys"});
+                        setListError({ error: true, message: "Unable to load surveys" });
                     });
             }).catch((error) => {
                 isDevEnv() && console.error("Failed to retrieve instrument list, error: " + error);
-                setListError({error: true, message: "Unable to load surveys"});
+                setListError({ error: true, message: "Unable to load surveys" });
             }
-        );
+            );
     }
 
 
@@ -93,28 +93,28 @@ function App(): ReactElement {
                             Please note, the table containing information on active questionnaires may
                             take a few seconds to load.
                         </p>
-                        {listError.error && <ONSErrorPanel/>}
+                        {listError.error && <ONSErrorPanel />}
                         <p className="ons-u-mt-m">
                             <ExternalLink text={"Link to CATI dashboard"}
-                                          link={externalCATIUrl}
-                                          id={"cati-dashboard"}/>
+                                link={externalCATIUrl}
+                                id={"cati-dashboard"} />
                         </p>
                         <Switch>
                             <Route path="/survey/:survey">
                                 <ErrorBoundary errorMessageText={"Unable to load questionnaire table correctly"}>
-                                    <InstrumentList list={surveys} listError={listError}/>
+                                    <InstrumentList list={surveys} listError={listError} />
                                 </ErrorBoundary>
                             </Route>
                             <Route path="/">
                                 <ErrorBoundary errorMessageText={"Unable to load survey table correctly"}>
-                                    <SurveyList list={surveys} listError={listError}/>
+                                    <SurveyList list={surveys} listError={listError} />
                                 </ErrorBoundary>
                             </Route>
                         </Switch>
                     </DefaultErrorBoundary>
                 </main>
             </div>
-            <Footer/>
+            <Footer />
         </>
     );
 }

diff --git a/src/__snapshots__/App.test.tsx.snap b/src/__snapshots__/App.test.tsx.snap
@@ -81,6 +81,7 @@ Object {
           >
             <a
               class="ons-external-link"
+              href="cati-dashboard-url/Blaise/CaseInfo"
               id="cati-dashboard"
               rel="noopener noreferrer"
               target="_blank"
@@ -421,6 +422,7 @@ Object {
         >
           <a
             class="ons-external-link"
+            href="cati-dashboard-url/Blaise/CaseInfo"
             id="cati-dashboard"
             rel="noopener noreferrer"
             target="_blank"
@@ -818,6 +820,7 @@ Object {
           >
             <a
               class="ons-external-link"
+              href="cati-dashboard-url/Blaise/CaseInfo"
               id="cati-dashboard"
               rel="noopener noreferrer"
               target="_blank"
@@ -1119,6 +1122,7 @@ Object {
         >
           <a
             class="ons-external-link"
+            href="cati-dashboard-url/Blaise/CaseInfo"
             id="cati-dashboard"
             rel="noopener noreferrer"
             target="_blank"

diff --git a/src/features/CATI_Dashboard_Link.feature b/src/features/CATI_Dashboard_Link.feature
@@ -0,0 +1,6 @@
+Feature: Cati dashboard link
+
+  Scenario: Following the Cati dashboard link takes a user to the case info page
+  Given I access the Telephone Operations Blaise Interface URL
+  When the link to the CATI dashboard is present
+  Then it will take me to the CATI dashboard
diff --git a/src/features/step_definitions/CATI_Dashboard_Link.test.tsx b/src/features/step_definitions/CATI_Dashboard_Link.test.tsx
@@ -0,0 +1,71 @@
+import React from "react";
+import { defineFeature, loadFeature } from "jest-cucumber";
+import {cleanup, render, screen, waitFor} from "@testing-library/react";
+import { act } from "react-dom/test-utils";
+import { createMemoryHistory } from "history";
+import { Router } from "react-router-dom";
+import flushPromises from "../../tests/utils";
+
+
+import App from "../../App";
+import {survey_list_with_OPN_and_LMS_with_one_active_instrument_each} from "./API_Mock_Objects";
+import {Survey} from "blaise-api-node-client";
+
+const feature = loadFeature(
+    "./src/features/CATI_Dashboard_Link.feature",
+);
+
+
+function mock_server_request(returnedStatus: number, returnedJSON: Survey[]) {
+    global.fetch = jest.fn(() =>
+        Promise.resolve({
+            status: returnedStatus,
+            json: () => Promise.resolve(returnedJSON),
+        })
+    ) as jest.Mock;
+}
+
+defineFeature(feature, test => {
+
+    afterEach(() => {
+        jest.clearAllMocks();
+        cleanup();
+        jest.resetModules();
+    });
+
+    beforeEach(() => {
+        cleanup();
+    });
+
+
+    test("Following the Cati dashboard link takes a user to the case info page", ({ given, when, then }) => {
+        given("I access the Telephone Operations Blaise Interface URL", async () => {
+            mock_server_request(
+                200,
+                survey_list_with_OPN_and_LMS_with_one_active_instrument_each
+            );
+
+            const history = createMemoryHistory();
+            render(
+                <Router history={history}>
+                    <App/>
+                </Router>
+            );
+            await act(async () => {
+                await flushPromises();
+            });
+        });
+
+        when("the link to the CATI dashboard is present", async () => {
+        await waitFor(() => {
+            expect(screen.getByText(/Link to CATI dashboard/i));
+            });
+        });
+
+        then("it will take me to the CATI dashboard", async () => {
+        await waitFor(() => {
+            expect(screen.getByText(/Link to CATI dashboard/i).getAttribute("href")).toContain("/Blaise/CaseInfo");
+    });
+    });
+});
+});