Website for the RFC Editor

Development

Prerequisites

• Docker Desktop
• WSL2 (Windows only)

Getting Started

Client

See /client/

TODO

Testing

Visual regression testing

Visual regression testing compares screenshots of the app against approved 'baseline' screenshots.

The pages or components being screenshotted are specified in *.story.vue files using Histoire.dev.

The screenshots are taken using Lost Pixel OSS in docker, ensuring that there are no OS differences in rendering between CI and local tests. These approved 'baseline' screenshots are found in client/.lostpixel/baseline.

How to test visual regressions

1. If necessary create or update a *.story.vue file with your components. Be sure to include every configuration of your component.
2. Run npm run story:dev to see the component library and view your component and make sure it works.
3. Run npm run story:build ...which builds the *.story.vue files.
4. npm run test:story ...tests screenshots of the aforementioned build (using Lost Pixel OSS) giving either a pass (exiting cleanly) or fail (exiting with an exception). a. If 'pass' then you're done, and you can push your changes. b. If 'fail' then run npm run test:story:view to view the differences in a browser. Find the *.story.vue files that were affected and rerun npm run story:build and npm run test:story until you're happy with the changes. When ready to approve ALL the changes run npm run test:story:approve, commit the updated 'baseline' images in client/.lostpixel/baseline, and push the changes. If

Troubleshooting npm run test:story:approve

This command should always succeed. If it fails it usually means there's a JavaScript exception being thrown in the app. Read all the console output carefully, and try viewing your component with npm run story:dev to see if there's an exception being thrown.