Binary Glitch Art Editor

Transform any file into glitch art by editing at the binary level. View and manipulate individual bits to create unique digital artifacts, visual effects, and experimental digital art.

Features

• Activity Bar Integration: Dedicated activity bar icon for quick access to any open file
• Open Files View: See all open files and launch them with the glitch editor with one click
• Binary File Viewer: Inspect and manipulate files at the bit level with pagination for large files
• Paginated Navigation: Navigate through large binary files with page controls and offset jumping
• Glitch Art Generation: Apply various glitch effects to images
• Real-time Preview: See changes as you edit
• Multiple File Formats: Support for BMP, JPG, PNG, GIF
• VS Code Integration: Seamless editor experience

🎯 Quick Start

Using the Activity Bar (Recommended)

1. Find the Activity Bar Icon: Look for the 👁️ (eye) icon in VS Code's activity bar (left sidebar)
2. Open the Glitch Art View: Click the eye icon to open the "Open Files" panel
3. Select Any File: See all your currently open files listed
4. Launch Glitch Editor: Click the 👁️ eye icon next to any file to open it with the Glitch Art Editor
5. Start Creating: Apply glitch effects and see real-time results!

Alternative Methods

• Right-click any file → "Open with" → "Binary Glitch Art Editor"
• Command Palette → "View: Reopen Editor With" → "Binary Glitch Art Editor"

📁 Project Structure

vscode/
├── extension/              # Extension source code
│   ├── src/
│   │   ├── extension.ts    # Main extension entry point
│   │   ├── glitchArtEditorProvider.ts  # Custom editor provider
│   │   ├── webview.ts      # Webview communication
│   │   └── ui/             # UI components and styles
│   └── tsconfig.json       # Extension TypeScript configuration
├── tests/                  # All test code
│   ├── playwright/         # Playwright GUI tests
│   ├── vscode-suite/       # VS Code integration tests
│   ├── test-webview.html   # Test HTML file
│   └── playwright.config.ts  # Playwright configuration
├── scripts/                # Build and utility scripts
├── package.json            # Main package configuration
├── tsconfig.json           # Root TypeScript configuration
└── out/                    # Compiled JavaScript output

🎭 Automated Testing & CI/CD

This project features a comprehensive automated testing infrastructure with 62 tests achieving 100% pass rate across multiple platforms.

📊 Test Coverage

🚀 Running Tests

Local Development

# Run all tests
npm test

# Run tests in headless mode
npm run test:headless

# Run CI simulation locally
npm run ci:local

# Run only Playwright tests
npm run test:playwright

# Run only VS Code tests
npm run test:vscode

CI Environment Commands

# Setup browsers for CI
npm run ci:setup

# Run tests with CI configuration
npm run ci:test

🔧 CI/CD Workflows

Playwright GUI Tests (.github/workflows/playwright-tests.yml)

• Platforms: Ubuntu, Windows, macOS
• Browser: Chromium (headless in CI)
• Triggers: Code changes in extension/, tests/, config files, or manual dispatch
• Features:
  • Cross-platform compatibility testing
  • Comprehensive artifact collection (screenshots, videos, HTML reports)
  • Intelligent retry logic and error handling
  • GitHub Actions integration with step summaries

Build & Basic Tests (.github/workflows/build.yml)

• TypeScript compilation
• Linting and code quality checks
• Extension packaging validation
• Dependency integrity verification

📋 Test Architecture

Test Organization

tests/
├── playwright/
│   ├── error-handling.spec.ts    # Error scenarios and edge cases
│   ├── ui-components.spec.ts     # Interface and accessibility
│   ├── file-formats.spec.ts      # Multi-format support testing
│   ├── glitch-algorithm.spec.ts  # Visual effects validation
│   ├── integration.spec.ts       # End-to-end workflows
│   ├── activity-bar.spec.ts      # Activity bar webview simulation
│   └── glitch.spec.ts           # Basic functionality verification
├── vscode-suite/                 # VS Code integration tests
│   ├── extension.test.ts         # Extension activation and commands
│   ├── activityBarIntegration.test.ts  # Activity bar registration tests
│   ├── workflow.test.ts          # End-to-end VS Code workflows
│   ├── customEditor.test.ts      # Custom editor provider tests
│   └── webviewIntegration.test.ts  # Webview communication tests
└── test-webview.html            # Test environment HTML

Test Infrastructure

• Framework: Playwright with TypeScript
• Test Environment: Custom HTML with inline JavaScript
• Server: HTTP server for serving test assets
• Visual Testing: Canvas manipulation and screenshot comparison
• Cross-Platform: Matrix testing on Ubuntu, Windows, macOS

🎯 Key Testing Innovations

1. Functional Visual Testing: Tests verify behavior changes rather than pixel-perfect screenshots
2. Real Glitch Algorithm: Implements actual image manipulation for authentic testing
3. Self-Contained Environment: No external dependencies or complex setup
4. Comprehensive Error Coverage: Tests handle corrupted data, invalid inputs, and edge cases
5. Accessibility Compliance: Keyboard navigation and focus management validation

📚 Documentation

• GUI Testing Lessons: Comprehensive lessons from building the GUI test suite
• CI/CD Testing Lessons: Pitfalls and best practices for automated GUI testing in CI

🐛 Debugging Failed Tests

When tests fail in CI:

1. Download Artifacts: Check the GitHub Actions run for test artifacts
2. Review Screenshots: Visual evidence of test state at failure
3. Watch Videos: Full test execution recordings
4. Check HTML Reports: Interactive Playwright reports with detailed traces
5. Local Reproduction: Use npm run ci:local to simulate CI environment

⚡ Performance Characteristics

• Full Test Suite: ~2 minutes across 3 platforms
• Single Platform: ~30-40 seconds
• Resource Usage: Moderate (canvas operations are CPU-intensive)
• Reliability: 100% pass rate with proper timeout handling

🔄 Maintenance

The test suite requires periodic maintenance:

• Monthly: Browser updates and dependency management
• Per UI Change: Screenshot baseline updates if using visual assertions
• Quarterly: CI runner updates and performance optimization
• As Needed: Flaky test debugging and timeout adjustments

Development

Prerequisites

• Node.js 18+
• VS Code 1.74+
• Git
• VS Code Extension Manager (vsce) - install with: npm install -g @vscode/vsce

Setup

# Clone repository
git clone https://github.com/glitchartapp/binary-art-editor.git
cd binary-art-editor

# Install dependencies
npm install

# Compile TypeScript
npm run compile

# Run tests
npm test

# For development, use watch mode to auto-compile changes
npm run watch

Building and Packaging

# Compile TypeScript (clean build)
npm run compile

# Package extension for distribution (creates binary-art-editor-<version>.vsix)
npm run package:versioned

# Install extension locally (packages and installs)
npm run package:install

# Package without versioning (creates binary-art-editor.vsix)
npm run package

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run the full test suite: npm run ci:local
5. Submit a pull request

Note: All pull requests must pass the automated test suite. The CI/CD pipeline will run comprehensive cross-platform testing on your changes.

License

MIT License - see LICENSE for details.