fix: navigate after submitting ur question results, improve testability, correct page formatting

faissalMT · faissalMT · commit b488cd76406c · 2020-12-07T20:11:21.000Z
diff --git a/.github/workflows/gha-ci.yml b/.github/workflows/gha-ci.yml
@@ -158,7 +158,7 @@ jobs:
         id: changelog
         with:
           github-token: ${{ secrets.github_token }}
-          output-file: 'CHANGELOG.md'
+          output-file: "CHANGELOG.md"
       - name: Create Release
         uses: actions/create-release@v1
         if: ${{ steps.changelog.outputs.skipped == 'false' }}
@@ -196,6 +196,7 @@ jobs:
           SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           ENABLE_SENTRY: ${{ secrets.ENABLE_SENTRY }}
+          ENABLE_UR_QUESTION: ${{ secrets.ENABLE_UR_QUESTION }}
         run: |
           bin/write_environment.sh
       - name: Set up Node.js
@@ -217,4 +218,3 @@ jobs:
       - run: |
           docker build . -t ${{ secrets.ACR_SERVER }}/virtualvisits:${{ github.sha }}
           docker push ${{ secrets.ACR_SERVER }}/virtualvisits:${{ github.sha }}
-
diff --git a/bin/write_environment.sh b/bin/write_environment.sh
@@ -31,6 +31,7 @@ SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN
 ENABLE_SENTRY=$ENABLE_SENTRY
 # Feature flags
 SHOW_NAVIGATION_BAR=$SHOW_NAVIGATION_BAR
+ENABLE_UR_QUESTION=$ENABLE_UR_QUESTION
 EOF
 
 echo "Environment file written"
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -60,6 +60,7 @@
     "moment-duration-format": "^2.3.2",
     "nanoid": "^3.1.3",
     "next": "9.5.4",
+    "next-absolute-url": "^1.2.2",
     "next-env": "^1.1.1",
     "nhsuk-frontend": "^3.1.0",
     "node-sass": "^4.14.0",
@@ -104,4 +105,4 @@
   "engines": {
     "node": "12.16.x"
   }
-}
+}
diff --git a/pageTests/visits/endUrQuestion.test.js b/pageTests/visits/endUrQuestion.test.js
@@ -1,6 +1,7 @@
 import React from "react";
 import { render, screen, fireEvent, act } from "@testing-library/react";
