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

adding client:media tests

Browse source
This commit is contained in:
Tony Sullivan 2022-05-15 14:37:11 -06:00
parent a934059a6e
commit c8aedf7ec7
12 changed files with 132 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -22,5 +22,9 @@ 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>

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

@ -24,6 +24,10 @@ const someProps = {
<h1>Hello, client:visible!</h1>
</Counter>
<Counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
<h1>Hello, client:media!</h1>
</Counter>
<PreactComponent id="client-only" client:only="preact" />
</body>
</html>

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

@ -24,6 +24,10 @@ const someProps = {
<h1>Hello, client:visible!</h1>
</Counter>
<Counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
<h1>Hello, client:media!</h1>
</Counter>
<ReactComponent id="client-only" client:only="react" />
</body>
</html>

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

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

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

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

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

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

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

@ -71,6 +71,24 @@ test.only('Lit', async ({ page, astro }) => {
await expect(label).toHaveText('Preact client:only component');
});
await test.step('client:media', async () => {
const counter = page.locator('#counter-media');
await expect(counter).toBeVisible();
const count = counter.locator('pre');
await expect(count).toHaveText('0');
// test 1: not hydrated on large screens
const inc = counter.locator('.increment');
await inc.click();
await expect(count).toHaveText('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 test.step('HMR', async () => {
const afterHMR = onAfterHMR(page);

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

@ -64,6 +64,24 @@ test.only('Preact', async ({ page, astro }) => {
await expect(count).toHaveText('1');
});
await test.step('client:media', async () => {
const counter = page.locator('#counter-media');
await expect(counter).toBeVisible();
const count = counter.locator('pre');
await expect(count).toHaveText('0');
// test 1: not hydrated on large screens
const inc = counter.locator('.increment');
await inc.click();
await expect(count).toHaveText('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 test.step('client:only', async () => {
const label = page.locator('#client-only');
await expect(label).toBeVisible();

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

@ -64,6 +64,24 @@ test.only('React', async ({ page, astro }) => {
await expect(count).toHaveText('1');
});
await test.step('client:media', async () => {
const counter = page.locator('#counter-media');
await expect(counter).toBeVisible();
const count = counter.locator('pre');
await expect(count).toHaveText('0');
// test 1: not hydrated on large screens
const inc = counter.locator('.increment');
await inc.click();
await expect(count).toHaveText('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 test.step('client:only', async () => {
const label = page.locator('#client-only');
await expect(label).toBeVisible();

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

@ -64,6 +64,24 @@ test.only('Solid', async ({ page, astro }) => {
await expect(count).toHaveText('1');
});
await test.step('client:media', async () => {
const counter = page.locator('#counter-media');
await expect(counter).toBeVisible();
const count = counter.locator('pre');
await expect(count).toHaveText('0');
// test 1: not hydrated on large screens
const inc = counter.locator('.increment');
await inc.click();
await expect(count).toHaveText('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 test.step('HMR', async () => {
const afterHMR = onAfterHMR(page);

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

@ -64,6 +64,24 @@ test.only('Svelte', async ({ page, astro }) => {
await expect(count).toHaveText('1');
});
await test.step('client:media', async () => {
const counter = page.locator('#counter-media');
await expect(counter).toBeVisible();
const count = counter.locator('pre');
await expect(count).toHaveText('0');
// test 1: not hydrated on large screens
const inc = counter.locator('.increment');
await inc.click();
await expect(count).toHaveText('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 test.step('HMR', async () => {
const afterHMR = onAfterHMR(page);

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

@ -64,6 +64,24 @@ test.only('Vue', async ({ page, astro }) => {
await expect(count).toHaveText('1');
});
await test.step('client:media', async () => {
const counter = page.locator('astro-root:nth-of-type(4)');
await expect(counter).toBeVisible();
const count = counter.locator('pre');
await expect(count).toHaveText('0');
// test 1: not hydrated on large screens
const inc = counter.locator('.increment');
await inc.click();
await expect(count).toHaveText('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 test.step('HMR', async () => {
const afterHMR = onAfterHMR(page);