${entry.percentage} of the central city is off-street parking
`; diff --git a/src/js/share.ts b/src/js/share.ts index 4966405..9e3973d 100644 --- a/src/js/share.ts +++ b/src/js/share.ts @@ -26,15 +26,9 @@ const switchIcons = (shareIcon: HTMLAnchorElement): void => { }; const setUpShareUrlClickListener = (cityId: CityId): void => { - // The event listener is on `map` because it is never erased, unlike the copy button - // being recreated every time the map moves. This is called "event delegation". - const map = document.querySelector("#map"); - if (!(map instanceof Element)) return; - map.addEventListener("click", async (event) => { - const clicked = event.target; - if (!(clicked instanceof Element)) return; - const iconContainer = clicked.closest(".share-icon-container"); - if (!(iconContainer instanceof HTMLAnchorElement)) return; + const iconContainer = document.querySelector(".header-share-icon-container"); + if (!(iconContainer instanceof HTMLAnchorElement)) return; + iconContainer.addEventListener("click", async () => { const shareUrl = determineShareUrl(window.location.href, cityId); await copyToClipboard(shareUrl); switchIcons(iconContainer); diff --git a/tests/app/setUpSite.test.ts b/tests/app/setUpSite.test.ts index 7ce4248..f698efe 100644 --- a/tests/app/setUpSite.test.ts +++ b/tests/app/setUpSite.test.ts @@ -52,7 +52,9 @@ test("correctly load the city score card", async ({ page }) => { await page.click('.choices__item--choice >> text="Albany, NY"'); await page.waitForFunction(() => { const titleElement = document.querySelector(".scorecard-title"); - return titleElement && titleElement.textContent === "Albany, NY"; + return ( + titleElement && titleElement.textContent === "Parking lots in Albany, NY" + ); }); await page.locator(".scorecard-accordion-toggle").click(); @@ -90,9 +92,9 @@ test.describe("the share feature", () => { await context.grantPermissions(["clipboard-read", "clipboard-write"]); const page = await context.newPage(); await page.goto("/"); - await page.waitForSelector(".share-icon-container"); + await page.waitForSelector(".header-share-icon-container"); - await page.click(".share-icon-container"); + await page.click(".header-share-icon-container"); const firstCityClipboardText = await page.evaluate(() => navigator.clipboard.readText() ); @@ -105,10 +107,13 @@ test.describe("the share feature", () => { await page.click('.choices__item--choice >> text="Anchorage, AK"'); await page.waitForFunction(() => { const titleElement = document.querySelector(".scorecard-title"); - return titleElement && titleElement.textContent === "Anchorage, AK"; + return ( + titleElement && + titleElement.textContent === "Parking lots in Anchorage, AK" + ); }); - await page.click(".share-icon-container"); + await page.click(".header-share-icon-container"); const secondCityClipboardText = await page.evaluate(() => navigator.clipboard.readText() ); @@ -134,7 +139,7 @@ test.describe("the share feature", () => { return [title, cityToggle]; }); - expect(scoreCardTitle).toEqual("Fort Worth, TX"); + expect(scoreCardTitle).toEqual("Parking lots in Fort Worth, TX"); expect(cityToggleValue).toEqual("fort-worth-tx"); }); @@ -156,7 +161,7 @@ test.describe("the share feature", () => { return [title, cityToggle]; }); - expect(scoreCardTitle).toEqual("Atlanta, GA"); + expect(scoreCardTitle).toEqual("Parking lots in Atlanta, GA"); expect(cityToggleValue).toEqual("atlanta-ga"); }); }); @@ -202,7 +207,7 @@ test.describe("auto-focus city", () => { const newScorecard = await page .locator(".scorecard-title") .evaluate((node) => node.textContent); - expect(newScorecard).toEqual("Birmingham, AL"); + expect(newScorecard).toEqual("Parking lots in Birmingham, AL"); expect(await page.isVisible("#birmingham-al")).toBe(true); }); test("clicking on city boundary wide view", async ({ page }) => { @@ -225,7 +230,7 @@ test.describe("auto-focus city", () => { const scorecard = await page .locator(".scorecard-title") .evaluate((node) => node.textContent); - expect(scorecard).toEqual("Atlanta, GA"); + expect(scorecard).toEqual("Parking lots in Atlanta, GA"); }); }); @@ -250,7 +255,7 @@ test("scorecard pulls up city closest to center", async ({ page }) => { document.querySelector("#city-dropdown"); return [title, cityChoice?.value]; }); - expect(scoreCardTitle).toEqual("Birmingham, AL"); + expect(scoreCardTitle).toEqual("Parking lots in Birmingham, AL"); expect(cityToggleValue).toEqual("birmingham-al"); });