devskill 2.0.2

package/skills/vue-testing-best-practices/reference/testing-pinia-store-setup.md

@@ -0,0 +1,228 @@
+---
+title: Configure Pinia Testing with createTestingPinia and setActivePinia
+impact: HIGH
+impactDescription: Missing Pinia configuration causes 'injection Symbol(pinia) not found' errors and failing tests
+type: gotcha
+tags: [vue3, testing, pinia, vitest, store, mocking, createTestingPinia]
+---
+
+# Configure Pinia Testing with createTestingPinia and setActivePinia
+
+**Impact: HIGH** - Testing components or composables that use Pinia stores without proper configuration results in "[Vue warn]: injection Symbol(pinia) not found" errors. Tests will fail or behave unexpectedly.
+
+Use `@pinia/testing` package with `createTestingPinia` for component tests and `setActivePinia(createPinia())` for unit testing stores directly.
+
+## Task Checklist
+
+- [ ] Install `@pinia/testing` as a dev dependency
+- [ ] Use `createTestingPinia` in component tests with `global.plugins`
+- [ ] Use `setActivePinia(createPinia())` in `beforeEach` for store unit tests
+- [ ] Configure `createSpy: vi.fn` when NOT using `globals: true` in Vitest
+- [ ] Initialize store inside each test to get fresh state
+- [ ] Use `stubActions: false` when you need real action execution
+
+**Incorrect:**
+```javascript
+import { mount } from '@vue/test-utils'
+import UserProfile from './UserProfile.vue'
+
+// BAD: Missing Pinia - causes injection error
+test('displays user name', () => {
+  const wrapper = mount(UserProfile)  // ERROR: injection "Symbol(pinia)" not found
+  expect(wrapper.text()).toContain('John')
+})
+```
+
+```javascript
+import { useUserStore } from '@/stores/user'
+
+// BAD: No active Pinia instance
+test('user store actions', () => {
+  const store = useUserStore()  // ERROR: no active Pinia
+  store.login('john', 'password')
+})
+```
+
+**Correct - Component Testing:**
+```javascript
+import { mount } from '@vue/test-utils'
+import { createTestingPinia } from '@pinia/testing'
+import { vi } from 'vitest'
+import UserProfile from './UserProfile.vue'
+import { useUserStore } from '@/stores/user'
+
+// CORRECT: Provide testing pinia with stubbed actions
+test('displays user name', () => {
+  const wrapper = mount(UserProfile, {
+    global: {
+      plugins: [
+        createTestingPinia({
+          createSpy: vi.fn,  // Required if not using globals: true
+          initialState: {
+            user: { name: 'John', email: 'john@example.com' }
+          }
+        })
+      ]
+    }
+  })
+
+  expect(wrapper.text()).toContain('John')
+})
+
+// CORRECT: Test with stubbed actions (default behavior)
+test('calls logout action', async () => {
+  const wrapper = mount(UserProfile, {
+    global: {
+      plugins: [createTestingPinia({ createSpy: vi.fn })]
+    }
+  })
+
+  // Get store AFTER mounting with createTestingPinia
+  const store = useUserStore()
+
+  await wrapper.find('[data-testid="logout"]').trigger('click')
+
+  // Actions are stubbed and wrapped in spies
+  expect(store.logout).toHaveBeenCalled()
+})
+```
+
+**Correct - Store Unit Testing:**
+```javascript
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
+import { useUserStore } from '@/stores/user'
+
+describe('User Store', () => {
+  beforeEach(() => {
+    // Create fresh Pinia instance for each test
+    setActivePinia(createPinia())
+  })
+
+  it('initializes with empty user', () => {
+    const store = useUserStore()
+    expect(store.user).toBeNull()
+    expect(store.isLoggedIn).toBe(false)
+  })
+
+  it('updates user on login', async () => {
+    const store = useUserStore()
+
+    // Real action executes - not stubbed
+    await store.login('john', 'password')
+
+    expect(store.user).toEqual({ name: 'John' })
+    expect(store.isLoggedIn).toBe(true)
+  })
+
+  it('clears user on logout', () => {
+    const store = useUserStore()
+    store.user = { name: 'John' }  // Set initial state
+
+    store.logout()
+
+    expect(store.user).toBeNull()
+  })
+})
+```
+
+## Testing with Real Actions vs Stubbed Actions
+
+```javascript
+import { createTestingPinia } from '@pinia/testing'
+
+// Stubbed actions (default) - for isolation
+const wrapper = mount(Component, {
+  global: {
+    plugins: [
+      createTestingPinia({
+        createSpy: vi.fn,
+        // stubActions: true (default) - actions are mocked
+      })
+    ]
+  }
+})
+
+// Real actions - for integration testing
+const wrapper = mount(Component, {
+  global: {
+    plugins: [
+      createTestingPinia({
+        createSpy: vi.fn,
+        stubActions: false  // Actions execute normally
+      })
+    ]
+  }
+})
+```
+
+## Mocking Specific Action Implementations
+
+```javascript
+import { mount } from '@vue/test-utils'
+import { createTestingPinia } from '@pinia/testing'
+import { vi } from 'vitest'
+import { useCartStore } from '@/stores/cart'
+
+test('handles checkout failure', async () => {
+  const wrapper = mount(Checkout, {
+    global: {
+      plugins: [createTestingPinia({ createSpy: vi.fn })]
+    }
+  })
+
+  const cartStore = useCartStore()
+
+  // Mock specific action behavior
+  cartStore.checkout.mockRejectedValue(new Error('Payment failed'))
+
+  await wrapper.find('[data-testid="checkout"]').trigger('click')
+  await flushPromises()
+
+  expect(wrapper.find('.error').text()).toContain('Payment failed')
+})
+```
+
+## Spying on Actions with vi.spyOn
+
+```javascript
+import { setActivePinia, createPinia } from 'pinia'
+import { vi } from 'vitest'
+import { useUserStore } from '@/stores/user'
+
+test('tracks action calls', async () => {
+  setActivePinia(createPinia())
+  const store = useUserStore()
+
+  const loginSpy = vi.spyOn(store, 'login')
+  loginSpy.mockResolvedValue({ success: true })
+
+  await store.login('john', 'password')
+
+  expect(loginSpy).toHaveBeenCalledWith('john', 'password')
+})
+```
+
+## Testing Store $subscribe
+
+```javascript
+import { setActivePinia, createPinia } from 'pinia'
+import { useUserStore } from '@/stores/user'
+
+test('subscription triggers on state change', () => {
+  setActivePinia(createPinia())
+  const store = useUserStore()
+
+  const callback = vi.fn()
+  store.$subscribe(callback)
+
+  store.user = { name: 'John' }
+
+  expect(callback).toHaveBeenCalled()
+})
+```
+
+## Reference
+- [Pinia Testing Guide](https://pinia.vuejs.org/cookbook/testing.html)
+- [@pinia/testing Package](https://www.npmjs.com/package/@pinia/testing)
+- [Vue Test Utils - Plugins](https://test-utils.vuejs.org/guide/advanced/plugins.html)

package/skills/vue-testing-best-practices/reference/testing-suspense-async-components.md

@@ -0,0 +1,229 @@
+---
+title: Wrap Async Setup Components in Suspense for Testing
+impact: HIGH
+impactDescription: Components with async setup() fail to render in tests without Suspense wrapper, causing cryptic errors
+type: gotcha
+tags: [vue3, testing, suspense, async-setup, vue-test-utils, vitest]
+---
+
+# Wrap Async Setup Components in Suspense for Testing
+
+**Impact: HIGH** - Components using `async setup()` require a `<Suspense>` wrapper to function correctly. Testing them without Suspense causes the component to never render, leading to test failures and confusing errors.
+
+Create a test wrapper component with Suspense or use a `mountSuspense` helper function for testing async components.
+
+## Task Checklist
+
+- [ ] Identify components with async setup (uses `await` in `<script setup>` or `async setup()`)
+- [ ] Create a wrapper component with `<Suspense>` for testing
+- [ ] Use `flushPromises()` after mounting to wait for async resolution
+- [ ] Access the actual component via `findComponent()` for assertions
+- [ ] Consider using `@testing-library/vue` with caution (has Suspense issues)
+
+**Incorrect:**
+```javascript
+import { mount } from '@vue/test-utils'
+import AsyncUserProfile from './AsyncUserProfile.vue'
+
+// BAD: Async component without Suspense wrapper
+test('displays user data', async () => {
+  // This won't render - Vue expects Suspense wrapper for async setup
+  const wrapper = mount(AsyncUserProfile, {
+    props: { userId: 1 }
+  })
+
+  await flushPromises()
+
+  // This fails - component never rendered
+  expect(wrapper.find('.username').text()).toBe('John')
+})
+```
+
+**Correct - Manual Wrapper Component:**
+```javascript
+import { mount, flushPromises } from '@vue/test-utils'
+import { defineComponent, Suspense } from 'vue'
+import AsyncUserProfile from './AsyncUserProfile.vue'
+
+test('displays user data', async () => {
+  // Create wrapper component with Suspense
+  const TestWrapper = defineComponent({
+    components: { AsyncUserProfile },
+    template: `
+      <Suspense>
+        <AsyncUserProfile :user-id="1" />
+        <template #fallback>Loading...</template>
+      </Suspense>
+    `
+  })
+
+  const wrapper = mount(TestWrapper)
+
+  // Initially shows fallback
+  expect(wrapper.text()).toContain('Loading...')
+
+  // Wait for async setup to complete
+  await flushPromises()
+
+  // Find the actual component for detailed assertions
+  const profile = wrapper.findComponent(AsyncUserProfile)
+  expect(profile.find('.username').text()).toBe('John')
+})
+```
+
+**Correct - Reusable Helper Function:**
+```javascript
+// test-utils.js
+import { mount, flushPromises } from '@vue/test-utils'
+import { defineComponent, Suspense, h } from 'vue'
+
+export async function mountSuspense(component, options = {}) {
+  const { props, slots, ...mountOptions } = options
+
+  const wrapper = mount(
+    defineComponent({
+      render() {
+        return h(
+          Suspense,
+          null,
+          {
+            default: () => h(component, props, slots),
+            fallback: () => h('div', 'Loading...')
+          }
+        )
+      }
+    }),
+    mountOptions
+  )
+
+  // Wait for async component to resolve
+  await flushPromises()
+
+  return {
+    wrapper,
+    // Provide easy access to the actual component
+    component: wrapper.findComponent(component)
+  }
+}
+```
+
+```javascript
+// AsyncUserProfile.test.js
+import { mountSuspense } from './test-utils'
+import AsyncUserProfile from './AsyncUserProfile.vue'
+
+test('displays user data', async () => {
+  const { component } = await mountSuspense(AsyncUserProfile, {
+    props: { userId: 1 },
+    global: {
+      stubs: {
+        // Stub any child components if needed
+      }
+    }
+  })
+
+  expect(component.find('.username').text()).toBe('John')
+})
+
+test('handles errors gracefully', async () => {
+  const { component } = await mountSuspense(AsyncUserProfile, {
+    props: { userId: 'invalid' }
+  })
+
+  expect(component.find('.error').exists()).toBe(true)
+})
+```
+
+## Testing with onErrorCaptured
+
+```javascript
+import { mount, flushPromises } from '@vue/test-utils'
+import { defineComponent, Suspense, h, ref, onErrorCaptured } from 'vue'
+import AsyncComponent from './AsyncComponent.vue'
+
+test('catches async errors', async () => {
+  const capturedError = ref(null)
+
+  const TestWrapper = defineComponent({
+    setup() {
+      onErrorCaptured((error) => {
+        capturedError.value = error
+        return true // Prevent error propagation
+      })
+      return { capturedError }
+    },
+    render() {
+      return h(Suspense, null, {
+        default: () => h(AsyncComponent, { shouldFail: true }),
+        fallback: () => h('div', 'Loading...')
+      })
+    }
+  })
+
+  const wrapper = mount(TestWrapper)
+  await flushPromises()
+
+  expect(capturedError.value).toBeTruthy()
+  expect(capturedError.value.message).toContain('Failed to load')
+})
+```
+
+## Using with Nuxt's mountSuspended
+
+```javascript
+// If using Nuxt, use the built-in mountSuspended helper
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import AsyncPage from './AsyncPage.vue'
+
+test('renders async page', async () => {
+  const wrapper = await mountSuspended(AsyncPage, {
+    props: { id: 1 }
+  })
+
+  expect(wrapper.find('h1').text()).toBe('Page Title')
+})
+```
+
+## Important Caveats
+
+### @testing-library/vue Limitation
+```javascript
+// CAUTION: @testing-library/vue has issues with Suspense
+// Use @vue/test-utils for async components instead
+
+// If you must use Testing Library, create manual wrapper:
+import { render, waitFor } from '@testing-library/vue'
+
+test('async component with testing library', async () => {
+  const TestWrapper = {
+    template: `
+      <Suspense>
+        <AsyncComponent />
+      </Suspense>
+    `,
+    components: { AsyncComponent }
+  }
+
+  const { getByText } = render(TestWrapper)
+
+  await waitFor(() => {
+    expect(getByText('Loaded content')).toBeInTheDocument()
+  })
+})
+```
+
+### Accessing Component Instance
+```javascript
+test('access vm on async component', async () => {
+  const { wrapper, component } = await mountSuspense(AsyncComponent)
+
+  // The wrapper.vm is the Suspense wrapper - not useful
+  // Use component.vm for the actual async component
+  expect(component.vm.someData).toBe('value')
+})
+```
+
+## Reference
+- [Vue Test Utils - Async Suspense](https://test-utils.vuejs.org/guide/advanced/async-suspense)
+- [Vue.js Suspense Documentation](https://vuejs.org/guide/built-ins/suspense.html)
+- [Testing Library Vue Suspense Issue](https://github.com/testing-library/vue-testing-library/issues/230)

package/skills/vue-testing-best-practices/reference/testing-vitest-recommended-for-vue.md

@@ -0,0 +1,204 @@
+---
+title: Use Vitest for Vue 3 Testing - Recommended by Vue Team
+impact: MEDIUM
+impactDescription: Using Jest or other runners with Vite projects requires complex configuration and causes slower test runs
+type: best-practice
+tags: [vue3, testing, vitest, vite, configuration, setup]
+---
+
+# Use Vitest for Vue 3 Testing - Recommended by Vue Team
+
+**Impact: MEDIUM** - Vitest is created and maintained by Vue/Vite team members and shares the same configuration and transform pipeline as Vite. Using Jest or other test runners with Vite-based projects requires additional configuration and can result in slower test execution and compatibility issues.
+
+Use Vitest for new Vue 3 projects. Only consider Jest if migrating an existing test suite.
+
+## Task Checklist
+
+- [ ] Install Vitest and related packages for Vue testing
+- [ ] Configure vitest in vite.config.js or vitest.config.js
+- [ ] Set up proper test environment (happy-dom or jsdom)
+- [ ] Add test scripts to package.json
+- [ ] Configure globals if desired for cleaner test syntax
+- [ ] Use @vue/test-utils for component mounting
+
+## Quick Setup
+
+```bash
+# Install required packages
+npm install -D vitest @vue/test-utils happy-dom
+# or with jsdom
+npm install -D vitest @vue/test-utils jsdom
+```
+
+**vite.config.js:**
+```javascript
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    // Enable global test APIs (describe, it, expect)
+    globals: true,
+    // Use happy-dom for faster tests (or 'jsdom' for better compatibility)
+    environment: 'happy-dom',
+    // Optional: Setup files for global configuration
+    setupFiles: ['./src/test/setup.js']
+  }
+})
+```
+
+**package.json:**
+```json
+{
+  "scripts": {
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage"
+  }
+}
+```
+
+**tsconfig.json (if using TypeScript):**
+```json
+{
+  "compilerOptions": {
+    "types": ["vitest/globals"]
+  }
+}
+```
+
+## Test File Example
+
+```javascript
+// src/components/Counter.test.js
+import { describe, it, expect, beforeEach } from 'vitest'  // optional with globals: true
+import { mount } from '@vue/test-utils'
+import Counter from './Counter.vue'
+
+describe('Counter', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = mount(Counter)
+  })
+
+  it('renders initial count', () => {
+    expect(wrapper.find('[data-testid="count"]').text()).toBe('0')
+  })
+
+  it('increments when button clicked', async () => {
+    await wrapper.find('[data-testid="increment"]').trigger('click')
+    expect(wrapper.find('[data-testid="count"]').text()).toBe('1')
+  })
+})
+```
+
+## Vitest vs Jest Comparison
+
+| Feature | Vitest | Jest |
+|---------|--------|------|
+| Vite Integration | Native | Requires config |
+| Speed | Very fast (ESM native) | Slower with Vite |
+| Watch Mode | Excellent | Good |
+| Vue SFC Support | Works with Vite | Needs vue-jest |
+| Config Sharing | Same as vite.config | Separate |
+| API | Jest-compatible | Standard |
+
+## Using with Testing Library
+
+```bash
+npm install -D @testing-library/vue @testing-library/jest-dom
+```
+
+```javascript
+// src/test/setup.js
+import { expect } from 'vitest'
+import * as matchers from '@testing-library/jest-dom/matchers'
+
+expect.extend(matchers)
+```
+
+```javascript
+// Component.test.js
+import { render, screen, fireEvent } from '@testing-library/vue'
+import UserCard from './UserCard.vue'
+
+test('displays user name', () => {
+  render(UserCard, {
+    props: { name: 'John Doe' }
+  })
+
+  expect(screen.getByText('John Doe')).toBeInTheDocument()
+})
+```
+
+## Advanced Configuration
+
+```javascript
+// vitest.config.js (separate file if preferred)
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    include: ['**/*.{test,spec}.{js,ts,jsx,tsx}'],
+    exclude: ['node_modules', 'dist', 'e2e'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: ['node_modules', 'test']
+    },
+    // Helpful for debugging
+    reporters: ['verbose'],
+    // Run tests in sequence in CI
+    poolOptions: {
+      threads: {
+        singleThread: process.env.CI === 'true'
+      }
+    }
+  }
+})
+```
+
+## Common Patterns
+
+### Mocking Modules
+```javascript
+import { vi } from 'vitest'
+
+vi.mock('@/api/users', () => ({
+  fetchUser: vi.fn().mockResolvedValue({ name: 'John' })
+}))
+```
+
+### Testing with Fake Timers
+```javascript
+import { vi, beforeEach, afterEach } from 'vitest'
+
+beforeEach(() => {
+  vi.useFakeTimers()
+})
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+test('debounced search', async () => {
+  const wrapper = mount(SearchBox)
+  await wrapper.find('input').setValue('vue')
+
+  vi.advanceTimersByTime(300)
+  await flushPromises()
+
+  expect(wrapper.emitted('search')).toBeTruthy()
+})
+```
+
+## Reference
+- [Vitest Documentation](https://vitest.dev/)
+- [Vue.js Testing Guide](https://vuejs.org/guide/scaling-up/testing)
+- [Vue Test Utils](https://test-utils.vuejs.org/)

package/skills/vueuse-functions/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019-PRESENT Anthony Fu<https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.