autoworkflow 3.1.5 → 3.5.0

package/.claude/skills/cypress.md

@@ -0,0 +1,343 @@
+# Cypress Skill
+
+## Test Structure
+\`\`\`typescript
+describe('Authentication', () => {
+  beforeEach(() => {
+    cy.visit('/login');
+  });
+
+  it('should login successfully', () => {
+    // Use data-cy attributes (recommended)
+    cy.get('[data-cy=email]').type('test@example.com');
+    cy.get('[data-cy=password]').type('password123');
+    cy.get('[data-cy=submit]').click();
+
+    // Assertions
+    cy.url().should('include', '/dashboard');
+    cy.get('[data-cy=welcome-message]').should('be.visible');
+  });
+
+  it('should show error for invalid credentials', () => {
+    cy.get('[data-cy=email]').type('wrong@example.com');
+    cy.get('[data-cy=password]').type('wrongpassword');
+    cy.get('[data-cy=submit]').click();
+
+    cy.get('[data-cy=error-message]')
+      .should('be.visible')
+      .and('contain', 'Invalid credentials');
+  });
+});
+\`\`\`
+
+## Selectors
+\`\`\`typescript
+// Recommended: data-cy attributes
+cy.get('[data-cy=submit-button]');
+cy.get('[data-testid=email-input]');
+
+// By text
+cy.contains('Submit');
+cy.contains('button', 'Submit');  // Element type + text
+
+// CSS selectors
+cy.get('.btn-primary');
+cy.get('#email');
+cy.get('button[type="submit"]');
+
+// Within scope
+cy.get('[data-cy=form]').within(() => {
+  cy.get('[data-cy=email]').type('test@example.com');
+  cy.get('[data-cy=submit]').click();
+});
+
+// Finding by index
+cy.get('li').first();
+cy.get('li').last();
+cy.get('li').eq(2);  // Third item (0-indexed)
+
+// Filtering
+cy.get('button').filter('.primary');
+cy.get('li').not('.disabled');
+
+// Parent/child traversal
+cy.get('[data-cy=item]').parent();
+cy.get('[data-cy=item]').children();
+cy.get('[data-cy=item]').siblings();
+cy.get('[data-cy=item]').find('button');  // Descendant
+\`\`\`
+
+## Actions
+\`\`\`typescript
+// Click
+cy.get('button').click();
+cy.get('button').dblclick();
+cy.get('button').rightclick();
+cy.get('button').click({ force: true });  // Skip visibility check
+cy.get('button').click({ multiple: true });  // Click all matched
+
+// Type
+cy.get('input').type('Hello World');
+cy.get('input').type('Hello{enter}');  // Special keys
+cy.get('input').type('{selectall}{backspace}');  // Clear + delete
+cy.get('input').type('slow typing', { delay: 100 });
+cy.get('input').clear();
+cy.get('input').clear().type('New value');
+
+// Special keys: {enter}, {esc}, {backspace}, {del}, {ctrl}, {shift}, {alt}
+// Modifiers: {ctrl+a}, {shift+click}
+
+// Select
+cy.get('select').select('Option 1');
+cy.get('select').select(['Option 1', 'Option 2']);  // Multi-select
+
+// Checkbox/Radio
+cy.get('[type="checkbox"]').check();
+cy.get('[type="checkbox"]').uncheck();
+cy.get('[type="radio"]').check();
+
+// Focus/Blur
+cy.get('input').focus();
+cy.get('input').blur();
+
+// Scroll
+cy.get('[data-cy=list]').scrollTo('bottom');
+cy.get('[data-cy=item]').scrollIntoView();
+
+// File upload
+cy.get('input[type="file"]').selectFile('cypress/fixtures/image.png');
+cy.get('input[type="file"]').selectFile(['file1.png', 'file2.png']);
+
+// Drag and drop
+cy.get('[data-cy=drag]').drag('[data-cy=drop]');
+\`\`\`
+
+## Assertions
+\`\`\`typescript
+// Visibility
+cy.get('button').should('be.visible');
+cy.get('button').should('not.be.visible');
+cy.get('button').should('exist');
+cy.get('button').should('not.exist');
+
+// Text content
+cy.get('h1').should('have.text', 'Welcome');
+cy.get('h1').should('contain', 'Welcome');
+cy.get('h1').should('include.text', 'Welcome');
+cy.get('p').should('not.be.empty');
+
+// Attributes
+cy.get('input').should('have.value', 'test@example.com');
+cy.get('a').should('have.attr', 'href', '/home');
+cy.get('button').should('have.class', 'btn-primary');
+cy.get('button').should('be.disabled');
+cy.get('input').should('be.enabled');
+
+// State
+cy.get('[type="checkbox"]').should('be.checked');
+cy.get('[type="checkbox"]').should('not.be.checked');
+cy.get('input').should('have.focus');
+
+// Length
+cy.get('li').should('have.length', 5);
+cy.get('li').should('have.length.greaterThan', 3);
+
+// CSS
+cy.get('button').should('have.css', 'background-color', 'rgb(0, 123, 255)');
+
+// Chaining assertions
+cy.get('[data-cy=message]')
+  .should('be.visible')
+  .and('contain', 'Success')
+  .and('have.class', 'alert-success');
+
+// URL assertions
+cy.url().should('include', '/dashboard');
+cy.url().should('eq', 'http://localhost:3000/dashboard');
+cy.location('pathname').should('eq', '/dashboard');
+\`\`\`
+
+## Network Interception
+\`\`\`typescript
+// Intercept and mock response
+cy.intercept('GET', '/api/users', {
+  statusCode: 200,
+  body: [{ id: 1, name: 'John' }],
+}).as('getUsers');
+
+// Wait for request
+cy.visit('/users');
+cy.wait('@getUsers');
+cy.get('[data-cy=user]').should('have.length', 1);
+
+// Intercept with fixture
+cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers');
+
+// Intercept and modify response
+cy.intercept('GET', '/api/users', (req) => {
+  req.reply((res) => {
+    res.body.push({ id: 999, name: 'Injected' });
+    res.send();
+  });
+});
+
+// Intercept POST and verify body
+cy.intercept('POST', '/api/users', (req) => {
+  expect(req.body).to.have.property('email', 'test@example.com');
+  req.reply({ statusCode: 201, body: { id: 1, ...req.body } });
+}).as('createUser');
+
+cy.get('[data-cy=submit]').click();
+cy.wait('@createUser').its('request.body').should('include', {
+  email: 'test@example.com',
+});
+
+// Mock error response
+cy.intercept('GET', '/api/users', {
+  statusCode: 500,
+  body: { error: 'Server error' },
+});
+
+// Delay response
+cy.intercept('GET', '/api/users', (req) => {
+  req.reply({
+    delay: 2000,
+    body: [],
+  });
+});
+
+// Match with regex
+cy.intercept({ method: 'GET', url: /\\/api\\/users\\/\\d+/ }, { fixture: 'user.json' });
+\`\`\`
+
+## Custom Commands
+\`\`\`typescript
+// cypress/support/commands.ts
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      login(email: string, password: string): Chainable<void>;
+      dataCy(value: string): Chainable<JQuery<HTMLElement>>;
+    }
+  }
+}
+
+// Custom login command
+Cypress.Commands.add('login', (email: string, password: string) => {
+  cy.session([email, password], () => {
+    cy.visit('/login');
+    cy.get('[data-cy=email]').type(email);
+    cy.get('[data-cy=password]').type(password);
+    cy.get('[data-cy=submit]').click();
+    cy.url().should('include', '/dashboard');
+  });
+});
+
+// Custom selector command
+Cypress.Commands.add('dataCy', (value: string) => {
+  return cy.get(\`[data-cy=\${value}]\`);
+});
+
+// Usage in tests
+cy.login('test@example.com', 'password123');
+cy.dataCy('submit-button').click();
+\`\`\`
+
+## Fixtures
+\`\`\`typescript
+// cypress/fixtures/users.json
+[
+  { "id": 1, "name": "John", "email": "john@example.com" },
+  { "id": 2, "name": "Jane", "email": "jane@example.com" }
+]
+
+// Using fixtures
+cy.fixture('users.json').then((users) => {
+  cy.intercept('GET', '/api/users', users);
+});
+
+// Or directly in intercept
+cy.intercept('GET', '/api/users', { fixture: 'users.json' });
+
+// Type fixtures
+cy.fixture<User[]>('users.json').then((users) => {
+  expect(users).to.have.length(2);
+});
+\`\`\`
+
+## Session & Authentication
+\`\`\`typescript
+// Preserve session across tests
+beforeEach(() => {
+  cy.session('user-session', () => {
+    cy.visit('/login');
+    cy.get('[data-cy=email]').type('test@example.com');
+    cy.get('[data-cy=password]').type('password');
+    cy.get('[data-cy=submit]').click();
+    cy.url().should('include', '/dashboard');
+  });
+});
+
+// Programmatic login (faster)
+Cypress.Commands.add('loginByApi', (email: string, password: string) => {
+  cy.request('POST', '/api/auth/login', { email, password }).then((response) => {
+    window.localStorage.setItem('authToken', response.body.token);
+  });
+});
+
+// With cookies
+cy.setCookie('auth-token', 'my-token');
+cy.getCookie('auth-token');
+cy.clearCookies();
+\`\`\`
+
+## Configuration (cypress.config.ts)
+\`\`\`typescript
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    specPattern: 'cypress/e2e/**/*.cy.{js,ts}',
+    supportFile: 'cypress/support/e2e.ts',
+    viewportWidth: 1280,
+    viewportHeight: 720,
+    video: false,
+    screenshotOnRunFailure: true,
+    defaultCommandTimeout: 10000,
+    requestTimeout: 10000,
+    retries: {
+      runMode: 2,
+      openMode: 0,
+    },
+    env: {
+      apiUrl: 'http://localhost:3001',
+    },
+    setupNodeEvents(on, config) {
+      // Node event listeners
+    },
+  },
+  component: {
+    devServer: {
+      framework: 'react',
+      bundler: 'vite',
+    },
+  },
+});
+\`\`\`
+
+## ❌ DON'T
+- Use \`cy.wait(ms)\` for arbitrary waits
+- Use brittle CSS selectors
+- Test implementation details
+- Share state between tests
+- Use \`cy.get().then()\` when chaining works
+
+## ✅ DO
+- Use data-cy attributes for selectors
+- Use cy.intercept() to mock API responses
+- Create custom commands for reusable actions
+- Use cy.session() for authentication
+- Use fixtures for test data
+- Use aliases (@) to reference intercepted requests
+- Wait for specific network requests, not arbitrary time

package/.claude/skills/debugging.md

@@ -0,0 +1,133 @@
+# Debugging Skill
+
+## Systematic Approach
+\`\`\`
+1. REPRODUCE → Can you trigger it consistently?
+2. ISOLATE   → Where exactly does it fail?
+3. IDENTIFY  → What's the root cause?
+4. FIX       → Apply minimal change
+5. VERIFY    → Test the fix + no regressions
+\`\`\`
+
+## Debugging Techniques
+
+### Console Debugging
+\`\`\`typescript
+// ✅ Structured logging
+console.log('[UserService.getUser]', { userId, timestamp: Date.now() });
+
+// ✅ Console table for arrays/objects
+console.table(users);
+
+// ✅ Trace call stack
+console.trace('How did we get here?');
+
+// ✅ Group related logs
+console.group('API Request');
+console.log('URL:', url);
+console.log('Payload:', payload);
+console.groupEnd();
+
+// ✅ Time operations
+console.time('fetchUsers');
+await fetchUsers();
+console.timeEnd('fetchUsers'); // fetchUsers: 123.45ms
+\`\`\`
+
+### Browser DevTools
+\`\`\`
+Sources Tab:
+- Set breakpoints (click line number)
+- Conditional breakpoints (right-click → Add conditional)
+- Logpoints (right-click → Add logpoint) - no code changes needed
+- Step over (F10), Step into (F11), Step out (Shift+F11)
+
+Network Tab:
+- Filter by XHR/Fetch for API calls
+- Check request/response payloads
+- Throttle network to simulate slow connections
+- Block requests to test error handling
+
+Performance Tab:
+- Record and analyze runtime performance
+- Identify long tasks and layout thrashing
+- Memory snapshots for leak detection
+\`\`\`
+
+### Node.js Debugging
+\`\`\`bash
+# Start with inspector
+node --inspect src/index.js
+
+# Break on first line
+node --inspect-brk src/index.js
+
+# Debug in Chrome: chrome://inspect
+\`\`\`
+
+### VS Code Debugging
+\`\`\`json
+// .vscode/launch.json
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Debug Server",
+      "program": "\${workspaceFolder}/src/index.ts",
+      "preLaunchTask": "tsc: build",
+      "outFiles": ["\${workspaceFolder}/dist/**/*.js"]
+    },
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Debug React",
+      "url": "http://localhost:3000",
+      "webRoot": "\${workspaceFolder}/src"
+    }
+  ]
+}
+\`\`\`
+
+### Binary Search Method
+\`\`\`
+1. Add log at middle of suspect code
+2. If bug is BEFORE log → search first half
+3. If bug is AFTER log → search second half
+4. Repeat until isolated
+\`\`\`
+
+### Memory Leak Detection
+\`\`\`typescript
+// Check for growing memory
+const used = process.memoryUsage();
+console.log('Heap:', Math.round(used.heapUsed / 1024 / 1024), 'MB');
+
+// Browser: DevTools → Memory → Take heap snapshot
+// Compare snapshots to find retained objects
+\`\`\`
+
+### Common Bug Sources
+- Off-by-one errors in loops
+- Null/undefined access
+- Async timing issues (race conditions)
+- State mutation bugs
+- Cache invalidation
+- Environment differences (dev vs prod)
+- Stale closures in React
+- Event listener leaks
+
+## ❌ DON'T
+- Guess randomly and change things
+- Ignore error messages
+- Leave debug code in production
+- Debug in production without feature flags
+
+## ✅ DO
+- Read the error message carefully
+- Check recent changes first (git diff, git log)
+- Use debugger breakpoints over console.log
+- Add tests to prevent regression
+- Use source maps for minified code
+- Check browser console AND network tab