react-native-svg icon indicating copy to clipboard operation
react-native-svg copied to clipboard

feat: e2e snapshot tests

Open CDFN opened this issue 7 months ago • 1 comments

Summary

This PR adds E2E tests based on view screenshots done via react-native-view-shot. It only works with devices that have their pixel ratio equal 3. If you want to use device with different pixel ratio, you need to adjust it in e2e/generateReferences.ts viewport and regenerate reference images (see below).

Steps to run tests:

  • Run Metro server for example app via yarn start in example app's directory
  • Run example app on platform of your choice (currently only Android & iOS are supported) via yarn android or yarn ios in example app's directory
  • Run yarn e2e in project's root directory to start Jest server
  • Select E2E tab in example app
  • Wait for tests to finish
  • You can see test results, as well as diffs (actual rendered svg vs reference image) in e2e/diffs directory

Steps to add new test cases:

  • Put SVG of your choice to e2e/cases directory
  • Run yarn generateE2eRefrences, this will open headless chrome browser via puppeteer and snapshot all rendered SVGs to .png files and later use them as reference in tests
  • You should see new .png files in e2e/references
  • When you run E2E tests again, it will use new test case(s) you've added

Test Plan

https://github.com/software-mansion/react-native-svg/assets/41289688/24ee5447-ce9a-43b6-9dde-76229d25a30a

https://github.com/software-mansion/react-native-svg/assets/41289688/71d1873f-8155-4494-80bd-e4c1fa72a065

What's required for testing (prerequisites)?

See Summary

What are the steps to reproduce (after prerequisites)?

See Summary

Compatibility

OS Implemented
iOS
Android
Web

Checklist

  • [X] I have tested this on a device and a simulator
  • [x] I added documentation in README.md
  • [X] I updated the typed files (typescript)
  • [X] I added a test for the API in the __tests__ folder

CDFN avatar Jul 09 '24 10:07 CDFN