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

fixing up the Vue e2e tests

Browse source
This commit is contained in:
Tony Sullivan 2022-05-16 12:14:09 -05:00
parent e6f3dd57aa
commit 7b85d40f25
9 changed files with 146 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,5 @@
<script>
export let id = undefined;
export let count = 0;
let count = 0;
function add() {
count += 1;
@ -11,10 +10,10 @@
}
</script>
<div class="counter" id={id}>
<button class="decrement" on:click={subtract}>-</button>
<div class="counter">
<button on:click={subtract}>-</button>
<pre>{ count }</pre>
<button class="increment" on:click={add}>+</button>
<button on:click={add}>+</button>
</div>
<div class="message">
<slot />

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

@ -11,20 +11,8 @@ const someProps = {
<!-- 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>
<Counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
<h1>Hello, client:media!</h1>
<Counter client:visible>
<h1>Hello, Svelte!</h1>
</Counter>
</body>
</html>

8
packages/astro/e2e/fixtures/vue/astro.config.mjs
View file

@ -3,5 +3,11 @@ import vue from '@astrojs/vue';
// https://astro.build/config
export default defineConfig({
integrations: [vue()],
integrations: [vue({
template: {
compilerOptions: {
isCustomElement: tag => tag.includes('my-button')
}
}
})],
});

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

@ -1,10 +1,9 @@
{
"name": "@e2e/vue",
"name": "@test/vue-component",
"version": "0.0.0",
"private": true,
"dependencies": {
"@astrojs/vue": "workspace:*",
"astro": "workspace:*",
"vue": "^3.2.33"
"astro": "workspace:*"
}
}

53
packages/astro/e2e/fixtures/vue/src/components/Counter.vue
View file

@ -1,40 +1,47 @@
<template>
<div class="counter">
<div :id="id" class="counter">
<h1><slot /></h1>
<button class="decrement" @click="subtract()">-</button>
<pre>{{ count }}</pre>
<Result :value="count" />
<button class="increment" @click="add()">+</button>
</div>
<div class="counter-message">
<slot />
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const add = () => (count.value = count.value + 1);
const subtract = () => (count.value = count.value - 1);
import Result from './Result.vue';
export default {
components: {
Result
},
props: {
id: {
type: String,
required: true
},
start: {
type: String,
required: true
},
stepSize: {
type: String,
default: "1"
}
},
setup(props) {
const id = props.id;
const count = ref(parseInt(props.start))
const stepSize = ref(parseInt(props.stepSize))
const add = () => (count.value = count.value + stepSize.value);
const subtract = () => (count.value = count.value - stepSize.value);
return {
count,
id,
add,
subtract,
};
},
};
</script>
<style>
.counter {
display: grid;
font-size: 2em;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 2em;
place-items: center;
}
.counter-message {
text-align: center;
}
</style>

16
packages/astro/e2e/fixtures/vue/src/components/Result.vue Normal file
View file

@ -0,0 +1,16 @@
<template>
<pre>{{ value }}</pre>
<my-button>Click Me</my-button>
</template>
<script>
export default {
props: {
value: {
type: Number,
required: true
}
}
}
</script>

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

@ -1,30 +1,33 @@
---
import Counter from '../components/Counter.vue';
const someProps = {
count: 0,
};
import Counter from '../components/Counter.vue'
---
<html>
<html lang="en">
<head>
<!-- Head Stuff -->
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width"
/>
<title>Vue component</title>
<style>
:global(:root) {
font-family: system-ui;
padding: 1em;
}
</style>
</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>
<Counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
<h1>Hello, client:media!</h1>
</Counter>
<main>
<Counter id="server-only" start="0">No Client</Counter>
<Counter id="client-load" start="0" client:load>Hello, client:load!</Counter>
<!-- Test island deduplication, i.e. same UID as the component above. -->
<Counter id="client-load-dup" start="0" client:load>Hello, client:load!</Counter>
<!-- Test island deduplication account for non-render affecting props. -->
<Counter id="client-load-step" start="0" step-size="2" client:load>Hello, client:load!</Counter>
<Counter id="client-idle" start="0" client:idle>Hello, client:idle!</Counter>
<!-- Test that two client:visibles have unique uids -->
<Counter id="client-visible" start="0" client:visible>Hello, client:visible!</Counter>
<Counter id="client-media" start="0" client:media="(max-width: 50rem)">Hello, client:media!</Counter>
</main>
</body>
</html>

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

@ -25,8 +25,21 @@ test.afterEach(async ({ astro }) => {
test.only('Vue', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/'));
await test.step('client:only', async () => {
const counter = page.locator('#server-only');
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('0');
});
await test.step('client:idle', async () => {
const counter = page.locator('astro-root:nth-of-type(1)');
const counter = page.locator('#client-idle');
await expect(counter).toBeVisible();
const count = counter.locator('pre');
@ -39,22 +52,48 @@ test.only('Vue', async ({ page, astro }) => {
});
await test.step('client:load', async () => {
const counter = page.locator('astro-root:nth-of-type(2)');
const counter = page.locator('#client-load');
const counterDup = page.locator('#client-load-dup');
const counterStep = page.locator('#client-load-step');
await expect(counter).toBeVisible();
await expect(counterDup).toBeVisible();
await expect(counterStep).toBeVisible();
const count = counter.locator('pre');
await expect(count).toHaveText('0');
const countDup = counterDup.locator('pre');
const countStep = counterStep.locator('pre');
const inc = counter.locator('.increment');
await inc.click();
const countInc = counter.locator('.increment');
const countDupInc = counterDup.locator('.increment');
const countStepInc = counterStep.locator('.increment');
await countInc.click();
await expect(count).toHaveText('1');
await expect(countDup).toHaveText('0');
await expect(countStep).toHaveText('0');
await countDupInc.click();
await expect(count).toHaveText('1');
await expect(countDup).toHaveText('1');
await expect(countStep).toHaveText('0');
await countStepInc.click();
await countStepInc.click();
await expect(count).toHaveText('1');
await expect(countDup).toHaveText('1');
await expect(countStep).toHaveText('4');
});
await test.step('client:visible', async () => {
const counter = page.locator('astro-root:nth-of-type(3)');
const counter = page.locator('#client-visible');
await expect(counter).toBeVisible();
await counter.scrollIntoViewIfNeeded();
const count = counter.locator('pre');
await expect(count).toHaveText('0');
@ -65,7 +104,7 @@ test.only('Vue', async ({ page, astro }) => {
});
await test.step('client:media', async () => {
const counter = page.locator('astro-root:nth-of-type(4)');
const counter = page.locator('#client-media');
await expect(counter).toBeVisible();
const count = counter.locator('pre');
@ -88,12 +127,12 @@ test.only('Vue', async ({ page, astro }) => {
// 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:visible!', 'Hello, updated client:visible!')
);
await afterHMR;
const count = page.locator('astro-root:nth-of-type(1) pre');
await expect(count).toHaveText('5');
const label = page.locator('#client-visible h1');
await expect(label).toHaveText('Hello, updated client:visible!');
});
});

2
pnpm-lock.yaml
View file

@ -727,11 +727,9 @@ importers:
specifiers:
'@astrojs/vue': workspace:*
astro: workspace:*
vue: ^3.2.33
dependencies:
'@astrojs/vue': link:../../../../integrations/vue
astro: link:../../..
vue: 3.2.33
packages/astro/test/fixtures/0-css:
specifiers: