From 03745990dc16a6e2687b3c8ac86d49d5ad94217a Mon Sep 17 00:00:00 2001 From: Aaron Sin Date: Wed, 18 May 2022 19:25:10 -0700 Subject: [PATCH 1/4] Add Table to replace placeholder on index page --- .../HelpRequests/HelpRequestsTable.js | 2 +- .../HelpRequests/HelpRequestsIndexPage.js | 23 +++++++++++++++---- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/frontend/src/main/components/HelpRequests/HelpRequestsTable.js b/frontend/src/main/components/HelpRequests/HelpRequestsTable.js index d59bad4..7611778 100644 --- a/frontend/src/main/components/HelpRequests/HelpRequestsTable.js +++ b/frontend/src/main/components/HelpRequests/HelpRequestsTable.js @@ -70,4 +70,4 @@ export default function HelpRequestsTable({ helpRequests, _currentUser }) { columns={columnsToDisplay} testid={"HelpRequestsTable"} />; -}; \ No newline at end of file +}; diff --git a/frontend/src/main/pages/HelpRequests/HelpRequestsIndexPage.js b/frontend/src/main/pages/HelpRequests/HelpRequestsIndexPage.js index e52e560..e3ffee5 100644 --- a/frontend/src/main/pages/HelpRequests/HelpRequestsIndexPage.js +++ b/frontend/src/main/pages/HelpRequests/HelpRequestsIndexPage.js @@ -1,13 +1,28 @@ +import React from 'react' +import { useBackend } from 'main/utils/useBackend'; // use prefix indicates a React Hook + import BasicLayout from "main/layouts/BasicLayout/BasicLayout"; +import HelpRequestsTable from 'main/components/HelpRequests/HelpRequestsTable'; +import { useCurrentUser } from 'main/utils/currentUser' // use prefix indicates a React Hook export default function HelpRequestsIndexPage() { + + const currentUser = useCurrentUser(); + + const { data: helprequests, error: _error, status: _status } = + useBackend( + // Stryker disable next-line all : don't test internal caching of React Query + ["/api/helprequests/all"], + // Stryker disable next-line StringLiteral,ObjectLiteral : since "GET" is default, "" is an equivalent mutation + { method: "GET", url: "/api/helprequests/all" }, + [] + ); + return (
-

Help Requests

-

- This is where the index page will go -

+

HelpRequests

