diff --git a/.github/workflows/demo-app.yml b/.github/workflows/demo-app.yml index 21f98e56..a8d99934 100644 --- a/.github/workflows/demo-app.yml +++ b/.github/workflows/demo-app.yml @@ -36,7 +36,7 @@ jobs: run: yarn install --frozen-lockfile working-directory: ./example - - name: Install CocoaPods + - name: Install CocoaPods Gem run: gem install cocoapods -v 1.11.0 - uses: actions/cache@v2 @@ -46,7 +46,7 @@ jobs: restore-keys: | ${{ runner.os }}-pods- - - name: Install CocoaPods + - name: Install Pods run: pod install working-directory: ./example/ios @@ -69,3 +69,74 @@ jobs: with: name: owl-results path: example/.owl + + run-visual-regression-android: + runs-on: macos-11 + if: ${{ false }} + + steps: + - uses: actions/checkout@v2 + + - name: Get yarn cache directory path + id: yarn-cache-dir-path + run: echo "::set-output name=dir::$(yarn cache dir)" + + - uses: actions/cache@v2 + id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) + with: + path: ${{ steps.yarn-cache-dir-path.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-yarn- + + - name: Install Dependencies (Library) + run: yarn install --frozen-lockfile + working-directory: ./ + + - name: Compile the library + run: yarn build + working-directory: ./ + + - name: Install Dependencies (Example App) + run: yarn install --frozen-lockfile + working-directory: ./example + + - uses: actions/cache@v2 + with: + path: | + ~/.gradle/caches + ~/.gradle/wrapper + key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }} + restore-keys: | + ${{ runner.os }}-gradle- + + - name: SKDs - download required images + run: $ANDROID_HOME/tools/bin/sdkmanager "system-images;android-30;default;x86_64" + + - name: SDKs - accept licenses + run: y | $ANDROID_HOME/tools/bin/sdkmanager --licenses + + - name: Emulator - Create + run: $ANDROID_HOME/tools/bin/avdmanager create avd -n Pixel_API_30 --device 'Nexus 5X' --package "system-images;android-30;default;x86_64" --sdcard 512M + + - name: Emulator - Boot + run: $ANDROID_HOME/emulator/emulator -memory 4096 -avd Pixel_API_30 -wipe-data -no-window -gpu swiftshader_indirect -no-snapshot -noaudio -no-boot-anim & + + - name: ADB Wait For Device + run: adb wait-for-any-device + timeout-minutes: 3 + + - name: Run Owl Build + run: yarn owl:build:android + working-directory: ./example + + - name: Run Owl Test + run: yarn owl:test:android + working-directory: ./example + + - name: Store screenshots as artifacts + uses: actions/upload-artifact@v2 + if: failure() + with: + name: owl-screenshots + path: example/.owl diff --git a/docs/advanced/_category_.json b/docs/advanced/_category_.json deleted file mode 100644 index c039890a..00000000 --- a/docs/advanced/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "Advanced", - "position": 4 -} diff --git a/docs/advanced/running-ci.md b/docs/advanced/running-ci.md deleted file mode 100644 index 9eb2eca8..00000000 --- a/docs/advanced/running-ci.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Running on CI - -:::info - -With visual regression testing, it is all about **consistency**. Please make sure that you use the same simulator across environments. ie. Use the same emulator to generate the baseline images and the same (model) one on CI so that the library can compare the screenshots. - -::: - -### GitHub Actions - -#### Example - -To run the tests on an iOS simulator, you will need to use a [macOS based runner](https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners#supported-runners-and-hardware-resources). - -```yaml title=".github/workflows/visual-regression-ios.yml" -name: Run Visual Regression iOS - -on: [pull_request] - -jobs: - run-visual-regression-ios: - runs-on: macos-11 - - steps: - - uses: actions/checkout@v2 - - - name: Get Runner Information - run: /usr/bin/xcodebuild -version - - - name: Get yarn cache directory path - id: yarn-cache-dir-path - run: echo "::set-output name=dir::$(yarn cache dir)" - - - uses: actions/cache@v2 - id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) - with: - path: ${{ steps.yarn-cache-dir-path.outputs.dir }} - key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} - restore-keys: | - ${{ runner.os }}-yarn- - - - name: Install Dependencies - run: yarn install --frozen-lockfile - working-directory: ./ - - - name: Install CocoaPods - run: gem install cocoapods -v 1.11.0 - - - uses: actions/cache@v2 - with: - path: ./ios/Pods - key: ${{ runner.os }}-pods-${{ hashFiles('**/Podfile.lock') }} - restore-keys: | - ${{ runner.os }}-pods- - - - name: Install CocoaPods - run: pod install - working-directory: ./ios - - - uses: futureware-tech/simulator-action@v1 - with: - model: 'iPhone 13 Pro' - os_version: '>=15.0' - - - name: Run Owl Build - run: yarn owl:build:ios - working-directory: ./ - - - name: Run Owl Test - run: yarn owl:test:ios - working-directory: ./ - - - name: Store screenshots and report as artifacts - uses: actions/upload-artifact@v2 - if: failure() - with: - name: owl-results - path: ./.owl -``` - -To run the tests on an Android simulator, you can use the [Android Emulator Runner](https://github.com/marketplace/actions/android-emulator-runner) Action and adjust the example action above. diff --git a/docs/ci/_category_.json b/docs/ci/_category_.json new file mode 100644 index 00000000..db24e6e6 --- /dev/null +++ b/docs/ci/_category_.json @@ -0,0 +1,4 @@ +{ + "label": "Running on CI", + "position": 4 +} diff --git a/docs/ci/github-actions.md b/docs/ci/github-actions.md new file mode 100644 index 00000000..42586ab5 --- /dev/null +++ b/docs/ci/github-actions.md @@ -0,0 +1,146 @@ +--- +sidebar_position: 1 +--- + +# GitHub Actions + +:::info + +With visual regression testing, it is all about **consistency**. Please make sure that you use the same simulator across environments. Use the same emulator configuration to generate the baseline images and for running the test suite on CI so that the library can compare the screenshots. The library will not be able to compare different sizes and resolutions of screenshots. + +::: + +### iOS + +To run the tests on an iOS simulator, you will need to use a [macOS based runner](https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners#supported-runners-and-hardware-resources). + +```yaml title=".github/workflows/visual-regression-ios.yml" +name: Visual Regression - iOS + +on: [pull_request] + +jobs: + run-visual-regression-ios: + runs-on: macos-11 + + steps: + - uses: actions/checkout@v2 + + - name: Get Runner Information + run: /usr/bin/xcodebuild -version + + - name: Get yarn cache directory path + id: yarn-cache-dir-path + run: echo "::set-output name=dir::$(yarn cache dir)" + + - uses: actions/cache@v2 + id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) + with: + path: ${{ steps.yarn-cache-dir-path.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-yarn- + + - name: Install Dependencies + run: yarn install --frozen-lockfile + + - name: Install CocoaPods + run: gem install cocoapods -v 1.11.0 + + - uses: actions/cache@v2 + with: + path: ./ios/Pods + key: ${{ runner.os }}-pods-${{ hashFiles('**/Podfile.lock') }} + restore-keys: | + ${{ runner.os }}-pods- + + - name: Install CocoaPods + run: pod install + working-directory: ./ios + + - uses: futureware-tech/simulator-action@v1 + with: + model: 'iPhone 13 Pro' + os_version: '>=15.0' + + - name: Run Owl Build + run: yarn owl:build:ios + + - name: Run Owl Test + run: yarn owl:test:ios + + - name: Store screenshots and report as artifacts + uses: actions/upload-artifact@v2 + if: failure() + with: + name: owl-results + path: ./.owl +``` + +### Android + +```yaml title=".github/workflows/visual-regression-android.yml" +name: Visual Regression - Android + +on: [pull_request] + +jobs: + run-visual-regression-android: + runs-on: macos-11 + + steps: + - uses: actions/checkout@v2 + + - name: Get yarn cache directory path + id: yarn-cache-dir-path + run: echo "::set-output name=dir::$(yarn cache dir)" + + - uses: actions/cache@v2 + id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`) + with: + path: ${{ steps.yarn-cache-dir-path.outputs.dir }} + key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }} + restore-keys: | + ${{ runner.os }}-yarn- + + - name: Install Dependencies + run: yarn install --frozen-lockfile + + - uses: actions/cache@v2 + with: + path: | + ~/.gradle/caches + ~/.gradle/wrapper + key: ${{ runner.os }}-gradle-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }} + restore-keys: | + ${{ runner.os }}-gradle- + + - name: SKDs - download required images + run: $ANDROID_HOME/tools/bin/sdkmanager "system-images;android-30;default;x86_64" + + - name: SDKs - accept licenses + run: y | $ANDROID_HOME/tools/bin/sdkmanager --licenses + + - name: Emulator - Create + run: $ANDROID_HOME/tools/bin/avdmanager create avd -n Pixel_API_30 --device 'Nexus 5X' --package "system-images;android-30;default;x86_64" --sdcard 512M + + - name: Emulator - Boot + run: $ANDROID_HOME/emulator/emulator -memory 4096 -avd Pixel_API_30 -wipe-data -no-window -gpu swiftshader_indirect -no-snapshot -noaudio -no-boot-anim & + + - name: ADB Wait For Device + run: adb wait-for-any-device + timeout-minutes: 3 + + - name: Run Owl Build + run: yarn owl:build:android + + - name: Run Owl Test + run: yarn owl:test:android + + - name: Store screenshots as artifacts + uses: actions/upload-artifact@v2 + if: failure() + with: + name: owl-screenshots + path: ./.owl +```