npm - ads-fe - Versions diffs - 0.0.1 - Mend

ads-fe 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (608) hide show

package/skills/vitest/references/advanced-environments.md ADDED Viewed

@@ -0,0 +1,264 @@
+---
+name: test-environments
+description: Configure environments like jsdom, happy-dom for browser APIs
+---
+# Test Environments
+## Available Environments
+- `node` (default) - Node.js environment
+- `jsdom` - Browser-like with DOM APIs
+- `happy-dom` - Faster alternative to jsdom
+- `edge-runtime` - Vercel Edge Runtime
+## Configuration
+```ts
+// vitest.config.ts
+defineConfig({
+  test: {
+    environment: 'jsdom',
+    // Environment-specific options
+    environmentOptions: {
+      jsdom: {
+        url: 'http://localhost',
+      },
+    },
+  },
+})
+```
+## Installing Environment Packages
+```bash
+# jsdom
+npm i -D jsdom
+# happy-dom (faster, fewer APIs)
+npm i -D happy-dom
+```
+## Per-File Environment
+Use magic comment at top of file:
+```ts
+// @vitest-environment jsdom
+import { expect, test } from 'vitest'
+test('DOM test', () => {
+  const div = document.createElement('div')
+  expect(div).toBeInstanceOf(HTMLDivElement)
+})
+```
+## jsdom Environment
+Full browser environment simulation:
+```ts
+// @vitest-environment jsdom
+test('DOM manipulation', () => {
+  document.body.innerHTML = '<div id="app"></div>'
+  const app = document.getElementById('app')
+  app.textContent = 'Hello'
+  expect(app.textContent).toBe('Hello')
+})
+test('window APIs', () => {
+  expect(window.location.href).toBeDefined()
+  expect(localStorage).toBeDefined()
+})
+```
+### jsdom Options
+```ts
+defineConfig({
+  test: {
+    environmentOptions: {
+      jsdom: {
+        url: 'http://localhost:3000',
+        html: '<!DOCTYPE html><html><body></body></html>',
+        userAgent: 'custom-agent',
+        resources: 'usable',
+      },
+    },
+  },
+})
+```
+## happy-dom Environment
+Faster but fewer APIs:
+```ts
+// @vitest-environment happy-dom
+test('basic DOM', () => {
+  const el = document.createElement('div')
+  el.className = 'test'
+  expect(el.className).toBe('test')
+})
+```
+## Multiple Environments per Project
+Use projects for different environments:
+```ts
+defineConfig({
+  test: {
+    projects: [
+      {
+        test: {
+          name: 'unit',
+          include: ['tests/unit/**/*.test.ts'],
+          environment: 'node',
+        },
+      },
+      {
+        test: {
+          name: 'dom',
+          include: ['tests/dom/**/*.test.ts'],
+          environment: 'jsdom',
+        },
+      },
+    ],
+  },
+})
+```
+## Custom Environment
+Create custom environment package:
+```ts
+// vitest-environment-custom/index.ts
+import type { Environment } from 'vitest/runtime'
+export default <Environment>{
+  name: 'custom',
+  viteEnvironment: 'ssr', // or 'client'
+  setup() {
+    // Setup global state
+    globalThis.myGlobal = 'value'
+    return {
+      teardown() {
+        delete globalThis.myGlobal
+      },
+    }
+  },
+}
+```
+Use with:
+```ts
+defineConfig({
+  test: {
+    environment: 'custom',
+  },
+})
+```
+## Environment with VM
+For full isolation:
+```ts
+export default <Environment>{
+  name: 'isolated',
+  viteEnvironment: 'ssr',
+  async setupVM() {
+    const vm = await import('node:vm')
+    const context = vm.createContext()
+    return {
+      getVmContext() {
+        return context
+      },
+      teardown() {},
+    }
+  },
+  setup() {
+    return { teardown() {} }
+  },
+}
+```
+## Browser Mode (Separate from Environments)
+For real browser testing, use Vitest Browser Mode:
+```ts
+defineConfig({
+  test: {
+    browser: {
+      enabled: true,
+      name: 'chromium', // or 'firefox', 'webkit'
+      provider: 'playwright',
+    },
+  },
+})
+```
+## CSS and Assets
+In jsdom/happy-dom, configure CSS handling:
+```ts
+defineConfig({
+  test: {
+    css: true, // Process CSS
+    // Or with options
+    css: {
+      include: /\.module\.css$/,
+      modules: {
+        classNameStrategy: 'non-scoped',
+      },
+    },
+  },
+})
+```
+## Fixing External Dependencies
+If external deps fail with CSS/asset errors:
+```ts
+defineConfig({
+  test: {
+    server: {
+      deps: {
+        inline: ['problematic-package'],
+      },
+    },
+  },
+})
+```
+## Key Points
+- Default is `node` - no browser APIs
+- Use `jsdom` for full browser simulation
+- Use `happy-dom` for faster tests with basic DOM
+- Per-file environment via `// @vitest-environment` comment
+- Use projects for multiple environment configurations
+- Browser Mode is for real browser testing, not environment
+<!--
+Source references:
+- https://vitest.dev/guide/environment.html
+-->

package/skills/vitest/references/advanced-projects.md ADDED Viewed

