Skip to content

Commit

Permalink
Merge pull request #60 from ucsb-cs156-s22/Aaron-HelpRequest-Table
Browse files Browse the repository at this point in the history 
MERGE THIRD: Add Help Request Table and Corresponding Test
  • Loading branch information
@jwangathan
jwangathan committed May 19, 2022
2 parents 795b6d8 + 1e972b2 commit 5274db2
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 53 deletions.
74 changes: 74 additions & 0 deletions frontend/src/main/components/HelpRequests/HelpRequestsTable.js
View file
@@ -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 <OurTable
data={helpRequests}
columns={columnsToDisplay}
testid={"HelpRequestsTable"}
/>;
};

23 changes: 19 additions & 4 deletions frontend/src/main/pages/HelpRequests/HelpRequestsIndexPage.js
View file
@@ -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 (
<BasicLayout>
<div className="pt-2">
<h1>Help Requests</h1>
<p>
This is where the index page will go
</p>
<h1>HelpRequests</h1>
<HelpRequestsTable helpRequests={helprequests} currentUser={currentUser} />
</div>
</BasicLayout>
)
Expand Down
99 changes: 50 additions & 49 deletions frontend/src/tests/pages/HelpRequests/HelpRequestsIndexPage.test.js
View file
@@ -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";

Expand All @@ -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();
Expand All @@ -27,7 +28,7 @@ describe("HelpRequestsIndexPage tests", () => {

const axiosMock =new AxiosMockAdapter(axios);

// const testId = "HelpRequestsTable";
const testId = "HelpRequestsTable";

const setupUserOnly = () => {
axiosMock.reset();
Expand Down Expand Up @@ -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(
// <QueryClientProvider client={queryClient}>
// <MemoryRouter>
// <UCSBDatesIndexPage />
// </MemoryRouter>
// </QueryClientProvider>
// );
const { getByTestId } = render(
<QueryClientProvider client={queryClient}>
<MemoryRouter>
<HelpRequestsIndexPage />
</MemoryRouter>
</QueryClientProvider>
);

// 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(
// <QueryClientProvider client={queryClient}>
// <MemoryRouter>
// <UCSBDatesIndexPage />
// </MemoryRouter>
// </QueryClientProvider>
// );
const { getByTestId } = render(
<QueryClientProvider client={queryClient}>
<MemoryRouter>
<HelpRequestsIndexPage />
</MemoryRouter>
</QueryClientProvider>
);

// 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(
// <QueryClientProvider client={queryClient}>
// <MemoryRouter>
// <UCSBDatesIndexPage />
// </MemoryRouter>
// </QueryClientProvider>
// );
const { queryByTestId } = render(
<QueryClientProvider client={queryClient}>
<MemoryRouter>
<HelpRequestsIndexPage />
</MemoryRouter>
</QueryClientProvider>
);

// 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();
Expand Down

0 comments on commit 5274db2

Please sign in to comment.