nuxt-spec 0.2.0-alpha.8 → 0.2.0

package/config/index.mjs

@@ -1,79 +1,79 @@
-// this is the default Vitest config object
-// based on https://nuxt.com/docs/4.x/getting-started/testing#setup
-// `projects=false` can be used to suspend the default usage of "projects" in Vitest config
-
-import { onConsoleLog } from './utils/warnings.mjs' // filter out unnecessary logs
-import { mergeConfig } from './utils/merge.mjs' // defu-based merge function
-import { defineConfig } from 'vitest/config'
-import { defineVitestProject } from '@nuxt/test-utils/config'
-import { playwright } from '@vitest/browser-playwright'
-import vue from '@vitejs/plugin-vue'
-
-export async function loadVitestConfig(userVitestConfig, projects = true) {
-  const baseConfig = {
-    test: {
-      // filter-out unnecessary console logs coming from Vitest
-      // when the import is resolved, unnecessary stderr logs are also filtered-out
-      // as a side-effect
-      onConsoleLog,
-    },
-  }
-
-  if (projects === true) {
-    baseConfig.test.projects = [
-      // default fallback to catch tests directly in /test folder
-      {
-        test: {
-          name: 'default',
-          include: ['{test,tests}/**/*.{test,spec}.ts', '!test/{browser,e2e,nuxt,unit}/**'],
-          environment: 'node',
-        },
-      },
-      // proposed setup for Unit tests
-      {
-        test: {
-          name: 'node',
-          include: ['test/unit/**/*.{test,spec}.ts'],
-          environment: 'node',
-        },
-      },
-      // proposed setup for Nuxt component tests
-      await defineVitestProject({
-        test: {
-          name: 'nuxt',
-          include: ['test/nuxt/**/*.{test,spec}.ts'],
-          environment: 'nuxt',
-        },
-      }),
-      // proposed setup for classic E2E tests (node-based, using @nuxt/test-utils)
-      {
-        test: {
-          name: 'e2e',
-          include: ['test/e2e/**/*.{test,spec}.ts'],
-          environment: 'node',
-        },
-      },
-      // proposed setup for browser component tests (with Playwright runner)
-      {
-        // vue plugin is required for proper imports resolution
-        plugins: [vue()],
-        test: {
-          name: 'browser',
-          include: ['test/browser/**/*.{test,spec}.ts'],
-          environment: 'node',
-          browser: {
-            provider: playwright(),
-            enabled: true,
-            headless: true,
-            instances: [{
-              browser: 'chromium',
-              viewport: { width: 1280, height: 720 },
-            }],
-          },
-        },
-      },
-    ]
-  }
-
-  return mergeConfig(userVitestConfig, defineConfig(baseConfig))
-}
+// this is the default Vitest config object
+// based on https://nuxt.com/docs/4.x/getting-started/testing#setup
+// `projects=false` can be used to suspend the default usage of "projects" in Vitest config
+
+import { onConsoleLog } from './utils/warnings.mjs' // filter out unnecessary logs
+import { mergeConfig } from './utils/merge.mjs' // defu-based merge function
+import { defineConfig } from 'vitest/config'
+import { defineVitestProject } from '@nuxt/test-utils/config'
+import { playwright } from '@vitest/browser-playwright'
+import vue from '@vitejs/plugin-vue'
+
+export async function loadVitestConfig(userVitestConfig, projects = true) {
+  const baseConfig = {
+    test: {
+      // filter-out unnecessary console logs coming from Vitest
+      // when the import is resolved, unnecessary stderr logs are also filtered-out
+      // as a side-effect
+      onConsoleLog,
+    },
+  }
+
+  if (projects === true) {
+    baseConfig.test.projects = [
+      // default fallback to catch tests directly in /test folder
+      {
+        test: {
+          name: 'default',
+          include: ['{test,tests}/**/*.{test,spec}.ts', '!test/{browser,e2e,nuxt,unit}/**'],
+          environment: 'node',
+        },
+      },
+      // proposed setup for Unit tests
+      {
+        test: {
+          name: 'node',
+          include: ['test/unit/**/*.{test,spec}.ts'],
+          environment: 'node',
+        },
+      },
+      // proposed setup for Nuxt component tests
+      await defineVitestProject({
+        test: {
+          name: 'nuxt',
+          include: ['test/nuxt/**/*.{test,spec}.ts'],
+          environment: 'nuxt',
+        },
+      }),
+      // proposed setup for classic E2E tests (node-based, using @nuxt/test-utils)
+      {
+        test: {
+          name: 'e2e',
+          include: ['test/e2e/**/*.{test,spec}.ts'],
+          environment: 'node',
+        },
+      },
+      // proposed setup for browser component tests (with Playwright runner)
+      {
+        // vue plugin is required for proper imports resolution
+        plugins: [vue()],
+        test: {
+          name: 'browser',
+          include: ['test/browser/**/*.{test,spec}.ts'],
+          environment: 'node',
+          browser: {
+            provider: playwright(),
+            enabled: true,
+            headless: true,
+            instances: [{
+              browser: 'chromium',
+              viewport: { width: 1280, height: 720 },
+            }],
+          },
+        },
+      },
+    ]
+  }
+
+  return mergeConfig(userVitestConfig, defineConfig(baseConfig))
+}

