zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2025-12-06 07:06:11 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
6377be5f2027ed67612364c7e3057d6c429ae810
react-native-svg/CONTRIBUTING.md
Bartosz Stefańczyk a089cc2efc feat: e2e snapshot tests (#2338) 
<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect -->

# 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](https://reactnative.dev/docs/pixelratio) 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



<!-- Check completed item, when applicable, via: [X] -->

- [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

---------

Co-authored-by: bohdanprog <bohdan.artiukhov@swmansion.com>
Co-authored-by: Jakub Grzywacz <jakub.grzywacz@swmansion.com>
2024-08-23 13:29:38 +02:00

4.0 KiB
Raw Blame History

Contributing to React Native Svg

Thank you for helping out with react-native-svg! We'd like to make contributions as pleasant as possible, so here's a small guide of how we see it. Happy to hear your feedback about anything, so please let us know.

Modifying react-native-svg

  1. Fork this repository
  2. Clone your fork
  3. Make a branch for your feature or bug fix (i.e. git checkout -b added-getfoobar)
  4. Work your magic
  5. Execute yarn link when done.

Testing your changes

Add test example in tests-example concerning your change following the convention of TestX.tsx where X is your PR number.

Tests

We use typescript for type checks, eslint with prettier for linting/formatting. All tests are run by github actions for all opened pull requests.

  • yarn test: Run all tests, except for e2e (see note below).
  • yarn lint: Run eslint check.
  • yarn tsc: Run typescript check.
  • yarn jest: Run jest type check.
  • yarn e2e: Run E2E tests (see section below)

Running E2E tests:

Warning

Reference images in this repository are generated with pixel ratio = 3. Make sure to run tests on a device that also has pixel ratio equal 3. Otherwise tests will fail. In order to use device with different pixel ratio, adjust it in e2e/generateRefereces.ts viewport and regenerate references.

  1. Navigate to the example application's directory and initiate the Metro server using the yarn start command.
  2. To run the example application on your preferred platform (note: currently only Android and iOS are supported), execute the command yarn android or yarn ios within the example app's directory.
  3. Start the Jest server by running yarn e2e in the project's root directory.
  4. In the example application, select the E2E tab.
  5. Allow the tests to complete.
  6. The test results, along with any differences (i.e. the actual rendered svg versus the reference image), can be viewed in the e2e/diffs directory.

To add new E2E test cases, proceed as follows:

  1. Put an SVG file of your selection into the e2e/cases directory.
  2. Execute yarn generateE2eRefrences. This action launches a headless Chrome browser via Puppeteer, capturing snapshots of all rendered SVGs as .png files. These files will serve as a reference during testing.
  3. Check the e2e/references directory to observe newly created .png files.
  4. When you rerun the E2E tests, the new test case(s) you've added will be incorporated.

Sending a pull request

When you're sending a pull request:

  • Communication is a key. If you want fix/add something, please consider either opening a new issue or finding an existing one so we can further discuss it.
  • We prefer small pull requests focused on one change, as those are easier to test/check.
  • Please make sure that all tests are passing on your local machine.
  • Follow the template when opening a PR.

Commits and versioning

All PRs are merged into the main branch and released with release-it.

Most notably prefixes you'll see:

  • fix: Bug fixes
  • feat: New feature implemented
  • chore: Changes that are not affecting end user (CI config changes, scripts, "grunt work")
  • docs: Documentation changes.
  • perf: A code change that improves performance.
  • refactor: A code change that neither fixes a bug nor adds a feature.
  • test: Adding missing tests or correcting existing tests.

Release process

We use release-it to release new versions of library from main branch.

Reporting issues

You can report issues on our bug tracker. Please search for existing issues and follow the issue template when opening one.

License

By contributing to React Native Svg, you agree that your contributions will be licensed under the MIT license.