Create a screenshots page that will allow us to do screenshot testing #19385
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Signed-off-by: Andy Balaam andyb@element.io
Notes: Create a screenshots page that will allow us to do screenshot testing
I am working on a change that will modify the code of some pages without any visible effect in a visual browser. (The change is to use more
table
elements to make the UI easier to navigate in screen readers.)I want to be able to check that my changes do not alter the appearance at all, so I think screenshot tests would be a good way to do this. The contributing guide mentions screenshot tests, but when I talked about this to the team we figured out that none actually exist yet.
So, this change is a draft proposal of how we could start to provide consistent renders of various components. It creates a page where we can choose a component and see it rendered:
The dropdown at the top allows choosing various different components. The list of components and how to render them is defined in
src/vector/screenshots.tsx
This change is intended to be combined with a related change in
matrix-react-sdk
which will load this page in Puppeteer, and take a screenshot of each component.I'm posting this to ask for feedback about whether this could be a useful feature, and whether the implementation strategy I've developed looks reasonable.
Thanks!
This PR currently has no changelog labels, so will not be included in changelogs.
A reviewer can add one of:
T-Deprecation
,T-Enhancement
,T-Defect
,T-Task
to indicate what type of change this is, or addType: [enhancement/defect/task]
to the description and I'll add them for you.