-import EndUrQuestion, {
+import {
+  endUrQuestionConstructor,
   getServerSideProps,
 } from "../../pages/visits/endUrQuestion";
 import nock from "nock";
@@ -17,6 +18,8 @@ describe("end UR question", () => {
   });
 
   describe("<EndUrQuestion/>", () => {
+    const EndUrQuestion = endUrQuestionConstructor({ router: [] });
+
     function stubUrQuestionApiEndpoint(desiredAnswer) {
       return nock("http://localhost:3001", {})
         .matchHeader("X-Correlation-ID", "1-ur-question")
@@ -31,7 +34,14 @@ describe("end UR question", () => {
       let urQuestionEndpointStub = stubUrQuestionApiEndpoint("yes");
 
       it("submits the results of the ur question", async () => {
-        render(<EndUrQuestion correlationId="1-ur-question" />);
+        render(
+          <EndUrQuestion
+            correlationId="1-ur-question"
+            router={[]}
+            protocol="http:"
+            host="localhost:3001"
+          />
+        );
         await act(async () => {
           fireEvent.click(screen.getByTestId("ur-question-radio-yes"));
           fireEvent.submit(screen.getByTestId("ur-question-form"));
@@ -43,7 +53,14 @@ describe("end UR question", () => {
       let urQuestionEndpointStub = stubUrQuestionApiEndpoint("no");
 
       it("submits the results of the ur question", async () => {
-        render(<EndUrQuestion correlationId="1-ur-question" />);
+        render(
+          <EndUrQuestion
+            correlationId="1-ur-question"
+            router={[]}
+            protocol="http:"
+            host="localhost:3001"
+          />
+        );
         await act(async () => {
           fireEvent.click(screen.getByTestId("ur-question-radio-no"));
           fireEvent.submit(screen.getByTestId("ur-question-form"));
diff --git a/pages/visits/endUrQuestion.js b/pages/visits/endUrQuestion.js
@@ -4,6 +4,7 @@ import Layout from "../../src/components/Layout";
 import propsWithContainer from "../../src/middleware/propsWithContainer";
 import { v4 as uuidv4 } from "uuid";
 import Router from "next/router";
+import absoluteUrl from "next-absolute-url";
 
 /*
 The end UR question is a page that should be navigated to after a call ends but
@@ -12,122 +13,137 @@ to the event logging system - this is distinct from console logging and concerns
 things to do with the user journey so that journeys can be tracked and we can 
 identify potential issues with the service.
 */
-export default function EndUrQuestion({ correlationId, callId }) {
-  let selectedFeedback;
 
-  const selectFeedbackOption = (option) => (/*event*/) => {
-    selectedFeedback = option;
-  };
+export const endUrQuestionConstructor = ({ router }) =>
+  function EndUrQuestion({ correlationId, callId, protocol, host }) {
+    let selectedFeedback;
+    const selectFeedbackOption = (option) => (/*event*/) => {
+      selectedFeedback = option;
+    };
 
-  const onSubmit = async (event) => {
-    await fetchEndpointWithCorrelationId(
-      "POST",
-      "http://localhost:3001/api/submit-ur-answer",
-      JSON.stringify({
-        "would miss nhs vv": selectedFeedback,
-      }),
-      correlationId
-    );
+    const onSubmit = async (event) => {
+      event.preventDefault();
+      router.push(`/visits/end?callId=${callId}`);
 
-    Router.push(`/visits/end?callId=${callId}`);
-    event.preventDefault();
-  };
-  const onClickSkip = async () => {
-    Router.push(`/visits/end?callId=${callId}`);
-  };
+      try {
+        await fetchEndpointWithCorrelationId(
+          "POST",
+          `${protocol}//${host}/api/submit-ur-answer`,
+          JSON.stringify({
+            "would miss nhs vv": selectedFeedback,
+          }),
+          correlationId
+        );
+      } catch {
+        console.error("Could not submit UR answer");
+      }
+    };
+    const onClickSkip = async () => {
+      router.push(`/visits/end?callId=${callId}`);
+    };
 
-  useEffect(() => {
-    console.log(correlationId);
-  }, []);
+    useEffect(() => {
+      console.log(correlationId);
+    }, []);
 
-  return (
-    <Layout title="Submit feedback" isBookService={false}>
-      <div className="nhsuk-form-group">
-        <form onSubmit={onSubmit} data-testid="ur-question-form">
-          <div className="nhsuk-form-group">
-            <fieldset className="nhsuk-fieldset">
-              <legend className="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
-                <h1 className="nhsuk-fieldset__heading">
-                  If this service was no longer available would you be
-                  dissappointed/upset?
-                </h1>
-              </legend>
+    return (
+      <Layout title="Submit feedback" isBookService={false}>
+        <div className="nhsuk-form-group">
+          <form onSubmit={onSubmit} data-testid="ur-question-form">
+            <div className="nhsuk-form-group nhsuk-u-margin-bottom-5">
+              <fieldset className="nhsuk-fieldset">
+                <legend className="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
+                  <h1 className="nhsuk-fieldset__heading">
+                    If this service was no longer available would you be
+                    dissappointed/upset?
+                  </h1>
+                </legend>
 
-              <div
-                data-testid="ur-question-radio-buttons"
-                className="nhsuk-radios"
-              >
-                <div className="nhsuk-radios__item">
-                  <input
-                    className="nhsuk-radios__input"
-                    id="ur-question-radio-yes"
-                    name="ur-question-radio"
-                    type="radio"
-                    value="yes"
-                    data-testid="ur-question-radio-yes"
-                    onClick={selectFeedbackOption("yes")}
-                  />
-                  <label
-                    className="nhsuk-label nhsuk-radios__label"
-                    htmlFor="ur-question-radio-yes"
-                  >
-                    Yes
-                  </label>
-                </div>
+                <div
+                  data-testid="ur-question-radio-buttons"
+                  className="nhsuk-radios"
+                >
+                  <div className="nhsuk-radios__item">
+                    <input
+                      className="nhsuk-radios__input"
+                      id="ur-question-radio-yes"
+                      name="ur-question-radio"
+                      type="radio"
+                      value="yes"
+                      data-testid="ur-question-radio-yes"
+                      onClick={selectFeedbackOption("yes")}
+                    />
+                    <label
+                      className="nhsuk-label nhsuk-radios__label"
+                      htmlFor="ur-question-radio-yes"
+                    >
+                      Yes
+                    </label>
+                  </div>
 
-                <div className="nhsuk-radios__item">
-                  <input
-                    className="nhsuk-radios__input"
-                    id="ur-question-radio-no"
-                    name="ur-question-radio"
-                    type="radio"
-                    value="no"
-                    data-testid="ur-question-radio-no"
-                    onClick={selectFeedbackOption("no")}
-                  />
-                  <label
-                    className="nhsuk-label nhsuk-radios__label"
-                    htmlFor="ur-question-radio-no"
-                  >
-                    No
-                  </label>
+                  <div className="nhsuk-radios__item">
+                    <input
+                      className="nhsuk-radios__input"
+                      id="ur-question-radio-no"
+                      name="ur-question-radio"
+                      type="radio"
+                      value="no"
+                      data-testid="ur-question-radio-no"
+                      onClick={selectFeedbackOption("no")}
+                    />
+                    <label
+                      className="nhsuk-label nhsuk-radios__label"
+                      htmlFor="ur-question-radio-no"
+                    >
+                      No
+                    </label>
+                  </div>
                 </div>
-              </div>
-            </fieldset>
-          </div>
-          <button
-            className="nhsuk-button"
-            data-testid="submit-ur-question-button"
-            type="submit"
-          >
-            Submit feedback
-          </button>
-        </form>
+              </fieldset>
+            </div>
 
-        <button
-          className="nhsuk-button nhsuk-button--secondary"
-          onClick={onClickSkip}
-        >
-          Skip
-        </button>
-      </div>
-    </Layout>
-  );
-}
+            <button
+              className="nhsuk-button"
+              data-testid="submit-ur-question-button"
+              type="submit"
+            >
+              Submit feedback
+            </button>
+            <button
+              className="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-left-5"
+              onClick={onClickSkip}
+            >
+              Skip
+            </button>
+          </form>
+        </div>
+      </Layout>
+    );
+  };
+
+export default endUrQuestionConstructor({ router: Router });
 
 export const getServerSideProps = propsWithContainer(
-  async ({ req: { headers }, res, container, query }) => {
+  async ({ req, res, container, query }) => {
+    const { headers } = req;
     const { callId } = query;
+
+    if (process.env.ENABLE_UR_QUESTION === "no") {
+      res.writeHead(302, { Location: `/visits/end?callId=${callId}` }).end();
+      return {};
+    }
+
     const userIsAuthenticated = container.getUserIsAuthenticated();
     const token = await userIsAuthenticated(headers.cookie);
     const correlationId = `${uuidv4()}-ur-question`;
+    const { protocol, host } = absoluteUrl(req, "localhost:3001");
 
     if (token?.ward || null) {
       res.writeHead(302, { Location: `/visits/end?callId=${callId}` }).end();
       return {};
     } else {
       res.status(200);
-      return { props: { correlationId, callId } };
+      return { props: { correlationId, callId, protocol, host } };
     }
   }
 );
diff --git a/src/components/Whereby/index.js b/src/components/Whereby/index.js
