vscode-front-matter/lite/TESTING.md

Testing Front Matter Lite

This guide explains how to test the Front Matter Lite extension in various environments.

Prerequisites

• Built extension (run npm run build)
• VS Code installed locally OR
• Access to github.dev/vscode.dev

Testing Methods

1. Testing in VS Code Extension Development Host

This is the fastest way to test during development:

1. Open the lite folder in VS Code
2. Build the extension: npm run build
3. Press F5 to launch Extension Development Host
4. In the new window, open a folder or workspace
5. The Front Matter Lite sidebar should appear in the Activity Bar

To test virtual workspace features:

1. In Extension Development Host, open Command Palette (F1)
2. Run "Open Remote Repository"
3. Enter a GitHub repository URL (e.g., https://github.com/username/repo)
4. The extension will activate in virtual workspace mode

2. Testing in github.dev

1. Package the extension:

   npm install -g @vscode/vsce
   vsce package
   

2. This creates a .vsix file

3. Navigate to github.dev:

   • Go to any GitHub repository
   • Press . (period key)
   • OR change github.com to github.dev in the URL

4. Install the extension:

   • Click Extensions icon in Activity Bar
   • Click "..." menu
   • Choose "Install from VSIX..."
   • Select the generated .vsix file

5. Test the features

3. Testing in vscode.dev

Similar to github.dev:

1. Go to https://vscode.dev
2. Open a folder or repository
3. Install the extension from VSIX (as above)

Test Scenarios

Scenario 1: Register a Content Folder

1. Open a repository with markdown files
2. In Explorer, right-click on a folder
3. Select "Front Matter Lite > Register Content Folder (Lite)"
4. Enter a title
5. Verify:
   • Success message appears
   • Folder appears in Dashboard
   • Configuration is saved

Scenario 2: Create Content

1. Ensure at least one folder is registered
2. Click "Create Content" in the Dashboard OR
3. Run Command: "Front Matter Lite: Create Content (Lite)"
4. Select a content folder
5. Enter a file name
6. Verify:
   • File is created with front matter
   • File opens in editor
   • Front matter includes title, date, tags

Scenario 3: View Content in Dashboard

1. Register a folder with existing markdown files
2. Click "Refresh" in the Dashboard
3. Verify:
   • Files are listed
   • File names and folders are shown
   • Clicking a file opens it

Scenario 4: Virtual Workspace Detection

1. Open repository via "Open Remote Repository" or github.dev
2. Check Output channel "Front Matter Lite"
3. Verify message: "Running in virtual workspace mode"
4. Verify information message appears about limited features

Expected Behavior

Working Features ✅

• ✅ Register content folders
• ✅ Create new content files
• ✅ View registered folders in dashboard
• ✅ List content files in dashboard
• ✅ Open files from dashboard
• ✅ Basic front matter template
• ✅ Virtual workspace detection

Known Limitations ❌

• ❌ Cannot edit front matter in UI (use editor)
• ❌ No media upload/management
• ❌ No git integration
• ❌ No custom scripts
• ❌ No file system watch (manual refresh needed)
• ❌ Limited to 100 files per folder

Debugging

Enable Logging

1. View > Output
2. Select "Front Matter Lite" from dropdown
3. Check for error messages

Common Issues

Extension not appearing:

• Check that it's built: npm run build
• Verify dist/extension-web.js exists
• Check package.json has correct browser entry point

Commands not working:

• Check Output channel for errors
• Verify workspace has folders
• Ensure running in compatible environment

Dashboard not loading:

• Check browser console (if in github.dev/vscode.dev)
• Verify webview is enabled
• Check for Content Security Policy errors

Browser Console (github.dev/vscode.dev)

1. Press F12 to open Developer Tools
2. Check Console tab for JavaScript errors
3. Check Network tab for failed requests

Manual Testing Checklist

• Extension activates in virtual workspace
• Dashboard appears in Activity Bar
• Can register a folder via context menu
• Registered folders appear in dashboard
• Can create content via command
• Content file has correct front matter
• Files appear in dashboard after refresh
• Clicking file in dashboard opens it
• Virtual workspace mode detected
• Configuration persists
• Works in github.dev
• Works in vscode.dev
• Works in local VS Code

Performance Testing

Test with different repository sizes:

1. Small repo (<10 files)
2. Medium repo (10-50 files)
3. Large repo (50-100 files)

Verify:

• Dashboard loads within 2 seconds
• File creation is responsive
• No UI freezing

Reporting Issues

When reporting issues, include:

1. Environment (github.dev, vscode.dev, local)
2. Workspace type (virtual or file)
3. Steps to reproduce
4. Output channel logs
5. Browser console errors (if applicable)
6. Extension version

Next Steps

After testing:

1. Document any issues found
2. Verify all test scenarios pass
3. Test in different browsers (Chrome, Firefox, Edge, Safari)
4. Get feedback from users
5. Iterate on improvements