Skip to content

Commit cc14091

Browse files
josh-choujosh-chou
authored
fix: DAH-3125 directory page phase 1.5 fix position of where button jumps to (#2638)
* fix: change where button links to, add new label behind feature flag * test: update tests and snapshots * chore: alphabet ordering
1 parent e98989f commit cc14091

File tree

5 files changed

+161
-9
lines changed

5 files changed

+161
-9
lines changed

‎app/assets/json/translations/react/en.json

+1
Original file line numberDiff line numberDiff line change
@@ -1588,6 +1588,7 @@
15881588
"saleDirectory.getHelp.visitMohcdPrograms": "Visit the MOHCD Affordable Homebuyer Programs page to learn more.",
15891589
"saleDirectory.hoaDues": "HOA Dues",
15901590
"saleDirectory.price": "Sales Price",
1591+
"saleDirectory.seeHomesForSale": "See homes for sale",
15911592
"saleDirectory.seeTheListings": "See the listings",
15921593
"saleDirectory.title": "Buy affordable housing",
15931594
"seeTheUnit.makeAnAppointment": "Make an appointment",

‎app/javascript/__tests__/modules/listings/BuyHeader.test.tsx

+30-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,36 @@
11
import React from "react"
22
import { render } from "@testing-library/react"
33
import BuyHeader from "../../../modules/listings/BuyHeader"
4+
import { useFeatureFlag } from "../../../hooks/useFeatureFlag"
5+
6+
jest.mock("../../../hooks/useFeatureFlag", () => ({
7+
useFeatureFlag: jest.fn(),
8+
}))
49

510
describe("BuyHeader", () => {
6-
it("renders BuyHeader component", () => {
11+
it("renders BuyHeader component with See the listings button", async () => {
12+
;(useFeatureFlag as jest.Mock).mockReturnValue({ flagsReady: true, unleashFlag: false })
13+
window.matchMedia = jest.fn().mockImplementation((query) => {
14+
return {
15+
matches: true,
16+
media: query,
17+
onchange: null,
18+
addListener: jest.fn(),
19+
removeListener: jest.fn(),
20+
addEventListener: jest.fn(),
21+
removeEventListener: jest.fn(),
22+
dispatchEvent: jest.fn(),
23+
}
24+
})
25+
26+
const { findByText, asFragment } = render(<BuyHeader />)
27+
28+
expect(asFragment()).toMatchSnapshot()
29+
expect(await findByText("See the listings")).toBeDefined()
30+
})
31+
32+
it("renders BuyHeader component with See homes for sale button", async () => {
33+
;(useFeatureFlag as jest.Mock).mockReturnValue({ flagsReady: true, unleashFlag: true })
734
window.matchMedia = jest.fn().mockImplementation((query) => {
835
return {
936
matches: true,
@@ -17,8 +44,9 @@ describe("BuyHeader", () => {
1744
}
1845
})
1946

20-
const { asFragment } = render(<BuyHeader />)
47+
const { findByText, asFragment } = render(<BuyHeader />)
2148

2249
expect(asFragment()).toMatchSnapshot()
50+
expect(await findByText("See homes for sale")).toBeDefined()
2351
})
2452
})

‎app/javascript/__tests__/modules/listings/__snapshots__/BuyHeader.test.tsx.snap

+120-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`BuyHeader renders BuyHeader component 1`] = `
3+
exports[`BuyHeader renders BuyHeader component with See homes for sale button 1`] = `
44
<DocumentFragment>
55
<header
66
class="page-header buy-header"
@@ -21,9 +21,9 @@ exports[`BuyHeader renders BuyHeader component 1`] = `
2121
>
2222
<a
2323
class="button is-primary is-fullwidth"
24-
href="#listing-results"
24+
href="#nav-bar-container"
2525
>
26-
See the listings
26+
See homes for sale
2727
</a>
2828
</div>
2929
<div
@@ -154,3 +154,120 @@ exports[`BuyHeader renders BuyHeader component 1`] = `
154154
</header>
155155
</DocumentFragment>
156156
`;
157+
158+
exports[`BuyHeader renders BuyHeader component with See the listings button 1`] = `
159+
<DocumentFragment>
160+
<header
161+
class="page-header buy-header"
162+
>
163+
<hgroup
164+
class="page-header__group"
165+
>
166+
<div
167+
class="buy-header_columns"
168+
>
169+
<h1
170+
class="buy-header_title buy-header_left_col"
171+
>
172+
Buy affordable housing
173+
</h1>
174+
<div
175+
class="mb-8 buy-header_right_col"
176+
>
177+
<a
178+
class="button is-primary is-fullwidth"
179+
href="#nav-bar-container"
180+
>
181+
See the listings
182+
</a>
183+
</div>
184+
<div
185+
class="buy-header_left_col"
186+
>
187+
<div
188+
class="mb-8"
189+
>
190+
<h2
191+
class="text__underline-weighted mb-5 text-gray-750"
192+
>
193+
Before applying
194+
</h2>
195+
<p
196+
class="text-gray-750"
197+
>
198+
Make sure you:
199+
</p>
200+
<ol
201+
class="numbered-list my-5"
202+
>
203+
<li
204+
class="text-gray-750 primary-lighter-markup-link"
205+
>
206+
Haven't owned residential property in the past 3 years
207+
</li>
208+
<li
209+
class="text-gray-750 primary-lighter-markup-link"
210+
>
211+
<span>
212+
Meet our
213+
<a
214+
href="https://sf.gov/determine-if-you-can-buy-affordable-housing-program"
215+
target="_blank"
216+
>
217+
income requirements
218+
</a>
219+
</span>
220+
</li>
221+
<li
222+
class="text-gray-750 primary-lighter-markup-link"
223+
>
224+
<span>
225+
Complete
226+
<a
227+
href="https://sf.gov/sign-complete-homebuyer-education"
228+
target="_blank"
229+
>
230+
homebuyer education
231+
</a>
232+
</span>
233+
</li>
234+
<li
235+
class="text-gray-750 primary-lighter-markup-link"
236+
>
237+
<span>
238+
Get pre-approved for a mortgage loan by a
239+
<a
240+
href="https://sf.gov/reports/october-2023/find-lender-below-market-rate-program"
241+
target="_blank"
242+
>
243+
lender on our list
244+
</a>
245+
</span>
246+
</li>
247+
<li
248+
class="text-gray-750 primary-lighter-markup-link"
249+
>
250+
Have enough in savings for closing costs and downpayment
251+
</li>
252+
</ol>
253+
<div
254+
class="text-gray-750 primary-lighter-markup-link-desktop"
255+
>
256+
<span>
257+
Read
258+
<a
259+
href="https://sf.gov/determine-if-you-can-buy-affordable-housing-program"
260+
target="_blank"
261+
>
262+
our full list of requirements
263+
</a>
264+
for more details.
265+
</span>
266+
</div>
267+
</div>
268+
</div>
269+
</div>
270+
</hgroup>
271+
</header>
272+
</DocumentFragment>
273+
`;

‎app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -249,9 +249,9 @@ exports[`For Sale renders ForSale component 1`] = `
249249
>
250250
<a
251251
class="button is-primary is-fullwidth"
252-
href="#listing-results"
252+
href="#nav-bar-container"
253253
>
254-
See the listings
254+
See homes for sale
255255
</a>
256256
</div>
257257
<div

‎app/javascript/modules/listings/BuyHeader.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ const DalpHeader = () => {
2727

2828
const BuyHeader = () => {
2929
const { unleashFlag: dalpDirectoryEnabled } = useFeatureFlag("temp.webapp.directory.dalp", false)
30+
const { unleashFlag: translationsReady } = useFeatureFlag(
31+
"temp.webapp.listings.sales.seeHomesForSale",
32+
false
33+
)
3034
return (
3135
<PageHeader className="buy-header">
3236
<div className="buy-header_columns">
@@ -35,8 +39,10 @@ const BuyHeader = () => {
3539
</Heading>
3640
<div className="mb-8 buy-header_right_col">
3741
{/* TODO: Switch this back to LinkButton or button once this issue is resolvedhttps://github.com/bloom-housing/bloom/issues/2324 */}
38-
<a href="#listing-results" className="button is-primary is-fullwidth">
39-
{t("saleDirectory.seeTheListings")}
42+
<a href="#nav-bar-container" className="button is-primary is-fullwidth">
43+
{translationsReady
44+
? t("saleDirectory.seeHomesForSale")
45+
: t("saleDirectory.seeTheListings")}
4046
</a>
4147
</div>
4248
<div className="buy-header_left_col">

0 commit comments

Comments
 (0)