mirror of
https://github.com/zoriya/react-native-svg.git
synced 2026-05-23 03:06:28 +00:00
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>
This commit is contained in:
Bartosz Stefańczyk
committed by
GitHub
GitHub
parent
53ba6f2413
commit
a089cc2efc
@@ -0,0 +1,120 @@
|
||||
name: Test Android e2e
|
||||
on:
|
||||
pull_request:
|
||||
paths:
|
||||
- '.github/workflows/android-e2e-test.yml'
|
||||
- 'apps/examples/**'
|
||||
- 'example/**'
|
||||
- 'android/**'
|
||||
- 'src/**'
|
||||
- 'e2e/**'
|
||||
- 'package.json'
|
||||
# push:
|
||||
# branches:
|
||||
# - main
|
||||
workflow_dispatch:
|
||||
jobs:
|
||||
test:
|
||||
runs-on: macos-12
|
||||
timeout-minutes: 60
|
||||
env:
|
||||
WORKING_DIRECTORY: example
|
||||
API_LEVEL: 34
|
||||
SYSTEM_IMAGES: system-images;android-34;google_apis;x86_64
|
||||
AVD_NAME: rn-svg-avd
|
||||
concurrency:
|
||||
group: android-e2e-example-${{ github.ref }}
|
||||
cancel-in-progress: true
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
submodules: recursive
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 18
|
||||
cache: 'yarn'
|
||||
- name: Set up JDK 17
|
||||
uses: actions/setup-java@v2
|
||||
with:
|
||||
java-version: '17'
|
||||
distribution: 'zulu'
|
||||
cache: 'gradle'
|
||||
- name: Install NDK
|
||||
uses: nttld/setup-ndk@v1
|
||||
id: setup-ndk
|
||||
with:
|
||||
ndk-version: r26d
|
||||
local-cache: true
|
||||
- name: Set ANDROID_NDK
|
||||
run: echo "ANDROID_NDK=$ANDROID_HOME/ndk-bundle" >> $GITHUB_ENV
|
||||
- name: Cache SDK image
|
||||
id: cache-sdk-img
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: $ANDROID_HOME/system-images/
|
||||
key: ${{ runner.os }}-build-system-images-${{ env.SYSTEM_IMAGES }}
|
||||
- name: SKDs - download required images
|
||||
if: ${{ steps.cache-sdd-img.outputs.cache-hit != 'true' }}
|
||||
run: $ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager "system-images;android-34;google_apis;x86_64"
|
||||
- name: Cache AVD
|
||||
id: cache-avd
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: ~/.android/avd/${{ env.AVD_NAME }}.avd
|
||||
key: ${{ runner.os }}-avd-images-${{ env.SYSTEM_IMAGES }}-${{ env.AVD_NAME }}
|
||||
- name: Emulator - Create
|
||||
if: ${{ steps.cache-avd.outputs.cache-hit != 'true' }}
|
||||
run: $ANDROID_HOME/cmdline-tools/latest/bin/avdmanager create avd -n ${{ env.AVD_NAME }} --device 28 --package "${{ env.SYSTEM_IMAGES }}" --sdcard 512M
|
||||
- name: Emulator - Set screen settings
|
||||
if: ${{ steps.cache-avd.outputs.cache-hit != 'true' }}
|
||||
run: |
|
||||
echo "AVD config path: $HOME/.android/avd/${{ env.AVD_NAME }}.avd/config.ini"
|
||||
sed -i '' 's/.*hw\.lcd\.density.*/hw\.lcd\.density = 480/g' $HOME/.android/avd/${{ env.AVD_NAME }}.avd/config.ini
|
||||
sed -i '' 's/.*hw\.lcd\.width.*/hw\.lcd\.width = 1344/g' $HOME/.android/avd/${{ env.AVD_NAME }}.avd/config.ini
|
||||
sed -i '' 's/.*hw\.lcd\.height.*/hw\.lcd\.height = 2992/g' $HOME/.android/avd/${{ env.AVD_NAME }}.avd/config.ini
|
||||
- name: Emulator - Boot
|
||||
run: $ANDROID_HOME/emulator/emulator -memory 4096 -avd ${{ env.AVD_NAME }} -no-window -gpu swiftshader_indirect -no-snapshot -noaudio -no-boot-anim &
|
||||
|
||||
- name: ADB Wait For Device
|
||||
run: adb wait-for-device shell 'while [[ -z $(getprop sys.boot_completed) ]]; do sleep 1; done;'
|
||||
timeout-minutes: 10
|
||||
|
||||
- name: Reverse TCP
|
||||
working-directory: ${{ env.WORKING_DIRECTORY }}
|
||||
run: adb devices | grep '\t' | awk '{print $1}' | sed 's/\\s//g' | xargs -I {} adb -s {} reverse tcp:8081 tcp:8081
|
||||
|
||||
- name: Install root node dependencies
|
||||
run: yarn
|
||||
|
||||
- name: Install example app node dependencies
|
||||
run: yarn
|
||||
working-directory: ${{ env.WORKING_DIRECTORY }}
|
||||
|
||||
- name: Build Android app
|
||||
working-directory: ${{ env.WORKING_DIRECTORY }}/android
|
||||
run: ./gradlew assembleDebug
|
||||
|
||||
- name: Start Metro server
|
||||
working-directory: ${{ env.WORKING_DIRECTORY }}
|
||||
run: E2E=true yarn start &> output.log &
|
||||
|
||||
- name: Install APK
|
||||
run: adb install -r ${{ env.WORKING_DIRECTORY }}/android/app/build/outputs/apk/debug/app-debug.apk
|
||||
|
||||
- name: Launch APK
|
||||
run: 'while ! (adb shell monkey -p com.example 1 | grep -q "Events injected: 1"); do sleep 1; echo "Retrying due to errors in previous run..."; done'
|
||||
|
||||
- name: Run e2e Tests
|
||||
run: E2E=true yarn e2e
|
||||
|
||||
- name: Upload test report
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: report
|
||||
path: |
|
||||
report.html
|
||||
jest-html-reporters-attach/
|
||||
|
||||
- name: Kill emulator (so it can be cached safely)
|
||||
run: adb devices | grep emulator | cut -f1 | while read line; do adb -s $line emu kill; done
|
||||
@@ -0,0 +1,93 @@
|
||||
name: Test iOS e2e
|
||||
on:
|
||||
pull_request:
|
||||
paths:
|
||||
- '.github/workflows/android-e2e-test.yml'
|
||||
- 'apps/examples/**'
|
||||
- 'example/**'
|
||||
- 'apple/**'
|
||||
- 'src/**'
|
||||
- 'e2e/**'
|
||||
- 'package.json'
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
workflow_dispatch:
|
||||
jobs:
|
||||
test:
|
||||
runs-on: macos-14
|
||||
timeout-minutes: 60
|
||||
env:
|
||||
WORKING_DIRECTORY: example
|
||||
DEVICE: iPhone 14 Pro
|
||||
XCODE_VERSION: latest-stable
|
||||
concurrency:
|
||||
group: ios-e2e-example-${{ github.ref }}
|
||||
cancel-in-progress: true
|
||||
steps:
|
||||
- name: checkout
|
||||
uses: actions/checkout@v3
|
||||
with:
|
||||
submodules: recursive
|
||||
- name: Use latest stable Xcode
|
||||
uses: maxim-lobanov/setup-xcode@v1
|
||||
with:
|
||||
xcode-version: ${{ env.XCODE_VERSION }}
|
||||
|
||||
- name: Restore react-native-svg node_modules from cache
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: node_modules
|
||||
key: ${{ runner.os }}-node-modules-svg-${{ hashFiles('yarn.lock') }}
|
||||
restore-keys: ${{ runner.os }}-node-modules-svg-
|
||||
|
||||
- name: Install react-native-svg node_modules
|
||||
run: yarn install --frozen-lockfile
|
||||
|
||||
- name: Restore app node_modules from cache
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: ${{ env.WORKING_DIRECTORY }}/node_modules
|
||||
key: ${{ runner.os }}-node-modules-${{ env.WORKING_DIRECTORY }}-${{ hashFiles(format('{0}/yarn.lock', env.WORKING_DIRECTORY)) }}
|
||||
restore-keys: ${{ runner.os }}-node-modules-${{ env.WORKING_DIRECTORY }}-
|
||||
|
||||
- name: Install app node_modules
|
||||
working-directory: ${{ env.WORKING_DIRECTORY }}
|
||||
run: yarn install --frozen-lockfile
|
||||
|
||||
- name: Restore Pods from cache
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: |
|
||||
${{ env.WORKING_DIRECTORY }}/ios/Pods
|
||||
~/Library/Caches/CocoaPods
|
||||
~/.cocoapods
|
||||
key: ${{ runner.os }}-pods-${{ env.WORKING_DIRECTORY }}-${{ hashFiles(format('{0}/ios/Podfile.lock', env.WORKING_DIRECTORY)) }}
|
||||
|
||||
- name: Install Pods
|
||||
working-directory: ${{ env.WORKING_DIRECTORY }}/ios
|
||||
run: pod install
|
||||
|
||||
- name: Restore build artifacts from cache
|
||||
uses: actions/cache@v3
|
||||
with:
|
||||
path: ~/Library/Developer/Xcode/DerivedData
|
||||
key: ${{ runner.os }}-ios-derived-data-${{ env.WORKING_DIRECTORY }}-${{ hashFiles(format('{0}/ios/Podfile.lock', env.WORKING_DIRECTORY)) }}
|
||||
- name: Start Metro server
|
||||
working-directory: ${{ env.WORKING_DIRECTORY }}
|
||||
run: E2E=true yarn start &> output.log &
|
||||
|
||||
- name: Build app
|
||||
working-directory: ${{ env.WORKING_DIRECTORY }}
|
||||
run: E2E=true npx react-native@latest run-ios --simulator="${{ env.DEVICE }}" --mode Debug --verbose
|
||||
|
||||
- name: Run e2e Tests
|
||||
run: E2E=true yarn e2e
|
||||
|
||||
- name: Upload test report
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: report
|
||||
path: |
|
||||
report.html
|
||||
jest-html-reporters-attach/
|
||||
@@ -57,4 +57,4 @@ jobs:
|
||||
|
||||
- name: Build app
|
||||
working-directory: ${{ matrix.working-directory }}/windows
|
||||
run: npx react-native run-windows --logging --no-packager --no-deploy
|
||||
run: npx react-native run-windows --logging --no-packager --no-deploy --no-autolink
|
||||
|
||||
Reference in New Issue
Block a user