zoriya/react-native-svg
1
0
Fork 0
mirror of https://github.com/zoriya/react-native-svg.git synced 2025-12-05 22:56:11 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
a089cc2efcbea01de1a2b87c852b09d525a105ae
react-native-svg/e2e/cases/3.svg
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

29 lines
6.5 KiB
XML
Raw Blame History

<svg viewBox="0 0 135 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_4916_16071)">
<path d="M21.8791 70.772H133.563V21.879L112.633 0.94873H0.948853V49.8418L21.8791 70.772Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.111572 0.111572H112.979L134.4 21.5322V71.6093H21.5322L0.111572 50.1886V0.111572ZM1.78599 2.96998V49.495L21.0418 68.7508V22.2258L1.78599 2.96998ZM2.96998 1.78599L22.2258 21.0418H131.542L112.286 1.78599H2.96998ZM132.726 69.9348H22.7162V22.7162H132.726V69.9348Z" fill="#001A72"/>
<path d="M42.4744 41.414C42.4744 43.0884 41.3582 44.5396 38.6791 44.5396C37.507 44.5396 36.5582 44.2605 35.7209 43.9256V41.5815C36.614 42.028 37.6744 42.307 38.6233 42.307C39.5163 42.307 39.9628 42.028 39.9628 41.5256C39.9628 39.9629 35.7209 40.4652 35.7209 37.2838C35.7209 35.3303 37.2837 34.1582 39.4605 34.1582C40.3535 34.1582 41.1907 34.3815 42.0837 34.8838V37.2838C40.9116 36.5582 40.0744 36.3349 39.4047 36.3349C38.6233 36.3349 38.1768 36.614 38.1768 37.1163C38.1209 38.5675 42.4744 38.0094 42.4744 41.414Z" fill="#001A72"/>
<path d="M44.5953 39.3489C44.5953 36.5024 46.9395 34.1582 49.786 34.1582C52.6325 34.1582 54.9767 36.5024 54.9767 39.3489C54.9767 42.1954 52.6325 44.5396 49.786 44.5396C46.9395 44.4838 44.5953 42.1954 44.5953 39.3489ZM52.4093 39.3489C52.4093 37.7861 51.2372 36.614 49.786 36.614C48.3349 36.614 47.1628 37.7861 47.1628 39.3489C47.1628 40.9117 48.3349 42.0838 49.786 42.0838C51.2372 42.0838 52.4093 40.9117 52.4093 39.3489Z" fill="#001A72"/>
<path d="M60.7814 33.5441V34.3813H64.0744L62.9582 36.7255H60.8372V44.3162H58.4372V36.6697H56.7628V34.3255H58.4372V33.3766C58.4372 30.3627 60 28.8557 62.4558 28.8557C63.0698 28.8557 63.6279 28.9673 64.1303 29.079V31.4232C63.6838 31.2557 63.1814 31.1999 62.6791 31.1999C61.3396 31.1999 60.7814 32.0929 60.7814 33.5441Z" fill="#001A72"/>
<path d="M69.0976 36.6697V40.6325C69.0976 41.693 69.7116 42.1395 70.6604 42.1395C71.2744 42.1395 71.8883 41.972 72.3906 41.6372V44.093C71.7209 44.372 71.1069 44.5395 70.2139 44.5395C68.0372 44.5395 66.6976 43.3674 66.6976 40.9674V36.7255H65.2465V34.3813H66.6976V31.8139L69.0976 31.2V34.3813H72.3906V36.7255H69.0976V36.6697Z" fill="#001A72"/>
<path d="M89.7487 34.3813L86.5673 44.3162H84.1673L81.9906 37.5069L79.758 44.3162H77.358L74.1766 34.3813H76.9115L78.6976 41.0232L80.8185 34.3813H83.2185L85.3394 41.0232L87.1255 34.3813C87.1255 34.3813 89.7487 34.3813 89.7487 34.3813Z" fill="#001A72"/>
<path d="M90.9768 39.3489C90.9768 36.5024 93.0419 34.1582 95.8884 34.1582C97.0047 34.1582 97.8977 34.4931 98.5675 35.0512V34.3815H100.968V44.3163H98.6233V43.5349C97.9535 44.1489 97.0047 44.5396 95.8326 44.5396C93.0977 44.4838 90.9768 42.1954 90.9768 39.3489ZM98.7908 39.3489C98.7908 37.7861 97.6187 36.614 96.1675 36.614C94.7163 36.614 93.5443 37.7861 93.5443 39.3489C93.5443 40.9117 94.7163 42.0838 96.1675 42.0838C97.6187 42.0838 98.7908 40.9117 98.7908 39.3489Z" fill="#001A72"/>
<path d="M104.372 34.3815H106.716V35.721C107.442 34.3815 108.781 34.1582 109.953 34.1582V37.0047C108.279 36.5582 106.772 37.507 106.772 39.628V44.2605H104.372V34.3815Z" fill="#001A72"/>
<path d="M117.544 42.1954C118.493 42.1954 119.609 42.028 120.726 41.5815L119.498 44.0931C118.94 44.3163 118.102 44.5396 117.098 44.5396C113.581 44.5396 111.46 42.3629 111.46 39.3489C111.46 36.5024 113.581 34.1582 116.651 34.1582C118.716 34.1582 120.391 35.2187 121.06 36.5582V40.1861H114.028C114.363 41.3582 115.535 42.1954 117.544 42.1954ZM113.972 38.2884H119.163C118.828 37.1163 117.823 36.3908 116.54 36.3908C115.312 36.3908 114.363 37.1722 113.972 38.2884Z" fill="#001A72"/>
<path d="M49.6186 52.6883V59.2185H47.2186V53.079C47.2186 52.0185 46.4372 51.4046 45.6559 51.4046C44.8186 51.4046 44.0931 52.0185 44.0931 53.079V59.2185H41.6931V53.079C41.6931 52.0185 40.9117 51.4046 40.1303 51.4046C39.2931 51.4046 38.5675 52.0185 38.5675 53.079V59.2185H36.1675V49.2837H38.5117V50.0092C39.0698 49.3395 39.7954 49.1162 40.7442 49.1162C41.8047 49.1162 42.6977 49.5627 43.3117 50.3999C44.0931 49.5069 45.0977 49.1162 46.3256 49.1162C48.1675 49.1162 49.6186 50.5674 49.6186 52.6883Z" fill="#001A72"/>
<path d="M52.1301 54.251C52.1301 51.4045 54.1952 49.0603 57.0418 49.0603C58.158 49.0603 59.0511 49.3952 59.7208 49.9533V49.2836H62.1208V59.2184H59.7766V58.437C59.1069 59.051 58.158 59.4417 56.9859 59.4417C54.2511 59.4417 52.1301 57.0975 52.1301 54.251ZM59.9441 54.251C59.9441 52.6882 58.772 51.5161 57.3208 51.5161C55.8697 51.5161 54.6976 52.6882 54.6976 54.251C54.6976 55.8138 55.8697 56.9859 57.3208 56.9859C58.772 56.9859 59.9441 55.8138 59.9441 54.251Z" fill="#001A72"/>
<path d="M65.4139 49.2836H67.7581V50.0091C68.4837 49.2836 69.4325 49.0603 70.3814 49.0603C72.4465 49.0603 74.1209 50.6231 74.1209 52.744V59.1626H71.7209V53.3022C71.7209 52.2417 70.8837 51.4045 69.8232 51.4045C68.7628 51.4045 67.9256 52.2417 67.9256 53.3022V59.2184H65.5256V49.2836H65.4139Z" fill="#001A72"/>
<path d="M83.7768 56.3161C83.7768 57.9905 82.6605 59.4417 79.9815 59.4417C78.8094 59.4417 77.8605 59.1626 77.0233 58.8277V56.4836C77.9163 56.9301 78.9768 57.2091 79.9256 57.2091C80.8187 57.2091 81.2652 56.9301 81.2652 56.4277C81.2652 54.865 77.0233 55.3673 77.0233 52.1859C77.0233 50.2324 78.5861 49.0603 80.7628 49.0603C81.6559 49.0603 82.4931 49.2836 83.3861 49.7859V52.1859C82.214 51.4603 81.3768 51.237 80.707 51.237C79.9256 51.237 79.4791 51.5161 79.4791 52.0184C79.4233 53.5254 83.7768 52.9673 83.7768 56.3161Z" fill="#001A72"/>
<path d="M88.9675 49.2837V59.2186H86.5675V49.2837H88.9675Z" fill="#001A72"/>
<path d="M91.479 54.251C91.479 51.4045 93.8232 49.0603 96.6697 49.0603C99.5162 49.0603 101.86 51.4045 101.86 54.251C101.86 57.0975 99.5162 59.4417 96.6697 59.4417C93.8232 59.4417 91.479 57.0975 91.479 54.251ZM99.293 54.251C99.293 52.6882 98.1209 51.5161 96.6697 51.5161C95.2185 51.5161 94.0464 52.6882 94.0464 54.251C94.0464 55.8138 95.2185 56.9859 96.6697 56.9859C98.1209 56.9859 99.293 55.8138 99.293 54.251Z" fill="#001A72"/>
<path d="M104.316 49.2836H106.66V50.0091C107.386 49.2836 108.335 49.0603 109.284 49.0603C111.349 49.0603 113.023 50.6231 113.023 52.744V59.1626H110.623V53.3022C110.623 52.2417 109.786 51.4045 108.726 51.4045C107.665 51.4045 106.828 52.2417 106.828 53.3022V59.2184H104.428V49.2836H104.316Z" fill="#001A72"/>
<path d="M117.767 56.4836V56.8743H116.93V59.2185H116.484V56.8743H115.646V56.4836H117.767Z" fill="#001A72"/>
<path d="M118.716 56.4836L119.609 58.6604L120.447 56.4836H121.005V59.2185H120.558V57.2092L119.721 59.2185H119.33L118.493 57.2092V59.2185H118.047V56.4836H118.716Z" fill="#001A72"/>
</g>
<defs>
<clipPath id="clip0_4916_16071">
<rect width="134.512" height="72" fill="white"/>
</clipPath>
</defs>
</svg>
Reference in New Issue View Git Blame Copy Permalink