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

fixing Lit hydration and HMR tests

Browse source
This commit is contained in:
Tony Sullivan 2022-05-16 10:36:01 -05:00
parent 23a93bd840
commit e6f3dd57aa
4 changed files with 53 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
packages/astro/e2e/fixtures/lit/src/components/Counter.js
View file

@ -8,19 +8,12 @@ class Counter extends LitElement {
count: {
type: Number,
},
id: {
type: String,
}
};
}
constructor() {
super();
this.count = this.count || 0;
}
decrement() {
this.count--;
this.count = 0;
}
increment() {
@ -29,12 +22,12 @@ class Counter extends LitElement {
render() {
return html`
<div id="${this.id}">
<button type="button" @click=${this.decrement}>-</button>
<div>
<p>Count: ${this.count}</p>
<button type="button" @click=${this.increment}>+</button>
<button type="button" @click=${this.increment}>Increment</button>
<slot />
</div>
`;
}

4
packages/astro/e2e/fixtures/lit/src/pages/index.astro
View file

@ -22,9 +22,5 @@ const someProps = {
<my-counter id="counter-visible" {...someProps} client:visible>
<h1>Hello, client:visible!</h1>
</my-counter>
<my-counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
<h1>Hello, client:media!</h1>
</my-counter>
</body>
</html>

18
packages/astro/e2e/fixtures/lit/src/pages/media.astro Normal file
View file

@ -0,0 +1,18 @@
---
import '../components/Counter.js';
const someProps = {
count: 0,
};
---
<html>
<head>
<!-- Head Stuff -->
</head>
<body>
<my-counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
<h1>Hello, client:media!</h1>
</my-counter>
</body>
</html>

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

@ -23,84 +23,85 @@ test.afterEach(async ({ astro }) => {
});
test.only('Lit', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
await test.step('client:idle', async () => {
await page.goto(astro.resolveUrl('/'));
const counter = page.locator('#counter-idle');
await expect(counter).toBeVisible();
const count = counter.locator('pre');
await expect(count).toHaveText('0');
const count = counter.locator('p');
await expect(count).toHaveText('Count: 0');
const inc = counter.locator('.increment');
const inc = counter.locator('button');
await inc.click();
await expect(count).toHaveText('1');
await expect(count).toHaveText('Count: 1');
});
await test.step('client:load', async () => {
await page.goto(astro.resolveUrl('/'));
const counter = page.locator('#counter-load');
await expect(counter).toBeVisible();
const count = counter.locator('pre');
await expect(count).toHaveText('0');
const count = counter.locator('p');
await expect(count).toHaveText('Count: 0');
const inc = counter.locator('.increment');
const inc = counter.locator('button');
await inc.click();
await expect(count).toHaveText('1');
await expect(count).toHaveText('Count: 1');
});
await test.step('client:visible', async () => {
await page.goto(astro.resolveUrl('/'));
const counter = page.locator('#counter-visible');
await expect(counter).toBeVisible();
const count = counter.locator('pre');
await expect(count).toHaveText('0');
const count = counter.locator('p');
await expect(count).toHaveText('Count: 0');
const inc = counter.locator('.increment');
const inc = counter.locator('button');
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 expect(count).toHaveText('Count: 1');
});
await test.step('client:media', async () => {
await page.goto(astro.resolveUrl('/media'));
const counter = page.locator('#counter-media');
await expect(counter).toBeVisible();
const count = counter.locator('pre');
await expect(count).toHaveText('0');
const count = counter.locator('p');
await expect(count).toHaveText('Count: 0');
// test 1: not hydrated on large screens
const inc = counter.locator('.increment');
const inc = counter.locator('button');
await inc.click();
await expect(count).toHaveText('0');
await expect(count).toHaveText('Count: 0');
// test 2: hydrated on mobile (max-width: 50rem)
await page.setViewportSize({ width: 414, height: 1124 });
await inc.click();
await expect(count).toHaveText('1');
await expect(count).toHaveText('Count: 1');
});
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',
(original) => original.replace('id="counter-idle" {...someProps}', 'id="counter-idle" count={5}')
(original) => original.replace('Hello, client:idle!', 'Hello, updated client:idle!')
);
await afterHMR;
const count = page.locator('#counter-idle pre');
await expect(count).toHaveText('5');
const label = page.locator('#counter-idle h1');
await expect(label).toHaveText('Hello, updated client:idle!')
});
});