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

updating to use the new editFiles helper

Browse source
This commit is contained in:
Tony Sullivan 2022-05-17 11:13:10 -05:00
parent 254cf94bec
commit a2bc0650cf
10 changed files with 47 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/astro/e2e/lit.test.js
View file

@ -1,5 +1,5 @@
import { test as base, expect } from '@playwright/test';
import { loadFixture, onAfterHMR } from './test-utils.js';
import { loadFixture } from './test-utils.js';
const test = base.extend({
astro: async ({}, use) => {
@ -91,16 +91,14 @@ test.only('Lit', async ({ page, astro }) => {
await test.step('HMR', async () => {
await page.goto(astro.resolveUrl('/'));
const afterHMR = onAfterHMR(page);
// test 1: updating the page component
await astro.writeFile(
'src/pages/index.astro',
await astro.editFile(
'./src/pages/index.astro',
(original) => original.replace('Hello, client:idle!', 'Hello, updated client:idle!')
);
await afterHMR;
await astro.onNextChange();
const label = page.locator('#client-idle h1');
await expect(label).toHaveText('Hello, updated client:idle!')

20
packages/astro/e2e/preact.test.js
View file

@ -1,5 +1,5 @@
import { test as base, expect } from '@playwright/test';
import { loadFixture, onAfterHMR } from './test-utils.js';
import { loadFixture } from './test-utils.js';
const test = base.extend({
astro: async ({}, use) => {
@ -104,26 +104,24 @@ test.only('Preact', async ({ page, astro }) => {
});
await test.step('HMR', async () => {
const afterHMR = onAfterHMR(page);
// test 1: updating the page component
await astro.writeFile(
'src/pages/index.astro',
await astro.editFile(
'./src/pages/index.astro',
(original) => original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
);
await afterHMR;
await astro.onNextChange();
const count = page.locator('#client-idle pre');
await expect(count).toHaveText('5');
// test 2: updating the preact component
await astro.writeFile(
'src/components/JSXComponent.jsx',
await astro.editFile(
'./src/components/JSXComponent.jsx',
(original) => original.replace('Preact client:only component', 'Updated preact client:only component')
);
await afterHMR;
await astro.onNextChange();
const label = page.locator('#client-only');
await expect(label).toBeVisible();
@ -131,8 +129,8 @@ test.only('Preact', async ({ page, astro }) => {
await expect(label).toHaveText('Updated preact client:only component');
// test 3: updating imported CSS
await astro.writeFile(
'src/components/Counter.css',
await astro.editFile(
'./src/components/Counter.css',
(original) => original.replace('font-size: 2em;', 'font-size: 24px;')
);

20
packages/astro/e2e/react.test.js
View file

@ -1,5 +1,5 @@
import { test as base, expect } from '@playwright/test';
import { loadFixture, onAfterHMR } from './test-utils.js';
import { loadFixture } from './test-utils.js';
const test = base.extend({
astro: async ({}, use) => {
@ -104,26 +104,24 @@ test.only('React', async ({ page, astro }) => {
});
await test.step('HMR', async () => {
const afterHMR = onAfterHMR(page);
// test 1: updating the page component
await astro.writeFile(
'src/pages/index.astro',
await astro.editFile(
'./src/pages/index.astro',
(original) => original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
);
await afterHMR;
await astro.onNextChange();
const count = page.locator('#client-idle pre');
await expect(count).toHaveText('5');
// test 2: updating the react component
await astro.writeFile(
'src/components/JSXComponent.jsx',
await astro.editFile(
'./src/components/JSXComponent.jsx',
(original) => original.replace('React client:only component', 'Updated react client:only component')
);
await afterHMR;
await astro.onNextChange();
const label = page.locator('#client-only');
await expect(label).toBeVisible();
@ -131,8 +129,8 @@ test.only('React', async ({ page, astro }) => {
await expect(label).toHaveText('Updated react client:only component');
// test 3: updating imported CSS
await astro.writeFile(
'src/components/Counter.css',
await astro.editFile(
'./src/components/Counter.css',
(original) => original.replace('font-size: 2em;', 'font-size: 24px;')
);

16
packages/astro/e2e/solid.test.js
View file

@ -1,5 +1,5 @@
import { test as base, expect } from '@playwright/test';
import { loadFixture, onAfterHMR } from './test-utils.js';
import { loadFixture } from './test-utils.js';
const test = base.extend({
astro: async ({}, use) => {
@ -97,25 +97,25 @@ test.only('Solid', async ({ page, astro }) => {
});
await test.step('HMR', async () => {
const afterHMR = onAfterHMR(page);
// test 1: updating the page component
await astro.writeFile(
'src/pages/index.astro',
await astro.editFile(
'./src/pages/index.astro',
(original) => original.replace('id="client-idle" {...someProps}', 'id="client-idle" count={5}')
);
await afterHMR;
await astro.onNextChange();
const count = page.locator('#client-idle pre');
await expect(count).toHaveText('5');
// test 2: updating imported CSS
await astro.writeFile(
'src/components/Counter.css',
await astro.editFile(
'./src/components/Counter.css',
(original) => original.replace('font-size: 2em;', 'font-size: 24px;')
);
await astro.onNextChange();
await expect(count).toHaveCSS('font-size', '24px');
});
});

10
packages/astro/e2e/svelte.test.js
View file

@ -1,5 +1,5 @@
import { test as base, expect } from '@playwright/test';
import { loadFixture, onAfterHMR } from './test-utils.js';
import { loadFixture } from './test-utils.js';
const test = base.extend({
astro: async ({}, use) => {
@ -97,15 +97,13 @@ test.only('Svelte', async ({ page, astro }) => {
});
await test.step('HMR', async () => {
const afterHMR = onAfterHMR(page);
// test 1: updating the page component
await astro.writeFile(
'src/pages/index.astro',
await astro.editFile(
'./src/pages/index.astro',
(original) => original.replace('Hello, client:idle!', 'Hello, updated client:idle!')
);
await afterHMR;
await astro.onNextChange();
const label = page.locator('#client-idle-message');
await expect(label).toHaveText('Hello, updated client:idle!');

10
packages/astro/e2e/tailwindcss.test.js
View file

@ -1,5 +1,5 @@
import { test as base, expect } from '@playwright/test';
import { loadFixture, onAfterHMR } from './test-utils.js';
import { loadFixture } from './test-utils.js';
const test = base.extend({
astro: async ({}, use) => {
@ -54,14 +54,12 @@ test('Tailwind CSS', async ({ page, astro }) => {
});
await test.step('HMR', async () => {
const afterHMR = onAfterHMR(page);
await astro.writeFile(
'src/components/Button.astro',
await astro.editFile(
'./src/components/Button.astro',
(original) => original.replace('bg-purple-600', 'bg-purple-400')
);
await afterHMR;
await astro.onNextChange();
const button = page.locator('button');

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

@ -12,6 +12,3 @@ export function loadFixture(inlineConfig) {
});
}
export function onAfterHMR(page) {
return page.waitForEvent('console', message => message.text() === 'astro:hmr:after')
}

10
packages/astro/e2e/vue.test.js
View file

@ -1,5 +1,5 @@
import { test as base, expect } from '@playwright/test';
import { loadFixture, onAfterHMR } from './test-utils.js';
import { loadFixture } from './test-utils.js';
const test = base.extend({
astro: async ({}, use) => {
@ -123,15 +123,13 @@ test.only('Vue', async ({ page, astro }) => {
});
await test.step('HMR', async () => {
const afterHMR = onAfterHMR(page);
// test 1: updating the page component
await astro.writeFile(
'src/pages/index.astro',
await astro.editFile(
'./src/pages/index.astro',
(original) => original.replace('Hello, client:visible!', 'Hello, updated client:visible!')
);
await afterHMR;
await astro.onNextChange();
const label = page.locator('#client-visible h1');
await expect(label).toHaveText('Hello, updated client:visible!');

6
packages/astro/src/runtime/client/hmr.ts
View file

@ -14,11 +14,7 @@ if (import.meta.hot) {
root.innerHTML = current?.innerHTML;
}
}
const result = diff(document, doc);
// event used for synchronizing E2E tests
console.log('astro:hmr:after');
return result;
return diff(document, doc);
}
async function updateAll(files: any[]) {
let hasAstroUpdate = false;

18
packages/astro/test/test-utils.js
View file

@ -97,17 +97,6 @@ export async function loadFixture(inlineConfig) {
const resolveUrl = (url) =>
`http://${'127.0.0.1'}:${config.server.port}${url.replace(/^\/?/, '/')}`;
let cleanupCallbacks = [];
async function writeFile(filePath, updater) {
const pathname = new URL(filePath.replace(/^\//, ''), config.root);
const initial = await fs.promises.readFile(pathname, 'utf8');
await fs.promises.writeFile(pathname, updater(initial), 'utf-8');
cleanupCallbacks.push(() => fs.promises.writeFile(pathname, initial, 'utf-8'));
}
// A map of files that have been editted.
let fileEdits = new Map();
@ -144,18 +133,16 @@ export async function loadFixture(inlineConfig) {
},
readFile: (filePath) =>
fs.promises.readFile(new URL(filePath.replace(/^\//, ''), config.outDir), 'utf8'),
writeFile,
readdir: (fp) => fs.promises.readdir(new URL(fp.replace(/^\//, ''), config.outDir)),
clean: async () => {
await fs.promises.rm(config.outDir, { maxRetries: 10, recursive: true, force: true });
await Promise.all(cleanupCallbacks.map(cb => cb()));
},
loadTestAdapterApp: async () => {
const url = new URL('./server/entry.mjs', config.outDir);
const { createApp } = await import(url);
return createApp();
},
editFile: async (filePath, newContents) => {
editFile: async (filePath, newContentsOrCallback) => {
const fileUrl = new URL(filePath.replace(/^\//, ''), config.root);
const contents = await fs.promises.readFile(fileUrl, 'utf-8');
const reset = () => fs.writeFileSync(fileUrl, contents);
@ -164,6 +151,9 @@ export async function loadFixture(inlineConfig) {
if (!fileEdits.has(fileUrl.toString())) {
fileEdits.set(fileUrl.toString(), reset);
}
const newContents = typeof newContentsOrCallback === 'function'
? newContentsOrCallback(contents)
: newContentsOrCallback;
await fs.promises.writeFile(fileUrl, newContents);
return reset;
},