mirror of https://github.com/nuxt/nuxt.git
test: add more tests (#3532)
This commit is contained in:
Anthony Fu
GitHub
parent
cbb2e9ce2b
commit
40d325e5c5
|
|
@ -8,30 +8,133 @@ describe('fixtures:basic', async () => {
|
|||
server: true
|
||||
})
|
||||
|
||||
it('server api', async () => {
|
||||
expect(await $fetch('/api/hello')).toBe('Hello API')
|
||||
expect(await $fetch('/api/hey')).toEqual({
|
||||
foo: 'bar',
|
||||
baz: 'qux'
|
||||
describe('server api', () => {
|
||||
it('should serialize', async () => {
|
||||
expect(await $fetch('/api/hello')).toBe('Hello API')
|
||||
expect(await $fetch('/api/hey')).toEqual({
|
||||
foo: 'bar',
|
||||
baz: 'qux'
|
||||
})
|
||||
})
|
||||
|
||||
it('should preserve states', async () => {
|
||||
expect(await $fetch('/api/counter')).toEqual({ count: 0 })
|
||||
expect(await $fetch('/api/counter')).toEqual({ count: 1 })
|
||||
expect(await $fetch('/api/counter')).toEqual({ count: 2 })
|
||||
expect(await $fetch('/api/counter')).toEqual({ count: 3 })
|
||||
})
|
||||
})
|
||||
|
||||
it('render index.html', async () => {
|
||||
const index = await $fetch('/')
|
||||
describe('pages', () => {
|
||||
it('render index', async () => {
|
||||
const html = await $fetch('/')
|
||||
|
||||
// Snapshot
|
||||
// expect(index).toMatchInlineSnapshot()
|
||||
// Snapshot
|
||||
// expect(html).toMatchInlineSnapshot()
|
||||
|
||||
// should render text
|
||||
expect(index).toContain('Hello Nuxt 3!')
|
||||
// should render <Head> components
|
||||
expect(index).toContain('<title>Basic fixture</title>')
|
||||
// should inject runtime config
|
||||
expect(index).toContain('RuntimeConfig: 123')
|
||||
// should import components
|
||||
expect(index).toContain('This is a custom component with a named export.')
|
||||
// composables auto import
|
||||
expect(index).toContain('auto imported from ~/components/foo.ts')
|
||||
expect(index).toContain('auto imported from ~/components/useBar.ts')
|
||||
// should render text
|
||||
expect(html).toContain('Hello Nuxt 3!')
|
||||
// should render <Head> components
|
||||
expect(html).toContain('<title>Basic fixture</title>')
|
||||
// should inject runtime config
|
||||
expect(html).toContain('RuntimeConfig | testConfig: 123')
|
||||
// composables auto import
|
||||
expect(html).toContain('Composable | foo: auto imported from ~/components/foo.ts')
|
||||
expect(html).toContain('Composable | bar: auto imported from ~/components/useBar.ts')
|
||||
// plugins
|
||||
expect(html).toContain('Plugin | myPlugin: Injected by my-plugin')
|
||||
// should import components
|
||||
expect(html).toContain('This is a custom component with a named export.')
|
||||
})
|
||||
|
||||
it('render 404', async () => {
|
||||
const html = await $fetch('/not-found')
|
||||
|
||||
// Snapshot
|
||||
// expect(html).toMatchInlineSnapshot()
|
||||
|
||||
expect(html).toContain('[...slug].vue')
|
||||
expect(html).toContain('404 at not-found')
|
||||
})
|
||||
|
||||
it('/nested/[foo]/[bar].vue', async () => {
|
||||
const html = await $fetch('/nested/one/two')
|
||||
|
||||
// Snapshot
|
||||
// expect(html).toMatchInlineSnapshot()
|
||||
|
||||
expect(html).toContain('nested/[foo]/[bar].vue')
|
||||
expect(html).toContain('foo: one')
|
||||
expect(html).toContain('bar: two')
|
||||
})
|
||||
|
||||
it('/nested/[foo]/index.vue', async () => {
|
||||
const html = await $fetch('/nested/foobar')
|
||||
|
||||
// TODO: should resolved to same entry
|
||||
// const html2 = await $fetch('/nested/foobar/index')
|
||||
// expect(html).toEqual(html2)
|
||||
|
||||
// Snapshot
|
||||
// expect(html).toMatchInlineSnapshot()
|
||||
|
||||
expect(html).toContain('nested/[foo]/index.vue')
|
||||
expect(html).toContain('foo: foobar')
|
||||
})
|
||||
|
||||
it('/nested/[foo]/user-[group].vue', async () => {
|
||||
const html = await $fetch('/nested/foobar/user-admin')
|
||||
|
||||
// Snapshot
|
||||
// expect(html).toMatchInlineSnapshot()
|
||||
|
||||
expect(html).toContain('nested/[foo]/user-[group].vue')
|
||||
expect(html).toContain('foo: foobar')
|
||||
expect(html).toContain('group: admin')
|
||||
})
|
||||
})
|
||||
|
||||
describe('middlewares', () => {
|
||||
it('should redirect to index with global middleware', async () => {
|
||||
const html = await $fetch('/redirect/')
|
||||
|
||||
// Snapshot
|
||||
// expect(html).toMatchInlineSnapshot()
|
||||
|
||||
expect(html).toContain('Hello Nuxt 3!')
|
||||
})
|
||||
|
||||
it('should inject auth', async () => {
|
||||
const html = await $fetch('/auth')
|
||||
|
||||
// Snapshot
|
||||
// expect(html).toMatchInlineSnapshot()
|
||||
|
||||
expect(html).toContain('auth.vue')
|
||||
expect(html).toContain('auth: Injected by injectAuth middleware')
|
||||
})
|
||||
|
||||
it('should not inject auth', async () => {
|
||||
const html = await $fetch('/no-auth')
|
||||
|
||||
// Snapshot
|
||||
// expect(html).toMatchInlineSnapshot()
|
||||
|
||||
expect(html).toContain('no-auth.vue')
|
||||
expect(html).toContain('auth: ')
|
||||
expect(html).not.toContain('Injected by injectAuth middleware')
|
||||
})
|
||||
})
|
||||
|
||||
describe('layouts', () => {
|
||||
it('should apply custom layout', async () => {
|
||||
const html = await $fetch('/with-layout')
|
||||
|
||||
// Snapshot
|
||||
// expect(html).toMatchInlineSnapshot()
|
||||
|
||||
expect(html).toContain('with-layout.vue')
|
||||
expect(html).toContain('Custom Layout:')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
Custom Layout:
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export default defineNuxtRouteMiddleware((to) => {
|
||||
to.meta.auth = 'Injected by injectAuth middleware'
|
||||
})
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
export default defineNuxtRouteMiddleware((to) => {
|
||||
if (to.path.startsWith('/redirect/')) {
|
||||
return navigateTo(to.path.slice('/redirect/'.length - 1))
|
||||
}
|
||||
})
|
||||
|
|
@ -8,7 +8,6 @@ export default defineNuxtConfig({
|
|||
output: { dir: process.env.NITRO_OUTPUT_DIR }
|
||||
},
|
||||
publicRuntimeConfig: {
|
||||
// @ts-ignore TODO: Fix schema types
|
||||
testConfig: '123'
|
||||
},
|
||||
modules: ['~/modules/example'],
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>[...slug].vue</div>
|
||||
<div>404 at {{ $route.params.slug[0] }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<script setup>
|
||||
definePageMeta({
|
||||
middleware: 'inject-auth'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>auth.vue</div>
|
||||
<div>auth: {{ $route.meta.auth }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -4,9 +4,10 @@
|
|||
<Title>Basic fixture</Title>
|
||||
</Head>
|
||||
<h1>Hello Nuxt 3!</h1>
|
||||
<div>RuntimeConfig: {{ config.testConfig }}</div>
|
||||
<div>{{ foo }}</div>
|
||||
<div>{{ bar }}</div>
|
||||
<div>RuntimeConfig | testConfig: {{ config.testConfig }}</div>
|
||||
<div>Composable | foo: {{ foo }}</div>
|
||||
<div>Composable | bar: {{ bar }}</div>
|
||||
<div>Plugin | myPlugin: {{ $myPlugin() }}</div>
|
||||
<CustomComponent />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>nested/[foo]/[bar].vue</div>
|
||||
<div>foo: {{ $route.params.foo }}</div>
|
||||
<div>bar: {{ $route.params.bar }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>nested/[foo]/index.vue</div>
|
||||
<div>foo: {{ $route.params.foo }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>nested/[foo]/user-[group].vue</div>
|
||||
<div>foo: {{ $route.params.foo }}</div>
|
||||
<div>group: {{ $route.params.group }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<script setup>
|
||||
definePageMeta({
|
||||
// middleware: 'inject-auth'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>no-auth.vue</div>
|
||||
<div>auth: {{ $route.meta.auth }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<script setup>
|
||||
definePageMeta({
|
||||
layout: 'custom'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>with-layout.vue</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export default defineNuxtPlugin(() => {
|
||||
return {
|
||||
provide: {
|
||||
myPlugin: () => 'Injected by my-plugin'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
let counter = 0
|
||||
|
||||
export default () => ({ count: counter++ })
|
||||
|
|
@ -40,9 +40,10 @@ describe('aliases', () => {
|
|||
})
|
||||
|
||||
describe('middleware', () => {
|
||||
it('recognises named middleware', () => {
|
||||
definePageMeta({ middleware: 'test-middleware' })
|
||||
definePageMeta({ middleware: 'pascal-case' })
|
||||
it('recognizes named middleware', () => {
|
||||
definePageMeta({ middleware: 'inject-auth' })
|
||||
// @ts-expect-error ignore global middleware
|
||||
definePageMeta({ middleware: 'redirect' })
|
||||
// @ts-expect-error Invalid middleware
|
||||
definePageMeta({ middleware: 'invalid-middleware' })
|
||||
})
|
||||
|
|
@ -62,8 +63,8 @@ describe('middleware', () => {
|
|||
})
|
||||
|
||||
describe('layouts', () => {
|
||||
it('recognises named layouts', () => {
|
||||
definePageMeta({ layout: 'test-layout' })
|
||||
it('recognizes named layouts', () => {
|
||||
definePageMeta({ layout: 'custom' })
|
||||
definePageMeta({ layout: 'pascal-case' })
|
||||
// @ts-expect-error Invalid layout
|
||||
definePageMeta({ layout: 'invalid-layout' })
|
||||
|
|
|
|||
Loading…
Reference in New Issue