172 lines
4.6 KiB
Markdown
172 lines
4.6 KiB
Markdown
# E2E Tests
|
|
|
|
This directory contains end-to-end tests for the Adritian Hugo theme using Playwright.
|
|
|
|
## Test Structure
|
|
|
|
### Existing Tests
|
|
- `basic.spec.ts` - Basic theme functionality (homepage, theme switching, navigation)
|
|
- `blog.spec.ts` - Blog page content and navigation
|
|
- `theme-switch.spec.ts` - Theme switching functionality
|
|
- `language-switch.spec.ts` - Language switching functionality
|
|
- `experience.spec.ts` - Experience section tests
|
|
- `search.spec.ts` - Search functionality
|
|
- `html-validation.spec.ts` - HTML validation
|
|
- `tags.spec.ts` - Tag pages
|
|
- `contact.spec.ts` - Contact form
|
|
- `list-style.spec.ts` - List style variations
|
|
- `sections.spec.ts` - Section rendering
|
|
- `no-menus.spec.ts` - Tests for configurations without menus
|
|
|
|
### New Features Tests
|
|
- **`new-features.spec.ts`** - Comprehensive tests for the new blog features added in the latest release:
|
|
- **Related Posts**: Tests for related posts display, clickability, and tag rendering
|
|
- **Social Sharing Buttons**: Tests for all sharing platforms, correct links, and ARIA labels
|
|
- **Table of Contents**: Tests for TOC display, navigation, and sticky positioning
|
|
- **Enhanced Reading Metadata**: Tests for reading time, word count, publish date, and last modified date
|
|
- **Comments Integration**: Structure tests for comment system integration
|
|
- **Dark Mode Support**: Tests for all new features in dark mode
|
|
- **Responsive Design**: Tests for mobile and tablet viewports
|
|
- **Multilingual Support**: Tests for translated labels
|
|
- **Accessibility**: Tests for heading hierarchy, keyboard navigation, and semantic HTML
|
|
- **Performance**: Tests for page load time and layout stability
|
|
|
|
## Running Tests
|
|
|
|
### Run all tests
|
|
```bash
|
|
npm test
|
|
```
|
|
|
|
### Run E2E tests only
|
|
```bash
|
|
npm run test:e2e
|
|
```
|
|
|
|
### Run new features tests only
|
|
```bash
|
|
npm run test:e2e:new-features
|
|
```
|
|
|
|
### Run tests without menus
|
|
```bash
|
|
npm run test:e2e:no-menus
|
|
```
|
|
|
|
### Run tests in UI mode (interactive)
|
|
```bash
|
|
npm run test:e2e:ui
|
|
```
|
|
|
|
### Run tests in debug mode
|
|
```bash
|
|
npm run test:e2e:debug
|
|
```
|
|
|
|
## Test Coverage for New Features
|
|
|
|
The `new-features.spec.ts` test suite includes **27 comprehensive tests** covering:
|
|
|
|
### Related Posts (3 tests)
|
|
- ✅ Display and structure validation
|
|
- ✅ Navigation functionality
|
|
- ✅ Tag rendering
|
|
|
|
### Social Sharing Buttons (4 tests)
|
|
- ✅ Section display
|
|
- ✅ All platform buttons (Twitter, LinkedIn, Facebook, Email)
|
|
- ✅ Correct share URLs
|
|
- ✅ ARIA labels for accessibility
|
|
|
|
### Table of Contents (4 tests)
|
|
- ✅ TOC display when enabled
|
|
- ✅ Navigation links generation
|
|
- ✅ Section navigation functionality
|
|
- ✅ Sticky positioning
|
|
|
|
### Enhanced Reading Metadata (5 tests)
|
|
- ✅ Reading time display
|
|
- ✅ Word count display
|
|
- ✅ Publish date display
|
|
- ✅ Last modified date display
|
|
- ✅ Metadata structure
|
|
|
|
### Dark Mode Support (1 test)
|
|
- ✅ All features visible and functional in dark mode
|
|
|
|
### Responsive Design (2 tests)
|
|
- ✅ Mobile viewport rendering
|
|
- ✅ Responsive grid adaptation
|
|
|
|
### Multilingual Support (1 test)
|
|
- ✅ Translated labels in different languages
|
|
|
|
### Accessibility (4 tests)
|
|
- ✅ Proper heading hierarchy
|
|
- ✅ Keyboard navigation for share buttons
|
|
- ✅ Keyboard navigation for TOC
|
|
- ✅ Semantic HTML structure
|
|
|
|
### Performance (2 tests)
|
|
- ✅ Page load time
|
|
- ✅ Layout stability (no layout shift)
|
|
|
|
### Comments Integration (1 test)
|
|
- ✅ Structure validation for comment systems
|
|
|
|
## Prerequisites
|
|
|
|
1. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
2. Install Playwright browsers:
|
|
```bash
|
|
npx playwright install chromium
|
|
```
|
|
|
|
3. Build the example site:
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
## Configuration
|
|
|
|
Tests use the Playwright configuration in `playwright.config.ts` which:
|
|
- Runs tests against `http://localhost:1313`
|
|
- Automatically starts the Hugo server
|
|
- Captures screenshots and videos on test failures
|
|
- Generates HTML reports
|
|
|
|
## Writing New Tests
|
|
|
|
When adding new features to the theme:
|
|
1. Create or update test files in `tests/e2e/`
|
|
2. Follow existing patterns for test structure
|
|
3. Include tests for:
|
|
- Visual rendering
|
|
- Functionality
|
|
- Accessibility
|
|
- Dark mode compatibility
|
|
- Responsive design
|
|
- Multilingual support (if applicable)
|
|
|
|
## CI/CD Integration
|
|
|
|
Tests are designed to run in CI environments with the `TEST_NO_MENUS` environment variable to handle different configurations.
|
|
|
|
## Test Reports
|
|
|
|
After running tests, view the HTML report:
|
|
```bash
|
|
npx playwright show-report playwright-report
|
|
```
|
|
|
|
## Debugging Failed Tests
|
|
|
|
1. Run in UI mode to see tests execute in real-time
|
|
2. Use `--debug` flag to step through tests
|
|
3. Check screenshots and videos in `test-results/`
|
|
4. Review traces with: `npx playwright show-trace <trace-file>`
|