From afd1b07a95aa1538639face2adec3cbf91f6aa0b Mon Sep 17 00:00:00 2001 From: Tony Sullivan Date: Fri, 20 May 2022 23:45:01 -0500 Subject: [PATCH] use a fresh dev server for each test --- packages/astro/e2e/lit.test.js | 20 ++++------ packages/astro/e2e/nested-styles.test.js | 12 +++--- packages/astro/e2e/preact.test.js | 40 +++++++++++-------- packages/astro/e2e/react.test.js | 40 +++++++++++-------- .../e2e/{solid.test.ts => solid.test.js} | 0 packages/astro/e2e/svelte.test.js | 32 +++++++++------ packages/astro/e2e/tailwindcss.test.js | 20 +++++----- packages/astro/e2e/vue.test.js | 32 +++++++++------ packages/astro/package.json | 4 +- ...ywright.config.ts => playwright.config.js} | 6 +-- 10 files changed, 114 insertions(+), 92 deletions(-) rename packages/astro/e2e/{solid.test.ts => solid.test.js} (100%) rename packages/astro/{playwright.config.ts => playwright.config.js} (56%) diff --git a/packages/astro/e2e/lit.test.js b/packages/astro/e2e/lit.test.js index 3aee984ed..b34aaf4ca 100644 --- a/packages/astro/e2e/lit.test.js +++ b/packages/astro/e2e/lit.test.js @@ -10,20 +10,16 @@ const test = base.extend({ let devServer; -test.beforeAll(async ({ astro }) => { +test.beforeEach(async ({ astro }) => { devServer = await astro.startDevServer(); }); -test.afterAll(async ({ astro }) => { +test.afterEach(async () => { await devServer.stop(); }); -test.afterEach(async ({ astro }) => { - astro.clean(); -}); - -test.only('Lit', async ({ page, astro }) => { - await test.step('client:idle', async () => { +test.describe('Lit', () => { + test('client:idle', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); const counter = page.locator('#client-idle'); @@ -38,7 +34,7 @@ test.only('Lit', async ({ page, astro }) => { await expect(count).toHaveText('Count: 1'); }); - await test.step('client:load', async () => { + test('client:load', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); const counter = page.locator('#client-load'); @@ -53,7 +49,7 @@ test.only('Lit', async ({ page, astro }) => { await expect(count).toHaveText('Count: 1'); }); - await test.step('client:visible', async () => { + test('client:visible', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); const counter = page.locator('#client-visible'); @@ -69,7 +65,7 @@ test.only('Lit', async ({ page, astro }) => { await expect(count).toHaveText('Count: 1'); }); - await test.step('client:media', async () => { + test('client:media', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/media')); const counter = page.locator('#client-media'); @@ -89,7 +85,7 @@ test.only('Lit', async ({ page, astro }) => { await expect(count).toHaveText('Count: 1'); }); - await test.step('HMR', async () => { + test('HMR', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); // test 1: updating the page component diff --git a/packages/astro/e2e/nested-styles.test.js b/packages/astro/e2e/nested-styles.test.js index 7c233d4cb..f405d5a31 100644 --- a/packages/astro/e2e/nested-styles.test.js +++ b/packages/astro/e2e/nested-styles.test.js @@ -10,18 +10,18 @@ const test = base.extend({ let devServer; -test.beforeAll(async ({ astro }) => { +test.beforeEach(async ({ astro }) => { devServer = await astro.startDevServer(); }); -test.afterAll(async ({ astro }) => { +test.afterEach(async () => { await devServer.stop(); }); -test('Loading styles that are nested', async ({ page, astro }) => { - await page.goto(astro.resolveUrl('/')); - - await test.step('header', async () => { +test.describe('Loading styles that are nested', () => { + test('header', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const header = page.locator('header'); await expect(header, 'should have background color').toHaveCSS( diff --git a/packages/astro/e2e/preact.test.js b/packages/astro/e2e/preact.test.js index 08bc437f2..103349a0e 100644 --- a/packages/astro/e2e/preact.test.js +++ b/packages/astro/e2e/preact.test.js @@ -10,22 +10,18 @@ const test = base.extend({ let devServer; -test.beforeAll(async ({ astro }) => { +test.beforeEach(async ({ astro }) => { devServer = await astro.startDevServer(); }); -test.afterAll(async ({ astro }) => { +test.afterEach(async () => { await devServer.stop(); }); -test.afterEach(async ({ astro }) => { - astro.clean(); -}); - -test.only('Preact', async ({ page, astro }) => { - await page.goto(astro.resolveUrl('/')); - - await test.step('server only', async () => { +test.describe('Preact', () => { + test('server only', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const counter = page.locator('#server-only'); await expect(counter).toBeVisible(); @@ -38,7 +34,9 @@ test.only('Preact', async ({ page, astro }) => { await expect(count).toHaveText('0'); }); - await test.step('client:idle', async () => { + test('client:idle', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const counter = page.locator('#client-idle'); await expect(counter).toBeVisible(); @@ -51,7 +49,9 @@ test.only('Preact', async ({ page, astro }) => { await expect(count).toHaveText('1'); }); - await test.step('client:load', async () => { + test('client:load', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const counter = page.locator('#client-load'); await expect(counter).toBeVisible(); @@ -64,7 +64,9 @@ test.only('Preact', async ({ page, astro }) => { await expect(count).toHaveText('1'); }); - await test.step('client:visible', async () => { + test('client:visible', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const counter = page.locator('#client-visible'); await counter.scrollIntoViewIfNeeded(); await expect(counter).toBeVisible(); @@ -78,7 +80,9 @@ test.only('Preact', async ({ page, astro }) => { await expect(count).toHaveText('1'); }); - await test.step('client:media', async () => { + test('client:media', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const counter = page.locator('#client-media'); await expect(counter).toBeVisible(); @@ -96,14 +100,18 @@ test.only('Preact', async ({ page, astro }) => { await expect(count).toHaveText('1'); }); - await test.step('client:only', async () => { + test('client:only', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const label = page.locator('#client-only'); await expect(label).toBeVisible(); await expect(label).toHaveText('Preact client:only component'); }); - await test.step('HMR', async () => { + test('HMR', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + // test 1: updating the page component await astro.editFile( './src/pages/index.astro', diff --git a/packages/astro/e2e/react.test.js b/packages/astro/e2e/react.test.js index eb42dba50..79f3f6df2 100644 --- a/packages/astro/e2e/react.test.js +++ b/packages/astro/e2e/react.test.js @@ -10,22 +10,18 @@ const test = base.extend({ let devServer; -test.beforeAll(async ({ astro }) => { +test.beforeEach(async ({ astro }) => { devServer = await astro.startDevServer(); }); -test.afterAll(async ({ astro }) => { +test.afterEach(async () => { await devServer.stop(); }); -test.afterEach(async ({ astro }) => { - astro.clean(); -}); - -test.only('React', async ({ page, astro }) => { - await page.goto(astro.resolveUrl('/')); - - await test.step('server only', async () => { +test.describe('React', () => { + test('server only', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const counter = page.locator('#server-only'); await expect(counter).toBeVisible(); @@ -38,7 +34,9 @@ test.only('React', async ({ page, astro }) => { await expect(count).toHaveText('0'); }); - await test.step('client:idle', async () => { + test('client:idle', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const counter = page.locator('#client-idle'); await expect(counter).toBeVisible(); @@ -51,7 +49,9 @@ test.only('React', async ({ page, astro }) => { await expect(count).toHaveText('1'); }); - await test.step('client:load', async () => { + test('client:load', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const counter = page.locator('#client-load'); await expect(counter).toBeVisible(); @@ -64,7 +64,9 @@ test.only('React', async ({ page, astro }) => { await expect(count).toHaveText('1'); }); - await test.step('client:visible', async () => { + test('client:visible', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const counter = page.locator('#client-visible'); await counter.scrollIntoViewIfNeeded(); await expect(counter).toBeVisible(); @@ -78,7 +80,9 @@ test.only('React', async ({ page, astro }) => { await expect(count).toHaveText('1'); }); - await test.step('client:media', async () => { + test('client:media', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const counter = page.locator('#client-media'); await expect(counter).toBeVisible(); @@ -96,14 +100,18 @@ test.only('React', async ({ page, astro }) => { await expect(count).toHaveText('1'); }); - await test.step('client:only', async () => { + test('client:only', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const label = page.locator('#client-only'); await expect(label).toBeVisible(); await expect(label).toHaveText('React client:only component'); }); - await test.step('HMR', async () => { + test('HMR', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + // test 1: updating the page component await astro.editFile( './src/pages/index.astro', diff --git a/packages/astro/e2e/solid.test.ts b/packages/astro/e2e/solid.test.js similarity index 100% rename from packages/astro/e2e/solid.test.ts rename to packages/astro/e2e/solid.test.js diff --git a/packages/astro/e2e/svelte.test.js b/packages/astro/e2e/svelte.test.js index cbe15bf6d..d5bce5fa2 100644 --- a/packages/astro/e2e/svelte.test.js +++ b/packages/astro/e2e/svelte.test.js @@ -10,22 +10,18 @@ const test = base.extend({ let devServer; -test.beforeAll(async ({ astro }) => { +test.beforeEach(async ({ astro }) => { devServer = await astro.startDevServer(); }); -test.afterAll(async ({ astro }) => { +test.afterEach(async () => { await devServer.stop(); }); -test.afterEach(async ({ astro }) => { - astro.clean(); -}); - -test.only('Svelte', async ({ page, astro }) => { +test.describe('Svelte', () => { + test('server only', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); - await test.step('server only', async () => { const counter = page.locator('#server-only'); await expect(counter).toBeVisible(); @@ -38,7 +34,9 @@ test.only('Svelte', async ({ page, astro }) => { await expect(count).toHaveText('0'); }); - await test.step('client:idle', async () => { + test('client:idle', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const counter = page.locator('#client-idle'); await expect(counter).toBeVisible(); @@ -51,7 +49,9 @@ test.only('Svelte', async ({ page, astro }) => { await expect(count).toHaveText('1'); }); - await test.step('client:load', async () => { + test('client:load', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const counter = page.locator('#client-load'); await expect(counter).toBeVisible(); @@ -64,7 +64,9 @@ test.only('Svelte', async ({ page, astro }) => { await expect(count).toHaveText('1'); }); - await test.step('client:visible', async () => { + test('client:visible', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const counter = page.locator('#client-visible'); await counter.scrollIntoViewIfNeeded(); await expect(counter).toBeVisible(); @@ -78,7 +80,9 @@ test.only('Svelte', async ({ page, astro }) => { await expect(count).toHaveText('1'); }); - await test.step('client:media', async () => { + test('client:media', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const counter = page.locator('#client-media'); await expect(counter).toBeVisible(); @@ -96,7 +100,9 @@ test.only('Svelte', async ({ page, astro }) => { await expect(count).toHaveText('1'); }); - await test.step('HMR', async () => { + test('HMR', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + // test 1: updating the page component await astro.editFile( './src/pages/index.astro', diff --git a/packages/astro/e2e/tailwindcss.test.js b/packages/astro/e2e/tailwindcss.test.js index f11931336..e71edcced 100644 --- a/packages/astro/e2e/tailwindcss.test.js +++ b/packages/astro/e2e/tailwindcss.test.js @@ -10,22 +10,18 @@ const test = base.extend({ let devServer; -test.beforeAll(async ({ astro }) => { +test.beforeEach(async ({ astro }) => { devServer = await astro.startDevServer(); }); -test.afterAll(async ({ astro }) => { +test.afterEach(async () => { await devServer.stop(); }); -test.afterEach(async ({ astro }) => { - astro.clean(); -}); - -test('Tailwind CSS', async ({ page, astro }) => { +test.describe('Tailwind CSS', () => { + test('body', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); - await test.step('body', async () => { const body = page.locator('body'); await expect(body, 'should have classes').toHaveClass('bg-dawn text-midnight'); @@ -36,7 +32,9 @@ test('Tailwind CSS', async ({ page, astro }) => { await expect(body, 'should have color').toHaveCSS('color', 'rgb(49, 39, 74)'); }); - await test.step('button', async () => { + test('button', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const button = page.locator('button'); await expect(button, 'should have bg-purple-600').toHaveClass(/bg-purple-600/); @@ -53,7 +51,9 @@ test('Tailwind CSS', async ({ page, astro }) => { await expect(button, 'should have font weight').toHaveCSS('font-weight', '900'); }); - await test.step('HMR', async () => { + test('HMR', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + await astro.editFile( './src/components/Button.astro', (original) => original.replace('bg-purple-600', 'bg-purple-400') diff --git a/packages/astro/e2e/vue.test.js b/packages/astro/e2e/vue.test.js index 4a0fea47c..fd78e4e3b 100644 --- a/packages/astro/e2e/vue.test.js +++ b/packages/astro/e2e/vue.test.js @@ -10,22 +10,18 @@ const test = base.extend({ let devServer; -test.beforeAll(async ({ astro }) => { +test.beforeEach(async ({ astro }) => { devServer = await astro.startDevServer(); }); -test.afterAll(async ({ astro }) => { +test.afterEach(async () => { await devServer.stop(); }); -test.afterEach(async ({ astro }) => { - astro.clean(); -}); - -test.only('Vue', async ({ page, astro }) => { +test.describe('Vue', () => { + test('server only', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); - await test.step('server only', async () => { const counter = page.locator('#server-only'); await expect(counter).toBeVisible(); @@ -38,7 +34,9 @@ test.only('Vue', async ({ page, astro }) => { await expect(count).toHaveText('0'); }); - await test.step('client:idle', async () => { + test('client:idle', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const counter = page.locator('#client-idle'); await expect(counter).toBeVisible(); @@ -51,7 +49,9 @@ test.only('Vue', async ({ page, astro }) => { await expect(count).toHaveText('1'); }); - await test.step('client:load', async () => { + test('client:load', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const counter = page.locator('#client-load'); const counterDup = page.locator('#client-load-dup'); const counterStep = page.locator('#client-load-step'); @@ -88,7 +88,9 @@ test.only('Vue', async ({ page, astro }) => { await expect(countStep).toHaveText('4'); }); - await test.step('client:visible', async () => { + test('client:visible', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const counter = page.locator('#client-visible'); await counter.scrollIntoViewIfNeeded(); await expect(counter).toBeVisible(); @@ -104,7 +106,9 @@ test.only('Vue', async ({ page, astro }) => { await expect(count).toHaveText('1'); }); - await test.step('client:media', async () => { + test('client:media', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + const counter = page.locator('#client-media'); await expect(counter).toBeVisible(); @@ -122,7 +126,9 @@ test.only('Vue', async ({ page, astro }) => { await expect(count).toHaveText('1'); }); - await test.step('HMR', async () => { + test('HMR', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/')); + // test 1: updating the page component await astro.editFile( './src/pages/index.astro', diff --git a/packages/astro/package.json b/packages/astro/package.json index aba647857..709d6f21f 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -73,8 +73,8 @@ "benchmark": "node test/benchmark/dev.bench.js && node test/benchmark/build.bench.js", "test": "mocha --exit --timeout 20000 --ignore **/lit-element.test.js --ignore **/errors.test.js && mocha --timeout 20000 **/lit-element.test.js && mocha --timeout 20000 **/errors.test.js", "test:match": "mocha --timeout 20000 -g", - "test:e2e": "playwright test -c ./playwright.config.ts", - "test:e2e:match": "playwright test -c ./playwright.config.ts -g" + "test:e2e": "playwright test", + "test:e2e:match": "playwright test -g" }, "dependencies": { "@astrojs/compiler": "^0.14.3", diff --git a/packages/astro/playwright.config.ts b/packages/astro/playwright.config.js similarity index 56% rename from packages/astro/playwright.config.ts rename to packages/astro/playwright.config.js index 5aff93bca..ea5d91334 100644 --- a/packages/astro/playwright.config.ts +++ b/packages/astro/playwright.config.js @@ -1,7 +1,5 @@ -import type { PlaywrightTestConfig } from '@playwright/test'; - -const config: PlaywrightTestConfig = { - testMatch: 'e2e/*.test.ts', +const config = { + testMatch: 'e2e/*.test.js', projects: [ { name: 'Chrome Stable',