test: add test suites for extends features (#3862)

test/basic.test.ts

@@ -1,6 +1,6 @@
 import { fileURLToPath } from 'url'
 import { describe, expect, it } from 'vitest'
-import { setup, $fetch, startServer } from '@nuxt/test-utils'
+import { setup, fetch, $fetch, startServer } from '@nuxt/test-utils'
 
 await setup({
   rootDir: fileURLToPath(new URL('./fixtures/basic', import.meta.url)),
@@ -157,27 +157,66 @@ describe('reactivity transform', () => {
 })
 
 describe('extends support', () => {
-  describe('pages', () => {
+  describe('layouts & pages', () => {
-    it('extends foo/pages/index.vue', async () => {
+    it('extends foo/layouts/default & foo/pages/index', async () => {
       const html = await $fetch('/foo')
-      expect(html).toContain('Hello from extended page of foo!')
+      expect(html).toContain('Extended layout from foo')
+      expect(html).toContain('Extended page from foo')
     })
 
-    it('extends bar/pages/override.vue over foo/pages/override.vue', async () => {
+    it('extends [bar/layouts/override & bar/pages/override] over [foo/layouts/override & foo/pages/override]', async () => {
       const html = await $fetch('/override')
+      expect(html).toContain('Extended layout from bar')
       expect(html).toContain('Extended page from bar')
     })
   })
 
+  describe('components', () => {
+    it('extends foo/components/ExtendsFoo', async () => {
+      const html = await $fetch('/foo')
+      expect(html).toContain('Extended component from foo')
+    })
+
+    it('extends bar/components/ExtendsOverride over foo/components/ExtendsOverride', async () => {
+      const html = await $fetch('/override')
+      expect(html).toContain('Extended component from bar')
+    })
+  })
+
   describe('middlewares', () => {
     it('extends foo/middleware/foo', async () => {
-      const html = await $fetch('/with-middleware')
+      const html = await $fetch('/foo')
-      expect(html).toContain('Injected by extended middleware')
+      expect(html).toContain('Middleware | foo: Injected by extended middleware from foo')
     })
 
-    it('extends bar/middleware/override.vue over foo/middleware/override.vue', async () => {
+    it('extends bar/middleware/override over foo/middleware/override', async () => {
-      const html = await $fetch('/with-middleware-override')
+      const html = await $fetch('/override')
-      expect(html).toContain('Injected by extended middleware from bar')
+      expect(html).toContain('Middleware | override: Injected by extended middleware from bar')
+    })
+  })
+
+  describe('composables', () => {
+    it('extends foo/composables/foo', async () => {
+      const html = await $fetch('/foo')
+      expect(html).toContain('Composable | useExtendsFoo: foo')
+    })
+  })
+
+  describe('plugins', () => {
+    it('extends foo/plugins/foo', async () => {
+      const html = await $fetch('/foo')
+      expect(html).toContain('Plugin | foo: String generated from foo plugin!')
+    })
+  })
+
+  describe('server', () => {
+    it('extends foo/server/api/foo', async () => {
+      expect(await $fetch('/api/foo')).toBe('foo')
+    })
+
+    it('extends foo/server/middleware/foo', async () => {
+      const { headers } = await fetch('/')
+      expect(headers.get('injected-header')).toEqual('foo')
     })
   })
 })

test/fixtures/basic/extends/bar/components/ExtendsOverride.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Extended component from bar</div>
+</template>

test/fixtures/basic/extends/bar/layouts/override.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <div>Extended layout from bar</div>
+    <NuxtPage />
+  </div>
+</template>

test/fixtures/basic/extends/bar/pages/override.vue

@@ -1,3 +1,14 @@
+<script setup>
+definePageMeta({
+  layout: 'override',
+  middleware: 'override'
+})
+</script>
+
 <template>
-  <div>Extended page from bar</div>
+  <div>
+    <div>Extended page from bar</div>
+    <div>Middleware | override: {{ $route.meta.override }}</div>
+    <ExtendsOverride />
+  </div>
 </template>

test/fixtures/basic/extends/foo/components/ExtendsFoo.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Extended component from foo</div>
+</template>

test/fixtures/basic/extends/foo/components/ExtendsOverride.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>This component should be overriden by bar</div>
+</template>

test/fixtures/basic/extends/foo/composables/foo.ts

@@ -0,0 +1 @@
+export const useExtendsFoo = () => 'foo'

test/fixtures/basic/extends/foo/layouts/default.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <div>Extended layout from foo</div>
+    <NuxtPage />
+  </div>
+</template>

test/fixtures/basic/extends/foo/layouts/override.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>This layout should be overriden by bar</div>
+</template>

test/fixtures/basic/extends/foo/middleware/foo.ts

@@ -1,3 +1,3 @@
 export default defineNuxtRouteMiddleware((to) => {
-  to.meta.foo = 'Injected by extended middleware'
+  to.meta.foo = 'Injected by extended middleware from foo'
 })

test/fixtures/basic/extends/foo/middleware/override.ts

@@ -1,3 +1,3 @@
 export default defineNuxtRouteMiddleware((to) => {
-  to.meta.override = 'Injected by extended middleware from foo'
+  to.meta.override = 'This middleware should be overriden by bar'
 })

test/fixtures/basic/extends/foo/pages/foo.vue

@@ -1,3 +1,17 @@
+<script setup>
+definePageMeta({
+  middleware: 'foo'
+})
+
+const foo = useExtendsFoo()
+</script>
+
 <template>
-  <div>Hello from extended page of foo!</div>
+  <div>
+    <div>Extended page from foo</div>
+    <div>Middleware | foo: {{ $route.meta.foo }}</div>
+    <div>Composable | useExtendsFoo: {{ foo }}</div>
+    <div>Plugin | foo: {{ $foo() }}</div>
+    <ExtendsFoo />
+  </div>
 </template>

test/fixtures/basic/extends/foo/pages/override.vue

@@ -1,3 +1,3 @@
 <template>
-  <div>Extended page from foo</div>
+  <div>This page should be overriden by bar</div>
 </template>

test/fixtures/basic/extends/foo/pages/with-middleware-override.vue

@@ -1,9 +0,0 @@
-<script setup>
-definePageMeta({
-  middleware: 'override'
-})
-</script>
-
-<template>
-  <div>{{ $route.meta.override }}</div>
-</template>

test/fixtures/basic/extends/foo/pages/with-middleware.vue

@@ -1,9 +0,0 @@
-<script setup>
-definePageMeta({
-  middleware: 'foo'
-})
-</script>
-
-<template>
-  <div>{{ $route.meta.foo }}</div>
-</template>

test/fixtures/basic/extends/foo/plugins/foo.ts

@@ -0,0 +1,7 @@
+export default defineNuxtPlugin(() => {
+  return {
+    provide: {
+      foo: () => 'String generated from foo plugin!'
+    }
+  }
+})

test/fixtures/basic/extends/foo/server/api/foo.ts

@@ -0,0 +1 @@
+export default () => 'foo'

test/fixtures/basic/extends/foo/server/middleware/foo.ts

@@ -0,0 +1,6 @@
+import type { ServerResponse } from 'http'
+
+export default (_, res: ServerResponse, next) => {
+  res.setHeader('injected-header', 'foo')
+  next()
+}