test: move application page cypress tests to unit tests (#4138)

shared-helpers/jest.config.js

@@ -20,6 +20,7 @@ module.exports = {
   globals: {
     "ts-jest": {
       tsconfig: "tsconfig.json",
+      isolatedModules: true,
     },
   },
   moduleNameMapper: {

sites/partners/__tests__/testUtils.tsx

@@ -1,7 +1,7 @@
-import { AuthProvider, ConfigProvider } from "@bloom-housing/shared-helpers"
-import { render, RenderOptions } from "@testing-library/react"
 import React, { FC, ReactElement } from "react"
+import { render, RenderOptions } from "@testing-library/react"
 import { SWRConfig } from "swr"
+import { AuthProvider, ConfigProvider } from "@bloom-housing/shared-helpers"
 
 const AllTheProviders: FC<{ children: React.ReactNode }> = ({ children }) => {
   return (

sites/partners/jest.config.js

@@ -20,6 +20,7 @@ module.exports = {
   globals: {
     "ts-jest": {
       tsconfig: "tsconfig.test.json",
+      isolatedModules: true,
     },
   },
   rootDir: "../..",

sites/public/__tests__/pages/applications/contact/address.test.tsx

@@ -0,0 +1,72 @@
+import React from "react"
+import { setupServer } from "msw/lib/node"
+import { fireEvent } from "@testing-library/react"
+import { mockNextRouter, render } from "../../../testUtils"
+import ApplicationAddress from "../../../../src/pages/applications/contact/address"
+
+window.scrollTo = jest.fn()
+
+const server = setupServer()
+
+beforeAll(() => {
+  server.listen()
+  mockNextRouter()
+})
+
+afterEach(() => server.resetHandlers())
+
+afterAll(() => server.close())
+
+describe("applications pages", () => {
+  afterAll(() => {
+    jest.clearAllMocks()
+  })
+
+  describe("address step", () => {
+    it("should render form fields", () => {
+      const { getByText, getByTestId, getAllByTestId } = render(<ApplicationAddress />)
+
+      expect(
+        getByText("Now we need to know how to contact you about your application.", {
+          exact: false,
+        })
+      ).toBeInTheDocument()
+      expect(getByTestId("app-primary-phone-number")).toBeInTheDocument()
+      expect(getByTestId("app-primary-phone-number-type")).toBeInTheDocument()
+      expect(getByTestId("app-primary-no-phone")).toBeInTheDocument()
+      expect(getByTestId("app-primary-additional-phone")).toBeInTheDocument()
+      expect(getByTestId("app-primary-address-street")).toBeInTheDocument()
+      expect(getByTestId("app-primary-address-street2")).toBeInTheDocument()
+      expect(getByTestId("app-primary-address-city")).toBeInTheDocument()
+      expect(getByTestId("app-primary-address-state")).toBeInTheDocument()
+      expect(getByTestId("app-primary-address-zip")).toBeInTheDocument()
+      expect(getByTestId("app-primary-send-to-mailing")).toBeInTheDocument()
+      expect(getAllByTestId("app-primary-contact-preference")).toHaveLength(4)
+      expect(getByTestId("app-primary-work-in-region-yes")).toBeInTheDocument()
+      expect(getByTestId("app-primary-work-in-region-no")).toBeInTheDocument()
+    })
+
+    it("should require form input", async () => {
+      const { getByText, findByText } = render(<ApplicationAddress />)
+
+      fireEvent.click(getByText("Next"))
+      expect(
+        await findByText("There are errors you'll need to resolve before moving on.")
+      ).toBeInTheDocument()
+      expect(getByText("Please enter a phone number")).toBeInTheDocument()
+      expect(getByText("Please enter a phone number type")).toBeInTheDocument()
+      expect(getByText("Please enter an address")).toBeInTheDocument()
+      expect(getByText("Please select at least one option.")).toBeInTheDocument()
+      expect(getByText("Please select one of the options above.")).toBeInTheDocument()
+    })
+
+    it("should disable phone fields if user indicates they don't have a phone", async () => {
+      const { getByText, findByTestId, getByTestId } = render(<ApplicationAddress />)
+
+      expect(getByTestId("app-primary-phone-number").firstChild).toBeEnabled()
+      fireEvent.click(getByText("I don't have a telephone number"))
+      expect((await findByTestId("app-primary-phone-number")).firstChild).toBeDisabled()
+      expect(await findByTestId("app-primary-phone-number-type")).toBeDisabled()
+    })
+  })
+})

sites/public/__tests__/pages/applications/contact/alternate-contact-contact.test.tsx

@@ -0,0 +1,49 @@
+import React from "react"
+import { setupServer } from "msw/lib/node"
+import { fireEvent } from "@testing-library/react"
+import { mockNextRouter, render } from "../../../testUtils"
+import ApplicationAlternateContactContact from "../../../../src/pages/applications/contact/alternate-contact-contact"
+
+window.scrollTo = jest.fn()
+
+const server = setupServer()
+
+beforeAll(() => {
+  server.listen()
+  mockNextRouter()
+})
+
+afterEach(() => server.resetHandlers())
+
+afterAll(() => server.close())
+
+describe("applications pages", () => {
+  afterAll(() => {
+    jest.clearAllMocks()
+  })
+
+  describe("alternate contact contact step", () => {
+    it("should render form fields", () => {
+      const { getByText, getByTestId } = render(<ApplicationAlternateContactContact />)
+
+      expect(getByText("Let us know how to reach your alternate contact.")).toBeInTheDocument()
+      expect(getByTestId("app-alternate-phone-number")).toBeInTheDocument()
+      expect(getByTestId("app-alternate-email")).toBeInTheDocument()
+      expect(getByTestId("app-alternate-mailing-address-street")).toBeInTheDocument()
+      expect(getByTestId("app-alternate-mailing-address-street2")).toBeInTheDocument()
+      expect(getByTestId("app-alternate-mailing-address-city")).toBeInTheDocument()
+      expect(getByTestId("app-alternate-mailing-address-state")).toBeInTheDocument()
+      expect(getByTestId("app-alternate-mailing-address-zip")).toBeInTheDocument()
+    })
+
+    it("should require form input", async () => {
+      const { getByText, findByText } = render(<ApplicationAlternateContactContact />)
+
+      fireEvent.click(getByText("Next"))
+      expect(
+        await findByText("There are errors you'll need to resolve before moving on.")
+      ).toBeInTheDocument()
+      expect(getByText("Please enter a phone number")).toBeInTheDocument()
+    })
+  })
+})

sites/public/__tests__/pages/applications/contact/alternate-contact-name.test.tsx

@@ -0,0 +1,45 @@
+import React from "react"
+import { setupServer } from "msw/lib/node"
+import { fireEvent } from "@testing-library/react"
+import { mockNextRouter, render } from "../../../testUtils"
+import ApplicationAlternateContactName from "../../../../src/pages/applications/contact/alternate-contact-name"
+
+window.scrollTo = jest.fn()
+
+const server = setupServer()
+
+beforeAll(() => {
+  server.listen()
+  mockNextRouter()
+})
+
+afterEach(() => server.resetHandlers())
+
+afterAll(() => server.close())
+
+describe("applications pages", () => {
+  afterAll(() => {
+    jest.clearAllMocks()
+  })
+
+  describe("alternate contact name step", () => {
+    it("should render form fields", () => {
+      const { getByText, getByTestId } = render(<ApplicationAlternateContactName />)
+
+      expect(getByText("Who is your alternate contact?")).toBeInTheDocument()
+      expect(getByTestId("app-alternate-first-name")).toBeInTheDocument()
+      expect(getByTestId("app-alternate-last-name")).toBeInTheDocument()
+    })
+
+    it("should require form input", async () => {
+      const { getByText, findByText } = render(<ApplicationAlternateContactName />)
+
+      fireEvent.click(getByText("Next"))
+      expect(
+        await findByText("There are errors you'll need to resolve before moving on.")
+      ).toBeInTheDocument()
+      expect(getByText("Please enter a Given Name")).toBeInTheDocument()
+      expect(getByText("Please enter a Family Name")).toBeInTheDocument()
+    })
+  })
+})

sites/public/__tests__/pages/applications/contact/alternate-contact-type.test.tsx

@@ -0,0 +1,55 @@
+import React from "react"
+import { setupServer } from "msw/lib/node"
+import { fireEvent } from "@testing-library/react"
+import { mockNextRouter, render } from "../../../testUtils"
+import ApplicationAlternateContactType from "../../../../src/pages/applications/contact/alternate-contact-type"
+
+window.scrollTo = jest.fn()
+
+const server = setupServer()
+
+beforeAll(() => {
+  server.listen()
+  mockNextRouter()
+})
+
+afterEach(() => server.resetHandlers())
+
+afterAll(() => server.close())
+
+describe("applications pages", () => {
+  afterAll(() => {
+    jest.clearAllMocks()
+  })
+
+  describe("alternate contact type step", () => {
+    it("should render form fields", () => {
+      const { getByText, getAllByTestId } = render(<ApplicationAlternateContactType />)
+
+      expect(
+        getByText(
+          "Is there someone else you'd like to authorize us to contact if we can't reach you?"
+        )
+      ).toBeInTheDocument()
+      expect(getAllByTestId("app-alternate-type")).toHaveLength(5)
+    })
+
+    it("should require form input", async () => {
+      const { getByText, findByText } = render(<ApplicationAlternateContactType />)
+
+      fireEvent.click(getByText("Next"))
+      expect(
+        await findByText("There are errors you'll need to resolve before moving on.")
+      ).toBeInTheDocument()
+      expect(getByText("Please select an alternate contact")).toBeInTheDocument()
+    })
+
+    it("should enable additional text field if user selects other type", () => {
+      const { getByText, getByTestId, queryByText } = render(<ApplicationAlternateContactType />)
+
+      expect(queryByText("app-alternate-other-type")).not.toBeInTheDocument()
+      fireEvent.click(getByText("Other"))
+      expect(getByTestId("app-alternate-other-type")).toBeInTheDocument()
+    })
+  })
+})

sites/public/__tests__/pages/applications/contact/name.test.tsx

@@ -0,0 +1,62 @@
+import React from "react"
+import { setupServer } from "msw/lib/node"
+import { fireEvent } from "@testing-library/react"
+import { mockNextRouter, render } from "../../../testUtils"
+import ApplicationName from "../../../../src/pages/applications/contact/name"
+
+window.scrollTo = jest.fn()
+
+const server = setupServer()
+
+beforeAll(() => {
+  server.listen()
+  mockNextRouter()
+})
+
+afterEach(() => server.resetHandlers())
+
+afterAll(() => server.close())
+
+describe("applications pages", () => {
+  afterAll(() => {
+    jest.clearAllMocks()
+  })
+
+  describe("name step", () => {
+    it("should render form fields", () => {
+      const { getByText, getByTestId } = render(<ApplicationName />)
+
+      expect(getByText("What's your name?")).toBeInTheDocument()
+      expect(getByTestId("app-primary-first-name")).toBeInTheDocument()
+      expect(getByTestId("app-primary-middle-name")).toBeInTheDocument()
+      expect(getByTestId("app-primary-last-name")).toBeInTheDocument()
+      expect(getByTestId("dob-field-month")).toBeInTheDocument()
+      expect(getByTestId("dob-field-day")).toBeInTheDocument()
+      expect(getByTestId("dob-field-year")).toBeInTheDocument()
+      expect(getByTestId("app-primary-email")).toBeInTheDocument()
+    })
+
+    it("should require form input", async () => {
+      const { getByText, findByText } = render(<ApplicationName />)
+
+      fireEvent.click(getByText("Next"))
+      expect(
+        await findByText("There are errors you'll need to resolve before moving on.")
+      ).toBeInTheDocument()
+      expect(getByText("Please enter a Given Name")).toBeInTheDocument()
+      expect(getByText("Please enter a Family Name")).toBeInTheDocument()
+      expect(
+        getByText("Please enter a valid Date of Birth, must be 18 or older")
+      ).toBeInTheDocument()
+      expect(getByText("Please enter an email address")).toBeInTheDocument()
+    })
+
+    it("should disable email field if user indicates they don't have an email", async () => {
+      const { getByText, findByTestId, getByTestId } = render(<ApplicationName />)
+
+      expect(getByTestId("app-primary-email")).toBeEnabled()
+      fireEvent.click(getByText("I don't have an email address"))
+      expect(await findByTestId("app-primary-email")).toBeDisabled()
+    })
+  })
+})

sites/public/__tests__/pages/applications/financial/income.test.tsx

@@ -0,0 +1,45 @@
+import React from "react"
+import { setupServer } from "msw/lib/node"
+import { fireEvent } from "@testing-library/react"
+import { mockNextRouter, render } from "../../../testUtils"
+import ApplicationIncome from "../../../../src/pages/applications/financial/income"
+
+window.scrollTo = jest.fn()
+
+const server = setupServer()
+
+beforeAll(() => {
+  server.listen()
+  mockNextRouter()
+})
+
+afterEach(() => server.resetHandlers())
+
+afterAll(() => server.close())
+
+describe("applications pages", () => {
+  afterAll(() => {
+    jest.clearAllMocks()
+  })
+
+  describe("income step", () => {
+    it("should render form fields", () => {
+      const { getByText, getByTestId, getAllByTestId } = render(<ApplicationIncome />)
+
+      expect(getByText("Let's move to income.")).toBeInTheDocument()
+      expect(getByTestId("app-income")).toBeInTheDocument()
+      expect(getAllByTestId("app-income-period")).toHaveLength(2)
+    })
+
+    it("should require form input", async () => {
+      const { getByText, findByText } = render(<ApplicationIncome />)
+
+      fireEvent.click(getByText("Next"))
+      expect(
+        await findByText("There are errors you'll need to resolve before moving on.")
+      ).toBeInTheDocument()
+      expect(getByText("Please enter a valid number greater than 0.")).toBeInTheDocument()
+      expect(getByText("Please select one of the options above.")).toBeInTheDocument()
+    })
+  })
+})