From a4ec3ce659f7c382d021fe6b3b5105bc4e258bf6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1s=20Palma?= Date: Tue, 29 Nov 2022 11:38:06 +0000 Subject: [PATCH 1/3] search button display changes depending on user search input --- src/components/HomePage/SearchArea/SearchArea.js | 4 ++++ .../HomePage/SearchArea/SubmitSearchButton.js | 12 +++++++----- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/HomePage/SearchArea/SearchArea.js b/src/components/HomePage/SearchArea/SearchArea.js index bed37551..db00fee4 100644 --- a/src/components/HomePage/SearchArea/SearchArea.js +++ b/src/components/HomePage/SearchArea/SearchArea.js @@ -177,6 +177,10 @@ export const SearchArea = ({ onSubmit, searchValue, diff --git a/src/components/HomePage/SearchArea/SubmitSearchButton.js b/src/components/HomePage/SearchArea/SubmitSearchButton.js index ba5adb44..63ca547b 100644 --- a/src/components/HomePage/SearchArea/SubmitSearchButton.js +++ b/src/components/HomePage/SearchArea/SubmitSearchButton.js @@ -2,27 +2,29 @@ import React from "react"; import PropTypes from "prop-types"; import { Fab } from "@material-ui/core"; -import { Search } from "@material-ui/icons"; import useSearchAreaStyle from "./searchAreaStyle"; -const ShowAdvancedOptionsButton = ({ onClick }) => { +const SubmitSearchButton = ({ onClick, searchHasUserInput }) => { const classes = useSearchAreaStyle(); return (
- + { searchHasUserInput ? Search + : Search All }
); }; -ShowAdvancedOptionsButton.propTypes = { +SubmitSearchButton.propTypes = { onClick: PropTypes.func.isRequired, + searchHasUserInput: PropTypes.bool.isRequired, }; -export default ShowAdvancedOptionsButton; +export default SubmitSearchButton; From 68db93153faf6e9c10c0ae52baf9559d3ced10c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1s=20Palma?= Date: Fri, 9 Dec 2022 02:03:54 +0000 Subject: [PATCH 2/3] added tests to search button display change behaviour --- .../HomePage/SearchArea/SearchArea.spec.js | 141 ++++++++++++++++-- .../HomePage/SearchArea/SubmitSearchButton.js | 7 +- .../SearchArea/SubmitSearchButton.spec.js | 4 - 3 files changed, 133 insertions(+), 19 deletions(-) diff --git a/src/components/HomePage/SearchArea/SearchArea.spec.js b/src/components/HomePage/SearchArea/SearchArea.spec.js index 109cb723..3de94421 100644 --- a/src/components/HomePage/SearchArea/SearchArea.spec.js +++ b/src/components/HomePage/SearchArea/SearchArea.spec.js @@ -10,10 +10,12 @@ import { } from "../../../actions/searchOffersActions"; import { createTheme } from "@material-ui/core"; import { renderWithStoreAndTheme, screen, fireEvent, act } from "../../../test-utils"; - import { MemoryRouter } from "react-router-dom"; +import PropTypes from "prop-types"; + import qs from "qs"; +import { INITIAL_JOB_TYPE } from "../../../reducers/searchOffersReducer"; // eslint-disable-next-line react/prop-types const RouteWrappedContent = ({ children, url = "/" }) => ( @@ -22,6 +24,47 @@ const RouteWrappedContent = ({ children, url = "/" }) => ( ); +const SearchAreaWrapper = ({ + searchValue = "", jobType = INITIAL_JOB_TYPE, jobDuration = [null, null], filterJobDuration = false, + showJobDurationSlider = false, fields = [], technologies = [], setShowJobDurationSlider = () => { }, + setTechs = () => { }, setJobDuration = () => { }, setFields = () => { }, setJobType = () => { }, + setSearchValue = () => { }, onSubmit = () => {}, +}) => ( + +); + +SearchAreaWrapper.propTypes = { + onSubmit: PropTypes.func, + searchValue: PropTypes.string.isRequired, + jobType: PropTypes.string, + setSearchValue: PropTypes.func.isRequired, + setJobDuration: PropTypes.func.isRequired, + setJobType: PropTypes.func.isRequired, + fields: PropTypes.array.isRequired, + technologies: PropTypes.array.isRequired, + showJobDurationSlider: PropTypes.bool.isRequired, + setFields: PropTypes.func.isRequired, + setTechs: PropTypes.func.isRequired, + setShowJobDurationSlider: PropTypes.func.isRequired, + jobDuration: PropTypes.number, + filterJobDuration: PropTypes.bool, +}; + describe("SearchArea", () => { let onSubmit; const theme = createTheme(); @@ -34,16 +77,8 @@ describe("SearchArea", () => { it("should render a Paper, a Form, a Search Bar, a Search Button and Advanced Options Button", () => { renderWithStoreAndTheme( - { }} - setTechs={() => { }} - setJobDuration={() => { }} - setFields={() => { }} - setJobType={() => { }} - setSearchValue={() => { }} /> , { initialState, theme } @@ -55,6 +90,88 @@ describe("SearchArea", () => { expect(screen.getByRole("button", { name: "Search" })).toBeInTheDocument(); expect(screen.getByRole("button", { name: "Toggle Advanced Search" })).toBeInTheDocument(); }); + it("should render a text='Show All' in the default state of searchArea", () => { + const searchArea = renderWithStoreAndTheme( + + + , + { initialState, theme } + ); + + expect(searchArea.getByRole("button", { name: "Search" })).toHaveTextContent("Show All"); + }); + it("should render a text='Search' when search bar value != ''", () => { + const searchArea = renderWithStoreAndTheme( + + + , + { initialState, theme } + ); + + expect(searchArea.getByRole("button", { name: "Search" })).toHaveTextContent("Search"); + }); + it("should render a text='Show All' when search bar has undefined value", () => { + const searchArea = renderWithStoreAndTheme( + + + , + { initialState, theme } + ); + + expect(searchArea.getByRole("button", { name: "Search" })).toHaveTextContent("Show All"); + }); + it("should render a text='Search' when fields != []", () => { + const searchArea = renderWithStoreAndTheme( + + + , + { initialState, theme } + ); + + expect(searchArea.getByRole("button", { name: "Search" })).toHaveTextContent("Search"); + }); + it("should render a text='Search' when technologies != []", () => { + const searchArea = renderWithStoreAndTheme( + + + , + { initialState, theme } + ); + + expect(searchArea.getByRole("button", { name: "Search" })).toHaveTextContent("Search"); + }); + it("should render a text='Search' when jobType != INITIAL_JOB_TYPE", () => { + const searchArea = renderWithStoreAndTheme( + + + , + { initialState, theme } + ); + + expect(searchArea.getByRole("button", { name: "Search" })).toHaveTextContent("Search"); + }); + it("should render a text='Search' when showJobDurationSlider = true ", () => { + const searchArea = renderWithStoreAndTheme( + + + , + { initialState, theme } + ); + + expect(searchArea.getByRole("button", { name: "Search" })).toHaveTextContent("Search"); + }); }); describe("interaction", () => { @@ -124,15 +241,13 @@ describe("SearchArea", () => { renderWithStoreAndTheme( - , diff --git a/src/components/HomePage/SearchArea/SubmitSearchButton.js b/src/components/HomePage/SearchArea/SubmitSearchButton.js index 63ca547b..7f63ffd7 100644 --- a/src/components/HomePage/SearchArea/SubmitSearchButton.js +++ b/src/components/HomePage/SearchArea/SubmitSearchButton.js @@ -15,8 +15,11 @@ const SubmitSearchButton = ({ onClick, searchHasUserInput }) => { variant="extended" onClick={onClick} > - { searchHasUserInput ? Search - : Search All } + + {searchHasUserInput + ? "Search" + : "Show All"} + ); diff --git a/src/components/HomePage/SearchArea/SubmitSearchButton.spec.js b/src/components/HomePage/SearchArea/SubmitSearchButton.spec.js index 75f4fb58..e08848d0 100644 --- a/src/components/HomePage/SearchArea/SubmitSearchButton.spec.js +++ b/src/components/HomePage/SearchArea/SubmitSearchButton.spec.js @@ -1,5 +1,4 @@ import React from "react"; -import { Search } from "@material-ui/icons"; import { Fab } from "@material-ui/core"; import SubmitSearchButton from "./SubmitSearchButton"; @@ -11,9 +10,6 @@ describe("SubmitSearchButton", () => { .find(Fab).exists() ).toBe(true); }); - it("should render 'search' icon", () => { - expect(shallow().find(Search).exists()).toBe(true); - }); }); describe("interaction", () => { From 6f0c2cc2732cca1a080c16be9d2bb5de944936b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1s=20Palma?= Date: Wed, 1 Feb 2023 00:05:57 +0000 Subject: [PATCH 3/3] fix wrong documentation link for reactive controller pattern --- src/hooks/useComponentController.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/hooks/useComponentController.js b/src/hooks/useComponentController.js index 04c74b92..696ae753 100644 --- a/src/hooks/useComponentController.js +++ b/src/hooks/useComponentController.js @@ -3,7 +3,7 @@ import React from "react"; export const DefaultContext = React.createContext(); /** - * This is based on the pattern described here: https://angeloteixeira.me/blog/reactive-controller-pattern + * This is based on the pattern described here: https://angeloteixeira.eu/blog/reactive-controller-pattern * With it, components can abstract logic common to different view layouts (such as desktop/mobile) and both can read from the given Context * * @param controller - A function (can be a React Hook) that handles some logic.