diff --git a/packages/astro/e2e/fixtures/svelte/src/components/Counter.svelte b/packages/astro/e2e/fixtures/svelte/src/components/Counter.svelte index fb7e2aafc..2f4c07339 100644 --- a/packages/astro/e2e/fixtures/svelte/src/components/Counter.svelte +++ b/packages/astro/e2e/fixtures/svelte/src/components/Counter.svelte @@ -1,6 +1,5 @@ -
- +
+ 
{ count }
- +
diff --git a/packages/astro/e2e/fixtures/svelte/src/pages/index.astro b/packages/astro/e2e/fixtures/svelte/src/pages/index.astro index befd951c2..92b8db23e 100644 --- a/packages/astro/e2e/fixtures/svelte/src/pages/index.astro +++ b/packages/astro/e2e/fixtures/svelte/src/pages/index.astro @@ -11,20 +11,8 @@ const someProps = { - -

Hello, client:idle!

- - - -

Hello, client:load!

- - - -

Hello, client:visible!

- - - -

Hello, client:media!

- + +

Hello, Svelte!

+ diff --git a/packages/astro/e2e/fixtures/vue/astro.config.mjs b/packages/astro/e2e/fixtures/vue/astro.config.mjs index 881930612..94bdad87f 100644 --- a/packages/astro/e2e/fixtures/vue/astro.config.mjs +++ b/packages/astro/e2e/fixtures/vue/astro.config.mjs @@ -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') + } + } + })], }); diff --git a/packages/astro/e2e/fixtures/vue/package.json b/packages/astro/e2e/fixtures/vue/package.json index 86b0c0673..2322b5d2d 100644 --- a/packages/astro/e2e/fixtures/vue/package.json +++ b/packages/astro/e2e/fixtures/vue/package.json @@ -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:*" } } diff --git a/packages/astro/e2e/fixtures/vue/src/components/Counter.vue b/packages/astro/e2e/fixtures/vue/src/components/Counter.vue index e07f8f181..6516d1ee5 100644 --- a/packages/astro/e2e/fixtures/vue/src/components/Counter.vue +++ b/packages/astro/e2e/fixtures/vue/src/components/Counter.vue @@ -1,40 +1,47 @@ - - diff --git a/packages/astro/e2e/fixtures/vue/src/components/Result.vue b/packages/astro/e2e/fixtures/vue/src/components/Result.vue new file mode 100644 index 000000000..90bf218b2 --- /dev/null +++ b/packages/astro/e2e/fixtures/vue/src/components/Result.vue @@ -0,0 +1,16 @@ + + + diff --git a/packages/astro/e2e/fixtures/vue/src/pages/index.astro b/packages/astro/e2e/fixtures/vue/src/pages/index.astro index 411567562..40619841f 100644 --- a/packages/astro/e2e/fixtures/vue/src/pages/index.astro +++ b/packages/astro/e2e/fixtures/vue/src/pages/index.astro @@ -1,30 +1,33 @@ --- -import Counter from '../components/Counter.vue'; - -const someProps = { - count: 0, -}; +import Counter from '../components/Counter.vue' --- - - + - + + + Vue component + - -

Hello, client:idle!

- - - -

Hello, client:load!

- - - -

Hello, client:visible!

- - - -

Hello, client:media!

- +
+ No Client + Hello, client:load! + + Hello, client:load! + + Hello, client:load! + Hello, client:idle! + + Hello, client:visible! + Hello, client:media! +
diff --git a/packages/astro/e2e/vue.test.js b/packages/astro/e2e/vue.test.js index 89acc4c58..7b55baf5a 100644 --- a/packages/astro/e2e/vue.test.js +++ b/packages/astro/e2e/vue.test.js @@ -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,21 +52,47 @@ 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!'); }); }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2763f0ff9..9b90f6e80 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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: