-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3246 from HHS/OPS-310/3100_CAN_funding_received_form
feat: adds CAN Funding Received form
- Loading branch information
Showing
16 changed files
with
655 additions
and
238 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
80 changes: 80 additions & 0 deletions
80
frontend/src/components/CANs/CANFundingReceivedForm/CanFundingReceivedForm.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import CurrencyInput from "../../UI/Form/CurrencyInput"; | ||
| import TextArea from "../../UI/Form/TextArea"; | ||
| import icons from "../../../uswds/img/sprite.svg"; | ||
|
|
||
| /** | ||
| * @typedef {Object} CANFundingReceivedFormProps | ||
| * @property {(arg: string) => string} cn | ||
| * @property {Object} res | ||
| * @property {string} receivedFundingAmount | ||
| * @property {(e: React.FormEvent<HTMLFormElement>) => void} handleSubmit | ||
| * @property {(name: string, value: string) => void} runValidate | ||
| * @property { React.Dispatch<React.SetStateAction<string>>} setReceivedFundingAmount | ||
| * @property {string} notes | ||
| * @property { React.Dispatch<React.SetStateAction<string>>} setNotes | ||
| */ | ||
|
|
||
| /** | ||
| * @component - The CAN Funding Received Form component. | ||
| * @param {CANFundingReceivedFormProps} props | ||
| * @returns {JSX.Element} - The component JSX. | ||
| */ | ||
|
|
||
| const CANFundingReceivedForm = ({ | ||
| cn, | ||
| res, | ||
| runValidate, | ||
| handleSubmit, | ||
| receivedFundingAmount, | ||
| setReceivedFundingAmount, | ||
| notes, | ||
| setNotes | ||
| }) => { | ||
| const isFormInValid = !receivedFundingAmount || res.hasErrors("funding-received-amount"); | ||
| const fillColor = !isFormInValid ? "#005ea2" : "#757575"; | ||
|
|
||
| return ( | ||
| <form | ||
| onSubmit={(e) => { | ||
| handleSubmit(e); | ||
| }} | ||
| > | ||
| <div style={{ width: "383px" }}> | ||
| <CurrencyInput | ||
| name="funding-received-amount" | ||
| label="Funding Received" | ||
| onChange={(name, value) => { | ||
| runValidate("funding-received-amount", value); | ||
| }} | ||
| setEnteredAmount={setReceivedFundingAmount} | ||
| value={receivedFundingAmount || ""} | ||
| messages={res.getErrors("funding-received-amount")} | ||
| className={`${cn("funding-received-amount")} margin-top-0`} | ||
| /> | ||
| <TextArea | ||
| maxLength={75} | ||
| name="notes" | ||
| label="Notes (optional)" | ||
| value={notes} | ||
| onChange={(name, value) => setNotes(value)} | ||
| textAreaStyle={{ height: "51px" }} | ||
| />{" "} | ||
| </div> | ||
| <button | ||
| className="usa-button usa-button--outline margin-top-4" | ||
| disabled={isFormInValid} | ||
| data-cy="add-funding-received-btn" | ||
| > | ||
| <svg | ||
| className="height-2 width-2 margin-right-05 cursor-pointer" | ||
| style={{ fill: fillColor }} | ||
| > | ||
| <use xlinkHref={`${icons}#add`}></use> | ||
| </svg> | ||
| Add Funding Received | ||
| </button> | ||
| </form> | ||
| ); | ||
| }; | ||
|
|
||
| export default CANFundingReceivedForm; |
78 changes: 78 additions & 0 deletions
78
frontend/src/components/CANs/CANFundingReceivedForm/CanFundingReceivedForm.test.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| import { render, screen } from "@testing-library/react"; | ||
| import userEvent from "@testing-library/user-event"; | ||
| import { describe, it, expect, vi, beforeEach } from "vitest"; | ||
| import CANFundingReceivedForm from "./CanFundingReceivedForm"; | ||
|
|
||
| describe("CANFundingReceivedForm", () => { | ||
| let user; | ||
| const defaultProps = { | ||
| cn: vi.fn(), | ||
| res: { | ||
| hasErrors: vi.fn().mockReturnValue(false), | ||
| getErrors: vi.fn().mockReturnValue([]) | ||
| }, | ||
| receivedFundingAmount: "", | ||
| handleSubmit: vi.fn(), | ||
| runValidate: vi.fn(), | ||
| setReceivedFundingAmount: vi.fn(), | ||
| notes: "", | ||
| setNotes: vi.fn() | ||
| }; | ||
|
|
||
| beforeEach(() => { | ||
| user = userEvent.setup(); | ||
| vi.clearAllMocks(); | ||
| }); | ||
|
|
||
| it("renders the form correctly", () => { | ||
| render(<CANFundingReceivedForm {...defaultProps} />); | ||
|
|
||
| expect(screen.getByLabelText(/Funding Received/i)).toBeInTheDocument(); | ||
| expect(screen.getByLabelText(/Notes \(optional\)/i)).toBeInTheDocument(); | ||
| expect(screen.getByRole("button", { name: /Add Funding Received/i })).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("calls setNotes when typing in notes field", async () => { | ||
| render(<CANFundingReceivedForm {...defaultProps} />); | ||
| const textarea = screen.getByLabelText(/Notes \(optional\)/i); | ||
|
|
||
| await user.type(textarea, "Test note"); | ||
| expect(defaultProps.setNotes).toHaveBeenCalledTimes(9); | ||
| }); | ||
|
|
||
| it("calls setReceivedFundingAmount when typing amount", async () => { | ||
| render(<CANFundingReceivedForm {...defaultProps} />); | ||
| const input = screen.getByLabelText(/Funding Received/i); | ||
|
|
||
| await user.type(input, "1000"); | ||
|
|
||
| expect(defaultProps.setReceivedFundingAmount).toHaveBeenCalledWith(1000); | ||
| }); | ||
|
|
||
| it("calls handleSubmit when form is submitted", async () => { | ||
| render( | ||
| <CANFundingReceivedForm | ||
| {...defaultProps} | ||
| receivedFundingAmount="1000" | ||
| /> | ||
| ); | ||
|
|
||
| await user.click(screen.getByRole("button", { name: /Add Funding Received/i })); | ||
|
|
||
| expect(defaultProps.handleSubmit).toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| it("disables submit button when form is invalid", () => { | ||
| render( | ||
| <CANFundingReceivedForm | ||
| {...defaultProps} | ||
| res={{ | ||
| ...defaultProps.res, | ||
| hasErrors: vi.fn().mockReturnValue(true) | ||
| }} | ||
| /> | ||
| ); | ||
|
|
||
| expect(screen.getByRole("button", { name: /Add Funding Received/i })).toBeDisabled(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default } from "./CanFundingReceivedForm"; |
Oops, something went wrong.