From 1a84e6c1eb680b6de6379e73c727c9856a4524d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tom=C3=A1s=20Palma?= Date: Mon, 17 Apr 2023 22:26:22 +0100 Subject: [PATCH] add: tests for quick collapse edit func in company offers management widget --- .../Manage/CompanyOffersManagementWidget.js | 16 +-- .../CompanyOffersManagementWidget.spec.js | 126 +++++++++++++++--- .../Offers/Manage/QuickOfferEditForm.js | 41 +++--- 3 files changed, 129 insertions(+), 54 deletions(-) diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js index f2b10f45..ada3e9ca 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.js @@ -15,24 +15,15 @@ import { GenerateTableCellFromField, } from "../../../../utils/Table/utils"; import { columns } from "./CompanyOffersManagementSchema"; -import PropTypes from "prop-types"; -import useSession from "../../../../hooks/useSession"; import { OfferTitleFilter, PublishDateFilter, PublishEndDateFilter, LocationFilter, } from "../Filters/index"; -import { Edit as EditIcon } from "@material-ui/icons"; -import { Link } from "react-router-dom"; -import { addSnackbar } from "../../../../actions/notificationActions"; -import { connect } from "react-redux"; -import { RowActions } from "./CompanyOffersActions"; import Offer from "../../../HomePage/SearchResultsArea/Offer/Offer"; import { OfferConstants } from "../../../Offers/Form/OfferUtils"; -import { LocationFilter, OfferTitleFilter, PublishDateFilter, PublishEndDateFilter } from "../Filters/index"; import { RowActions } from "./CompanyOffersActions"; -import { columns } from "./CompanyOffersManagementSchema"; import OfferTitle from "./CompanyOffersTitle"; import CompanyOffersVisibilityActions from "./CompanyOffersVisibilityActions"; import CollapsedQuickOfferEdit from "./CollapsedQuickOfferEdit"; @@ -220,7 +211,12 @@ const CompanyOffersManagementWidget = ({ addSnackbar, isMobile }) => { - + diff --git a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.spec.js b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.spec.js index 42d1e305..55f5744a 100644 --- a/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.spec.js +++ b/src/components/Company/Offers/Manage/CompanyOffersManagementWidget.spec.js @@ -1,14 +1,7 @@ import React from "react"; import { - screen, - waitFor, - queryByText, - getByLabelText, - fireEvent, - act, - getByTestId, - queryByTestId, - queryByTitle, + screen, waitFor, queryByText, getByLabelText, + fireEvent, act, getByTestId, queryByTestId, queryByTitle, } from "@testing-library/react"; import CompanyOffersManagementWidget from "./CompanyOffersManagementWidget"; @@ -19,10 +12,11 @@ import * as companyOffersService from "../../../../services/companyOffersService import { hideOffer as hideOfferService, enableOffer as enableOfferService, + editOffer as editOfferService, } from "../../../../services/offerService"; import useSession from "../../../../hooks/useSession"; import { BrowserRouter } from "react-router-dom"; -import { addSnackbar } from "../../../../actions/notificationActions"; +import { addSnackbar, NotificationTypes } from "../../../../actions/notificationActions"; import { createMatchMedia } from "../../../../utils/media-queries"; import { columns } from "./CompanyOffersManagementSchema"; import { createTheme } from "@material-ui/core"; @@ -267,28 +261,122 @@ describe("App", () => { expect(addSnackbar).toHaveBeenCalledTimes(1); }); - it("Loads Empty Offers", async () => { + it("Should display a snackbar with an error if a company quick edits one hidden offer with five offers not hidden", async () => { + addSnackbar.mockImplementationOnce((notification) => ({ + type: NotificationTypes.ADD_SNACKBAR, + notification: { + key: Date.now() + Math.random(), + ...notification, + }, + })); + + editOfferService.mockImplementationOnce( + () => new Promise((resolve) => resolve({})), + ); + + const offers = [...MOCK_OFFERS, { + _id: "random uuid7", + owner: "company_id", + title: "Offer title 4", + ownerName: "Reddit", + ownerLogo: "logo.com", + location: "Porto", + publishDate: "2019-06", + publishEndDate: "2020-09", + description: "Offer description 4", + isHidden: false, + }, + { + _id: "random uuid8", + owner: "company_id", + title: "Offer title 5", + ownerName: "Reddit", + ownerLogo: "logo.com", + location: "Porto", + publishDate: "2019-06", + publishEndDate: "2020-09", + description: "Offer description 5", + isHidden: false, + }, + { + _id: "random uuid9", + owner: "company_id", + title: "Offer title 6", + ownerName: "Reddit", + ownerLogo: "logo.com", + location: "Porto", + publishDate: "2019-06", + publishEndDate: "2020-09", + description: "Offer description 6", + isHidden: false, + }, + { + _id: "random uuid10", + owner: "company_id", + title: "Offer title 7", + ownerName: "Reddit", + ownerLogo: "logo.com", + location: "Porto", + publishDate: "2019-06", + publishEndDate: "2020-09", + description: "Offer description 7", + isHidden: false, + }]; companyOffersService.fetchCompanyOffers.mockImplementationOnce( - () => new Promise((resolve) => resolve([])), + () => new Promise((resolve) => resolve(offers)), ); - // By waiting for act it executes all the async code at once + renderWithStoreAndTheme( - - - , + + + + + + + , { initialState: {}, theme }, ); + const newPublishEndDateString = "2020-08-20T22:59:59.000Z"; + const newPublishEndDate = new Date(Date.parse(newPublishEndDateString)); + + let quickOfferEditCollapsableButtons; await waitFor( () => { - expect(screen.getByText("Offers Management")).toBeInTheDocument(); - - expect(screen.getByText("No offers here.")).toBeInTheDocument(); + quickOfferEditCollapsableButtons = screen.getAllByTitle( + "Quick Offer Edit Actions", + ); }, { timeout: 1000, }, ); + + const hiddenOfferQuickEditButton = quickOfferEditCollapsableButtons[1]; + + await act(() => { + fireEvent.click(hiddenOfferQuickEditButton); + }); + + const publishEndDateInput = screen.getByLabelText("Publication End Date *"); + await act(() => { + fireEvent.focus(publishEndDateInput); + fireEvent.change(publishEndDateInput, { + target: { value: format(newPublishEndDate, "yyyyMMdd") }, + }); + fireEvent.blur(publishEndDateInput); + }); + + expect( + screen.getByDisplayValue(newPublishEndDateString.split("T")[0]), + ).not.toBeNull(); + + const submitButton = screen.getByTestId("submit-offer"); + await act(() => { + fireEvent.click(submitButton); + }); + + expect(addSnackbar).toHaveBeenCalledTimes(1); }); it("Error fetching offers", async () => { diff --git a/src/components/Company/Offers/Manage/QuickOfferEditForm.js b/src/components/Company/Offers/Manage/QuickOfferEditForm.js index a09edaac..20c958d3 100644 --- a/src/components/Company/Offers/Manage/QuickOfferEditForm.js +++ b/src/components/Company/Offers/Manage/QuickOfferEditForm.js @@ -1,4 +1,4 @@ -import React, { useCallback, useContext } from "react"; +import React, { useContext } from "react"; import PropTypes from "prop-types"; import PublicationEndDateComponent from "../../../Offers/Form/form-components/PublicationEndDateComponent"; import EditOfferSchema from "../../../Offers/Edit/EditOfferSchema"; @@ -14,12 +14,9 @@ export const QuickOfferEditForm = ({ offerId, showTitle = false }) => { const { offers, setOffers } = useContext(OfferManagementContext); const dispatch = useDispatch(); - const dispatchAddSnackbarAction = useCallback( - (notification) => { - dispatch(addSnackbar(notification)); - }, - [dispatch], - ); + const dispatchAddSnackbarAction = (notification) => { + dispatch(addSnackbar(notification)); + }; const { publishEndDate } = offers[offerId]["fields"]; @@ -27,33 +24,27 @@ export const QuickOfferEditForm = ({ offerId, showTitle = false }) => { publishEndDate: publishEndDate.value, }); - const isObjectEmpty = useCallback( - (object) => - Object.keys(object).length === 0 && - Object.getPrototypeOf(object) === Object.prototype, - [], - ); + const isObjectEmpty = + (object) => Object.keys(object).length === 0 && + Object.getPrototypeOf(object) === Object.prototype; - const displaySuccessMessage = useCallback(() => { + const displaySuccessMessage = () => { dispatchAddSnackbarAction({ message: "Successfully updated", }); - }, [dispatchAddSnackbarAction]); + }; - const displayErrorMessage = useCallback( - (err) => { - dispatchAddSnackbarAction({ - message: `${parseRequestErrors(err).generalErrors[0].message}`, - }); - }, - [dispatchAddSnackbarAction], - ); + const displayErrorMessage = (err) => { + dispatchAddSnackbarAction({ + message: `${parseRequestErrors(err).generalErrors[0].message}`, + }); + }; - const changeOfferValues = useCallback(() => { + const changeOfferValues = () => { const newDate = fields.publishEndDate?.toISOString(); publishEndDate.value = newDate.slice(0, newDate.indexOf("T")); setOffers({ ...offers }); - }, [fields.publishEndDate, offers, publishEndDate.value, setOffers]); + }; const onSubmit = (e) => { e.preventDefault();