michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix e2e flaky tests (#7084)

Browse source
This commit is contained in:
Bjorn Lu 2023-05-16 16:36:15 +08:00 committed by GitHub
parent cd410c5eb7
commit d7007a1a83
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 230 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
packages/astro/e2e/lit-component.test.js
View file

@ -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 }) => {

42
packages/astro/e2e/namespaced-component.test.js
View file

@ -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: <ns.components.PreactCounter id="preact-counter-namespace" client:load>
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: <components.PreactCounterTwo id="preact-counter-named" client:load>
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: <ns.components.PreactCounter id="preact-counter-namespace" client:load>
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: <components.PreactCounterTwo id="preact-counter-named" client:load>
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');

42
packages/astro/e2e/nested-in-preact.test.js
View file

@ -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');

42
packages/astro/e2e/nested-in-react.test.js
View file

@ -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');

42
packages/astro/e2e/nested-in-solid.test.js
View file

@ -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');

42
packages/astro/e2e/nested-in-svelte.test.js
View file

@ -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');

42
packages/astro/e2e/nested-in-vue.test.js
View file

@ -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');

42
packages/astro/e2e/nested-recursive.test.js
View file

@ -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');

11
packages/astro/e2e/shared-component-tests.js
View file

@ -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');
});

4
packages/astro/e2e/solid-recurse.test.js
View file

@ -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');
});

14
packages/astro/e2e/test-utils.js
View file

@ -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}"]`
);
}

4
packages/astro/e2e/ts-resolution.test.js
View file

@ -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();