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

adding svelte hydration and HMR tests

Browse source
This commit is contained in:
Tony Sullivan 2022-05-15 13:16:15 -06:00
parent 91d802e73b
commit 08ae1c90db
8 changed files with 173 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/astro/e2e/fixtures/preact/package.json
View file

@ -1,11 +1,10 @@
{
"name": "@e2e/react",
"name": "@e2e/preact",
"version": "0.0.0",
"private": true,
"dependencies": {
"@astrojs/preact": "workspace:*",
"astro": "workspace:*",
"react": "^18.1.0",
"react-dom": "^18.1.0"
"preact": "^10.7.2"
}
}

7
packages/astro/e2e/fixtures/svelte/astro.config.mjs Normal file
View file

@ -0,0 +1,7 @@
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';
// https://astro.build/config
export default defineConfig({
integrations: [svelte()],
});

10
packages/astro/e2e/fixtures/svelte/package.json Normal file
View file

@ -0,0 +1,10 @@
{
"name": "@e2e/react",
"version": "0.0.0",
"private": true,
"dependencies": {
"@astrojs/svelte": "workspace:*",
"astro": "workspace:*",
"svelte": "^3.48.0"
}
}

34
packages/astro/e2e/fixtures/svelte/src/components/Counter.svelte Normal file
View file

@ -0,0 +1,34 @@
<script>
export let id = undefined;
export let count = 0;
function add() {
count += 1;
}
function subtract() {
count -= 1;
}
</script>
<div class="counter" id={id}>
<button class="decrement" on:click={subtract}>-</button>
<pre>{ count }</pre>
<button class="increment" on:click={add}>+</button>
</div>
<div class="message">
<slot />
</div>
<style>
.counter{
display: grid;
font-size: 2em;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 2em;
place-items: center;
}
.message {
text-align: center;
}
</style>

26
packages/astro/e2e/fixtures/svelte/src/pages/index.astro Normal file
View file

@ -0,0 +1,26 @@
---
import Counter from '../components/Counter.svelte';
const someProps = {
count: 0,
};
---
<html>
<head>
<!-- Head Stuff -->
</head>
<body>
<Counter id="counter-idle" {...someProps} client:idle>
<h1>Hello, client:idle!</h1>
</Counter>
<Counter id="counter-load" {...someProps} client:load>
<h1>Hello, client:load!</h1>
</Counter>
<Counter id="counter-visible" {...someProps} client:visible>
<h1>Hello, client:visible!</h1>
</Counter>
</body>
</html>

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

@ -85,7 +85,7 @@ test.only('Preact', async ({ page, astro }) => {
const count = page.locator('#counter-idle pre');
await expect(count).toHaveText('5');
// test 2: updating the react component
// test 2: updating the preact component
await astro.writeFile(
'src/components/JSXComponent.jsx',
(original) => original.replace('Preact client:only component', 'Updated preact client:only component')

81
packages/astro/e2e/svelte.test.js Normal file
View file

@ -0,0 +1,81 @@
import { test as base, expect } from '@playwright/test';
import { loadFixture, onAfterHMR } from './test-utils.js';
const test = base.extend({
astro: async ({}, use) => {
const fixture = await loadFixture({ root: './fixtures/svelte/' });
await use(fixture);
},
});
let devServer;
test.beforeAll(async ({ astro }) => {
devServer = await astro.startDevServer();
});
test.afterAll(async ({ astro }) => {
await devServer.stop();
});
test.afterEach(async ({ astro }) => {
astro.clean();
});
test.only('Svelte', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
await test.step('client:idle', async () => {
const counter = page.locator('#counter-idle');
await expect(counter).toBeVisible();
const count = counter.locator('pre');
await expect(count).toHaveText('0');
const inc = counter.locator('.increment');
await inc.click();
await expect(count).toHaveText('1');
});
await test.step('client:load', async () => {
const counter = page.locator('#counter-load');
await expect(counter).toBeVisible();
const count = counter.locator('pre');
await expect(count).toHaveText('0');
const inc = counter.locator('.increment');
await inc.click();
await expect(count).toHaveText('1');
});
await test.step('client:visible', async () => {
const counter = page.locator('#counter-visible');
await expect(counter).toBeVisible();
const count = counter.locator('pre');
await expect(count).toHaveText('0');
const inc = counter.locator('.increment');
await inc.click();
await expect(count).toHaveText('1');
});
await test.step('HMR', async () => {
const afterHMR = onAfterHMR(page);
// test 1: updating the page component
await astro.writeFile(
'src/pages/index.astro',
(original) => original.replace('id="counter-idle" {...someProps}', 'id="counter-idle" count={5}')
);
await afterHMR;
const count = page.locator('#counter-idle pre');
await expect(count).toHaveText('5');
});
});

16
pnpm-lock.yaml generated
View file

@ -665,13 +665,11 @@ importers:
specifiers:
'@astrojs/preact': workspace:*
astro: workspace:*
react: ^18.1.0
react-dom: ^18.1.0
preact: ^10.7.2
dependencies:
'@astrojs/preact': link:../../../../integrations/preact
astro: link:../../..
react: 18.1.0
react-dom: 18.1.0_react@18.1.0
preact: 10.7.2
packages/astro/e2e/fixtures/react:
specifiers:
@ -685,6 +683,16 @@ importers:
react: 18.1.0
react-dom: 18.1.0_react@18.1.0
packages/astro/e2e/fixtures/svelte:
specifiers:
'@astrojs/svelte': workspace:*
astro: workspace:*
svelte: ^3.48.0
dependencies:
'@astrojs/svelte': link:../../../../integrations/svelte
astro: link:../../..
svelte: 3.48.0
packages/astro/e2e/fixtures/tailwindcss:
specifiers:
'@astrojs/tailwind': workspace:*