From 89854b606d301f3f5a91a45cfe08201eddbf77ca Mon Sep 17 00:00:00 2001 From: Matthew Phillips Date: Wed, 1 Nov 2023 13:11:45 -0400 Subject: [PATCH] Prevent the route announcer from being visible (#8977) * Prevent the route announcer from being visible * Update the number of expected styles in the tests --- .changeset/five-ads-look.md | 5 +++++ .../astro/components/ViewTransitions.astro | 17 ++++++++++++++-- packages/astro/components/viewtransitions.css | 13 ------------ .../src/pages/no-directive-one.astro | 14 +++++++++++++ .../src/pages/no-directive-two.astro | 13 ++++++++++++ packages/astro/e2e/view-transitions.test.js | 20 ++++++++++++++++--- 6 files changed, 64 insertions(+), 18 deletions(-) create mode 100644 .changeset/five-ads-look.md create mode 100644 packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-one.astro create mode 100644 packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-two.astro diff --git a/.changeset/five-ads-look.md b/.changeset/five-ads-look.md new file mode 100644 index 0000000000000..9c198a50cb49d --- /dev/null +++ b/.changeset/five-ads-look.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Prevent route announcer from being visible diff --git a/packages/astro/components/ViewTransitions.astro b/packages/astro/components/ViewTransitions.astro index e1df9efa7752b..b8ac44100b2d7 100644 --- a/packages/astro/components/ViewTransitions.astro +++ b/packages/astro/components/ViewTransitions.astro @@ -5,9 +5,22 @@ export interface Props { fallback?: Fallback; } -const { fallback = 'animate' } = Astro.props as Props; +const { fallback = 'animate' } = Astro.props; --- - + + +

One

+ Go to 2 + + diff --git a/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-two.astro b/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-two.astro new file mode 100644 index 0000000000000..e0afede95a3a4 --- /dev/null +++ b/packages/astro/e2e/fixtures/view-transitions/src/pages/no-directive-two.astro @@ -0,0 +1,13 @@ +--- +import { ViewTransitions } from 'astro:transitions'; + +--- + + + Testing + + + +

Two

+ + diff --git a/packages/astro/e2e/view-transitions.test.js b/packages/astro/e2e/view-transitions.test.js index 37929073af78c..83830ac737c36 100644 --- a/packages/astro/e2e/view-transitions.test.js +++ b/packages/astro/e2e/view-transitions.test.js @@ -684,7 +684,7 @@ test.describe('View Transitions', () => { }); test('client:only styles are retained on transition (1/2)', async ({ page, astro }) => { - const totalExpectedStyles = 8; + const totalExpectedStyles = 9; await page.goto(astro.resolveUrl('/client-only-one')); let msg = page.locator('.counter-message'); @@ -703,8 +703,8 @@ test.describe('View Transitions', () => { }); test('client:only styles are retained on transition (2/2)', async ({ page, astro }) => { - const totalExpectedStyles_page_three = 10; - const totalExpectedStyles_page_four = 8; + const totalExpectedStyles_page_three = 11; + const totalExpectedStyles_page_four = 9; await page.goto(astro.resolveUrl('/client-only-three')); let msg = page.locator('#name'); @@ -887,4 +887,18 @@ test.describe('View Transitions', () => { await locator.type(' World'); await expect(locator).toHaveValue('Hello World'); }); + + test('Route announcer is invisible on page transition', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/no-directive-one')); + + let locator = page.locator('#one'); + await expect(locator, 'should have content').toHaveText('One'); + + await page.click('a'); + locator = page.locator('#two'); + await expect(locator, 'should have content').toHaveText('Two'); + + let announcer = page.locator('.astro-route-announcer'); + await expect(announcer, 'should have content').toHaveCSS('width', '1px'); + }); });