diff options
Diffstat (limited to 'packages/integrations/vue/test')
5 files changed, 77 insertions, 5 deletions
diff --git a/packages/integrations/vue/test/app-entrypoint.test.js b/packages/integrations/vue/test/app-entrypoint.test.js index 4f4f389d1..b20e7be7e 100644 --- a/packages/integrations/vue/test/app-entrypoint.test.js +++ b/packages/integrations/vue/test/app-entrypoint.test.js @@ -1,6 +1,8 @@ import { loadFixture } from './test-utils.js'; import { expect } from 'chai'; +import { load as cheerioLoad } from 'cheerio'; import { parseHTML } from 'linkedom'; + describe('App Entrypoint', () => { /** @type {import('./test-utils').Fixture} */ let fixture; @@ -13,11 +15,21 @@ describe('App Entrypoint', () => { }); it('loads during SSR', async () => { - const data = await fixture.readFile('/index.html'); - const { document } = parseHTML(data); - const bar = document.querySelector('#foo > #bar'); - expect(bar).not.to.be.undefined; - expect(bar.textContent).to.eq('works'); + const html = await fixture.readFile('/index.html'); + const $ = cheerioLoad(html); + + // test 1: basic component renders + expect($('#foo > #bar').text()).to.eq('works'); + + // test 2: component with multiple script blocks renders and exports + // values from non setup block correctly + expect($('#multiple-script-blocks').text()).to.equal('2 4'); + + // test 3: component using generics renders + expect($('#generics').text()).to.equal('generic'); + + // test 4: component using generics and multiple script blocks renders + expect($('#generics-and-blocks').text()).to.equal('1 3!!!'); }); it('setup included in renderer bundle', async () => { diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Generics.vue b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Generics.vue new file mode 100644 index 000000000..00ceea09e --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Generics.vue @@ -0,0 +1,13 @@ +<script lang="ts" setup generic="T extends 'generic' | 'not-generic'"> +interface GenericComponentProps { + value: T +} + +defineProps<GenericComponentProps>() +</script> + +<template> + <div id="generics"> + {{ value }} + </div> +</template> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/GenericsAndBlocks.vue b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/GenericsAndBlocks.vue new file mode 100644 index 000000000..7ecfdc7a0 --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/GenericsAndBlocks.vue @@ -0,0 +1,18 @@ +<script lang="ts"> +export const customFormatter = (num: number) => `${num * 3}!!!` + +export type FormatNumber<T> = (num: T) => string; +</script> + +<script lang="ts" setup generic="T extends number, Formatter extends FormatNumber<T>"> +const props = defineProps<{ + value: T, + formatter: Formatter +}>() +</script> + +<template> + <div id="generics-and-blocks"> + {{ value }} {{ props.formatter(props.value) }} + </div> +</template> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/MultipleScriptBlocks.vue b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/MultipleScriptBlocks.vue new file mode 100644 index 000000000..ac2ec0a3c --- /dev/null +++ b/packages/integrations/vue/test/fixtures/app-entrypoint/src/components/MultipleScriptBlocks.vue @@ -0,0 +1,18 @@ +<script lang="ts"> +export const doubleNumber = (num: number) => num * 2 +</script> + +<script lang="ts" setup> +defineProps({ + value: { + type: Number, + required: true + } +}) +</script> + +<template> + <div id="multiple-script-blocks"> + {{ doubleNumber(value) }} <slot /> + </div> +</template> diff --git a/packages/integrations/vue/test/fixtures/app-entrypoint/src/pages/index.astro b/packages/integrations/vue/test/fixtures/app-entrypoint/src/pages/index.astro index 3240cbe0f..a517f8a97 100644 --- a/packages/integrations/vue/test/fixtures/app-entrypoint/src/pages/index.astro +++ b/packages/integrations/vue/test/fixtures/app-entrypoint/src/pages/index.astro @@ -1,5 +1,8 @@ --- import Foo from '../components/Foo.vue'; +import MultipleScriptBlocks, { doubleNumber } from '../components/MultipleScriptBlocks.vue'; +import GenericComponent from '../components/Generics.vue'; +import GenericsAndBlocks, { customFormatter } from '../components/GenericsAndBlocks.vue'; --- <html> @@ -8,5 +11,13 @@ import Foo from '../components/Foo.vue'; </head> <body> <Foo client:load /> + + <MultipleScriptBlocks value={1}> + {doubleNumber(2)} + </MultipleScriptBlocks> + + <GenericComponent value={'generic'} /> + + <GenericsAndBlocks value={1} formatter={customFormatter} /> </body> </html> |