diff --git a/doc/release/RELEASE-NOTES.md b/doc/release/RELEASE-NOTES.md index 6fb0e6a94..3facf0240 100644 --- a/doc/release/RELEASE-NOTES.md +++ b/doc/release/RELEASE-NOTES.md @@ -67,6 +67,7 @@ This project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html * [OSDEV-1695](https://opensupplyhub.atlassian.net/browse/OSDEV-1695) - [SLC] Enabled the claim button for updated production locations when a moderation event has a pending status. Disabled claim button explicitly if production location has pending claim status. * [OSDEV-1701](https://opensupplyhub.atlassian.net/browse/OSDEV-1701) - Refactored "Go Back" button in production location info page. * [OSDEV-1672](https://opensupplyhub.atlassian.net/browse/OSDEV-1672) - SLC. Implement collecting contribution data page (FE) - All Multi-Selects on the page have been fixed. They resize based on the number of items selected. +* [OSDEV-1653](https://opensupplyhub.atlassian.net/browse/OSDEV-1653) - Added asterisks next to each required form field (Name, Address, and Country) on the "Search by Name and Address" tab. Highlighted an empty field and displayed an error message if it loses focus. Added proper styles for the error messages. ### What's new * [OSDEV-1662](https://opensupplyhub.atlassian.net/browse/OSDEV-1662) - Added a new field, `action_perform_by`, to the moderation event. This data appears on the Contribution Record page when a moderator perform any actions like `APPROVED` or `REJECTED`. diff --git a/src/react/src/__tests__/components/SearchByNameAndAddressTab.test.js b/src/react/src/__tests__/components/SearchByNameAndAddressTab.test.js new file mode 100644 index 000000000..5baa57577 --- /dev/null +++ b/src/react/src/__tests__/components/SearchByNameAndAddressTab.test.js @@ -0,0 +1,187 @@ +import React from "react"; +import { fireEvent } from "@testing-library/react"; +import SearchByNameAndAddressTab from "../../components/Contribute/SearchByNameAndAddressTab"; +import { searchByNameAndAddressResultRoute } from "../../util/constants"; +import renderWithProviders from "../../util/testUtils/renderWithProviders"; + + +const mockPush = jest.fn(); + +jest.mock("react-router-dom", () => { + const actual = jest.requireActual("react-router-dom"); + return { + ...actual, + useHistory: () => ({ + push: mockPush, + }), + }; +}); + +jest.mock("../../components/Filters/StyledSelect", () => (props) => { + const { options, value, onChange, onBlur, placeholder } = props; + return ( + + ); +}); + +describe("SearchByNameAndAddressTab component", () => { + const countriesData = [ + { value: "GB", label: "United Kingdom" }, + { value: "US", label: "United States" }, + ]; + + const defaultState = { + filterOptions: { + countries: { + data: countriesData, + error: null, + fetching: false, + }, + }, + }; + + test("renders loading indicator when fetching is true", () => { + const { getByRole } = renderWithProviders( + , + { + preloadedState: { + filterOptions: { + countries: { + data: countriesData, + error: null, + fetching: true, + }, + }, + }, + }, + ); + + expect(getByRole("progressbar")).toBeInTheDocument(); + }); + + test("renders error message when error is provided", () => { + const errorMsg = "An error occurred"; + const { getByText } = renderWithProviders( + , + { + preloadedState: { + filterOptions: { + countries: { + data: countriesData, + error: [errorMsg], + fetching: false, + }, + }, + }, + }, + ); + expect(getByText(errorMsg)).toBeInTheDocument(); + }); + + test("renders form fields and disabled Search button by default", () => { + const { getByText, getByRole, getByPlaceholderText, getByTestId } = + renderWithProviders(, { + preloadedState: defaultState, + }); + + expect( + getByText(/Check if the production location is already on OS Hub/i), + ).toBeInTheDocument(); + expect(getByText("Production Location Details")).toBeInTheDocument(); + expect(getByText("Enter the Name")).toBeInTheDocument(); + expect(getByText("Enter the Address")).toBeInTheDocument(); + expect(getByText("Select the Country")).toBeInTheDocument(); + + const nameInput = getByPlaceholderText("Type a name"); + expect(nameInput).toBeInTheDocument(); + expect(nameInput).toHaveValue(""); + + const addressInput = getByPlaceholderText("Address"); + expect(addressInput).toBeInTheDocument(); + expect(addressInput).toHaveValue(""); + + const countrySelect = getByTestId("countries-select"); + expect(countrySelect).toBeInTheDocument(); + expect(countrySelect).toHaveValue(""); + + const searchButton = getByRole("button", { name: /Search/i }); + expect(searchButton).toBeDisabled(); + }); + + test("enables the Search button when all fields are filled", () => { + const { getByRole, getByPlaceholderText, getByTestId } = + renderWithProviders(, { + preloadedState: defaultState, + }); + + const nameInput = getByPlaceholderText("Type a name"); + const addressInput = getByPlaceholderText("Address"); + const countrySelect = getByTestId("countries-select"); + const searchButton = getByRole("button", { name: /Search/i }); + + expect(searchButton).toBeDisabled(); + + fireEvent.change(nameInput, { target: { value: "Test Name" } }); + fireEvent.change(addressInput, { target: { value: "Test Address" } }); + fireEvent.change(countrySelect, { target: { value: "US" } }); + + expect(countrySelect.value).toBe("US"); + expect(searchButton).toBeEnabled(); + + const searchParams = new URLSearchParams({ + name: "Test Name", + address: "Test Address", + country: "US", + }); + const expectedUrl = `${searchByNameAndAddressResultRoute}?${searchParams.toString()}`; + + fireEvent.click(searchButton); + expect(mockPush).toHaveBeenCalledWith(expectedUrl); + }); + + test("shows error indication on blur when fields are empty", () => { + const { getByText, getAllByText, getByTestId, getByPlaceholderText } = + renderWithProviders(, { + preloadedState: defaultState, + }); + const nameInput = getByPlaceholderText("Type a name"); + const addressInput = getByPlaceholderText("Address"); + const countrySelect = getByTestId("countries-select"); + + fireEvent.blur(nameInput); + fireEvent.blur(addressInput); + fireEvent.blur(countrySelect); + + expect(getByPlaceholderText("Type a name")).toHaveAttribute( + "aria-invalid", + "true", + ); + expect(getByPlaceholderText("Address")).toHaveAttribute( + "aria-invalid", + "true", + ); + expect(getAllByText(/This field is required./i)).toHaveLength(2); + expect( + getByText( + /The country is missing from your search. Select the correct country from the drop down menu./i, + ), + ).toBeInTheDocument(); + }); +}); diff --git a/src/react/src/components/Contribute/SearchByNameAndAddressTab.jsx b/src/react/src/components/Contribute/SearchByNameAndAddressTab.jsx index c66704c65..1c5088dd3 100644 --- a/src/react/src/components/Contribute/SearchByNameAndAddressTab.jsx +++ b/src/react/src/components/Contribute/SearchByNameAndAddressTab.jsx @@ -17,25 +17,46 @@ import { makeSearchByNameAddressTabStyles } from '../../util/styles'; import { countryOptionsPropType } from '../../util/propTypes'; import { fetchCountryOptions } from '../../actions/filterOptions'; -const selectStyles = { - control: provided => ({ - ...provided, - height: '56px', - borderRadius: '0', - '&:focus,&:active,&:focus-within': { - borderColor: COLOURS.PURPLE, - boxShadow: `inset 0 0 0 1px ${COLOURS.PURPLE}`, +const getSelectStyles = isErrorState => ({ + control: (provided, state) => { + let borderColor; + if (isErrorState) { + borderColor = COLOURS.RED; + } else if (state.isFocused) { + borderColor = COLOURS.PURPLE; + } else { + borderColor = provided.borderColor; + } + + const boxShadow = state.isFocused + ? `inset 0 0 0 1px ${borderColor}` + : provided.boxShadow; + + return { + ...provided, + height: '56px', + borderRadius: '0', + borderColor, + boxShadow, transition: 'box-shadow 0.2s', - }, - '&:hover': { - borderColor: 'black', - }, - }), + '&:hover': { + borderColor: !isErrorState && !state.isFocused && 'black', + }, + }; + }, placeholder: provided => ({ ...provided, opacity: 0.7, + color: isErrorState ? COLOURS.RED : provided.color, }), -}; +}); + +const FormFieldTitle = ({ label, classes }) => ( + + {label} + * + +); const SearchByNameAndAddressTab = ({ classes, @@ -51,25 +72,29 @@ const SearchByNameAndAddressTab = ({ const [addressTouched, setAddressTouched] = useState(false); const [countryTouched, setCountryTouched] = useState(false); + const isCountryError = countryTouched && !inputCountry?.value; + const history = useHistory(); - const isValid = val => { - if (val) { - return val.length > 0; - } - return false; - }; + const isValid = val => val.trim().length > 0; + const handleNameChange = event => { - setNameTouched(true); setInputName(event.target.value); }; const handleAddressChange = event => { - setAddressTouched(true); setInputAddress(event.target.value); }; const handleCountryChange = event => { - setCountryTouched(true); setInputCountry(event); }; + const handleNameBlur = () => { + setNameTouched(true); + }; + const handleAddressBlur = () => { + setAddressTouched(true); + }; + const handleCountryBlur = () => { + setCountryTouched(true); + }; const handleSearch = () => { const baseUrl = searchByNameAndAddressResultRoute; @@ -83,10 +108,7 @@ const SearchByNameAndAddressTab = ({ history.push(url); }; const isFormValid = - isValid(inputName) && - isValid(inputAddress) && - countryTouched && - isValid(inputCountry.value); + isValid(inputName) && isValid(inputAddress) && inputCountry?.value; useEffect(() => { if (!countriesData) { @@ -117,17 +139,20 @@ const SearchByNameAndAddressTab = ({ Production Location Details - - Enter the Name - + + } + error={nameTouched && !isValid(inputName)} InputProps={{ classes: { input: `${classes.searchInputStyles} @@ -142,22 +167,27 @@ const SearchByNameAndAddressTab = ({ type: 'text', }, }} - helperText={ - nameTouched && !isValid(inputName) && - } - error={nameTouched && !isValid(inputName)} + FormHelperTextProps={{ + classes: { + root: classes.helperTextStyles, + }, + }} /> - - Enter the Address - + + } + error={addressTouched && !isValid(inputAddress)} InputProps={{ classes: { input: `${classes.searchInputStyles} @@ -169,15 +199,13 @@ const SearchByNameAndAddressTab = ({ notchedOutline: classes.notchedOutlineStyles, }, }} - helperText={ - addressTouched && - !isValid(inputAddress) && - } - error={addressTouched && !isValid(inputAddress)} + FormHelperTextProps={{ + classes: { + root: classes.helperTextStyles, + }, + }} /> - - Select the Country - + + {isCountryError && ( +
+ +
+ )}