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

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

@ -11,20 +11,8 @@ const someProps = {
<!-- Head Stuff --> <!-- Head Stuff -->
</head> </head>
<body> <body>
<Counter id="counter-idle" {...someProps} client:idle> <Counter client:visible>
<h1>Hello, client:idle!</h1> <h1>Hello, Svelte!</h1>
</Counter> </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>
</body> </body>
</html> </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 // https://astro.build/config
export default defineConfig({ 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", "version": "0.0.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@astrojs/vue": "workspace:*", "@astrojs/vue": "workspace:*",
"astro": "workspace:*", "astro": "workspace:*"
"vue": "^3.2.33"
} }
} }

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

@ -1,40 +1,47 @@
<template> <template>
<div class="counter"> <div :id="id" class="counter">
<button class="decrement" @click="subtract()">-</button> <h1><slot /></h1>
<pre>{{ count }}</pre> <button class="decrement" @click="subtract()">-</button>
<button class="increment" @click="add()">+</button> <Result :value="count" />
</div> <button class="increment" @click="add()">+</button>
<div class="counter-message"> </div>
<slot />
</div>
</template> </template>
<script> <script>
import { ref } from 'vue'; 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);
return { import Result from './Result.vue';
count,
add, export default {
subtract, 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> </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'; import Counter from '../components/Counter.vue'
const someProps = {
count: 0,
};
--- ---
<html lang="en">
<html>
<head> <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> </head>
<body> <body>
<Counter id="counter-idle" {...someProps} client:idle> <main>
<h1>Hello, client:idle!</h1> <Counter id="server-only" start="0">No Client</Counter>
</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="counter-load" {...someProps} client:load> <Counter id="client-load-dup" start="0" client:load>Hello, client:load!</Counter>
<h1>Hello, client:load!</h1> <!-- Test island deduplication account for non-render affecting props. -->
</Counter> <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>
<Counter id="counter-visible" {...someProps} client:visible> <!-- Test that two client:visibles have unique uids -->
<h1>Hello, client:visible!</h1> <Counter id="client-visible" start="0" client:visible>Hello, client:visible!</Counter>
</Counter> <Counter id="client-media" start="0" client:media="(max-width: 50rem)">Hello, client:media!</Counter>
</main>
<Counter id="counter-media" {...someProps} client:media="(max-width: 50em)">
<h1>Hello, client:media!</h1>
</Counter>
</body> </body>
</html> </html>

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

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

2
pnpm-lock.yaml generated
View file

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