|
7 | 7 | | `mocha` + `chai` | Unit test runner and assertions | |
8 | 8 | | `sinon` | Stubs and mocks | |
9 | 9 | | `@vscode/test-electron` | Extension-host tests with real VS Code APIs | |
| 10 | +| `vscode-extension-tester` | **NEW**: UI automation with Selenium WebDriver | |
10 | 11 | | `jsdom` | Webview DOM simulation | |
11 | 12 | | `nyc` | Coverage reporting (target: 80% for `types.ts`, 60% overall) | |
12 | 13 |
|
|
16 | 17 | test/ |
17 | 18 | ├── unit/ # Pure logic, no VS Code host (fast) |
18 | 19 | ├── extension/ # Extension-host tests via @vscode/test-electron |
| 20 | +├── ui/ # **NEW**: UI tests with vscode-extension-tester |
| 21 | +│ └── suite/ # UI automation tests (InputBox, QuickPick, TreeView) |
19 | 22 | ├── webview/ # DOM tests with jsdom |
20 | 23 | ├── mocks/ # Shared mock factories |
21 | 24 | └── fixtures/ # Sample workspaces and .weaudit files |
22 | 25 | ``` |
23 | 26 |
|
| 27 | +## UI Testing with vscode-extension-tester |
| 28 | + |
| 29 | +**NEW**: We use [vscode-extension-tester](https://github.com/redhat-developer/vscode-extension-tester) (ExTester) for full UI automation. This allows us to: |
| 30 | +- Type into InputBox and QuickPick elements programmatically |
| 31 | +- Interact with tree views (click, expand, verify content) |
| 32 | +- Test the actual user experience, not just the API |
| 33 | + |
| 34 | +### Key Capabilities |
| 35 | + |
| 36 | +- **InputBox Interaction**: Can type custom titles for findings/notes |
| 37 | +- **TreeView Testing**: Can click items, verify labels, test drag-and-drop |
| 38 | +- **Command Palette**: Can invoke commands via UI |
| 39 | +- **Full User Experience**: Tests what users actually see and interact with |
| 40 | + |
| 41 | +### Running UI Tests |
| 42 | + |
| 43 | +```bash |
| 44 | +# Run all tests (unit + integration + UI) |
| 45 | +npm run test:all |
| 46 | + |
| 47 | +# Run only UI tests |
| 48 | +npm run test:ui |
| 49 | + |
| 50 | +# Setup UI test environment (download VS Code + ChromeDriver) |
| 51 | +npm run test:ui-setup |
| 52 | +``` |
| 53 | + |
| 54 | +### Example UI Test |
| 55 | + |
| 56 | +```typescript |
| 57 | +import { InputBox, Workbench } from 'vscode-extension-tester'; |
| 58 | + |
| 59 | +it("should create finding with custom title", async () => { |
| 60 | + const workbench = new Workbench(); |
| 61 | + |
| 62 | + // Execute command |
| 63 | + await workbench.executeCommand("weAudit: New Finding from Selection"); |
| 64 | + |
| 65 | + // Type into input box (impossible with @vscode/test-electron!) |
| 66 | + const input = await InputBox.create(); |
| 67 | + await input.setText("SQL Injection Vulnerability"); |
| 68 | + await input.confirm(); |
| 69 | + |
| 70 | + // Verify in tree view |
| 71 | + // ... assertions |
| 72 | +}); |
| 73 | +``` |
| 74 | + |
| 75 | +### Hybrid Testing Strategy |
| 76 | + |
| 77 | +We use **both** testing frameworks: |
| 78 | +- `@vscode/test-electron` - Fast integration tests for API-level operations |
| 79 | +- `vscode-extension-tester` - UI tests for InputBox, QuickPick, TreeView interactions |
| 80 | + |
| 81 | +This gives us the best of both worlds: speed + comprehensive coverage. |
| 82 | + |
24 | 83 | --- |
25 | 84 |
|
26 | 85 | ## Phase 1: Data Integrity (P0) |
|
0 commit comments