CS - Add frontend support for new job which takes only a quarter as its parameter

frontend/src/main/components/Jobs/UpdateCoursesByQuarterJobForm.js

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { Form, Button, Container, Row, Col } from "react-bootstrap";
+
+import { quarterRange } from "main/utils/quarterUtilities";
+
+import { useSystemInfo } from "main/utils/systemInfo";
+import SingleQuarterDropdown from "../Quarters/SingleQuarterDropdown";
+
+const UpdateCoursesByQuarterJobForm = ({ callback }) => {
+
+  const { data: systemInfo } = useSystemInfo();
+
+  // Stryker disable OptionalChaining
+  const startQtr = systemInfo?.startQtrYYYYQ || "20211";
+  const endQtr = systemInfo?.endQtrYYYYQ || "20214";
+  // Stryker enable OptionalChaining
+
+  const quarters = quarterRange(startQtr, endQtr);
+
+  // Stryker disable all : not sure how to test/mock local storage
+  const localQuarter = localStorage.getItem("BasicSearch.Quarter");
+
+  const [quarter, setQuarter] = useState(localQuarter || quarters[0].yyyyq);
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    console.log("UpdateCoursesJobForm: quarter", quarter);
+    callback({quarter});
+  };
+
+  // Stryker disable all : Stryker is testing by changing the padding to 0. But this is simply a visual optimization as it makes it look better
+  return (
+    <Form onSubmit={handleSubmit}>
+      <Container>
+        <Row>
+          <Col md="auto">
+            <SingleQuarterDropdown
+              quarters={quarters}
+              quarter={quarter}
+              setQuarter={setQuarter}
+              controlId={"BasicSearch.Quarter"}
+            />
+          </Col>
+        </Row>
+        <Row style={{ paddingTop: 10, paddingBottom: 10 }}>
+          <Col md="auto">
+            <Button variant="primary" type="submit" data-testid="updateCoursesByQuarter">
+              Update Courses
+            </Button>
+          </Col>
+        </Row>
+      </Container>
+    </Form>
+  );
+};
+
+export default UpdateCoursesByQuarterJobForm;

frontend/src/main/components/Jobs/UpdateCoursesJobForm.js

