CMDCT-4065: writing tests to appease the codeclimate gods

services/ui-src/src/components/pages/Dashboard/DashboardPage.test.tsx

@@ -1,9 +1,14 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import { DashboardPage } from "components";
-import { RouterWrappedComponent, mockUseStore } from "utils/testing/setupJest";
+import {
+  RouterWrappedComponent,
+  mockUseReadOnlyUserStore,
+  mockUseStore,
+} from "utils/testing/setupJest";
 import { useStore } from "utils";
 import { getReportsForState } from "utils/api/requestMethods/report";
 import { Report } from "types";
+import dashboardVerbiage from "verbiage/pages/dashboard";
 
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
 
@@ -46,7 +51,7 @@ const dashboardComponent = (
   </RouterWrappedComponent>
 );
 
-describe("<DashboardPage />", () => {
+describe("DashboardPage with state user", () => {
   beforeEach(() => jest.clearAllMocks());
 
   it("should render an empty state when there are no reports", async () => {
@@ -95,3 +100,22 @@ describe("<DashboardPage />", () => {
     expect(cellContent("Edited by")).toBe("Mock User");
   });
 });
+
+describe("DashboardPage with Read only user", () => {
+  beforeEach(() => {
+    mockedUseStore.mockReturnValue(mockUseReadOnlyUserStore);
+  });
+  it("should not render the Start Report button when user is read only", async () => {
+    (getReportsForState as jest.Mock).mockResolvedValueOnce([]);
+
+    render(dashboardComponent);
+    await waitFor(() => {
+      expect(getReportsForState).toHaveBeenCalled();
+    });
+
+    const startReportButton = screen.queryByText(
+      dashboardVerbiage.body.link.callToActionText
+    );
+    expect(startReportButton).not.toBeInTheDocument();
+  });
+});

services/ui-src/src/components/report/Page.test.tsx

@@ -1,7 +1,10 @@
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { ElementType, PageElement } from "types/report";
 import { Page } from "./Page";
-import { mockUseStore } from "utils/testing/setupJest";
+import {
+  mockUseReadOnlyUserStore,
+  mockUseStore,
+} from "utils/testing/setupJest";
 import { useStore } from "utils/state/useStore";
 
 jest.mock("react-router-dom", () => ({
@@ -81,7 +84,27 @@ const elements: PageElement[] = [
   },
 ];
 
-describe("Page Component", () => {
+const textFieldElement: PageElement[] = [
+  {
+    type: ElementType.Textbox,
+    label: "labeled",
+  },
+  {
+    type: ElementType.Radio,
+    label: "radio button",
+    value: [{ label: "radio choice 1", value: "1", checkedChildren: [] }],
+  },
+];
+
+const dateFieldElement: PageElement[] = [
+  {
+    type: ElementType.Date,
+    label: "date label",
+    helperText: "can you read this?",
+  },
+];
+
+describe("Page Component with state user", () => {
   test.each(elements)("Renders all element types: %p", (element) => {
     const { container } = render(<Page elements={[element]} />);
     expect(container).not.toBeEmptyDOMElement();
@@ -96,3 +119,21 @@ describe("Page Component", () => {
     expect(container).not.toBeEmptyDOMElement();
   });
 });
+
+describe("Page Component with read only user", () => {
+  beforeEach(() => {
+    mockedUseStore.mockReturnValue(mockUseReadOnlyUserStore);
+  });
+  test("text field and radio button should be disabled", () => {
+    render(<Page elements={textFieldElement} />);
+    const textField = screen.getByRole("textbox");
+    const radioButton = screen.getByLabelText("radio choice 1");
+    expect(textField).toBeDisabled();
+    expect(radioButton).toBeDisabled();
+  });
+  test("date field should be disabled", () => {
+    render(<Page elements={dateFieldElement} />);
+    const dateField = screen.getByRole("textbox");
+    expect(dateField).toBeDisabled();
+  });
+});

services/ui-src/src/components/report/StatusTable.test.tsx

@@ -3,6 +3,7 @@ import userEvent from "@testing-library/user-event";
 import { StatusTableElement } from "./StatusTable";
 import { useNavigate } from "react-router-dom";
 import { useStore } from "utils";
+import { mockUseReadOnlyUserStore } from "utils/testing/setupJest";
 
 jest.mock("react-router-dom", () => ({
   useNavigate: jest.fn(),
@@ -23,20 +24,22 @@ const report = {
   ],
 };
 
-describe("StatusTableElement", () => {
+const mockPageMap = new Map();
+mockPageMap.set("root", 0);
+mockPageMap.set("1", 1);
+mockPageMap.set("2", 2);
+
+const mockedUseStore = useStore as jest.MockedFunction<typeof useStore>;
+
+describe("StatusTable with state user", () => {
   const mockNavigate = jest.fn();
   const setCurrentPageId = jest.fn();
 
   beforeEach(() => {
     (useNavigate as jest.Mock).mockReturnValue(mockNavigate);
     jest.clearAllMocks();
 
-    const mockPageMap = new Map();
-    mockPageMap.set("root", 0);
-    mockPageMap.set("1", 1);
-    mockPageMap.set("2", 2);
-
-    (useStore as unknown as jest.Mock).mockReturnValue({
+    mockedUseStore.mockReturnValue({
       pageMap: mockPageMap,
       report: report,
       setCurrentPageId,
@@ -85,3 +88,19 @@ describe("StatusTableElement", () => {
     expect(container.firstChild).toBeNull();
   });
 });
+
+describe("StatusPage with Read only user", () => {
+  beforeEach(() => {
+    mockedUseStore.mockReturnValue({
+      ...mockUseReadOnlyUserStore,
+      pageMap: mockPageMap,
+      report: report,
+    });
+  });
+  it("should not render the Submit QMS Report button when user is read only", async () => {
+    render(<StatusTableElement />);
+
+    const submitButton = screen.queryByText("Submit QMS Report");
+    expect(submitButton).not.toBeInTheDocument();
+  });
+});

services/ui-src/src/utils/testing/setupJest.tsx

@@ -250,6 +250,12 @@ export const mockUseAdminStore: HcbsUserState & AdminBannerState = {
   ...mockBannerStore,
 };
 
+export const mockUseReadOnlyUserStore: HcbsUserState & AdminBannerState = {
+  ...mockHelpDeskUserStore,
+  ...mockBannerStore,
+  ...mockReportStore,
+};
+
 // ROUTER
 
 export const RouterWrappedComponent: React.FC = ({ children }) => (