package/config/templates/pnpm-workspace.yaml.template

@@ -1,4 +1,4 @@
-# settings for Nuxt & pnpm
-
-# https://pnpm.io/settings#shamefullyhoist
-shamefullyHoist: true
+# settings for Nuxt & pnpm
+
+# https://pnpm.io/settings#shamefullyhoist
+shamefullyHoist: true

package/config/templates/vitest.config.ts.template

@@ -1,5 +1,5 @@
-import { loadVitestConfig } from 'nuxt-spec/config'
-
-export default loadVitestConfig({
-  // custom config here
-})
+import { loadVitestConfig } from 'nuxt-spec/config'
+
+export default loadVitestConfig({
+  // custom config here
+})

package/config/utils/merge.mjs

@@ -1,43 +1,43 @@
-// custom merger function based on defu
-// allows working with the "projects" array properly
-// user-defined config overrides are merged by "name"
-
-// for consistent and predictable results, passing "include" or "browser.instances"
-// will result in OVERRIDE instead of merging with nuxt-spec defaults
-
-import { createDefu } from 'defu'
-
-// in real Vitest config, "name" is nested inside another "test" object
-const getProjectName = (project) => project?.name ?? project?.test?.name
-
-export const mergeConfig = createDefu((obj, key, value) => {
-  if (key === 'projects' && Array.isArray(obj[key]) && Array.isArray(value)) {
-    const defaults = obj[key]
-    const overrides = value
-
-    // override default values if user-defined config specifies them
-    obj[key] = defaults.map((defaultProject) => {
-      const override = overrides.find(o => getProjectName(o) === getProjectName(defaultProject))
-      return override ? mergeProject(override, defaultProject) : defaultProject
-    })
-
-    // add any user projects that don't exist in defaults
-    for (const override of overrides) {
-      if (!defaults.some(d => getProjectName(d) === getProjectName(override))) {
-        obj[key].push(override)
-      }
-    }
-
-    return true
-  }
-})
-
-// Keys where user value should fully replace the default, not merge
-const overrideKeys = new Set(['include', 'instances'])
-
-const mergeProject = createDefu((obj, key, value) => {
-  if (overrideKeys.has(key)) {
-    obj[key] = value
-    return true
-  }
-})
+// custom merger function based on defu
+// allows working with the "projects" array properly
+// user-defined config overrides are merged by "name"
+
+// for consistent and predictable results, passing "include" or "browser.instances"
+// will result in OVERRIDE instead of merging with nuxt-spec defaults
+
+import { createDefu } from 'defu'
+
+// in real Vitest config, "name" is nested inside another "test" object
+const getProjectName = project => project?.name ?? project?.test?.name
+
+export const mergeConfig = createDefu((obj, key, value) => {
+  if (key === 'projects' && Array.isArray(obj[key]) && Array.isArray(value)) {
+    const defaults = obj[key]
+    const overrides = value
+
+    // override default values if user-defined config specifies them
+    obj[key] = defaults.map((defaultProject) => {
+      const override = overrides.find(o => getProjectName(o) === getProjectName(defaultProject))
+      return override ? mergeProject(override, defaultProject) : defaultProject
+    })
+
+    // add any user projects that don't exist in defaults
+    for (const override of overrides) {
+      if (!defaults.some(d => getProjectName(d) === getProjectName(override))) {
+        obj[key].push(override)
+      }
+    }
+
+    return true
+  }
+})
+
+// Keys where user value should fully replace the default, not merge
+const overrideKeys = new Set(['include', 'instances'])
+
+const mergeProject = createDefu((obj, key, value) => {
+  if (overrideKeys.has(key)) {
+    obj[key] = value
+    return true
+  }
+})

