Test/add e2e and unit testing #1282
Conversation
- Introduced Playwright for E2E testing with a new configuration file. - Added test scripts to package.json for running E2E tests. - Updated package-lock.json and package.json with new dependencies for Playwright and types. - Created new SVG snapshot files for various layers (ruler, scaleBar, temperature, terrain, vignette, zones) to support visual testing. - Excluded e2e directory from TypeScript compilation.
|
FYI: this will fail until #1280 is mergesd |
There was a problem hiding this comment.
Pull request overview
This pull request adds comprehensive end-to-end (E2E) and unit testing infrastructure to the Fantasy Map Generator project using Playwright and Vitest.
Changes:
- Adds Playwright for browser-based E2E testing with GitHub Actions CI integration
- Adds Vitest for unit and browser-based testing capabilities
- Includes comprehensive E2E tests for all 30+ map layer rendering with snapshot testing
- Adds example unit test for the
roundutility function - Updates project version from 1.109.5 to 1.110.0
Reviewed changes
Copilot reviewed 35 out of 40 changed files in this pull request and generated 10 comments.
Show a summary per file
| File | Description |
|---|---|
| playwright.config.ts | Playwright E2E test configuration targeting production build on localhost:4173 |
| vitest.browser.config.ts | Vitest browser testing configuration using Playwright provider |
| .github/workflows/playwright.yml | GitHub Actions workflow for automated E2E testing on pull requests |
| package.json | Adds testing dependencies (@playwright/test, vitest, @vitest/browser packages) and test scripts |
| package-lock.json | Lock file updates for new testing dependencies, version bump to 1.110.0 |
| e2e/layers.spec.ts | Comprehensive E2E tests validating all map layer elements with HTML snapshots |
| e2e/layers.spec.ts-snapshots/*.html | 35 snapshot files capturing expected HTML output for each map layer |
| src/utils/stringUtils.test.ts | Example unit test for the round utility function |
| tsconfig.json | Excludes e2e tests from TypeScript compilation |
| .gitignore | Adds test artifact directories (playwright-report, test-results) |
| locators: { | ||
| testIdAttribute: 'id', |
There was a problem hiding this comment.
The testIdAttribute is set to 'id', which means Playwright locators will use regular HTML id attributes for element selection. This could conflict with existing IDs in the application. Consider using a more specific attribute like data-testid to avoid potential conflicts with application logic that relies on element IDs.
There was a problem hiding this comment.
I would leave this until we did more refactoring. This is just regression testing for now to not manipulate the whole HTML now
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
✅ Deploy Preview for afmg ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
- Added ruler layer snapshot with hidden display. - Added scale bar layer snapshot with detailed structure and styling. - Added temperature layer snapshot with opacity and stroke settings. - Added terrain layer snapshot with ocean and land heights groups. - Added vignette layer snapshot with mask and opacity settings. - Added zones layer snapshot with specified opacity and stroke settings.
|
implemented all the valuable feedback from copilot @Azgaar :) |
|
all ready and running through now :) |
|
Great work, merging |
2 participants
Description
Type of change
Versioning