ff56f083bc
* adding Tailwind E2E tests with Playwright * package.json updates * adding e2e tests to CI workflow * using e2e for dev tests, mocha for build tests * refactor: sharing test-utils helpers * chore: update lockfile * Adding contributing docs * Revert "refactor: sharing test-utils helpers" This reverts commit 48496f43bc99eab30747baf6e83041ba4932e786. * refactor: simpler solution to resolving e2e test fixtures * chore: updating lockfile * refactor: cleaning up how URLs are resolved in e2e tests * install playwright deps in CI * ensure playwright deps are installed during CI * adding a basic HMR test for tailwind styles * using @e2e for playwright test packages * adding react hydration and HMR tests * adding hydration and HMR tests for preact * adding svelte hydration and HMR tests * adding solid-js hydration and HMR tests * adding solid hydration and HMR tests * adding vue hydration and HMR tests * adding client:media tests * fixing Lit hydration and HMR tests * fixing up the Vue e2e tests * fixing up svelte tests * chore: test cleanup * chore: cleaning up test element IDs * chore: updating lock file * chore: update lockfile after merge * TEMP: disabling React e2e tests * Revert "TEMP: disabling React e2e tests" This reverts commited1bad9cbc. * updating to use the new editFiles helper * chore: updating lock file * updating lock file * updating lockfile * TEMP: watching for console logs * TEMP: testing typescript tests * updating test:e2e scripts for config file * seems like it didn't find the config file? * use a fresh dev server for each test * removing Lit tests for now * Revert "removing Lit tests for now" This reverts commit4970a8093e. * updating test config for CI * WIP: disabling HMR tests to track down why they're unreliable * TEMP: logging to debug HMR test * afterEach isn't a global in Playwright * fix: the test's file reset helper was using a URL not filepath * one last try, why is the HMR test hanging at cleanup? * resetting files after tailwind HMR test * create the onNextChange watcher before editFile is called * moving the file changed sync into editFile() * code refactor + Astro Component HMR test * chore: lint fixes * adding a test suite for the framework-multiple example app
123 lines
3.6 KiB
JavaScript
123 lines
3.6 KiB
JavaScript
import { test as base, expect } from '@playwright/test';
|
|
import { loadFixture } from './test-utils.js';
|
|
|
|
const test = base.extend({
|
|
astro: async ({}, use) => {
|
|
const fixture = await loadFixture({ root: './fixtures/solid-component/' });
|
|
await use(fixture);
|
|
},
|
|
});
|
|
|
|
let devServer;
|
|
|
|
test.beforeEach(async ({ astro }) => {
|
|
devServer = await astro.startDevServer();
|
|
});
|
|
|
|
test.afterEach(async () => {
|
|
await devServer.stop();
|
|
});
|
|
|
|
test.describe('Solid components', () => {
|
|
test('server only', async ({ page, astro }) => {
|
|
await page.goto(astro.resolveUrl('/'));
|
|
|
|
const counter = page.locator('#server-only');
|
|
await expect(counter, 'component is visible').toBeVisible();
|
|
|
|
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').toHaveText('0');
|
|
});
|
|
|
|
test('client:idle', async ({ page, astro }) => {
|
|
await page.goto(astro.resolveUrl('/'));
|
|
|
|
const counter = page.locator('#client-idle');
|
|
await expect(counter, 'component is visible').toBeVisible();
|
|
|
|
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, 'count incremented by 1').toHaveText('1');
|
|
});
|
|
|
|
test('client:load', async ({ page, astro }) => {
|
|
await page.goto(astro.resolveUrl('/'));
|
|
|
|
const counter = page.locator('#client-load');
|
|
await expect(counter, 'component is visible').toBeVisible();
|
|
|
|
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, 'count incremented by 1').toHaveText('1');
|
|
});
|
|
|
|
test('client:visible', async ({ page, astro }) => {
|
|
await page.goto(astro.resolveUrl('/'));
|
|
|
|
// Make sure the component is on screen to trigger hydration
|
|
const counter = page.locator('#client-visible');
|
|
await counter.scrollIntoViewIfNeeded();
|
|
await expect(counter, 'component is visible').toBeVisible();
|
|
|
|
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, 'count incremented by 1').toHaveText('1');
|
|
});
|
|
|
|
test('client:media', async ({ page, astro }) => {
|
|
await page.goto(astro.resolveUrl('/'));
|
|
|
|
const counter = page.locator('#client-media');
|
|
await expect(counter, 'component is visible').toBeVisible();
|
|
|
|
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 inc.click();
|
|
await expect(count, 'count incremented by 1').toHaveText('1');
|
|
});
|
|
|
|
test('HMR', async ({ page, astro }) => {
|
|
await page.goto(astro.resolveUrl('/'));
|
|
|
|
const count = page.locator('#client-idle pre');
|
|
await expect(count, 'initial count is 0').toHaveText('0');
|
|
|
|
// Edit the component's initial count prop
|
|
await astro.editFile('./src/pages/index.astro', (original) =>
|
|
original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
|
|
);
|
|
|
|
await expect(count, 'count prop updated').toHaveText('5');
|
|
|
|
// Edit the imported CSS
|
|
await astro.editFile('./src/components/Counter.css', (original) =>
|
|
original.replace('font-size: 2em;', 'font-size: 24px;')
|
|
);
|
|
|
|
await expect(count, 'imported CSS updated').toHaveCSS('font-size', '24px');
|
|
});
|
|
});
|