@@ -0,0 +1,300 @@
+---
+name: projects-workspaces
+description: Multi-project configuration for monorepos and different test types
+---
+# Projects
+Run different test configurations in the same Vitest process.
+## Basic Projects Setup
+```ts
+// vitest.config.ts
+defineConfig({
+  test: {
+    projects: [
+      // Glob patterns for config files
+      'packages/*',
+      // Inline config
+      {
+        test: {
+          name: 'unit',
+          include: ['tests/unit/**/*.test.ts'],
+          environment: 'node',
+        },
+      },
+      {
+        test: {
+          name: 'integration',
+          include: ['tests/integration/**/*.test.ts'],
+          environment: 'jsdom',
+        },
+      },
+    ],
+  },
+})
+```
+## Monorepo Pattern
+```ts
+defineConfig({
+  test: {
+    projects: [
+      // Each package has its own vitest.config.ts
+      'packages/core',
+      'packages/cli',
+      'packages/utils',
+    ],
+  },
+})
+```
+Package config:
+```ts
+// packages/core/vitest.config.ts
+import { defineConfig } from 'vitest/config'
+export default defineConfig({
+  test: {
+    name: 'core',
+    include: ['src/**/*.test.ts'],
+    environment: 'node',
+  },
+})
+```
+## Different Environments
+Run same tests in different environments:
+```ts
+defineConfig({
+  test: {
+    projects: [
+      {
+        test: {
+          name: 'happy-dom',
+          root: './shared-tests',
+          environment: 'happy-dom',
+          setupFiles: ['./setup.happy-dom.ts'],
+        },
+      },
+      {
+        test: {
+          name: 'node',
+          root: './shared-tests',
+          environment: 'node',
+          setupFiles: ['./setup.node.ts'],
+        },
+      },
+    ],
+  },
+})
+```
+## Browser + Node Projects
+```ts
+defineConfig({
+  test: {
+    projects: [
+      {
+        test: {
+          name: 'unit',
+          include: ['tests/unit/**/*.test.ts'],
+          environment: 'node',
+        },
+      },
+      {
+        test: {
+          name: 'browser',
+          include: ['tests/browser/**/*.test.ts'],
+          browser: {
+            enabled: true,
+            name: 'chromium',
+            provider: 'playwright',
+          },
+        },
+      },
+    ],
+  },
+})
+```
+## Shared Configuration
+```ts
+// vitest.shared.ts
+export const sharedConfig = {
+  testTimeout: 10000,
+  setupFiles: ['./tests/setup.ts'],
+}
+// vitest.config.ts
+import { sharedConfig } from './vitest.shared'
+defineConfig({
+  test: {
+    projects: [
+      {
+        test: {
+          ...sharedConfig,
+          name: 'unit',
+          include: ['tests/unit/**/*.test.ts'],
+        },
+      },
+      {
+        test: {
+          ...sharedConfig,
+          name: 'e2e',
+          include: ['tests/e2e/**/*.test.ts'],
+        },
+      },
+    ],
+  },
+})
+```
+## Project-Specific Dependencies
+Each project can have different dependencies inlined:
+```ts
+defineConfig({
+  test: {
+    projects: [
+      {
+        test: {
+          name: 'project-a',
+          server: {
+            deps: {
+              inline: ['package-a'],
+            },
+          },
+        },
+      },
+    ],
+  },
+})
+```
+## Running Specific Projects
+```bash
+# Run specific project
+vitest --project unit
+vitest --project integration
+# Multiple projects
+vitest --project unit --project e2e
+# Exclude project
+vitest --project.ignore browser
+```
+## Providing Values to Projects
+Share values from config to tests:
+```ts
+// vitest.config.ts
+defineConfig({
+  test: {
+    projects: [
+      {
+        test: {
+          name: 'staging',
+          provide: {
+            apiUrl: 'https://staging.api.com',
+            debug: true,
+          },
+        },
+      },
+      {
+        test: {
+          name: 'production',
+          provide: {
+            apiUrl: 'https://api.com',
+            debug: false,
+          },
+        },
+      },
+    ],
+  },
+})
+// In tests, use inject
+import { inject } from 'vitest'
+test('uses correct api', () => {
+  const url = inject('apiUrl')
+  expect(url).toContain('api.com')
+})
+```
+## With Fixtures
+```ts
+const test = base.extend({
+  apiUrl: ['/default', { injected: true }],
+})
+test('uses injected url', ({ apiUrl }) => {
+  // apiUrl comes from project's provide config
+})
+```
+## Project Isolation
+Each project runs in its own thread pool by default:
+```ts
+defineConfig({
+  test: {
+    projects: [
+      {
+        test: {
+          name: 'isolated',
+          isolate: true, // Full isolation
+          pool: 'forks',
+        },
+      },
+    ],
+  },
+})
+```
+## Global Setup per Project
+```ts
+defineConfig({
+  test: {
+    projects: [
+      {
+        test: {
+          name: 'with-db',
+          globalSetup: ['./tests/db-setup.ts'],
+        },
+      },
+    ],
+  },
+})
+```
+## Key Points
+- Projects run in same Vitest process
+- Each project can have different environment, config
+- Use glob patterns for monorepo packages
+- Run specific projects with `--project` flag
+- Use `provide` to inject config values into tests
+- Projects inherit from root config unless overridden
+<!--
+Source references:
+- https://vitest.dev/guide/projects.html
+-->