mirror of
https://github.com/zoriya/react-native-svg.git
synced 2025-12-05 22:56:11 +00:00
a089cc2efc
<!-- 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>
93 lines
4.0 KiB
Markdown
93 lines
4.0 KiB
Markdown
# 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](https://github.com/react-native-svg/react-native-svg/tree/main/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](https://reactnative.dev/docs/pixelratio) = `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"](https://stackoverflow.com/a/26944812/3510245))
|
|
- **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](https://github.com/release-it/release-it) to release new versions of library from `main` branch.
|
|
|
|
## Reporting issues
|
|
|
|
You can report issues on our [bug tracker](https://github.com/react-native-community/react-native-svg/issues). 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.
|