# MCP Office Tools - Test Dashboard

Beautiful, interactive HTML dashboard for viewing test results with Microsoft Office-inspired design.

## Features

- **MS Office Theme**: Modern Microsoft Office 365-inspired design with Fluent Design elements
- **Category-based Organization**: Separate results by Word, Excel, PowerPoint, Universal, and Server categories
- **Interactive Filtering**: Search and filter tests by name, category, or status
- **Detailed Test Views**: Expand any test to see inputs, outputs, errors, and tracebacks
- **Real-time Statistics**: Pass/fail rates, duration metrics, and category breakdowns
- **Self-contained**: Works offline with no external dependencies

## Quick Start

### Run All Tests with Dashboard

```bash
# Run both pytest and torture tests, generate dashboard, and open in browser
python run_dashboard_tests.py
```

### Run Only Pytest Tests

```bash
# Run pytest with dashboard plugin
pytest -p tests.pytest_dashboard_plugin --dashboard-output=reports/test_results.json

# Open dashboard
open reports/test_dashboard.html  # macOS
xdg-open reports/test_dashboard.html  # Linux
start reports/test_dashboard.html  # Windows
```

### View Existing Results

Simply open `reports/test_dashboard.html` in your browser. The dashboard will automatically load `test_results.json` from the same directory.

## Dashboard Components

### Summary Cards

Four main summary cards show:
- **Total Tests**: Number of test cases executed
- **Passed**: Successful tests with pass rate and progress bar
- **Failed**: Tests with errors
- **Duration**: Total execution time

### Filter Controls

- **Search Box**: Filter tests by name, module, or category
- **Category Filters**: Filter by Word, Excel, PowerPoint, Universal, or Server
- **Status Filters**: Show only passed, failed, or skipped tests

### Test Results

Each test displays:
- **Status Icon**: Visual indicator (✓ pass, ✗ fail, ⊘ skip)
- **Test Name**: Descriptive test name
- **Category Badge**: Color-coded category (Word=blue, Excel=green, PowerPoint=orange)
- **Duration**: Execution time in milliseconds
- **Expandable Details**: Click to view inputs, outputs, errors, and full traceback

## File Structure

```
reports/
├── test_dashboard.html       # Main dashboard (open this in browser)
├── test_results.json         # Generated test data (auto-loaded by dashboard)
├── pytest_results.json       # Intermediate pytest results
└── README.md                 # This file
```

## Design Philosophy

### Microsoft Office Color Palette

- **Word Blue**: `#2B579A` - Used for Word-related tests
- **Excel Green**: `#217346` - Used for Excel-related tests
- **PowerPoint Orange**: `#D24726` - Used for PowerPoint-related tests
- **Primary Blue**: `#0078D4` - Accent color (Fluent Design)

### Fluent Design Principles

- **Subtle Shadows**: Cards have soft shadows for depth
- **Rounded Corners**: 8px border radius for modern look
- **Hover Effects**: Interactive elements respond to mouse hover
- **Typography**: Segoe UI font family (Office standard)
- **Clean Layout**: Generous whitespace and clear hierarchy

## Integration with CI/CD

### GitHub Actions Example

```yaml
- name: Run Tests with Dashboard
  run: |
    python run_dashboard_tests.py

- name: Upload Test Dashboard
  uses: actions/upload-artifact@v3
  with:
    name: test-dashboard
    path: reports/
```

### GitLab CI Example

```yaml
test_dashboard:
  script:
    - python run_dashboard_tests.py
  artifacts:
    paths:
      - reports/
    expire_in: 1 week
```

## Customization

### Change Dashboard Output Location

```bash
# Custom output path for pytest
pytest -p tests.pytest_dashboard_plugin --dashboard-output=custom/path/results.json
```

### Modify Colors

Edit the CSS variables in `test_dashboard.html`:

```css
:root {
    --word-blue: #2B579A;
    --excel-green: #217346;
    --powerpoint-orange: #D24726;
    /* ... more colors ... */
}
```

## Troubleshooting

### Dashboard shows "No Test Results Found"

- Ensure `test_results.json` exists in the `reports/` directory
- Run tests first: `python run_dashboard_tests.py`
- Check browser console for JSON loading errors

### Tests not categorized correctly

- Categories are determined by test path/name
- Ensure test files follow naming convention (e.g., `test_word_*.py`)
- Edit `_categorize_test()` in `pytest_dashboard_plugin.py` to customize

### Dashboard doesn't open automatically

- May require manual browser opening
- Use the file path printed in terminal
- Check that `webbrowser` module is available

## Advanced Usage

### Extend the Plugin

The pytest plugin can be customized by editing `tests/pytest_dashboard_plugin.py`:

```python
def _extract_inputs(self, item):
    """Customize how test inputs are extracted"""
    # Your custom logic here
    pass

def _categorize_test(self, item):
    """Customize test categorization"""
    # Your custom logic here
    pass
```

### Add Custom Test Data

The JSON format supports additional fields:

```json
{
  "metadata": { /* your custom metadata */ },
  "summary": { /* summary stats */ },
  "categories": { /* category breakdown */ },
  "tests": [
    {
      "name": "test_name",
      "custom_field": "your_value",
      /* ... standard fields ... */
    }
  ]
}
```

## Contributing

When adding new test categories or features:

1. Update `_categorize_test()` in the pytest plugin
2. Add corresponding color scheme in HTML dashboard CSS
3. Add filter button in dashboard controls
4. Update this README with new features

## License

Part of the MCP Office Tools project. See main project LICENSE file.