Merge remote-tracking branch 'origin/upstream'

.e2e/augments.d.ts

@@ -1,4 +1,4 @@
-import { useNuxtApp } from 'nuxt/app'
+import type { useNuxtApp } from 'nuxt/app'
 
 declare global {
  interface Window {

.e2e/package.json

@@ -9,6 +9,6 @@
  "ui": "playwright test --ui"
  },
  "devDependencies": {
- "@playwright/test": "1.47.2"
+ "@playwright/test": "1.48.0"
  }
 }

.e2e/playwright.config.ts

@@ -1,19 +1,19 @@
-import { defineConfig, devices } from "@playwright/test"
+import { defineConfig, devices } from '@playwright/test'
 
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
- testDir: "./tests",
+ testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 3 : 1,
  workers: process.env.CI ? 1 : undefined,
- reporter: [["html", { open: "never" }]],
- snapshotPathTemplate: "{testDir}/../__snapshots__/{testFilePath}/{arg}{ext}",
+ reporter: [['html', { open: 'never' }]],
+ snapshotPathTemplate: '{testDir}/../__snapshots__/{testFilePath}/{arg}{ext}',
  use: {
- trace: "on-first-retry",
- screenshot: "only-on-failure",
+ trace: 'on-first-retry',
+ screenshot: 'only-on-failure',
  },
  expect: {
  toHaveScreenshot: {
@@ -22,8 +22,8 @@ export default defineConfig({
  },
  projects: [
  {
- name: "chromium",
- use: { ...devices["Desktop Chrome"] },
+ name: 'chromium',
+ use: { ...devices['Desktop Chrome'] },
  },
  ],
 })

.e2e/tests/advanced/config-extends.spec.ts

@@ -1,78 +1,78 @@
-import { getSettingsForDeployment } from "@/utils"
-import { test, expect } from "@playwright/test"
+import { test, expect } from '@playwright/test'
+import { getSettingsForDeployment } from '@/utils'
 
 test.use(getSettingsForDeployment('config-extends'))
 
-test("App config merged", async ({ page }) => {
+test('App config merged', async ({ page }) => {
  // TODO need a unique locator
- await page.goto("/")
+ await page.goto('/')
  await expect(
  page.getByText(
- '"bar": "user", "baz": "base", "array": [ "user", "user", "user" ], "arrayNested": { "nested": { "array": [ "base", "base", "base" ] } }, "foo": "user" }'
- )
+ '"bar": "user", "baz": "base", "array": [ "user", "user", "user" ], "arrayNested": { "nested": { "array": [ "base", "base", "base" ] } }, "foo": "user" }',
+ ),
  ).toBeVisible()
 })
 
-test.fixme("Runtime config is shown", async ({ page }) => {
+test.fixme('Runtime config is shown', async () => {
  // TODO it is not shown
 })
 
-test("Base button is shown", async ({ page }) => {
- await page.goto("/")
+test('Base button is shown', async ({ page }) => {
+ await page.goto('/')
  await expect(
- page.getByRole("button", { name: "Base Button" })
- ).toHaveAttribute("role", "button")
+ page.getByRole('button', { name: 'Base Button' }),
+ ).toHaveAttribute('role', 'button')
 })
 
-test("Fancy button from base layer is overridden", async ({ page }) => {
- await page.goto("/")
- await expect(page.getByRole("button", { name: "Fancy Button" })).toHaveClass(
- "border p-2 fancy-button"
+test('Fancy button from base layer is overridden', async ({ page }) => {
+ await page.goto('/')
+ await expect(page.getByRole('button', { name: 'Fancy Button' })).toHaveClass(
+ 'border p-2 fancy-button',
  )
 })
 
-test("UI button is shown", async ({ page }) => {
- await page.goto("/")
- await expect(page.getByRole("button", { name: "UI Button" })).toHaveClass(
- "ui-button"
+test('UI button is shown', async ({ page }) => {
+ await page.goto('/')
+ await expect(page.getByRole('button', { name: 'UI Button' })).toHaveClass(
+ 'ui-button',
  )
 })
 
 test('"useFoo()" composable and "getBar()" util is usable from base layer', async ({
  page,
 }) => {
- await page.goto("/")
- await expect(page.getByText("foo bar")).toBeVisible()
+ await page.goto('/')
+ await expect(page.getByText('foo bar')).toBeVisible()
 })
 
-test("Plugin from base layer is registered", async ({ page }) => {
- await page.goto("/")
+test('Plugin from base layer is registered', async ({ page }) => {
+ await page.goto('/')
  await expect(
- page.getByText("String generated from my auto-imported plugin!")
+ page.getByText('String generated from my auto-imported plugin!'),
  ).toBeVisible()
 })
 
 test('"api/hello" endpoint works', async ({ page }) => {
- await page.goto("/api/hello")
- await expect(page.getByText("hello")).toBeVisible()
+ await page.goto('/api/hello')
+ await expect(page.getByText('hello')).toBeVisible()
 })
 
 test('"api/base" endpoint works', async ({ page }) => {
- await page.goto("/api/base")
- await expect(page.getByText("base")).toBeVisible()
+ await page.goto('/api/base')
+ await expect(page.getByText('base')).toBeVisible()
 })
 
-test("page inherited from base layer loads", async ({ page }) => {
- await page.goto("/foo")
- await expect(page.getByText("Hello from extended page !")).toBeVisible()
+test('page inherited from base layer loads', async ({ page }) => {
+ await page.goto('/foo')
+ await expect(page.getByText('Hello from extended page !')).toBeVisible()
 })
 
-test("Middleware for inherited page loads", async ({ page }) => {
- const inheritedMiddlewareLoggedPromise = page.waitForEvent("console", {
- predicate: (message) =>
- message.text() === "Hello from extended middleware !",
+test('Middleware for inherited page loads', async ({ page }) => {
+ const inheritedMiddlewareLoggedPromise = page.waitForEvent('console', {
+ predicate: message =>
+ message.text() === 'Hello from extended middleware !',
  })
 
- await page.goto("/foo")
+ await page.goto('/foo')
  await inheritedMiddlewareLoggedPromise
 })

.e2e/tests/advanced/error-handling.spec.ts

@@ -1,126 +1,127 @@
-import { getSettingsForDeployment } from "@/utils"
-import { test, expect, Page } from "@playwright/test"
+import type { Page } from '@playwright/test'
+import { test, expect } from '@playwright/test'
+import { getSettingsForDeployment } from '@/utils'
 
 test.use(getSettingsForDeployment('error-handling'))
 
-test("Home page loads without any errors", async ({ page }) => {
- await page.goto("/")
- await expect(page.getByText("Current route: /")).toBeVisible()
+test('Home page loads without any errors', async ({ page }) => {
+ await page.goto('/')
+ await expect(page.getByText('Current route: /')).toBeVisible()
 })
 
-test("Error in setup() runs the global error handler and vue:error hook", async ({
+test('Error in setup() runs the global error handler and vue:error hook', async ({
  page,
 }) => {
  const globalErrorHandlerPromise = waitForGlobalErrorHandlerToRan(page)
  const vueErrorHookPromise = waitForVueErrorHookToRan(page)
 
- await page.goto("?setup")
+ await page.goto('?setup')
 
  await globalErrorHandlerPromise
  await vueErrorHookPromise
 })
 
-test("Error in mounted() runs the global error handler and vue:error hook", async ({
+test('Error in mounted() runs the global error handler and vue:error hook', async ({
  page,
 }) => {
  const globalErrorHandlerPromise = waitForGlobalErrorHandlerToRan(page)
  const vueErrorHookPromise = waitForVueErrorHookToRan(page)
 
- await page.goto("?mounted")
+ await page.goto('?mounted')
 
  await globalErrorHandlerPromise
  await vueErrorHookPromise
 })
 
-test("404 error triggers app:error hook and navigates to the error page", async ({
+test('404 error triggers app:error hook and navigates to the error page', async ({
  page,
 }) => {
- await page.goto("/")
+ await page.goto('/')
 
  const appErrorHookPromise = waitForAppErrorHookToRan(page)
- await page.getByRole("link", { name: "404" }).click()
+ await page.getByRole('link', { name: '404' }).click()
  await appErrorHookPromise
 
  await expect(
- page.getByRole("heading", { name: "Page not found: /404" })
+ page.getByRole('heading', { name: 'Page not found: /404' }),
  ).toBeVisible()
- await expect(page.getByText("There was an error")).toBeVisible()
+ await expect(page.getByText('There was an error')).toBeVisible()
 })
 
-test("Clearing the error on the 404 page navigates home", async ({ page }) => {
- await page.goto("/404")
+test('Clearing the error on the 404 page navigates home', async ({ page }) => {
+ await page.goto('/404')
 
- await page.getByRole("button", { name: "Clear error" }).click()
+ await page.getByRole('button', { name: 'Clear error' }).click()
 
- await expect(page.getByRole("link", { name: "Home" })).toBeVisible()
+ await expect(page.getByRole('link', { name: 'Home' })).toBeVisible()
 })
 
 test('Clicking on "Navigate home" on the 404 page navigates home', async ({
  page,
 }) => {
- await page.goto("/404")
+ await page.goto('/404')
 
- await page.getByRole("link", { name: "Navigate home" }).click()
+ await page.getByRole('link', { name: 'Navigate home' }).click()
 
- await expect(page.getByRole("link", { name: "Home" })).toBeVisible()
+ await expect(page.getByRole('link', { name: 'Home' })).toBeVisible()
 })
 
-test("Error in middleware navigates to the error page and triggers the app:error hook", async ({
+test('Error in middleware navigates to the error page and triggers the app:error hook', async ({
  page,
 }) => {
- await page.goto("/")
+ await page.goto('/')
 
  const appErrorHookPromise = waitForAppErrorHookToRan(page)
- await page.getByRole("link", { name: "Middleware" }).click()
+ await page.getByRole('link', { name: 'Middleware' }).click()
  await appErrorHookPromise
 
  await expect(
- page.getByRole("heading", { name: "error in middleware" })
+ page.getByRole('heading', { name: 'error in middleware' }),
  ).toBeVisible()
- await expect(page.getByText("There was an error")).toBeVisible()
+ await expect(page.getByText('There was an error')).toBeVisible()
 })
 
 test('Clicking on the "Trigger fatal error" button navigates to the error page and triggers the app:error hook', async ({
  page,
 }) => {
- await page.goto("/")
+ await page.goto('/')
  await page.waitForFunction(() => window.useNuxtApp?.().isHydrating === false)
 
  const appErrorHookPromise = waitForAppErrorHookToRan(page)
- await page.getByRole("button", { name: "Trigger fatal error" }).click()
+ await page.getByRole('button', { name: 'Trigger fatal error' }).click()
  await appErrorHookPromise
 
- await expect(page.getByText("There was an error")).toBeVisible()
+ await expect(page.getByText('There was an error')).toBeVisible()
 })
 
-test("Triggering non-fatal error with button runs the global error handler and vue:error hook", async ({
+test('Triggering non-fatal error with button runs the global error handler and vue:error hook', async ({
  page,
 }) => {
- await page.goto("/")
+ await page.goto('/')
  await page.waitForFunction(() => window.useNuxtApp?.().isHydrating === false)
 
  const globalErrorHandlerPromise = waitForGlobalErrorHandlerToRan(page)
  const vueErrorHookPromise = waitForVueErrorHookToRan(page)
 
- await page.getByRole("button", { name: "Trigger non-fatal error" }).click()
+ await page.getByRole('button', { name: 'Trigger non-fatal error' }).click()
  await globalErrorHandlerPromise
  await vueErrorHookPromise
 })
 
 function waitForGlobalErrorHandlerToRan(page: Page) {
- return page.waitForEvent("console", {
- predicate: (message) => message.text() === "global error handler",
+ return page.waitForEvent('console', {
+ predicate: message => message.text() === 'global error handler',
  })
 }
 
 function waitForVueErrorHookToRan(page: Page) {
- return page.waitForEvent("console", {
- predicate: (message) => message.text() === "vue:error",
+ return page.waitForEvent('console', {
+ predicate: message => message.text() === 'vue:error',
  })
 }
 
 function waitForAppErrorHookToRan(page: Page) {
- return page.waitForEvent("console", {
- predicate: (message) => message.text() === "app:error",
+ return page.waitForEvent('console', {
+ predicate: message => message.text() === 'app:error',
  })
 }

.e2e/tests/advanced/jsx.spec.ts

@@ -1,17 +1,17 @@
-import { getSettingsForDeployment } from "@/utils"
-import { test, expect } from "@playwright/test"
+import { test, expect } from '@playwright/test'
+import { getSettingsForDeployment } from '@/utils'
 
 test.use(getSettingsForDeployment('jsx'))
 test.beforeEach(async ({ page }) => {
- await page.goto("/")
+ await page.goto('/')
 })
 
-test("Inline components load", async ({ page }) => {
- await expect(page.getByText("Nuxt 3")).toBeVisible()
+test('Inline components load', async ({ page }) => {
+ await expect(page.getByText('Nuxt 3')).toBeVisible()
 })
 
 test('JSX component from "component" folder loads', async ({ page }) => {
  await expect(
- page.getByText("This is an external JSX component")
+ page.getByText('This is an external JSX component'),
  ).toBeVisible()
 })