@@ -65,7 +65,7 @@ const UpdateCoursesJobForm = ({ callback }) => {
         </Row>
         <Row style={{ paddingTop: 10, paddingBottom: 10 }}>
           <Col md="auto">
-            <Button variant="primary" type="submit">
+            <Button variant="primary" type="submit" data-testid="updateCourses">
               Update Courses
             </Button>
           </Col>

frontend/src/main/pages/AdminJobsPage.js

@@ -8,6 +8,7 @@ import JobComingSoon from "main/components/Jobs/JobComingSoon";
 
 import { useBackendMutation } from "main/utils/useBackend";
 import UpdateCoursesJobForm from "main/components/Jobs/UpdateCoursesJobForm";
+import UpdateCoursesByQuarterJobForm from "main/components/Jobs/UpdateCoursesByQuarterJobForm";
 
 const AdminJobsPage = () => {
 
@@ -40,19 +41,34 @@ const AdminJobsPage = () => {
         method: "POST"
     });
 
+    const objectToAxiosParamsUpdateCoursesByQuarterJob = (data) => ({
+        url: `/api/jobs/launch/updateQuarterCourses?quarterYYYYQ=${data.quarter}`,
+        method: "POST"
+    });
+
     // Stryker disable all
     const updateCoursesJobMutation = useBackendMutation(
         objectToAxiosParamsUpdateCoursesJob,
         {},
         ["/api/jobs/all"]
     );
+    const updateCoursesByQuarterJobMutation = useBackendMutation(
+        objectToAxiosParamsUpdateCoursesByQuarterJob,
+        {},
+        ["/api/jobs/all"]
+    );
     // Stryker enable all
 
     const submitUpdateCoursesJob = async (data) => {
         console.log("submitUpdateCoursesJob, data=", data);
         updateCoursesJobMutation.mutate(data);
     }
 
+    const submitUpdateCoursesByQuarterJob = async (data) => {
+        console.log("submitCoursesByQuarterJob, data=", data);
+        updateCoursesByQuarterJobMutation.mutate(data);
+    }
+
     // Stryker disable all 
     const { data: jobs, error: _error, status: _status } =
         useBackend(
@@ -75,6 +91,10 @@ const AdminJobsPage = () => {
             name: "Update Courses Database",
             form: <UpdateCoursesJobForm callback={submitUpdateCoursesJob}  />
         },
+        {
+            name: "Update Courses Database by quarter",
+            form: <UpdateCoursesByQuarterJobForm callback={submitUpdateCoursesByQuarterJob} />
+        },
         {
             name: "Update Grade Info",
             form: <JobComingSoon />

frontend/src/stories/components/Jobs/UpdateCoursesByQuarterJobForm.stories.js

@@ -0,0 +1,31 @@
+import React from "react";
+
+import UpdateCoursesByQuarterJobForm from "main/components/Jobs/UpdateCoursesByQuarterJobForm";
+import { systemInfoFixtures } from "fixtures/systemInfoFixtures";
+
+export default {
+  title: "components/Jobs/UpdateCoursesByQuarterJobForm",
+  component: UpdateCoursesByQuarterJobForm,
+  parameters: {
+    mockData: [
+      {
+        url: '/api/systemInfo',
+        method: 'GET',
+        status: 200,
+        response: systemInfoFixtures.showingBoth
+      },
+    ],
+  },
+};
+
+const Template = (args) => {
+  return <UpdateCoursesByQuarterJobForm {...args} />;
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  callback: (data) => {
+    console.log("Submit was clicked, data=", data);
+  }
+};

frontend/src/tests/components/Jobs/UpdateCoursesByQuarterJobForm.test.js

@@ -0,0 +1,61 @@
+import { render, screen } from "@testing-library/react";
+import { BrowserRouter as Router } from "react-router-dom";
+import UpdateCoursesByQuarterJobForm from "main/components/Jobs/UpdateCoursesByQuarterJobForm";
+import { QueryClient, QueryClientProvider } from "react-query";
+
+import axios from "axios";
+import AxiosMockAdapter from "axios-mock-adapter";
+
+
+const mockedNavigate = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockedNavigate
+}));
+
+const queryClient = new QueryClient();
+
+describe("UpdateCoursesByQuarterJobForm tests", () => {
+
+  const axiosMock = new AxiosMockAdapter(axios);
+
+  it("renders correctly", async () => {
+    render(
+      <QueryClientProvider client={queryClient}>
+        <Router >
+          <UpdateCoursesByQuarterJobForm />
+        </Router>
+      </QueryClientProvider>
+    );
+
+    expect(screen.getByText(/Update Courses/)).toBeInTheDocument();
+  });
+
+  test("renders without crashing when fallback values are used", async () => {
+
+    axiosMock
+      .onGet("/api/systemInfo")
+      .reply(200, {
+        "springH2ConsoleEnabled": false,
+        "showSwaggerUILink": false,
+        "startQtrYYYYQ": null, // use fallback value
+        "endQtrYYYYQ": null  // use fallback value
+      });
+
+    render(
+      <QueryClientProvider client={queryClient}>
+        <Router >
+          <UpdateCoursesByQuarterJobForm />
+        </Router >
+      </QueryClientProvider>
+    );
+
+    // Make sure the first and last options 
+    expect(await screen.findByTestId(/BasicSearch.Quarter-option-0/)).toHaveValue("20211")
+    expect(await screen.findByTestId(/BasicSearch.Quarter-option-3/)).toHaveValue("20214")
+
+  });
+
+
+});

frontend/src/tests/pages/AdminJobsPage.test.js

@@ -99,7 +99,7 @@ describe("AdminJobsPage tests", () => {
 
         expect(await screen.findByTestId("TestJobForm-fail")).toBeInTheDocument();
 
-        const submitButton = screen.getByText("Update Courses");
+        const submitButton = screen.getByTestId("updateCourses");
 
         const expectedKey = "BasicSearch.Subject-option-ANTH";
         await waitFor(() => expect(screen.getByTestId(expectedKey).toBeInTheDocument));
@@ -120,4 +120,38 @@ describe("AdminJobsPage tests", () => {
     });
 
 
+    test("user can submit the update course data by quarter job", async () => {
+        render(
+            <QueryClientProvider client={queryClient}>
+                <MemoryRouter>
+                    <AdminJobsPage />
+                </MemoryRouter>
+            </QueryClientProvider>
+        );
+
+        expect(await screen.findByText("Update Courses Database by quarter")).toBeInTheDocument();
+
+        const updateCoursesButton = screen.getByText("Update Courses Database by quarter");
+        expect(updateCoursesButton).toBeInTheDocument();
+        updateCoursesButton.click();
+
+        expect(await screen.findByTestId("TestJobForm-fail")).toBeInTheDocument();
+
+        const submitButton = screen.getByTestId("updateCoursesByQuarter");
+
+        const expectedKey = "BasicSearch.Subject-option-ANTH";
+        await waitFor(() => expect(screen.getByTestId(expectedKey).toBeInTheDocument));
+
+        const selectQuarter = screen.getByLabelText("Quarter");
+        userEvent.selectOptions(selectQuarter, "20211");
+        expect(submitButton).toBeInTheDocument();
+
+        submitButton.click();
+
+        await waitFor(() => expect(axiosMock.history.post.length).toBe(1));
+
+        expect(axiosMock.history.post[0].url).toBe("/api/jobs/launch/updateQuarterCourses?quarterYYYYQ=20211");
+    });
+
+
 });