diff --git a/frontend/src/main/components/HelpRequests/HelpRequestsTable.js b/frontend/src/main/components/HelpRequests/HelpRequestsTable.js index e69de29..d9e69e7 100644 --- a/frontend/src/main/components/HelpRequests/HelpRequestsTable.js +++ b/frontend/src/main/components/HelpRequests/HelpRequestsTable.js @@ -0,0 +1,74 @@ +import OurTable, { _ButtonColumn } from "main/components/OurTable"; +// import { useBackendMutation } from "main/utils/useBackend"; +// import { cellToAxiosParamsDelete, onDeleteSuccess } from "main/utils/UCSBDateUtils" +// import { useNavigate } from "react-router-dom"; +// import { hasRole } from "main/utils/currentUser"; + +export default function HelpRequestsTable({ helpRequests, _currentUser }) { + + // const navigate = useNavigate(); + + // const editCallback = (cell) => { + // navigate(`/ucsbdates/edit/${cell.row.values.id}`) + // } + + // Stryker disable all : hard to test for query caching + // const deleteMutation = useBackendMutation( + // cellToAxiosParamsDelete, + // { onSuccess: onDeleteSuccess }, + // ["/api/ucsbdates/all"] + // ); + // Stryker enable all + + // Stryker disable next-line all : TODO try to make a good test for this + // const deleteCallback = async (cell) => { deleteMutation.mutate(cell); } + + const columns = [ + { + Header: 'id', + accessor: 'id', // accessor is the "key" in the data + }, + { + Header: 'Requester Email', + accessor: 'requesterEmail', + }, + { + Header: 'Team ID', + accessor: 'teamId', + }, + { + Header: 'Table or Breakout Room', + accessor: 'tableOrBreakoutRoom', + }, + { + Header: 'Request Time', + accessor: 'requestTime', + }, + { + Header: 'Explanation', + accessor: 'explanation', + }, + { + Header: 'Solved?', + id: 'solved', + accessor: (row, _rowIndex) => String(row.solved) // hack needed for boolean values to show up + }, + ]; + + // const columnsIfAdmin = [ + // ...columns, + // ButtonColumn("Edit", "primary", editCallback, "UCSBDatesTable"), + // ButtonColumn("Delete", "danger", deleteCallback, "UCSBDatesTable") + // ]; + + // const columnsToDisplay = hasRole(currentUser, "ROLE_ADMIN") ? columnsIfAdmin : columns; + + const columnsToDisplay = columns; + + return ; +}; + 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

+
) diff --git a/frontend/src/tests/pages/HelpRequests/HelpRequestsIndexPage.test.js b/frontend/src/tests/pages/HelpRequests/HelpRequestsIndexPage.test.js index 9eda59d..34fef0d 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"; @@ -9,8 +9,9 @@ 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"; 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 help requests without crashing for admin user", async () => { + setupAdminUser(); + 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 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();