adding vue hydration and HMR tests
This commit is contained in:
Tony Sullivan
parent
54e4ee2cd9
commit
a934059a6e
8 changed files with 270 additions and 2 deletions
7
packages/astro/e2e/fixtures/lit/astro.config.mjs
Normal file
7
packages/astro/e2e/fixtures/lit/astro.config.mjs
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
import lit from '@astrojs/lit';
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [lit()],
|
||||
});
|
||||
11
packages/astro/e2e/fixtures/lit/package.json
Normal file
11
packages/astro/e2e/fixtures/lit/package.json
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"name": "@e2e/svelte",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@astrojs/lit": "workspace:*",
|
||||
"astro": "workspace:*",
|
||||
"@webcomponents/template-shadowroot": "^0.1.0",
|
||||
"lit": "^2.2.3"
|
||||
}
|
||||
}
|
||||
43
packages/astro/e2e/fixtures/lit/src/components/Counter.js
Normal file
43
packages/astro/e2e/fixtures/lit/src/components/Counter.js
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import { LitElement, html } from 'lit';
|
||||
|
||||
export const tagName = 'my-counter';
|
||||
|
||||
class Counter extends LitElement {
|
||||
static get properties() {
|
||||
return {
|
||||
count: {
|
||||
type: Number,
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.count = this.count || 0;
|
||||
}
|
||||
|
||||
decrement() {
|
||||
this.count--;
|
||||
}
|
||||
|
||||
increment() {
|
||||
this.count++;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div id="${this.id}">
|
||||
<button type="button" @click=${this.decrement}>-</button>
|
||||
|
||||
<p>Count: ${this.count}</p>
|
||||
|
||||
<button type="button" @click=${this.increment}>+</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define(tagName, Counter);
|
||||
26
packages/astro/e2e/fixtures/lit/src/pages/index.astro
Normal file
26
packages/astro/e2e/fixtures/lit/src/pages/index.astro
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
---
|
||||
import '../components/Counter.js';
|
||||
|
||||
const someProps = {
|
||||
count: 0,
|
||||
};
|
||||
---
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<!-- Head Stuff -->
|
||||
</head>
|
||||
<body>
|
||||
<my-counter id="counter-idle" {...someProps} client:idle>
|
||||
<h1>Hello, client:idle!</h1>
|
||||
</my-counter>
|
||||
|
||||
<my-counter id="counter-load" {...someProps} client:load>
|
||||
<h1>Hello, client:load!</h1>
|
||||
</my-counter>
|
||||
|
||||
<my-counter id="counter-visible" {...someProps} client:visible>
|
||||
<h1>Hello, client:visible!</h1>
|
||||
</my-counter>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div class="counter">
|
||||
<button @click="subtract()">-</button>
|
||||
<button class="decrement" @click="subtract()">-</button>
|
||||
<pre>{{ count }}</pre>
|
||||
<button @click="add()">+</button>
|
||||
<button class="increment" @click="add()">+</button>
|
||||
</div>
|
||||
<div class="counter-message">
|
||||
<slot />
|
||||
|
|
|
|||
88
packages/astro/e2e/lit.test.js
Normal file
88
packages/astro/e2e/lit.test.js
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
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/lit/' });
|
||||
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('Lit', 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('client:only', async () => {
|
||||
const label = page.locator('#client-only');
|
||||
await expect(label).toBeVisible();
|
||||
|
||||
await expect(label).toHaveText('Preact client:only component');
|
||||
});
|
||||
|
||||
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');
|
||||
});
|
||||
});
|
||||
81
packages/astro/e2e/vue.test.js
Normal file
81
packages/astro/e2e/vue.test.js
Normal 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/vue/' });
|
||||
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('Vue', async ({ page, astro }) => {
|
||||
await page.goto(astro.resolveUrl('/'));
|
||||
|
||||
await test.step('client:idle', async () => {
|
||||
const counter = page.locator('astro-root:nth-of-type(1)');
|
||||
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('astro-root:nth-of-type(2)');
|
||||
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('astro-root:nth-of-type(3)');
|
||||
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('astro-root:nth-of-type(1) pre');
|
||||
await expect(count).toHaveText('5');
|
||||
});
|
||||
});
|
||||
|
|
@ -661,6 +661,18 @@ importers:
|
|||
chai-as-promised: 7.1.1_chai@4.3.6
|
||||
mocha: 9.2.2
|
||||
|
||||
packages/astro/e2e/fixtures/lit:
|
||||
specifiers:
|
||||
'@astrojs/lit': workspace:*
|
||||
'@webcomponents/template-shadowroot': ^0.1.0
|
||||
astro: workspace:*
|
||||
lit: ^2.2.3
|
||||
dependencies:
|
||||
'@astrojs/lit': link:../../../../integrations/lit
|
||||
'@webcomponents/template-shadowroot': 0.1.0
|
||||
astro: link:../../..
|
||||
lit: 2.2.3
|
||||
|
||||
packages/astro/e2e/fixtures/preact:
|
||||
specifiers:
|
||||
'@astrojs/preact': workspace:*
|
||||
|
|
|
|||
Loading…
Reference in a new issue