package/config/utils/warnings.mjs

@@ -1,26 +1,32 @@
-const messageFilters = [
-  // remove once @nuxt/test-utils starts depending on Vitest 4.1
-  // https://github.com/nuxt/test-utils/pull/1620
-  'Importing from "vitest/environments" is deprecated',
-  // Node+Windows false positive
-  // https://github.com/nuxt/icon/issues/140
-  'Use of deprecated trailing slash pattern mapping',
-  // remove once Vue stops considering <Suspense> experimental
-  '<Suspense> is an experimental feature',
-]
-
-// 1) filter-out unnecessary stderr logs coming from Vitest
-// (applied as side-effect on import)
-
-const _stderrWrite = process.stderr.write.bind(process.stderr)
-process.stderr.write = (chunk, ...args) => {
-  if (typeof chunk === 'string' && messageFilters.some(f => chunk.includes(f))) return true
-  return _stderrWrite(chunk, ...args)
-}
-
-// 2) filter-out unnecessary console logs coming from Vitest
-// (used as Vitest onConsoleLog hook)
-
-export function onConsoleLog(log) {
-  if (messageFilters.some(f => log.includes(f))) return false
-}
+const messageFilters = [
+  // remove once @nuxt/test-utils starts depending on Vitest 4.1
+  // https://github.com/nuxt/test-utils/pull/1620
+  'Importing from "vitest/environments" is deprecated',
+  // Node+Windows false positive
+  // https://github.com/nuxt/icon/issues/140
+  'Use of deprecated trailing slash pattern mapping',
+  // remove once Vue stops considering <Suspense> experimental
+  '<Suspense> is an experimental feature',
+]
+
+// 1) filter-out unnecessary stderr/stdout logs coming from Vitest
+// (applied as side-effect on import)
+
+const _stderrWrite = process.stderr.write.bind(process.stderr)
+process.stderr.write = (chunk, ...args) => {
+  if (typeof chunk === 'string' && messageFilters.some(f => chunk.includes(f))) return true
+  return _stderrWrite(chunk, ...args)
+}
+
+const _stdoutWrite = process.stdout.write.bind(process.stdout)
+process.stdout.write = (chunk, ...args) => {
+  if (typeof chunk === 'string' && messageFilters.some(f => chunk.includes(f))) return true
+  return _stdoutWrite(chunk, ...args)
+}
+
+// 2) filter-out unnecessary console logs coming from Vitest
+// (used as Vitest onConsoleLog hook)
+
+export function onConsoleLog(log) {
+  if (messageFilters.some(f => log.includes(f))) return false
+}

package/nuxt.config.ts

