diff --git a/sites/partners/__tests__/components/listings/PaperListingForm/sections/ListingIntro.test.tsx b/sites/partners/__tests__/components/listings/PaperListingForm/sections/ListingIntro.test.tsx new file mode 100644 index 00000000000..8c35ecd61e7 --- /dev/null +++ b/sites/partners/__tests__/components/listings/PaperListingForm/sections/ListingIntro.test.tsx @@ -0,0 +1,153 @@ +import React from "react" +import { rest } from "msw" +import { setupServer } from "msw/node" +import userEvent from "@testing-library/user-event" +import { screen } from "@testing-library/react" +import { FormProvider, useForm } from "react-hook-form" +import { + FeatureFlagEnum, + Jurisdiction, +} from "@bloom-housing/shared-helpers/src/types/backend-swagger" +import { mockNextRouter, render } from "../../../../testUtils" +import { formDefaults, FormListing } from "../../../../../src/lib/listings/formTypes" +import ListingIntro from "../../../../../src/components/listings/PaperListingForm/sections/ListingIntro" + +const FormComponent = ({ children, values }: { values?: FormListing; children }) => { + const formMethods = useForm({ + defaultValues: { ...formDefaults, ...values }, + shouldUnregister: false, + }) + return {children} +} + +const server = setupServer() + +// Enable API mocking before tests. +beforeAll(() => { + server.listen() + mockNextRouter() +}) + +// Reset any runtime request handlers we may add during the tests. +afterEach(() => server.resetHandlers()) + +// Disable API mocking after the tests are done. +afterAll(() => server.close()) + +describe("ListingIntro", () => { + const adminUserWithJurisdictions = { + jurisdictions: [ + { + id: "jurisdiction1", + name: "jurisdictionWithJurisdictionAdmin", + featureFlags: [], + }, + ], + } + + it("should render the ListingIntro section with one jurisdiction", async () => { + document.cookie = "access-token-available=True" + server.use( + rest.get("http://localhost/api/adapter/user", (_req, res, ctx) => { + return res(ctx.json(adminUserWithJurisdictions)) + }) + ) + + render( + + + + ) + + await screen.findByRole("heading", { level: 2, name: "Listing intro" }) + expect( + screen.getByText("Let's get started with some basic information about your listing.") + ).toBeInTheDocument() + expect(screen.getByRole("textbox", { name: "Listing name *" })).toBeInTheDocument() + expect(screen.queryByRole("combobox", { name: "Jurisdiction *" })).not.toBeInTheDocument() + expect(screen.getByRole("textbox", { name: "Housing developer" })).toBeInTheDocument() + }) + + it("should render the ListingIntro section with multiple jurisdictions and required developer", async () => { + document.cookie = "access-token-available=True" + server.use( + rest.get("http://localhost/api/adapter/user", (_req, res, ctx) => { + return res(ctx.json(adminUserWithJurisdictions)) + }) + ) + + render( + + + + ) + + expect(screen.getByRole("textbox", { name: "Listing name *" })).toBeInTheDocument() + expect(screen.getByRole("combobox", { name: "Jurisdiction *" })).toBeInTheDocument() + expect(screen.getByRole("textbox", { name: "Housing developer *" })).toBeInTheDocument() + + await userEvent.selectOptions( + screen.getByRole("combobox", { name: "Jurisdiction *" }), + screen.getByRole("option", { name: "JurisdictionA" }) + ) + + expect(screen.getByRole("textbox", { name: "Housing developer *" })).toBeInTheDocument() + }) + + it("should render appropriate text when housing developer owner feature flag is on", async () => { + document.cookie = "access-token-available=True" + server.use( + rest.get("http://localhost/api/adapter/user", (_req, res, ctx) => { + return res( + ctx.json({ + jurisdictions: [ + { + id: "JurisdictionA", + name: "jurisdictionWithJurisdictionAdmin", + featureFlags: [{ name: FeatureFlagEnum.enableHousingDeveloperOwner, active: true }], + }, + ], + }) + ) + }) + ) + + render( + + + + ) + await screen.findByRole("textbox", { name: "Housing developer / owner" }) + expect(screen.getByRole("textbox", { name: "Housing developer / owner" })).toBeInTheDocument() + expect(screen.queryByRole("textbox", { name: "Housing developer" })).not.toBeInTheDocument() + }) +}) diff --git a/sites/partners/src/components/listings/PaperListingForm/sections/ListingIntro.tsx b/sites/partners/src/components/listings/PaperListingForm/sections/ListingIntro.tsx index 53fdc2f0b36..392069b73c5 100644 --- a/sites/partners/src/components/listings/PaperListingForm/sections/ListingIntro.tsx +++ b/sites/partners/src/components/listings/PaperListingForm/sections/ListingIntro.tsx @@ -1,11 +1,12 @@ import React, { useContext } from "react" import { useFormContext } from "react-hook-form" +import { t, Field, SelectOption, Select } from "@bloom-housing/ui-components" +import { Grid } from "@bloom-housing/ui-seeds" import { FeatureFlagEnum, Jurisdiction, } from "@bloom-housing/shared-helpers/src/types/backend-swagger" -import { t, Field, SelectOption, Select } from "@bloom-housing/ui-components" -import { Grid } from "@bloom-housing/ui-seeds" +import { AuthContext } from "@bloom-housing/shared-helpers" import { fieldMessage, fieldHasError, @@ -14,13 +15,17 @@ import { } from "../../../../lib/helpers" import SectionWithGrid from "../../../shared/SectionWithGrid" import styles from "../ListingForm.module.scss" -import { AuthContext } from "@bloom-housing/shared-helpers" interface ListingIntroProps { jurisdictions: Jurisdiction[] requiredFields: string[] } +const getDeveloperLabel = (jurisdiction: string, enableHousingDeveloperOwner: boolean) => { + if (!jurisdiction) return t("listings.developer") + return enableHousingDeveloperOwner ? t("listings.housingDeveloperOwner") : t("listings.developer") +} + const ListingIntro = (props: ListingIntroProps) => { const formMethods = useFormContext() const { doJurisdictionsHaveFeatureFlagOn } = useContext(AuthContext) @@ -103,6 +108,7 @@ const ListingIntro = (props: ListingIntroProps) => { } }, "aria-required": fieldIsRequired("jurisdictions", props.requiredFields), + "aria-hidden": !!defaultJurisdiction, }} /> @@ -112,9 +118,7 @@ const ListingIntro = (props: ListingIntroProps) => { register={register} {...defaultFieldProps( "developer", - enableHousingDeveloperOwner - ? t("listings.housingDeveloperOwner") - : t("listings.developer"), + getDeveloperLabel(jurisdiction, enableHousingDeveloperOwner), props.requiredFields, errors, clearErrors