testdriverai 6.2.2 → 7.1.0

package/docs/v7/presets/vscode.mdx

@@ -0,0 +1,398 @@
+---
+title: "VS Code Extensions"
+sidebarTitle: "VS Code Extensions"
+description: "Automatically launch and test Visual Studio Code extensions"
+icon: "code"
+---
+
+## Overview
+
+The `vscode()` preset automatically sets up Visual Studio Code with TestDriver and Dashcam recording. Perfect for testing VS Code extensions and IDE workflows.
+
+## Quick Start
+
+```javascript
+import { test } from 'vitest';
+import { vscode } from 'testdriverai/presets';
+
+test('extension test', async (context) => {
+  const { vscode } = await vscode(context, {
+    workspace: '/tmp/test-project',
+    extensions: ['ms-python.python']
+  });
+  
+  await vscode.find('File menu').click();
+  await vscode.find('New File').click();
+  await vscode.find('Python file type').click();
+});
+```
+
+## Signature
+
+```typescript
+vscode(context, options): Promise<VSCodeResult>
+```
+
+### Parameters
+
+<ParamField path="context" type="object" required>
+  Vitest test context - automatically passed to your test function
+</ParamField>
+
+<ParamField path="options" type="object">
+  Configuration options for VS Code
+
+  <Expandable title="properties">
+    <ParamField path="workspace" type="string">
+      Path to workspace/folder to open in VS Code
+    </ParamField>
+
+    <ParamField path="extensions" type="string[]" default={[]}>
+      Array of extension IDs to install before launching
+    </ParamField>
+
+    <ParamField path="dashcam" type="boolean" default={true}>
+      Enable Dashcam test recording
+    </ParamField>
+
+    <ParamField path="os" type="'linux' | 'mac' | 'windows'" default="linux">
+      Target operating system for the test
+    </ParamField>
+  </Expandable>
+</ParamField>
+
+### Returns
+
+<ResponseField name="testdriver" type="TestDriver" required>
+  TestDriver instance ready to use
+</ResponseField>
+
+<ResponseField name="vscode" type="TestDriver" required>
+  Alias for testdriver (semantic clarity for VS Code testing)
+</ResponseField>
+
+<ResponseField name="dashcam" type="Dashcam">
+  Dashcam instance for test recording (if enabled)
+</ResponseField>
+
+## Examples
+
+### Basic Extension Testing
+
+```javascript
+import { test } from 'vitest';
+import { vscode } from 'testdriverai/presets';
+
+test('python extension creates new file', async (context) => {
+  const { vscode } = await vscode(context, {
+    workspace: '/tmp/python-project',
+    extensions: ['ms-python.python']
+  });
+  
+  // Open command palette
+  await vscode.pressKeys(['cmd', 'shift', 'p']);
+  
+  // Create new Python file
+  await vscode.type('Python: Create New File');
+  await vscode.pressKeys(['enter']);
+  
+  // Verify file was created
+  await vscode.assert('Untitled Python file is open');
+});
+```
+
+### Testing Multiple Extensions
+
+```javascript
+import { test } from 'vitest';
+import { vscode } from 'testdriverai/presets';
+
+test('eslint and prettier integration', async (context) => {
+  const { vscode } = await vscode(context, {
+    workspace: '/tmp/js-project',
+    extensions: [
+      'dbaeumer.vscode-eslint',
+      'esbenp.prettier-vscode'
+    ]
+  });
+  
+  // Open a JavaScript file
+  await vscode.find('File').click();
+  await vscode.find('Open File').click();
+  await vscode.type('src/index.js');
+  await vscode.pressKeys(['enter']);
+  
+  // Format document
+  await vscode.pressKeys(['shift', 'alt', 'f']);
+  
+  await vscode.assert('Document is formatted');
+});
+```
+
+### Empty Workspace
+
+```javascript
+import { test } from 'vitest';
+import { vscode } from 'testdriverai/presets';
+
+test('empty workspace welcome screen', async (context) => {
+  const { vscode } = await vscode(context, {
+    // No workspace specified - opens to welcome screen
+  });
+  
+  await vscode.find('Open Folder button').click();
+  await vscode.type('/tmp/my-project');
+  await vscode.pressKeys(['enter']);
+  
+  await vscode.assert('Folder is opened');
+});
+```
+
+### Testing on Different Operating Systems
+
+```javascript
+import { test } from 'vitest';
+import { vscode } from 'testdriverai/presets';
+
+test('windows vscode test', async (context) => {
+  const { vscode } = await vscode(context, {
+    workspace: 'C:\\Users\\TestUser\\project',
+    os: 'windows'
+  });
+  
+  await vscode.find('Explorer view').click();
+});
+
+test('mac vscode test', async (context) => {
+  const { vscode } = await vscode(context, {
+    workspace: '/Users/testuser/project',
+    os: 'mac'
+  });
+  
+  await vscode.find('Explorer view').click();
+});
+```
+
+### Extension Settings
+
+```javascript
+import { test } from 'vitest';
+import { vscode } from 'testdriverai/presets';
+
+test('configure extension settings', async (context) => {
+  const { vscode } = await vscode(context, {
+    extensions: ['ms-python.python']
+  });
+  
+  // Open settings
+  await vscode.pressKeys(['cmd', ',']);
+  
+  // Search for Python settings
+  await vscode.find('Search settings').type('python.linting');
+  
+  // Enable linting
+  await vscode.find('Python > Linting: Enabled checkbox').click();
+  
+  await vscode.assert('Linting is enabled');
+});
+```
+
+### Debugging Workflow
+
+```javascript
+import { test } from 'vitest';
+import { vscode } from 'testdriverai/presets';
+
+test('debug javascript file', async (context) => {
+  const { vscode, dashcam } = await vscode(context, {
+    workspace: '/tmp/debug-test',
+    extensions: ['ms-vscode.js-debug']
+  });
+  
+  // Open file
+  await vscode.find('index.js in Explorer').click();
+  
+  // Set breakpoint
+  await vscode.find('line 10 gutter').click();
+  
+  // Start debugging
+  await vscode.pressKeys(['F5']);
+  
+  // Wait for breakpoint
+  await vscode.assert('Debugger paused at breakpoint');
+  
+  // Step over
+  await vscode.pressKeys(['F10']);
+  
+  await vscode.assert('Debugger moved to next line');
+  
+  // Dashcam captures entire debug session
+});
+```
+
+## What It Does
+
+When you call `vscode()`, it automatically:
+
+1. **Initializes TestDriver** - Creates and connects to sandbox
+2. **Sets up Dashcam** - Authenticates and starts recording (if enabled)
+3. **Installs Extensions** - Downloads and installs specified extensions
+4. **Launches VS Code** - Opens VS Code with your workspace
+5. **Waits for Ready** - Ensures VS Code is focused and loaded
+6. **Returns Instances** - Provides ready-to-use testdriver, vscode alias, and dashcam
+
+At test end:
+- Dashcam automatically stops and saves replay URL
+- TestDriver automatically disconnects
+- All cleanup is handled for you
+
+## Common Patterns
+
+### File Explorer Interaction
+
+```javascript
+test('create new folder', async (context) => {
+  const { vscode } = await vscode(context, {
+    workspace: '/tmp/test-workspace'
+  });
+  
+  // Right-click in Explorer
+  await vscode.find('Explorer view').click({ button: 'right' });
+  await vscode.find('New Folder').click();
+  await vscode.type('src');
+  await vscode.pressKeys(['enter']);
+  
+  await vscode.assert('src folder appears in Explorer');
+});
+```
+
+### Terminal Commands
+
+```javascript
+test('run npm install', async (context) => {
+  const { vscode } = await vscode(context, {
+    workspace: '/tmp/node-project'
+  });
+  
+  // Open integrated terminal
+  await vscode.pressKeys(['ctrl', '`']);
+  
+  // Run command
+  await vscode.type('npm install');
+  await vscode.pressKeys(['enter']);
+  
+  // Wait for completion
+  await vscode.assert('node_modules folder created');
+});
+```
+
+### Search and Replace
+
+```javascript
+test('find and replace', async (context) => {
+  const { vscode } = await vscode(context, {
+    workspace: '/tmp/project'
+  });
+  
+  // Open file
+  await vscode.find('app.js').click();
+  
+  // Open find/replace
+  await vscode.pressKeys(['cmd', 'h']);
+  
+  // Enter search term
+  await vscode.find('Find input').type('oldFunction');
+  
+  // Enter replacement
+  await vscode.find('Replace input').type('newFunction');
+  
+  // Replace all
+  await vscode.find('Replace All button').click();
+  
+  await vscode.assert('All occurrences replaced');
+});
+```
+
+### Git Integration
+
+```javascript
+test('commit changes', async (context) => {
+  const { vscode } = await vscode(context, {
+    workspace: '/tmp/git-project',
+    extensions: ['vscode.git']
+  });
+  
+  // Open Source Control
+  await vscode.find('Source Control icon').click();
+  
+  // Stage changes
+  await vscode.find('Stage All Changes button').click();
+  
+  // Enter commit message
+  await vscode.find('Commit message input').type('Initial commit');
+  
+  // Commit
+  await vscode.find('Commit button').click();
+  
+  await vscode.assert('Changes committed');
+});
+```
+
+## Extension ID Reference
+
+Common extension IDs for testing:
+
+| Extension | ID |
+|-----------|-----|
+| Python | `ms-python.python` |
+| ESLint | `dbaeumer.vscode-eslint` |
+| Prettier | `esbenp.prettier-vscode` |
+| GitLens | `eamodio.gitlens` |
+| Live Server | `ritwickdey.liveserver` |
+| Docker | `ms-azuretools.vscode-docker` |
+| REST Client | `humao.rest-client` |
+| Debugger for Chrome | `msjsdiag.debugger-for-chrome` |
+
+Find more extension IDs on the [VS Code Marketplace](https://marketplace.visualstudio.com/).
+
+## Using with provision()
+
+The `vscode()` preset can also be called via the unified `provision()` function:
+
+```javascript
+import { provision } from 'testdriverai/presets';
+
+test('using provision', async (context) => {
+  const { vscode } = await provision('vscode', {
+    workspace: '/tmp/project',
+    extensions: ['ms-python.python']
+  }, context);
+  
+  // Same functionality as vscode() directly
+});
+```
+
+## Error Handling
+
+```javascript
+test('handles missing extension', async (context) => {
+  try {
+    const { vscode } = await vscode(context, {
+      extensions: ['non.existent.extension']
+    });
+    
+    // Will throw error if extension installation fails
+  } catch (error) {
+    // Cleanup still happens automatically
+    expect(error.message).toContain('extension');
+  }
+});
+```
+
+## See Also
+
+- [Provision API](/v7/progressive-apis/PROVISION) - Overview of all presets
+- [Chrome Preset](/v7/presets/chrome) - Testing web applications
+- [Electron Preset](/v7/presets/electron) - Testing Electron apps
+- [Vitest Integration](/v7/guides/vitest) - Complete Vitest setup guide
+- [Hooks API](/v7/progressive-apis/HOOKS) - Manual lifecycle control