+
) From 77c8701b7a98720db0b680615c707295d07a5847 Mon Sep 17 00:00:00 2001 From: Aaron Sin Date: Wed, 18 May 2022 19:36:31 -0700 Subject: [PATCH 2/4] Add corresponding test for table --- .../HelpRequestsIndexPage.test.js | 97 ++++++++++--------- 1 file changed, 49 insertions(+), 48 deletions(-) diff --git a/frontend/src/tests/pages/HelpRequests/HelpRequestsIndexPage.test.js b/frontend/src/tests/pages/HelpRequests/HelpRequestsIndexPage.test.js index 9eda59d..bd1220c 100644 --- a/frontend/src/tests/pages/HelpRequests/HelpRequestsIndexPage.test.js +++ b/frontend/src/tests/pages/HelpRequests/HelpRequestsIndexPage.test.js @@ -1,4 +1,4 @@ -import { /*fireEvent,*/ render/*, waitFor*/ } from "@testing-library/react"; +import { _fireEvent, render, waitFor } from "@testing-library/react"; import { QueryClient, QueryClientProvider } from "react-query"; import { MemoryRouter } from "react-router-dom"; @@ -11,6 +11,7 @@ import axios from "axios"; import AxiosMockAdapter from "axios-mock-adapter"; // import mockConsole from "jest-mock-console"; import HelpRequestsIndexPage from "main/pages/HelpRequests/HelpRequestsIndexPage"; +import { helpRequestsFixtures } from "fixtures/helpRequestsFixtures"; const mockToast = jest.fn(); @@ -27,7 +28,7 @@ describe("HelpRequestsIndexPage tests", () => { const axiosMock =new AxiosMockAdapter(axios); - // const testId = "HelpRequestsTable"; + const testId = "HelpRequestsTable"; const setupUserOnly = () => { axiosMock.reset(); @@ -75,65 +76,65 @@ describe("HelpRequestsIndexPage tests", () => { }); - // test("renders three help requests without crashing for regular user", async () => { - // setupUserOnly(); - // const queryClient = new QueryClient(); - // axiosMock.onGet("/api/helprequests/all").reply(200, ucsbDatesFixtures.threeDates); + test("renders three help requests without crashing for regular user", async () => { + setupUserOnly(); + const queryClient = new QueryClient(); + axiosMock.onGet("/api/helprequests/all").reply(200, helpRequestsFixtures.threeHelpRequests); - // const { getByTestId } = render( - // - // - // - // - // - // ); + const { getByTestId } = render( + + + + + + ); - // await waitFor(() => { expect(getByTestId(`${testId}-cell-row-0-col-id`)).toHaveTextContent("1"); }); - // expect(getByTestId(`${testId}-cell-row-1-col-id`)).toHaveTextContent("2"); - // expect(getByTestId(`${testId}-cell-row-2-col-id`)).toHaveTextContent("3"); + await waitFor(() => { expect(getByTestId(`${testId}-cell-row-0-col-id`)).toHaveTextContent("1"); }); + expect(getByTestId(`${testId}-cell-row-1-col-id`)).toHaveTextContent("2"); + expect(getByTestId(`${testId}-cell-row-2-col-id`)).toHaveTextContent("3"); - // }); + }); - // test("renders three dates without crashing for admin user", async () => { - // setupAdminUser(); - // const queryClient = new QueryClient(); - // axiosMock.onGet("/api/ucsbdates/all").reply(200, ucsbDatesFixtures.threeDates); + test("renders three dates without crashing for admin user", async () => { + setupAdminUser(); + const queryClient = new QueryClient(); + axiosMock.onGet("/api/ucsbdates/all").reply(200, helpRequestsFixtures.threeHelpRequests); - // const { getByTestId } = render( - // - // - // - // - // - // ); + const { getByTestId } = render( + + + + + + ); - // await waitFor(() => { expect(getByTestId(`${testId}-cell-row-0-col-id`)).toHaveTextContent("1"); }); - // expect(getByTestId(`${testId}-cell-row-1-col-id`)).toHaveTextContent("2"); - // expect(getByTestId(`${testId}-cell-row-2-col-id`)).toHaveTextContent("3"); + await waitFor(() => { expect(getByTestId(`${testId}-cell-row-0-col-id`)).toHaveTextContent("1"); }); + expect(getByTestId(`${testId}-cell-row-1-col-id`)).toHaveTextContent("2"); + expect(getByTestId(`${testId}-cell-row-2-col-id`)).toHaveTextContent("3"); - // }); + }); - // test("renders empty table when backend unavailable, user only", async () => { - // setupUserOnly(); + test("renders empty table when backend unavailable, user only", async () => { + setupUserOnly(); - // const queryClient = new QueryClient(); - // axiosMock.onGet("/api/ucsbdates/all").timeout(); + const queryClient = new QueryClient(); + axiosMock.onGet("/api/helprequests/all").timeout(); - // const restoreConsole = mockConsole(); + const restoreConsole = mockConsole(); - // const { queryByTestId } = render( - // - // - // - // - // - // ); + const { queryByTestId } = render( + + + + + + ); - // await waitFor(() => { expect(axiosMock.history.get.length).toBeGreaterThanOrEqual(1); }); - // restoreConsole(); + await waitFor(() => { expect(axiosMock.history.get.length).toBeGreaterThanOrEqual(1); }); + restoreConsole(); - // expect(queryByTestId(`${testId}-cell-row-0-col-id`)).not.toBeInTheDocument(); - // }); + expect(queryByTestId(`${testId}-cell-row-0-col-id`)).not.toBeInTheDocument(); + }); // test("test what happens when you click delete, admin", async () => { // setupAdminUser(); From 7cfc456ef77078079f91c06c4f9a4062ca22442f Mon Sep 17 00:00:00 2001 From: Aaron Sin Date: Wed, 18 May 2022 19:41:54 -0700 Subject: [PATCH 3/4] Fix mutation test not passed. Now passed 100% --- .../tests/pages/HelpRequests/HelpRequestsIndexPage.test.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/tests/pages/HelpRequests/HelpRequestsIndexPage.test.js b/frontend/src/tests/pages/HelpRequests/HelpRequestsIndexPage.test.js index bd1220c..34fef0d 100644 --- a/frontend/src/tests/pages/HelpRequests/HelpRequestsIndexPage.test.js +++ b/frontend/src/tests/pages/HelpRequests/HelpRequestsIndexPage.test.js @@ -9,7 +9,7 @@ import { systemInfoFixtures } from "fixtures/systemInfoFixtures"; import axios from "axios"; import AxiosMockAdapter from "axios-mock-adapter"; -// import mockConsole from "jest-mock-console"; +import mockConsole from "jest-mock-console"; import HelpRequestsIndexPage from "main/pages/HelpRequests/HelpRequestsIndexPage"; import { helpRequestsFixtures } from "fixtures/helpRequestsFixtures"; @@ -95,10 +95,10 @@ describe("HelpRequestsIndexPage tests", () => { }); - test("renders three dates without crashing for admin user", async () => { + test("renders three help requests without crashing for admin user", async () => { setupAdminUser(); const queryClient = new QueryClient(); - axiosMock.onGet("/api/ucsbdates/all").reply(200, helpRequestsFixtures.threeHelpRequests); + axiosMock.onGet("/api/helprequests/all").reply(200, helpRequestsFixtures.threeHelpRequests); const { getByTestId } = render( From 0c7897061685271dbda5f8e377041c3c2793b4e3 Mon Sep 17 00:00:00 2001 From: Aaron Sin Date: Wed, 18 May 2022 20:10:39 -0700 Subject: [PATCH 4/4] Fix for test --- frontend/src/main/components/HelpRequests/HelpRequestsTable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/main/components/HelpRequests/HelpRequestsTable.js b/frontend/src/main/components/HelpRequests/HelpRequestsTable.js index 7611778..69b31ff 100644 --- a/frontend/src/main/components/HelpRequests/HelpRequestsTable.js +++ b/frontend/src/main/components/HelpRequests/HelpRequestsTable.js @@ -50,7 +50,7 @@ export default function HelpRequestsTable({ helpRequests, _currentUser }) { }, { Header: 'Solved?', - accessor: 'solved', + id: 'solved', accessor: (row, _rowIndex) => String(row.solved) // hack needed for boolean values to show up }, ];