- test updates

source/frontend/src/components/layout/Healthcheck/HealthcheckView.test.tsx

@@ -0,0 +1,53 @@
+import HealthcheckView, { IHealthCheckIssue, IHealthCheckViewProps } from './HealthcheckView';
+import { act, render, RenderOptions, userEvent, screen } from '@/utils/test-utils';
+
+const mockHealthcheckIssues: IHealthCheckIssue[] = [
+  {
+    key: 'PimsApi',
+    msg: 'The PIMS server is currently unavailable, PIMS will not be useable until this is resolved.',
+  },
+];
+
+describe('Healthcheck View component', () => {
+  const setup = async (
+    renderOptions: RenderOptions & { props?: Partial<IHealthCheckViewProps> } = {},
+  ) => {
+    const utils = render(
+      <HealthcheckView
+        {...renderOptions.props}
+        systemChecks={renderOptions.props?.systemChecks ?? mockHealthcheckIssues}
+      />,
+      {
+        ...renderOptions,
+      },
+    );
+
+    return {
+      ...utils,
+    };
+  };
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders as expected', async () => {
+    const { asFragment } = await setup({});
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it(`renders 'See the full list here' link`, async () => {
+    const { getByTestId } = await setup({
+      props: {
+        systemChecks: [
+          {
+            key: 'Mayan',
+            msg: 'The PIMS Document server is experiencing service degradation, you will be unable to view, download or upload documents until resolved.',
+          },
+          ...mockHealthcheckIssues,
+        ],
+      },
+    });
+    expect(getByTestId('healthcheck-full-list-lnk')).toBeVisible();
+  });
+});

source/frontend/src/components/layout/Healthcheck/HealthcheckView.tsx

@@ -30,7 +30,7 @@ const HealthcheckView: React.FunctionComponent<IHealthCheckViewProps> = ({ syste
           </label>
           {systemChecks.length > 1 && (
             <LinkButton
-              data-testid="healthcheck-full-list"
+              data-testid="healthcheck-full-list-lnk"
               onClick={() => {
                 setModalContent({
                   variant: 'error',

source/frontend/src/components/layout/Healthcheck/__snapshots__/HealthcheckView.test.tsx.snap

@@ -0,0 +1,111 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Healthcheck View component > renders as expected 1`] = `
+<DocumentFragment>
+  <div
+    class="Toastify"
+  />
+  <div />
+  .c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  height: 100%;
+  background-color: #f2dede;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: auto;
+  min-width: 6rem;
+  height: 100%;
+  background-color: #CE3E39;
+}
+
+.c1 svg {
+  color: #f2f2f2;
+}
+
+.c2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  padding-left: 6rem;
+  background-color: #f2dede;
+}
+
+.c2 label {
+  display: list-item;
+  margin-bottom: 0;
+}
+
+.c2 label span {
+  text-transform: uppercase;
+  font-weight: bolder;
+}
+
+.c2 button {
+  margin-left: 6rem;
+}
+
+<div
+    class="c0"
+  >
+    <div
+      class="c1"
+    >
+      <svg
+        fill="currentColor"
+        height="24"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 512 512"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M256 8C119.034 8 8 119.033 8 256s111.034 248 248 248 248-111.034 248-248S392.967 8 256 8zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676zM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676z"
+        />
+      </svg>
+    </div>
+    <div
+      class="c2"
+    >
+      <label>
+        <span>
+          PimsApi: 
+        </span>
+        The PIMS server is currently unavailable, PIMS will not be useable until this is resolved.
+      </label>
+    </div>
+  </div>
+</DocumentFragment>
+`;

source/frontend/src/components/layout/SideNavBar/__snapshots__/SideNavbar.test.tsx.snap

@@ -233,7 +233,7 @@ exports[`SideNavbar display and logic > renders 1`] = `
 }
 
 .c1 {
-  height: calc( 100vh - 7.2rem - 4.4rem );
+  height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
   padding-top: 1.5rem;