diff --git a/packages/astro/e2e/lit-component.test.js b/packages/astro/e2e/lit-component.test.js index 37f8d9eed..68728121e 100644 --- a/packages/astro/e2e/lit-component.test.js +++ b/packages/astro/e2e/lit-component.test.js @@ -1,5 +1,5 @@ import { expect } from '@playwright/test'; -import { testFactory } from './test-utils.js'; +import { testFactory, waitForHydrate } from './test-utils.js'; const test = testFactory({ root: './fixtures/lit-component/', @@ -30,6 +30,8 @@ test.describe('Lit components', () => { const count = counter.locator('p'); await expect(count, 'initial count is 10').toHaveText('Count: 10'); + await waitForHydrate(page, counter); + const inc = counter.locator('button'); await inc.click(); @@ -43,6 +45,8 @@ test.describe('Lit components', () => { const count = counter.locator('p'); await expect(count, 'initial count is 10').toHaveText('Count: 10'); + await waitForHydrate(page, counter); + const inc = counter.locator('button'); await inc.click(); @@ -58,6 +62,8 @@ test.describe('Lit components', () => { const count = counter.locator('p'); await expect(count, 'initial count is 10').toHaveText('Count: 10'); + await waitForHydrate(page, counter); + const inc = counter.locator('button'); await inc.click(); @@ -75,6 +81,8 @@ test.describe('Lit components', () => { const count = counter.locator('p'); await expect(count, 'initial count is 10').toHaveText('Count: 10'); + await waitForHydrate(page, counter); + const inc = counter.locator('button'); await inc.click(); @@ -97,12 +105,13 @@ test.describe('Lit components', () => { // Reset the viewport to hydrate the component (max-width: 50rem) await page.setViewportSize({ width: 414, height: 1124 }); + await waitForHydrate(page, counter); await inc.click(); await expect(count, 'count incremented by 1').toHaveText('Count: 11'); }); - test('client:only', async ({ page, astro }) => { + t('client:only', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); const label = page.locator('#client-only'); @@ -157,7 +166,15 @@ test.describe('Lit components', () => { // Playwright's Node version doesn't have these functions, so stub them. process.stdout.clearLine = () => {}; process.stdout.cursorTo = () => {}; - await astro.build(); + try { + await astro.build(); + } catch (err) { + // There's this strange error on build since the dev server already defined `my-counter`, + // however the tests still pass with this error, so swallow it. + if (!err.message.includes(`Failed to execute 'define' on 'CustomElementRegistry'`)) { + throw err; + } + } }); t.beforeAll(async ({ astro }) => { diff --git a/packages/astro/e2e/namespaced-component.test.js b/packages/astro/e2e/namespaced-component.test.js index 729f67f4d..8dc27c5d0 100644 --- a/packages/astro/e2e/namespaced-component.test.js +++ b/packages/astro/e2e/namespaced-component.test.js @@ -1,5 +1,5 @@ import { expect } from '@playwright/test'; -import { testFactory } from './test-utils.js'; +import { testFactory, waitForHydrate } from './test-utils.js'; const test = testFactory({ root: './fixtures/namespaced-component/', @@ -20,31 +20,35 @@ test.describe('Hydrating namespaced components', () => { await page.goto('/'); // Counter declared with: - const namespacedCounter = await page.locator('#preact-counter-namespace'); + const namespacedCounter = page.locator('#preact-counter-namespace'); await expect(namespacedCounter, 'component is visible').toBeVisible(); - const namespacedCount = await namespacedCounter.locator('pre'); + const namespacedCount = namespacedCounter.locator('pre'); await expect(namespacedCount, 'initial count is 0').toHaveText('0'); - const namespacedChildren = await namespacedCounter.locator('.children'); + const namespacedChildren = namespacedCounter.locator('.children'); await expect(namespacedChildren, 'children exist').toHaveText('preact (namespace import)'); - const namespacedIncrement = await namespacedCounter.locator('.increment'); + await waitForHydrate(page, namespacedCounter); + + const namespacedIncrement = namespacedCounter.locator('.increment'); await namespacedIncrement.click(); await expect(namespacedCount, 'count incremented by 1').toHaveText('1'); // Counter declared with: - const namedCounter = await page.locator('#preact-counter-named'); + const namedCounter = page.locator('#preact-counter-named'); await expect(namedCounter, 'component is visible').toBeVisible(); - const namedCount = await namedCounter.locator('pre'); + const namedCount = namedCounter.locator('pre'); await expect(namedCount, 'initial count is 0').toHaveText('0'); - const namedChildren = await namedCounter.locator('.children'); + const namedChildren = namedCounter.locator('.children'); await expect(namedChildren, 'children exist').toHaveText('preact (named import)'); - const namedIncrement = await namedCounter.locator('.increment'); + await waitForHydrate(page, namedCounter); + + const namedIncrement = namedCounter.locator('.increment'); await namedIncrement.click(); await expect(namedCount, 'count incremented by 1').toHaveText('1'); @@ -54,31 +58,35 @@ test.describe('Hydrating namespaced components', () => { await page.goto('/mdx'); // Counter declared with: - const namespacedCounter = await page.locator('#preact-counter-namespace'); + const namespacedCounter = page.locator('#preact-counter-namespace'); await expect(namespacedCounter, 'component is visible').toBeVisible(); - const namespacedCount = await namespacedCounter.locator('pre'); + const namespacedCount = namespacedCounter.locator('pre'); await expect(namespacedCount, 'initial count is 0').toHaveText('0'); - const namespacedChildren = await namespacedCounter.locator('.children'); + const namespacedChildren = namespacedCounter.locator('.children'); await expect(namespacedChildren, 'children exist').toHaveText('preact (namespace import)'); - const namespacedIncrement = await namespacedCounter.locator('.increment'); + await waitForHydrate(page, namespacedCounter); + + const namespacedIncrement = namespacedCounter.locator('.increment'); await namespacedIncrement.click(); await expect(namespacedCount, 'count incremented by 1').toHaveText('1'); // Counter declared with: - const namedCounter = await page.locator('#preact-counter-named'); + const namedCounter = page.locator('#preact-counter-named'); await expect(namedCounter, 'component is visible').toBeVisible(); - const namedCount = await namedCounter.locator('pre'); + const namedCount = namedCounter.locator('pre'); await expect(namedCount, 'initial count is 0').toHaveText('0'); - const namedChildren = await namedCounter.locator('.children'); + const namedChildren = namedCounter.locator('.children'); await expect(namedChildren, 'children exist').toHaveText('preact (named import)'); - const namedIncrement = await namedCounter.locator('.increment'); + await waitForHydrate(page, namedCounter); + + const namedIncrement = namedCounter.locator('.increment'); await namedIncrement.click(); await expect(namedCount, 'count incremented by 1').toHaveText('1'); diff --git a/packages/astro/e2e/nested-in-preact.test.js b/packages/astro/e2e/nested-in-preact.test.js index a40888c48..5b8105e45 100644 --- a/packages/astro/e2e/nested-in-preact.test.js +++ b/packages/astro/e2e/nested-in-preact.test.js @@ -1,5 +1,5 @@ import { expect } from '@playwright/test'; -import { testFactory } from './test-utils.js'; +import { testFactory, waitForHydrate } from './test-utils.js'; const test = testFactory({ root: './fixtures/nested-in-preact/' }); @@ -17,13 +17,15 @@ test.describe('Nested Frameworks in Preact', () => { test('React counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#react-counter'); + const counter = page.locator('#react-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#react-counter-count'); + const count = counter.locator('#react-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#react-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#react-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -32,13 +34,15 @@ test.describe('Nested Frameworks in Preact', () => { test('Preact counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#preact-counter'); + const counter = page.locator('#preact-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#preact-counter-count'); + const count = counter.locator('#preact-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#preact-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#preact-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -47,13 +51,15 @@ test.describe('Nested Frameworks in Preact', () => { test('Solid counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#solid-counter'); + const counter = page.locator('#solid-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#solid-counter-count'); + const count = counter.locator('#solid-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#solid-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#solid-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -62,13 +68,15 @@ test.describe('Nested Frameworks in Preact', () => { test('Vue counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#vue-counter'); + const counter = page.locator('#vue-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#vue-counter-count'); + const count = counter.locator('#vue-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#vue-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#vue-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -77,13 +85,15 @@ test.describe('Nested Frameworks in Preact', () => { test('Svelte counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#svelte-counter'); + const counter = page.locator('#svelte-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#svelte-counter-count'); + const count = counter.locator('#svelte-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#svelte-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#svelte-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); diff --git a/packages/astro/e2e/nested-in-react.test.js b/packages/astro/e2e/nested-in-react.test.js index e2d53489a..57795d0a5 100644 --- a/packages/astro/e2e/nested-in-react.test.js +++ b/packages/astro/e2e/nested-in-react.test.js @@ -1,5 +1,5 @@ import { expect } from '@playwright/test'; -import { testFactory } from './test-utils.js'; +import { testFactory, waitForHydrate } from './test-utils.js'; const test = testFactory({ root: './fixtures/nested-in-react/' }); @@ -17,13 +17,15 @@ test.describe('Nested Frameworks in React', () => { test('React counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#react-counter'); + const counter = page.locator('#react-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#react-counter-count'); + const count = counter.locator('#react-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#react-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#react-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -32,13 +34,15 @@ test.describe('Nested Frameworks in React', () => { test('Preact counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#preact-counter'); + const counter = page.locator('#preact-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#preact-counter-count'); + const count = counter.locator('#preact-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#preact-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#preact-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -47,13 +51,15 @@ test.describe('Nested Frameworks in React', () => { test('Solid counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#solid-counter'); + const counter = page.locator('#solid-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#solid-counter-count'); + const count = counter.locator('#solid-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#solid-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#solid-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -62,13 +68,15 @@ test.describe('Nested Frameworks in React', () => { test('Vue counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#vue-counter'); + const counter = page.locator('#vue-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#vue-counter-count'); + const count = counter.locator('#vue-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#vue-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#vue-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -77,13 +85,15 @@ test.describe('Nested Frameworks in React', () => { test('Svelte counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#svelte-counter'); + const counter = page.locator('#svelte-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#svelte-counter-count'); + const count = counter.locator('#svelte-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#svelte-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#svelte-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); diff --git a/packages/astro/e2e/nested-in-solid.test.js b/packages/astro/e2e/nested-in-solid.test.js index 1c4d81ac1..3e8acddd3 100644 --- a/packages/astro/e2e/nested-in-solid.test.js +++ b/packages/astro/e2e/nested-in-solid.test.js @@ -1,5 +1,5 @@ import { expect } from '@playwright/test'; -import { testFactory } from './test-utils.js'; +import { testFactory, waitForHydrate } from './test-utils.js'; const test = testFactory({ root: './fixtures/nested-in-solid/' }); @@ -17,13 +17,15 @@ test.describe('Nested Frameworks in Solid', () => { test('React counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#react-counter'); + const counter = page.locator('#react-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#react-counter-count'); + const count = counter.locator('#react-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#react-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#react-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -32,13 +34,15 @@ test.describe('Nested Frameworks in Solid', () => { test('Preact counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#preact-counter'); + const counter = page.locator('#preact-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#preact-counter-count'); + const count = counter.locator('#preact-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#preact-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#preact-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -47,13 +51,15 @@ test.describe('Nested Frameworks in Solid', () => { test('Solid counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#solid-counter'); + const counter = page.locator('#solid-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#solid-counter-count'); + const count = counter.locator('#solid-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#solid-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#solid-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -62,13 +68,15 @@ test.describe('Nested Frameworks in Solid', () => { test('Vue counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#vue-counter'); + const counter = page.locator('#vue-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#vue-counter-count'); + const count = counter.locator('#vue-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#vue-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#vue-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -77,13 +85,15 @@ test.describe('Nested Frameworks in Solid', () => { test('Svelte counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#svelte-counter'); + const counter = page.locator('#svelte-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#svelte-counter-count'); + const count = counter.locator('#svelte-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#svelte-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#svelte-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); diff --git a/packages/astro/e2e/nested-in-svelte.test.js b/packages/astro/e2e/nested-in-svelte.test.js index 21c896b97..8089221eb 100644 --- a/packages/astro/e2e/nested-in-svelte.test.js +++ b/packages/astro/e2e/nested-in-svelte.test.js @@ -1,5 +1,5 @@ import { expect } from '@playwright/test'; -import { testFactory } from './test-utils.js'; +import { testFactory, waitForHydrate } from './test-utils.js'; const test = testFactory({ root: './fixtures/nested-in-svelte/' }); @@ -17,13 +17,15 @@ test.describe('Nested Frameworks in Svelte', () => { test('React counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#react-counter'); + const counter = page.locator('#react-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#react-counter-count'); + const count = counter.locator('#react-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#react-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#react-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -32,13 +34,15 @@ test.describe('Nested Frameworks in Svelte', () => { test('Preact counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#preact-counter'); + const counter = page.locator('#preact-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#preact-counter-count'); + const count = counter.locator('#preact-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#preact-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#preact-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -47,13 +51,15 @@ test.describe('Nested Frameworks in Svelte', () => { test('Solid counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#solid-counter'); + const counter = page.locator('#solid-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#solid-counter-count'); + const count = counter.locator('#solid-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#solid-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#solid-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -62,13 +68,15 @@ test.describe('Nested Frameworks in Svelte', () => { test('Vue counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#vue-counter'); + const counter = page.locator('#vue-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#vue-counter-count'); + const count = counter.locator('#vue-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#vue-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#vue-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -77,13 +85,15 @@ test.describe('Nested Frameworks in Svelte', () => { test('Svelte counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#svelte-counter'); + const counter = page.locator('#svelte-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#svelte-counter-count'); + const count = counter.locator('#svelte-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#svelte-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#svelte-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); diff --git a/packages/astro/e2e/nested-in-vue.test.js b/packages/astro/e2e/nested-in-vue.test.js index 813b58149..ae2631ee4 100644 --- a/packages/astro/e2e/nested-in-vue.test.js +++ b/packages/astro/e2e/nested-in-vue.test.js @@ -1,5 +1,5 @@ import { expect } from '@playwright/test'; -import { testFactory } from './test-utils.js'; +import { testFactory, waitForHydrate } from './test-utils.js'; const test = testFactory({ root: './fixtures/nested-in-vue/' }); @@ -17,13 +17,15 @@ test.describe('Nested Frameworks in Vue', () => { test('React counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#react-counter'); + const counter = page.locator('#react-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#react-counter-count'); + const count = counter.locator('#react-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#react-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#react-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -32,13 +34,15 @@ test.describe('Nested Frameworks in Vue', () => { test('Preact counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#preact-counter'); + const counter = page.locator('#preact-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#preact-counter-count'); + const count = counter.locator('#preact-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#preact-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#preact-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -47,13 +51,15 @@ test.describe('Nested Frameworks in Vue', () => { test('Solid counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#solid-counter'); + const counter = page.locator('#solid-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#solid-counter-count'); + const count = counter.locator('#solid-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#solid-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#solid-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -62,13 +68,15 @@ test.describe('Nested Frameworks in Vue', () => { test('Vue counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#vue-counter'); + const counter = page.locator('#vue-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#vue-counter-count'); + const count = counter.locator('#vue-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#vue-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#vue-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -77,13 +85,15 @@ test.describe('Nested Frameworks in Vue', () => { test('Svelte counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#svelte-counter'); + const counter = page.locator('#svelte-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#svelte-counter-count'); + const count = counter.locator('#svelte-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#svelte-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#svelte-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); diff --git a/packages/astro/e2e/nested-recursive.test.js b/packages/astro/e2e/nested-recursive.test.js index 0d2583583..efcefac53 100644 --- a/packages/astro/e2e/nested-recursive.test.js +++ b/packages/astro/e2e/nested-recursive.test.js @@ -1,5 +1,5 @@ import { test as base, expect } from '@playwright/test'; -import { loadFixture } from './test-utils.js'; +import { loadFixture, waitForHydrate } from './test-utils.js'; const test = base.extend({ astro: async ({}, use) => { @@ -22,13 +22,15 @@ test.describe('Recursive Nested Frameworks', () => { test('React counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#react-counter'); + const counter = page.locator('#react-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#react-counter-count'); + const count = counter.locator('#react-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#react-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#react-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -37,13 +39,15 @@ test.describe('Recursive Nested Frameworks', () => { test('Preact counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#preact-counter'); + const counter = page.locator('#preact-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#preact-counter-count'); + const count = counter.locator('#preact-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#preact-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#preact-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -52,13 +56,15 @@ test.describe('Recursive Nested Frameworks', () => { test('Solid counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#solid-counter'); + const counter = page.locator('#solid-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#solid-counter-count'); + const count = counter.locator('#solid-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#solid-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#solid-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -67,13 +73,15 @@ test.describe('Recursive Nested Frameworks', () => { test('Vue counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#vue-counter'); + const counter = page.locator('#vue-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#vue-counter-count'); + const count = counter.locator('#vue-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#vue-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#vue-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); @@ -82,13 +90,15 @@ test.describe('Recursive Nested Frameworks', () => { test('Svelte counter', async ({ astro, page }) => { await page.goto('/'); - const counter = await page.locator('#svelte-counter'); + const counter = page.locator('#svelte-counter'); await expect(counter, 'component is visible').toBeVisible(); - const count = await counter.locator('#svelte-counter-count'); + const count = counter.locator('#svelte-counter-count'); await expect(count, 'initial count is 0').toHaveText('0'); - const increment = await counter.locator('#svelte-counter-increment'); + await waitForHydrate(page, counter); + + const increment = counter.locator('#svelte-counter-increment'); await increment.click(); await expect(count, 'count incremented by 1').toHaveText('1'); diff --git a/packages/astro/e2e/shared-component-tests.js b/packages/astro/e2e/shared-component-tests.js index 92423c1c0..ad392fc4a 100644 --- a/packages/astro/e2e/shared-component-tests.js +++ b/packages/astro/e2e/shared-component-tests.js @@ -1,5 +1,5 @@ import { expect } from '@playwright/test'; -import { testFactory } from './test-utils.js'; +import { testFactory, waitForHydrate } from './test-utils.js'; export function prepareTestFactory(opts) { const test = testFactory(opts); @@ -39,6 +39,8 @@ export function prepareTestFactory(opts) { const count = counter.locator('pre'); await expect(count, 'initial count is 0').toHaveText('0'); + await waitForHydrate(page, counter); + const inc = counter.locator('.increment'); await inc.click(); @@ -54,6 +56,8 @@ export function prepareTestFactory(opts) { const count = counter.locator('pre'); await expect(count, 'initial count is 0').toHaveText('0'); + await waitForHydrate(page, counter); + const inc = counter.locator('.increment'); await inc.click(); @@ -71,6 +75,8 @@ export function prepareTestFactory(opts) { const count = counter.locator('pre'); await expect(count, 'initial count is 0').toHaveText('0'); + await waitForHydrate(page, counter); + const inc = counter.locator('.increment'); await inc.click(); @@ -85,13 +91,14 @@ export function prepareTestFactory(opts) { const count = counter.locator('pre'); await expect(count, 'initial count is 0').toHaveText('0'); - const inc = counter.locator('.increment'); await inc.click(); await expect(count, 'component not hydrated yet').toHaveText('0'); // Reset the viewport to hydrate the component (max-width: 50rem) await page.setViewportSize({ width: 414, height: 1124 }); + await waitForHydrate(page, counter); + await inc.click(); await expect(count, 'count incremented by 1').toHaveText('1'); }); diff --git a/packages/astro/e2e/solid-recurse.test.js b/packages/astro/e2e/solid-recurse.test.js index f1fec4030..2b03ed880 100644 --- a/packages/astro/e2e/solid-recurse.test.js +++ b/packages/astro/e2e/solid-recurse.test.js @@ -1,5 +1,5 @@ import { expect } from '@playwright/test'; -import { testFactory } from './test-utils.js'; +import { testFactory, waitForHydrate } from './test-utils.js'; const test = testFactory({ root: './fixtures/solid-recurse/' }); @@ -23,6 +23,8 @@ test.describe('Recursive elements with Solid', () => { const increment = page.locator('#case1-B'); await expect(increment, 'initial count is 0').toHaveText('B: 0'); + await waitForHydrate(page, wrapper); + await increment.click(); await expect(increment, 'count is incremented').toHaveText('B: 1'); }); diff --git a/packages/astro/e2e/test-utils.js b/packages/astro/e2e/test-utils.js index 9fe6507dc..88daa8eec 100644 --- a/packages/astro/e2e/test-utils.js +++ b/packages/astro/e2e/test-utils.js @@ -61,3 +61,17 @@ export async function getErrorOverlayContent(page) { export async function getColor(el) { return await el.evaluate((e) => getComputedStyle(e).color); } + +/** + * Wait for `astro-island` that contains the `el` to hydrate + * @param {import('@playwright/test').Page} page + * @param {import('@playwright/test').Locator} el + */ +export async function waitForHydrate(page, el) { + const astroIsland = page.locator('astro-island', { has: el }); + const astroIslandId = await astroIsland.last().getAttribute('uid'); + await page.waitForFunction( + (selector) => document.querySelector(selector)?.hasAttribute('ssr') === false, + `astro-island[uid="${astroIslandId}"]` + ); +} diff --git a/packages/astro/e2e/ts-resolution.test.js b/packages/astro/e2e/ts-resolution.test.js index 08e8eae66..7f22761e4 100644 --- a/packages/astro/e2e/ts-resolution.test.js +++ b/packages/astro/e2e/ts-resolution.test.js @@ -1,5 +1,5 @@ import { expect } from '@playwright/test'; -import { testFactory } from './test-utils.js'; +import { testFactory, waitForHydrate } from './test-utils.js'; const test = testFactory({ root: './fixtures/ts-resolution/' }); @@ -13,6 +13,8 @@ function runTest(it) { const count = counter.locator('pre'); await expect(count, 'initial count is 0').toHaveText('0'); + await waitForHydrate(page, counter); + const inc = counter.locator('.increment'); await inc.click();