@@ -1,14 +1,19 @@
-export default defineNuxtConfig({
-  modules: [
-    '@nuxt/eslint',
-    '@nuxt/test-utils/module',
-  ],
-
-  compatibilityDate: '2026-03-15',
-
-  eslint: {
-    config: {
-      stylistic: true,
-    },
-  },
-})
+export default defineNuxtConfig({
+  modules: [
+    '@nuxt/eslint',
+    '@nuxt/test-utils/module',
+  ],
+
+  // exclude file used for explicit exports (nuxt-spec/components) from Nuxt resolution
+  components: {
+    dirs: [{ path: '~/components', ignore: ['index.ts'] }],
+  },
+
+  compatibilityDate: '2026-03-15',
+
+  eslint: {
+    config: {
+      stylistic: true,
+    },
+  },
+})

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "nuxt-spec",
-  "version": "0.2.0-alpha.8",
+  "version": "0.2.0",
   "description": "Test-pack layer for Nuxt Applications",
-  "repository": "github:AloisSeckar/nuxt-spec",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AloisSeckar/nuxt-spec.git"
+  },
   "license": "MIT",
   "type": "module",
   "main": "./nuxt.config.ts",
   "bin": {
-    "nuxt-spec": "./bin/cli.js"
+    "nuxt-spec": "bin/cli.js"
   },
   "exports": {
     ".": "./nuxt.config.ts",
@@ -20,6 +23,10 @@
       "types": "./utils/index.d.ts",
       "import": "./utils/index.ts",
       "default": "./utils/index.ts"
+    },
+    "./components": {
+      "import": "./app/components/index.ts",
+      "default": "./app/components/index.ts"
     }
   },
   "files": [
@@ -27,7 +34,8 @@
     "bin",
     "config",
     "public",
-    "utils"
+    "utils",
+    "nuxt.config.ts"
   ],
   "dependencies": {
     "@nuxt/eslint": "1.15.2",

package/utils/e2e.ts

@@ -1,30 +1,30 @@
-import { createPage, url } from '@nuxt/test-utils/e2e'
-import type { NuxtPage } from '@nuxt/test-utils'
-
-// visit a specified URL and return the page instance for further interaction
-export async function gotoPage(pageName: string): Promise<NuxtPage> {
-  const page = await createPage()
-  const urlPath = pageName.startsWith('/') ? url(pageName) : url(`/${pageName}`)
-  await page.goto(urlPath, { waitUntil: 'hydration' })
-  return page
-}
-
-// extract HTML content from specified element on a given page
-export async function getDataHtml(page: NuxtPage | string, element: string): Promise<string> {
-  const pageInstance = typeof page === 'string' ? await gotoPage(page) : page
-  const dataDiv = pageInstance.locator(element)
-  return await dataDiv.innerHTML()
-}
-
-// execute an API call and extract HTML content from the result
-// (assumes clickable element that triggers the request
-// and separate element for displaying the response)
-export async function getAPIResultHtml(page: NuxtPage | string, triggerElement: string, targetUrl: string, responseElement: string) {
-  const pageInstance = typeof page === 'string' ? await gotoPage(page) : page
-  await pageInstance.click(triggerElement)
-  await pageInstance.waitForResponse(response =>
-    response.url().includes(targetUrl) && response.ok(),
-  )
-  const resultDiv = pageInstance.locator(responseElement)
-  return await resultDiv.innerHTML()
-}
+import { createPage, url } from '@nuxt/test-utils/e2e'
+import type { NuxtPage } from '@nuxt/test-utils'
+
+// visit a specified URL and return the page instance for further interaction
+export async function gotoPage(pageName: string): Promise<NuxtPage> {
+  const page = await createPage()
+  const urlPath = pageName.startsWith('/') ? url(pageName) : url(`/${pageName}`)
+  await page.goto(urlPath, { waitUntil: 'hydration' })
+  return page
+}
+
+// extract HTML content from specified element on a given page
+export async function getDataHtml(page: NuxtPage | string, element: string): Promise<string> {
+  const pageInstance = typeof page === 'string' ? await gotoPage(page) : page
+  const dataDiv = pageInstance.locator(element)
+  return await dataDiv.innerHTML()
+}
+
+// execute an API call and extract HTML content from the result
+// (assumes clickable element that triggers the request
+// and separate element for displaying the response)
+export async function getAPIResultHtml(page: NuxtPage | string, triggerElement: string, targetUrl: string, responseElement: string) {
+  const pageInstance = typeof page === 'string' ? await gotoPage(page) : page
+  await pageInstance.click(triggerElement)
+  await pageInstance.waitForResponse(response =>
+    response.url().includes(targetUrl) && response.ok(),
+  )
+  const resultDiv = pageInstance.locator(responseElement)
+  return await resultDiv.innerHTML()
+}

package/utils/index.d.ts

@@ -1,70 +1,70 @@
-import type { NuxtPage } from '@nuxt/test-utils'
-
-/**
- * Visit a specified URL and return the page instance for further interaction.
- *
- * @param pageName - Path segment appended to the base URL (e.g. `'about'` → `/<about>`)
- * @returns Playwright page instance after navigation and hydration
- */
-export declare function gotoPage(pageName: string): Promise<NuxtPage>
-
-/**
- * Extract inner HTML content from a specified element on a given page.
- *
- * @param page - Playwright page instance, or a page name string (will call `gotoPage` internally)
- * @param element - CSS selector identifying the target element
- * @returns The inner HTML of the matched element
- */
-export declare function getDataHtml(page: NuxtPage | string, element: string): Promise<string>
-
-/**
- * Execute an API call by clicking a trigger element, wait for a successful
- * response matching the target URL, then extract the inner HTML from the
- * response element.
- *
- * @param page - Playwright page instance, or a page name string (will call `gotoPage` internally)
- * @param triggerElement - CSS selector for the clickable element that triggers the API request
- * @param targetUrl - Substring matched against the response URL to identify the expected API call
- * @param responseElement - CSS selector for the element displaying the API response
- * @returns The inner HTML of the response element
- */
-export declare function getAPIResultHtml(
-  page: NuxtPage | string,
-  triggerElement: string,
-  targetUrl: string,
-  responseElement: string,
-): Promise<string>
-
-export interface CompareScreenshotOptions {
-  /** Name of the PNG file used for baseline storage and comparison (defaults to route and `index.png` for `/`) */
-  fileName?: string
-  /** Directory for baseline/current screenshots, relative to project root (defaults to `test/e2e`) */
-  targetDir?: string
-  /** CSS selector for a specific element to capture (defaults to full page) */
-  selector?: string
-  /** Max ratio of different pixels (0–1). Default: 0 (exact match) */
-  maxDiffPixelRatio?: number
-  /** Max absolute number of different pixels. Takes precedence over `maxDiffPixelRatio` when set. Default: 0 (exact match) */
-  maxDiffPixels?: number
-  /** Per-pixel color distance threshold (0–1). Lower = stricter. Default: 0.1 */
-  threshold?: number
-}
-
-/**
- * Capture a browser screenshot and compare it against a stored baseline PNG.
- * When run with `-u` / `--update`, or when no baseline exists yet, the current
- * screenshot is saved as the new baseline.
- *
- * Comparison uses pixelmatch for perceptual pixel diffing. By default,
- * zero differing pixels are allowed (exact match). Set `maxDiffPixelRatio`
- * or `maxDiffPixels` to tolerate cross-platform rendering differences.
- *
- * @param page - Playwright page instance obtained from `createPage()`
- * @param options - extra options (see `CompareScreenshotOptions`)
- * @returns `true` when the screenshot matches the baseline (or a new baseline was saved)
- * @throws Fails the current Vitest test when a mismatch is detected
- */
-export declare function compareScreenshot(
-  page: NuxtPage,
-  options?: CompareScreenshotOptions,
-): Promise<boolean>
+import type { NuxtPage } from '@nuxt/test-utils'
+
+/**
+ * Visit a specified URL and return the page instance for further interaction.
+ *
+ * @param pageName - Path segment appended to the base URL (e.g. `'about'` → `/<about>`)
+ * @returns Playwright page instance after navigation and hydration
+ */
+export declare function gotoPage(pageName: string): Promise<NuxtPage>
+
+/**
+ * Extract inner HTML content from a specified element on a given page.
+ *
+ * @param page - Playwright page instance, or a page name string (will call `gotoPage` internally)
+ * @param element - CSS selector identifying the target element
+ * @returns The inner HTML of the matched element
+ */
+export declare function getDataHtml(page: NuxtPage | string, element: string): Promise<string>
+
+/**
+ * Execute an API call by clicking a trigger element, wait for a successful
+ * response matching the target URL, then extract the inner HTML from the
+ * response element.
+ *
+ * @param page - Playwright page instance, or a page name string (will call `gotoPage` internally)
+ * @param triggerElement - CSS selector for the clickable element that triggers the API request
+ * @param targetUrl - Substring matched against the response URL to identify the expected API call
+ * @param responseElement - CSS selector for the element displaying the API response
+ * @returns The inner HTML of the response element
+ */
+export declare function getAPIResultHtml(
+  page: NuxtPage | string,
+  triggerElement: string,
+  targetUrl: string,
+  responseElement: string,
+): Promise<string>
+
+export interface CompareScreenshotOptions {
+  /** Name of the PNG file used for baseline storage and comparison (defaults to route and `index.png` for `/`) */
+  fileName?: string
+  /** Directory for baseline/current screenshots, relative to project root (defaults to `test/e2e`) */
+  targetDir?: string
+  /** CSS selector for a specific element to capture (defaults to full page) */
+  selector?: string
+  /** Max ratio of different pixels (0–1). Default: 0 (exact match) */
+  maxDiffPixelRatio?: number
+  /** Max absolute number of different pixels. Takes precedence over `maxDiffPixelRatio` when set. Default: 0 (exact match) */
+  maxDiffPixels?: number
+  /** Per-pixel color distance threshold (0–1). Lower = stricter. Default: 0.1 */
+  threshold?: number
+}
+
+/**
+ * Capture a browser screenshot and compare it against a stored baseline PNG.
+ * When run with `-u` / `--update`, or when no baseline exists yet, the current
+ * screenshot is saved as the new baseline.
+ *
+ * Comparison uses pixelmatch for perceptual pixel diffing. By default,
+ * zero differing pixels are allowed (exact match). Set `maxDiffPixelRatio`
+ * or `maxDiffPixels` to tolerate cross-platform rendering differences.
+ *
+ * @param page - Playwright page instance obtained from `createPage()`
+ * @param options - extra options (see `CompareScreenshotOptions`)
+ * @returns `true` when the screenshot matches the baseline (or a new baseline was saved)
+ * @throws Fails the current Vitest test when a mismatch is detected
+ */
+export declare function compareScreenshot(
+  page: NuxtPage,
+  options?: CompareScreenshotOptions,
+): Promise<boolean>

package/utils/index.ts

@@ -1,12 +1,12 @@
-import { gotoPage, getDataHtml, getAPIResultHtml } from './e2e'
-import { compareScreenshot } from './screenshot'
-import type { CompareScreenshotOptions } from './screenshot'
-
-export {
-  compareScreenshot,
-  gotoPage,
-  getDataHtml,
-  getAPIResultHtml,
-}
-
-export type { CompareScreenshotOptions }
+import { gotoPage, getDataHtml, getAPIResultHtml } from './e2e'
+import { compareScreenshot } from './screenshot'
+import type { CompareScreenshotOptions } from './screenshot'
+
+export {
+  compareScreenshot,
+  gotoPage,
+  getDataHtml,
+  getAPIResultHtml,
+}
+
+export type { CompareScreenshotOptions }