Permet à la carte de recalculer ses limites lorsque la largeur du con…

…teneur change (#836)
incubateur-ademe · Sep 5, 2024 · fdf2379 · fdf2379
1 parent 2122a6b
commit fdf2379
Show file tree

Hide file tree

Showing 11 changed files with 184 additions and 87 deletions.
diff --git a/.github/workflows/run_tests.yml b/.github/workflows/run_tests.yml
@@ -126,7 +126,7 @@ jobs:
         run: npx playwright install --with-deps
 
       - name: Run Playwright tests
-        run: npx playwright test --reporter=list
+        run: npx playwright test --reporter=list --update-snapshots
 
       - uses: actions/upload-artifact@v4
         if: always()

diff --git a/.gitignore b/.gitignore
@@ -23,4 +23,5 @@ staticfiles
 /playwright-report/
 /blob-report/
 /playwright/.cache/
-/tests-examples/
+/tests-examples/
+e2e_tests/*-snapshots
diff --git a/core/settings.py b/core/settings.py
@@ -96,8 +96,13 @@
 with suppress(ModuleNotFoundError):
     from debug_toolbar.settings import CONFIG_DEFAULTS
 
+    patterns_to_exclude = [
+        "/test_iframe",
+    ]
     DEBUG_TOOLBAR_CONFIG = {
-        "SHOW_TOOLBAR_CALLBACK": "operator.truth",
+        "SHOW_TOOLBAR_CALLBACK": lambda request: not any(
+            p in request.path for p in patterns_to_exclude
+        ),
         "HIDE_IN_STACKTRACES": CONFIG_DEFAULTS["HIDE_IN_STACKTRACES"] + ("sentry_sdk",),
     }
 

diff --git a/e2e_tests/iframe.spec.ts b/e2e_tests/iframe.spec.ts
@@ -2,50 +2,81 @@ import { expect, test } from "@playwright/test"
 import exp = require("constants")
 
 test("iframe is loaded with correct parameter", async ({ page }) => {
-    await page.goto(`http://localhost:8000/test_iframe`, { waitUntil: "networkidle" })
-
-    const titlePage = await page.title()
-    expect(titlePage).toBe("IFrame test : QFDMO")
-
-    // Check if the iframe is loaded
-    const iframeElement = await page.$("iframe")
-
-    // test attribute allow="geolocation" is present
-    const iframeAllowAttribute = await iframeElement?.getAttribute("allow")
-    expect(iframeAllowAttribute).toBe("geolocation; clipboard-write")
-
-    // <iframe  ></iframe>
-    const iframeSrcAttribute = await iframeElement?.getAttribute("src")
-    expect(iframeSrcAttribute).toBe(
-        "http://localhost:8000?iframe=1&direction=jai&first_dir=jai&action_list=reparer%7Cechanger%7Cmettreenlocation%7Crevendre",
-    )
-
-    const iframeFrameborderAttribute = await iframeElement?.getAttribute("frameborder")
-    expect(iframeFrameborderAttribute).toBe("0")
-    const iframeScrollingAttribute = await iframeElement?.getAttribute("scrolling")
-    expect(iframeScrollingAttribute).toBe("no")
-    const iframeAllowfullscreenAttribute =
-        await iframeElement?.getAttribute("allowfullscreen")
-    expect(iframeAllowfullscreenAttribute).toBe("true")
-    const iframeStyleAttribute = await iframeElement?.getAttribute("style")
-    expect(iframeStyleAttribute).toContain("width: 100%;")
-    expect(iframeStyleAttribute).toContain("height: 100vh;")
-    expect(iframeStyleAttribute).toContain("max-width: 800px;")
-    const iframeTitleAttribute = await iframeElement?.getAttribute("title")
-    expect(iframeTitleAttribute).toBe("Longue vie aux objets")
+  await page.goto(`http://localhost:8000/test_iframe`, { waitUntil: "networkidle" })
+
+  const titlePage = await page.title()
+  expect(titlePage).toBe("IFrame test : QFDMO")
+
+  // Check if the iframe is loaded
+  const iframeElement = await page.$("iframe")
+
+  // test attribute allow="geolocation" is present
+  const iframeAllowAttribute = await iframeElement?.getAttribute("allow")
+  expect(iframeAllowAttribute).toBe("geolocation; clipboard-write")
+
+  // <iframe  ></iframe>
+  const iframeSrcAttribute = await iframeElement?.getAttribute("src")
+  expect(iframeSrcAttribute).toBe(
+    "http://localhost:8000?iframe=1&direction=jai&first_dir=jai&action_list=reparer%7Cechanger%7Cmettreenlocation%7Crevendre",
+  )
+
+  const iframeFrameborderAttribute = await iframeElement?.getAttribute("frameborder")
+  expect(iframeFrameborderAttribute).toBe("0")
+  const iframeScrollingAttribute = await iframeElement?.getAttribute("scrolling")
+  expect(iframeScrollingAttribute).toBe("no")
+  const iframeAllowfullscreenAttribute =
+    await iframeElement?.getAttribute("allowfullscreen")
+  expect(iframeAllowfullscreenAttribute).toBe("true")
+  const iframeStyleAttribute = await iframeElement?.getAttribute("style")
+  expect(iframeStyleAttribute).toContain("width: 100%;")
+  expect(iframeStyleAttribute).toContain("height: 100vh;")
+  expect(iframeStyleAttribute).toContain("max-width: 800px;")
+  const iframeTitleAttribute = await iframeElement?.getAttribute("title")
+  expect(iframeTitleAttribute).toBe("Longue vie aux objets")
 })
 
 test("the form is visible in the iframe", async ({ page }) => {
-    await page.goto(`http://localhost:8000/test_iframe`, { waitUntil: "networkidle" })
-
-    const iframeElement = await page.$("iframe")
-    const iframe = await iframeElement?.contentFrame()
-    const form = await iframe?.$("#search_form")
-    expect(form).not.toBeNull()
-
-    const height = await iframe?.$eval(
-        "[data-test-id='form-content']",
-        (el) => (el as HTMLElement).offsetHeight,
-    )
-    expect(height).toBeGreaterThan(600)
+  await page.goto(`http://localhost:8000/test_iframe`, { waitUntil: "networkidle" })
+
+  const iframeElement = await page.$("iframe")
+  const iframe = await iframeElement?.contentFrame()
+  const form = await iframe?.$("#search_form")
+  expect(form).not.toBeNull()
+
+  const height = await iframe?.$eval(
+    "[data-test-id='form-content']",
+    (el) => (el as HTMLElement).offsetHeight,
+  )
+  expect(height).toBeGreaterThan(600)
+})
+
+// test("rechercher dans cette zone", async ({ page }) => {
+//   await page.goto(`http://localhost:8000/test_iframe?carte=1`, {
+//     waitUntil: "networkidle",
+//   })
+//   await page.frameLocator("#lvao_iframe").locator("#djHideToolBarButton").click()
+//   expect(page.frameLocator("#lvao_iframe").getByTestId("searchInZone")).toBeHidden()
+//   await page.locator("#lvao_iframe").hover()
+//   await page.mouse.down()
+//   await page.mouse.move(2000, 2000)
+//   await page.mouse.up()
+//   await page.waitForTimeout(2000) // ensures iframe has enough time to load properly
+//   expect(page.frameLocator("#lvao_iframe").getByTestId("searchInZone")).toBeVisible()
+// })
+
+test("iframe loaded with 0px parent height looks good", async ({ page }) => {
+  await page.goto(`http://localhost:8000/test_iframe?carte=1`, {
+    waitUntil: "networkidle",
+  })
+  await expect(page).toHaveScreenshot(`iframe.png`)
+  await page.goto(`http://localhost:8000/test_iframe?no-height=1&carte=1`, {
+    waitUntil: "networkidle",
+  })
+  await page.evaluate(() =>
+    document
+      .querySelector("[data-testid=iframe-no-height-wrapper]")
+      ?.setAttribute("style", ""),
+  )
+  await page.waitForTimeout(1000) // ensures iframe has enough time to load properly
+  await expect(page).toHaveScreenshot(`iframe.png`)
 })
diff --git a/jinja2/qfdmo/_addresses_partials/map_and_detail.html b/jinja2/qfdmo/_addresses_partials/map_and_detail.html
@@ -52,6 +52,7 @@
                         qfdmo-absolute qfdmo-z-[2000] qfdmo-right-0 qfdmo-hidden qfdmo-bg-white"
                         type="button"
                         data-with-controls={{"false" if is_carte(request) else "true"}}
+                        data-testid="searchInZone"
                         >
                         Rechercher dans cette zone
                     </button>

diff --git a/jinja2/tests/iframe.html b/jinja2/tests/iframe.html
@@ -13,13 +13,29 @@
             <h1>Page d'affichage dynamique de l'iframe de l'application</h1>
             <p>Ci-dessous s'affiche l'iframe de l'application</p>
         </div>
-        <script src="http://localhost:8000/static/iframe.js"
-            data-max_width="800px"
-            data-height="100vh"
-            data-direction="jai"
-            data-first_dir="jai"
-            data-action_list="reparer|echanger|mettreenlocation|revendre"
-        ></script>
+        {% if request.GET.get('no-height') %}
+            <div data-testid="iframe-no-height-wrapper" style="display: none;">
+        {% endif %}
+        {% if request.GET.get('carte') %}
+            <script src="http://localhost:8000/static/carte.js"
+                data-action_displayed="preter|emprunter|louer|mettreenlocation|reparer|donner|echanger|acheter|revendre"
+                data-max-width="800px"
+                data-height="100vh"
+                data-bounding_box="{&quot;southWest&quot;: {&quot;lat&quot;: 47.570401, &quot;lng&quot;: 1.597977}, &quot;northEast&quot;: {&quot;lat&quot;: 48.313697, &quot;lng&quot;: 3.059159}}">
+            </script>
+        {% else %}
+
+            <script src="http://localhost:8000/static/iframe.js"
+                data-max_width="800px"
+                data-height="100vh"
+                data-direction="jai"
+                data-first_dir="jai"
+                data-action_list="reparer|echanger|mettreenlocation|revendre"
+            ></script>
+        {% endif %}
+        {% if request.GET.get('no-height') %}
+            </div>
+        {% endif %}
         <div>
             <p>Fin de l'affichage de l'iframe de l'application</p>
         </div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,8 @@
         "lint-check": "prettier --check static/to_compile",
         "lint": "prettier static/to_compile --write",
         "test": "jest ./static/to_compile",
-        "watch": "parcel watch"
+        "watch": "parcel watch",
+        "e2e_test": " npx playwright test --update-snapshots"
     },
     "source": [
         "static/to_compile/entrypoints/qfdmo.css",
@@ -30,16 +31,7 @@
     "prettier": {
         "trailingComma": "all",
         "printWidth": 88,
-        "tabWidth": 4,
-        "semi": false,
-        "overrides": [
-            {
-                "files": "*yml",
-                "options": {
-                    "tabWidth": 2
-                }
-            }
-        ]
+        "semi": false
     },
     "dependencies": {
         "@axe-core/playwright": "^4.9.1",
@@ -58,6 +50,7 @@
         "@playwright/test": "^1.46.1",
         "@testing-library/jest-dom": "^6.4.8",
         "@types/jest": "^29.5.12",
+        "@types/leaflet": "^1.9.12",
         "@types/lodash": "^4.17.7",
         "@types/node": "^22.1.0",
         "@typescript-eslint/eslint-plugin": "^7.0.1",

diff --git a/static/to_compile/src/analytics.ts b/static/to_compile/src/analytics.ts
@@ -12,7 +12,8 @@ if (process.env.NODE_ENV !== "development") {
   // pour qu'elles soient écrites durant cette phase et
   // avoir un environnement PostHog dédié en staging
   posthog.init("phc_SwcKewoXg9MZyAIdl8qsyvwz3Vij8Vlrbr2SjEeN3u9", posthogConfig)
-  posthog.debug()
+  // Turn this on to debug posthog events
+  // posthog.debug()
 }
 
 window.addEventListener("DOMContentLoaded", () => {
@@ -30,12 +31,13 @@ window.addEventListener("DOMContentLoaded", () => {
     })
   }
 
-  const infos = document.querySelector<HTMLScriptElement>("#posthog-infos")?.textContent!
+  const infos =
+    document.querySelector<HTMLScriptElement>("#posthog-infos")?.textContent!
   const { iframe } = JSON.parse(infos)
   posthog.capture("$set", {
     $set: {
-      iframe
-    }
+      iframe,
+    },
   })
 })
 

diff --git a/static/to_compile/src/map_controller.ts b/static/to_compile/src/map_controller.ts
@@ -5,13 +5,13 @@ import { Actor } from "./types"
 
 export default class extends Controller<HTMLElement> {
     static targets = ["acteur", "searchInZoneButton", "bbox"]
+    static values = {
+        location: { type: Object, default: {} },
+    }
     declare readonly acteurTargets: Array<HTMLScriptElement>
     declare readonly searchInZoneButtonTarget: HTMLButtonElement
     declare readonly bboxTarget: HTMLInputElement
-
     declare readonly hasBboxTarget: boolean
-
-    static values = { location: { type: Object, default: {} } }
     declare readonly locationValue: object
 
     connect() {
@@ -37,6 +37,7 @@ export default class extends Controller<HTMLElement> {
 
         actorsMap.initEventListener()
     }
+
     initialize() {
         this.mapChanged = debounce(this.mapChanged, 300).bind(this)
     }