feat: DAH-2661 update how observer works

SFDigitalServices · Dec 17, 2024 · 03f2586 · 03f2586
1 parent b5a5d95
commit 03f2586
Show file tree

Hide file tree

Showing 10 changed files with 226 additions and 27 deletions.
diff --git a/app/javascript/__tests__/layouts/__snapshots__/HeaderSidebarLayout.test.tsx.snap b/app/javascript/__tests__/layouts/__snapshots__/HeaderSidebarLayout.test.tsx.snap
@@ -215,7 +215,6 @@ exports[`<HeaderSidebarLayout /> Contact Bar renders Contact Information 1`] = `
         </nav>
       </header>
       <main
-        class="md:overflow-x-hidden"
         data-testid="main-content-test-id"
         id="main-content"
       >

diff --git a/app/javascript/__tests__/pages/account/__snapshots__/account-settings.test.tsx.snap b/app/javascript/__tests__/pages/account/__snapshots__/account-settings.test.tsx.snap
@@ -224,7 +224,6 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
             </nav>
           </header>
           <main
-            class="md:overflow-x-hidden"
             data-testid="main-content-test-id"
             id="main-content"
           >
@@ -1090,7 +1089,6 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 1`] =
           </nav>
         </header>
         <main
-          class="md:overflow-x-hidden"
           data-testid="main-content-test-id"
           id="main-content"
         >
@@ -1989,7 +1987,6 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
             </nav>
           </header>
           <main
-            class="md:overflow-x-hidden"
             data-testid="main-content-test-id"
             id="main-content"
           >
@@ -2831,7 +2828,6 @@ exports[`<AccountSettingsPage /> when the user is signed in resize events 2`] =
           </nav>
         </header>
         <main
-          class="md:overflow-x-hidden"
           data-testid="main-content-test-id"
           id="main-content"
         >

diff --git a/app/javascript/__tests__/pages/how-to-apply/__snapshots__/how-to-apply.test.tsx.snap b/app/javascript/__tests__/pages/how-to-apply/__snapshots__/how-to-apply.test.tsx.snap
@@ -221,7 +221,6 @@ exports[`<HowToApply /> renders HowToApply component 1`] = `
         </nav>
       </header>
       <main
-        class="md:overflow-x-hidden"
         data-testid="main-content-test-id"
         id="main-content"
       >

diff --git a/...avascript/__tests__/pages/listingInterest/__snapshots__/ListingInterestPage.test.tsx.snap b/...avascript/__tests__/pages/listingInterest/__snapshots__/ListingInterestPage.test.tsx.snap
@@ -221,7 +221,6 @@ exports[`Listing Interest Page renders listing interest page with error response
         </nav>
       </header>
       <main
-        class="md:overflow-x-hidden"
         data-testid="main-content-test-id"
         id="main-content"
       >
