Add tests for CMSHomepage

services/ui-src/package.json

@@ -14,9 +14,10 @@
     "@okta/okta-react": "^4.1.0",
     "@reach/accordion": "^0.10.5",
     "@redux-devtools/extension": "^3.2.2",
+    "@testing-library/dom": "^9.3.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
+    "@testing-library/user-event": "^14.5.1",
     "aws-amplify": "^4.3.43",
     "axios": "^0.21.1",
     "font-awesome": "^4.7.0",

services/ui-src/src/components/sections/homepage/CMSHomepage.js

@@ -99,8 +99,8 @@ const CMSHomepage = ({
   let stateStatuses;
 
   if (
-    filteredStatuses.length > 0 &&
-    filteredStatuses[0].stateCode === "status"
+    filteredStatuses?.length > 0 &&
+    filteredStatuses?.[0]?.stateCode === "status"
   ) {
     stateStatuses = allStateStatuses;
   } else {
@@ -170,15 +170,15 @@ const CMSHomepage = ({
                     <Button
                       type="button"
                       data-cy="cms-homepage-filter-submit"
-                      class="ds-c-button ds-c-button--primary filter-button"
+                      className="ds-c-button ds-c-button--primary filter-button"
                       onClick={() => filterReports()}
                     >
                       Filter
                     </Button>
                     <Button
                       type="button"
                       data-cy="cms-homepage-filter-clear"
-                      class="ds-c-button ds-c-button--primary filter-button"
+                      className="ds-c-button ds-c-button--primary filter-button"
                       onClick={() => clearFilter()}
                     >
                       Clear
@@ -198,7 +198,7 @@ const CMSHomepage = ({
               </div>
               <div data-cy="cms-homepage-reports" className="report-status">
                 {stateStatuses
-                  .sort((a, b) => (a.lastChanged > b.lastChanged ? -1 : 1))
+                  ?.sort((a, b) => (a.lastChanged > b.lastChanged ? -1 : 1))
                   .map(
                     ({
                       state,
@@ -241,10 +241,10 @@ const CMSHomepage = ({
 CMSHomepage.propTypes = {
   getStatuses: PropTypes.func.isRequired,
   allStateStatuses: PropTypes.object.isRequired,
-  currentYear: PropTypes.object.isRequired,
+  currentYear: PropTypes.number.isRequired,
   currentUserRole: PropTypes.string.isRequired,
-  stateList: PropTypes.object.isRequired,
-  yearList: PropTypes.object.isRequired,
+  stateList: PropTypes.array.isRequired,
+  yearList: PropTypes.array.isRequired,
   reportState: PropTypes.object.isRequired,
 };
 

services/ui-src/src/components/sections/homepage/CMSHomepage.test.js

@@ -0,0 +1,115 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import configureMockStore from "redux-mock-store";
+import { Provider } from "react-redux";
+import thunk from "redux-thunk";
+import { MemoryRouter } from "react-router";
+// components
+import CMSHomepage from "./CMSHomepage";
+// mocks
+import { helpdeskUserWithMultipleReports } from "../../../store/fakeStoreExamples";
+
+const mockStore = configureMockStore([thunk]);
+const adminUser = mockStore(helpdeskUserWithMultipleReports);
+
+jest.mock("../../../actions/initial", () => ({
+  getAllStateStatuses: jest.fn().mockReturnValue(() => async () => {}),
+}));
+
+const CmsHomepageComponent = (
+  <Provider store={adminUser}>
+    <MemoryRouter path={[]}>
+      <CMSHomepage></CMSHomepage>
+    </MemoryRouter>
+  </Provider>
+);
+
+describe("test CMSHomepage", () => {
+  it("should render", () => {
+    render(CmsHomepageComponent);
+    expect(screen.queryAllByText("Alabama").length).toBeGreaterThan(0);
+    expect(screen.queryAllByText("Alaska").length).toBeGreaterThan(0);
+    expect(
+      screen.queryAllByText("Certified and Submitted").length
+    ).toBeGreaterThan(0);
+  });
+
+  it("can be filtered by state", async () => {
+    const user = userEvent.setup();
+    render(CmsHomepageComponent);
+    expect(screen.queryAllByText("Alabama").length).toBeGreaterThan(0);
+    expect(screen.queryAllByText("Alaska").length).toBeGreaterThan(0);
+    expect(screen.queryByText("California")).not.toBeInTheDocument();
+
+    const stateFilterDropdown = screen.getByText("State", {
+      selector: "span",
+    });
+    await user.click(stateFilterDropdown);
+    const alabamaDropdownOption = screen.queryByText("Alabama", {
+      selector: "span",
+    });
+    await user.click(alabamaDropdownOption);
+    await user.click(screen.getByText("Filter", { selector: "button" }));
+
+    expect(screen.queryAllByText("Alabama").length).toBeGreaterThan(0);
+    expect(screen.queryByText("Alaska")).not.toBeInTheDocument();
+  });
+
+  it("can be filtered by year", async () => {
+    const user = userEvent.setup();
+    render(CmsHomepageComponent);
+    expect(screen.queryAllByText("2021").length).toBeGreaterThan(0);
+    expect(screen.queryAllByText("2020").length).toBeGreaterThan(0);
+
+    const yearFilterDropdown = screen.getByText("Year", {
+      selector: "span",
+    });
+    await user.click(yearFilterDropdown);
+    const year2021DropdownOption = screen.queryByText("2021", {
+      selector: "span",
+    });
+    await user.click(year2021DropdownOption);
+    await user.click(screen.getByText("Filter", { selector: "button" }));
+
+    expect(screen.queryAllByText("2021").length).toBeGreaterThan(0);
+    expect(screen.queryByText("2020")).not.toBeInTheDocument();
+  });
+
+  it("can be filtered by status", async () => {
+    const user = userEvent.setup();
+    render(CmsHomepageComponent);
+    expect(screen.queryByText("Not Started")).not.toBeInTheDocument();
+    expect(screen.queryAllByText("In Progress").length).toBeGreaterThan(0);
+
+    const yearFilterDropdown = screen.getByText("Status", {
+      selector: "span",
+    });
+    await user.click(yearFilterDropdown);
+    await user.click(screen.queryByText("Not Started"));
+    await user.click(screen.getByText("Filter", { selector: "button" }));
+
+    expect(screen.queryByText("In Progress")).not.toBeInTheDocument();
+  });
+
+  it("can clear filters", async () => {
+    const user = userEvent.setup();
+    render(CmsHomepageComponent);
+    expect(screen.queryByText("Not Started")).not.toBeInTheDocument();
+    expect(screen.queryAllByText("In Progress").length).toBeGreaterThan(0);
+
+    const yearFilterDropdown = screen.getByText("Status", {
+      selector: "span",
+    });
+    await user.click(yearFilterDropdown);
+    await user.click(screen.queryByText("Not Started"));
+    await user.click(screen.getByText("Filter", { selector: "button" }));
+
+    expect(screen.queryByText("In Progress")).not.toBeInTheDocument();
+
+    await user.click(screen.getByText("Clear", { selector: "button" }));
+
+    expect(screen.queryByText("Not Started")).not.toBeInTheDocument();
+    expect(screen.queryAllByText("In Progress").length).toBeGreaterThan(0);
+  });
+});