@@ -601,7 +600,6 @@ exports[`Listing Interest Page renders listing interest page with expired respon
         </nav>
       </header>
       <main
-        class="md:overflow-x-hidden"
         data-testid="main-content-test-id"
         id="main-content"
       >
@@ -1051,7 +1049,6 @@ exports[`Listing Interest Page renders listing interest page with no response 1`
         </nav>
       </header>
       <main
-        class="md:overflow-x-hidden"
         data-testid="main-content-test-id"
         id="main-content"
       >
@@ -1463,7 +1460,6 @@ exports[`Listing Interest Page renders listing interest page with yes response 1
         </nav>
       </header>
       <main
-        class="md:overflow-x-hidden"
         data-testid="main-content-test-id"
         id="main-content"
       >

diff --git a/app/javascript/__tests__/pages/listings/ForRent.test.tsx b/app/javascript/__tests__/pages/listings/ForRent.test.tsx
@@ -22,6 +22,11 @@ jest.mock("../../../hooks/useFeatureFlag", () => ({
 describe("For Rent", () => {
   beforeEach(() => {
     ;(useFeatureFlag as jest.Mock).mockReturnValue({ flagsReady: true })
+    const mockIntersectionObserver = jest.fn()
+    mockIntersectionObserver.mockReturnValue({
+      observe: () => null,
+    })
+    window.IntersectionObserver = mockIntersectionObserver
   })
   afterEach(() => {
     cleanup()

diff --git a/app/javascript/__tests__/pages/listings/ForSale.test.tsx b/app/javascript/__tests__/pages/listings/ForSale.test.tsx
@@ -23,6 +23,11 @@ jest.mock("../../../hooks/useFeatureFlag", () => ({
 describe("For Sale", () => {
   beforeEach(() => {
     ;(useFeatureFlag as jest.Mock).mockReturnValue({ flagsReady: true })
+    const mockIntersectionObserver = jest.fn()
+    mockIntersectionObserver.mockReturnValue({
+      observe: () => null,
+    })
+    window.IntersectionObserver = mockIntersectionObserver
   })
 
   afterEach(() => {

diff --git a/app/javascript/__tests__/pages/listings/__snapshots__/ForRent.test.tsx.snap b/app/javascript/__tests__/pages/listings/__snapshots__/ForRent.test.tsx.snap
@@ -221,7 +221,6 @@ exports[`For Rent renders ForRent component 1`] = `
         </nav>
       </header>
       <main
-        class="md:overflow-x-hidden"
         data-testid="main-content-test-id"
         id="main-content"
       >
@@ -263,9 +262,94 @@ exports[`For Rent renders ForRent component 1`] = `
               </a>
             </hgroup>
           </header>
+          <div
+            class="directory-page-navigation-bar"
+          >
+            <button
+              class="seeds-button"
+              data-size="md"
+              data-variant="primary"
+              type="button"
+            >
+              <span
+                class="ui-icon ui-medium"
+              >
+                <svg
+                  fill="currentColor"
+                  viewBox="0 0 51 45"
+                >
+                  <path
+                    d="M49.7173 21.1504C50.2904 21.6532 50.3425 22.4593 49.7608 23.1094C49.3353 23.6815 48.4496 23.7335 47.8766 23.1528L44.6292 20.2923V37.4466C44.6292 41.278 41.5207 44.3812 37.6829 44.3812H12.6762C8.84011 44.3812 5.72991 41.278 5.72991 37.4466V20.2923L2.48165 23.1528C1.90597 23.7335 1.02805 23.6815 0.520446 23.1094C0.0127579 22.4593 0.0676337 21.6532 0.642961 21.1504L24.2592 0.346902C24.7888 -0.115634 25.5703 -0.115634 26.0999 0.346902L49.7173 21.1504ZM12.6762 41.6074H18.2332V27.7383C18.2332 26.204 19.4749 24.9644 21.0118 24.9644H29.3473C30.8842 24.9644 32.1258 26.204 32.1258 27.7383V41.6074H37.6829C39.9838 41.6074 41.8507 39.7437 41.8507 37.4466V17.9172L25.1795 3.23671L8.50843 17.9172V37.4466C8.50843 39.7437 10.3752 41.6074 12.6762 41.6074ZM21.0118 41.6074H29.3473V27.7383H21.0118V41.6074Z"
+                  />
+                </svg>
+              </span>
+              Enter a lottery (0)
+              <span
+                aria-live="assertive"
+                class="seeds-screen-reader-only"
+              />
+            </button>
+            <button
+              class="seeds-button"
+              data-size="md"
+              data-variant="primary"
+              type="button"
+            >
+              <span
+                class="ui-icon ui-medium"
+              >
+                <svg
+                  fill="currentColor"
+                  viewBox="0 0 32 32"
+                >
+                  <path
+                    d="M23.258 15.994h-7.251v-11.266c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v11.931c0 0.368 0.299 0.667 0.667 0.667h7.917c0.368 0 0.667-0.299 0.667-0.667s-0.298-0.667-0.667-0.667z"
+                  />
+                  <path
+                    d="M16 0.333c-8.64 0-15.669 7.029-15.669 15.669s7.029 15.669 15.669 15.669c8.64 0 15.669-7.027 15.669-15.667s-7.029-15.67-15.669-15.67zM16 30.338c-7.906 0-14.336-6.43-14.336-14.334s6.43-14.338 14.336-14.338 14.336 6.43 14.336 14.336c0 7.904-6.43 14.336-14.336 14.336z"
+                  />
+                </svg>
+              </span>
+              Upcoming lotteries (0)
+              <span
+                aria-live="assertive"
+                class="seeds-screen-reader-only"
+              />
+            </button>
+            <button
+              class="seeds-button"
+              data-size="md"
+              data-variant="primary"
+              type="button"
+            >
+              <span
+                class="ui-icon ui-medium"
+              >
+                <svg
+                  fill="currentColor"
+                  viewBox="0 0 32 32"
+                >
+                  <path
+                    d="M23.258 15.994h-7.251v-11.266c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v11.931c0 0.368 0.299 0.667 0.667 0.667h7.917c0.368 0 0.667-0.299 0.667-0.667s-0.298-0.667-0.667-0.667z"
+                  />
+                  <path
+                    d="M16 0.333c-8.64 0-15.669 7.029-15.669 15.669s7.029 15.669 15.669 15.669c8.64 0 15.669-7.027 15.669-15.667s-7.029-15.67-15.669-15.67zM16 30.338c-7.906 0-14.336-6.43-14.336-14.334s6.43-14.338 14.336-14.338 14.336 6.43 14.336 14.336c0 7.904-6.43 14.336-14.336 14.336z"
+                  />
+                </svg>
+              </span>
+              Lottery results (0)
+              <span
+                aria-live="assertive"
+                class="seeds-screen-reader-only"
+              />
+            </button>
+          </div>
           <div
             id="listing-results"
           >
+            <div
+              id="enter-a-lottery"
+            />
             <div
               class="bg-primary-darker"
             >
@@ -302,6 +386,12 @@ exports[`For Rent renders ForRent component 1`] = `
                 </div>
               </div>
             </div>
+            <div
+              id="upcoming-lotteries"
+            />
+            <div
+              id="lottery-results"
+            />
           </div>
           <div
             class="action-block mt-4 primary-lighter action-block__block"

diff --git a/app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap b/app/javascript/__tests__/pages/listings/__snapshots__/ForSale.test.tsx.snap
@@ -221,7 +221,6 @@ exports[`For Sale renders ForSale component 1`] = `
         </nav>
       </header>
       <main
-        class="md:overflow-x-hidden"
         data-testid="main-content-test-id"
         id="main-content"
       >
@@ -338,9 +337,121 @@ exports[`For Sale renders ForSale component 1`] = `
               </div>
             </hgroup>
           </header>
+          <div
+            class="directory-page-navigation-bar"
+          >
+            <button
+              class="seeds-button"
+              data-size="md"
+              data-variant="primary"
+              type="button"
+            >
+              <span
+                class="ui-icon ui-medium"
+              >
+                <svg
+                  fill="currentColor"
+                  viewBox="0 0 51 45"
+                >
+                  <path
+                    d="M49.7173 21.1504C50.2904 21.6532 50.3425 22.4593 49.7608 23.1094C49.3353 23.6815 48.4496 23.7335 47.8766 23.1528L44.6292 20.2923V37.4466C44.6292 41.278 41.5207 44.3812 37.6829 44.3812H12.6762C8.84011 44.3812 5.72991 41.278 5.72991 37.4466V20.2923L2.48165 23.1528C1.90597 23.7335 1.02805 23.6815 0.520446 23.1094C0.0127579 22.4593 0.0676337 21.6532 0.642961 21.1504L24.2592 0.346902C24.7888 -0.115634 25.5703 -0.115634 26.0999 0.346902L49.7173 21.1504ZM12.6762 41.6074H18.2332V27.7383C18.2332 26.204 19.4749 24.9644 21.0118 24.9644H29.3473C30.8842 24.9644 32.1258 26.204 32.1258 27.7383V41.6074H37.6829C39.9838 41.6074 41.8507 39.7437 41.8507 37.4466V17.9172L25.1795 3.23671L8.50843 17.9172V37.4466C8.50843 39.7437 10.3752 41.6074 12.6762 41.6074ZM21.0118 41.6074H29.3473V27.7383H21.0118V41.6074Z"
+                  />
+                </svg>
+              </span>
+              Enter a lottery (0)
+              <span
+                aria-live="assertive"
+                class="seeds-screen-reader-only"
+              />
+            </button>
+            <button
+              class="seeds-button"
+              data-size="md"
+              data-variant="primary"
+              type="button"
+            >
+              <span
+                class="ui-icon ui-medium"
+              >
+                <svg
+                  fill="currentColor"
+                  viewBox="0 0 51 45"
+                >
+                  <path
+                    d="M49.7173 21.1504C50.2904 21.6532 50.3425 22.4593 49.7608 23.1094C49.3353 23.6815 48.4496 23.7335 47.8766 23.1528L44.6292 20.2923V37.4466C44.6292 41.278 41.5207 44.3812 37.6829 44.3812H12.6762C8.84011 44.3812 5.72991 41.278 5.72991 37.4466V20.2923L2.48165 23.1528C1.90597 23.7335 1.02805 23.6815 0.520446 23.1094C0.0127579 22.4593 0.0676337 21.6532 0.642961 21.1504L24.2592 0.346902C24.7888 -0.115634 25.5703 -0.115634 26.0999 0.346902L49.7173 21.1504ZM12.6762 41.6074H18.2332V27.7383C18.2332 26.204 19.4749 24.9644 21.0118 24.9644H29.3473C30.8842 24.9644 32.1258 26.204 32.1258 27.7383V41.6074H37.6829C39.9838 41.6074 41.8507 39.7437 41.8507 37.4466V17.9172L25.1795 3.23671L8.50843 17.9172V37.4466C8.50843 39.7437 10.3752 41.6074 12.6762 41.6074ZM21.0118 41.6074H29.3473V27.7383H21.0118V41.6074Z"
+                  />
+                </svg>
+              </span>
+              Buy now (0)
+              <span
+                aria-live="assertive"
+                class="seeds-screen-reader-only"
+              />
+            </button>
+            <button
+              class="seeds-button"
+              data-size="md"
+              data-variant="primary"
+              type="button"
+            >
+              <span
+                class="ui-icon ui-medium"
+              >
+                <svg
+                  fill="currentColor"
+                  viewBox="0 0 32 32"
+                >
+                  <path
+                    d="M23.258 15.994h-7.251v-11.266c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v11.931c0 0.368 0.299 0.667 0.667 0.667h7.917c0.368 0 0.667-0.299 0.667-0.667s-0.298-0.667-0.667-0.667z"
+                  />
+                  <path
+                    d="M16 0.333c-8.64 0-15.669 7.029-15.669 15.669s7.029 15.669 15.669 15.669c8.64 0 15.669-7.027 15.669-15.667s-7.029-15.67-15.669-15.67zM16 30.338c-7.906 0-14.336-6.43-14.336-14.334s6.43-14.338 14.336-14.338 14.336 6.43 14.336 14.336c0 7.904-6.43 14.336-14.336 14.336z"
+                  />
+                </svg>
+              </span>
+              Upcoming lotteries (0)
+              <span
+                aria-live="assertive"
+                class="seeds-screen-reader-only"
+              />
+            </button>
+            <button
+              class="seeds-button"
+              data-size="md"
+              data-variant="primary"
+              type="button"
+            >
+              <span
+                class="ui-icon ui-medium"
+              >
+                <svg
+                  fill="currentColor"
+                  viewBox="0 0 32 32"
+                >
+                  <path
+                    d="M23.258 15.994h-7.251v-11.266c0-0.368-0.299-0.667-0.667-0.667s-0.667 0.299-0.667 0.667v11.931c0 0.368 0.299 0.667 0.667 0.667h7.917c0.368 0 0.667-0.299 0.667-0.667s-0.298-0.667-0.667-0.667z"
+                  />
+                  <path
+                    d="M16 0.333c-8.64 0-15.669 7.029-15.669 15.669s7.029 15.669 15.669 15.669c8.64 0 15.669-7.027 15.669-15.667s-7.029-15.67-15.669-15.67zM16 30.338c-7.906 0-14.336-6.43-14.336-14.334s6.43-14.338 14.336-14.338 14.336 6.43 14.336 14.336c0 7.904-6.43 14.336-14.336 14.336z"
+                  />
+                </svg>
+              </span>
+              Lottery results (0)
+              <span
+                aria-live="assertive"
+                class="seeds-screen-reader-only"
+              />
+            </button>
+          </div>
           <div
             id="listing-results"
           >
+            <div
+              id="enter-a-lottery"
+            />
+            <div
+              id="buy-now"
+            />
             <div
               class="bg-primary-darker sale-directory"
             >
@@ -377,6 +488,12 @@ exports[`For Sale renders ForSale component 1`] = `
                 </div>
               </div>
             </div>
+            <div
+              id="upcoming-lotteries"
+            />
+            <div
+              id="lottery-results"
+            />
           </div>
           <div
             class="action-block mt-4 primary-lighter action-block__block"

diff --git a/app/javascript/__tests__/pages/listings/__snapshots__/ListingDetail.test.tsx.snap b/app/javascript/__tests__/pages/listings/__snapshots__/ListingDetail.test.tsx.snap
@@ -222,7 +222,6 @@ exports[`Listing Detail initializes Google Tag Manager for a sales listing 1`] =
         </nav>
       </header>
       <main
-        class="md:overflow-x-hidden"
         data-testid="main-content-test-id"
         id="main-content"
       >
@@ -5054,7 +5053,6 @@ exports[`Listing Detail renders a habitat listing 1`] = `
         </nav>
       </header>
       <main
-        class="md:overflow-x-hidden"
         data-testid="main-content-test-id"
         id="main-content"
       >
@@ -9886,7 +9884,6 @@ exports[`Listing Detail renders a listing with sro units 1`] = `
         </nav>
       </header>
       <main
-        class="md:overflow-x-hidden"
         data-testid="main-content-test-id"
         id="main-content"
       >
@@ -14820,7 +14817,6 @@ exports[`Listing Detail renders an open rental listing 1`] = `
         </nav>
       </header>
       <main
-        class="md:overflow-x-hidden"
         data-testid="main-content-test-id"
         id="main-content"
       >