From f557acb7995274ad4335a527adee65db45ca8bf5 Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Wed, 1 Dec 2021 13:27:17 +0000 Subject: [PATCH 01/19] Remove unnecessary page --- website/src/pages/markdown-page.md | 7 ------- 1 file changed, 7 deletions(-) delete mode 100644 website/src/pages/markdown-page.md diff --git a/website/src/pages/markdown-page.md b/website/src/pages/markdown-page.md deleted file mode 100644 index 9756c5b6..00000000 --- a/website/src/pages/markdown-page.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Markdown page example ---- - -# Markdown page example - -You don't need React to write simple standalone pages. From 1abea85887561a8176e321503d093ee5243495d5 Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Wed, 1 Dec 2021 13:28:37 +0000 Subject: [PATCH 02/19] Update Getting Started content --- docs/introduction/getting-started.md | 85 ++++++++++++++++++++++++++-- 1 file changed, 80 insertions(+), 5 deletions(-) diff --git a/docs/introduction/getting-started.md b/docs/introduction/getting-started.md index 62f6b608..de37a5dc 100644 --- a/docs/introduction/getting-started.md +++ b/docs/introduction/getting-started.md @@ -2,6 +2,9 @@ sidebar_position: 1 --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + # Getting Started ### Installation @@ -14,7 +17,9 @@ npm install --save-dev react-native-owl ### Configuration -Create a file called `owl.config.json` in the root of your project, next to your `package.json`. There you will have to specify your settings for **iOS** and **Android**. For more information on the config file, please refer to the [configuration file](/docs/introduction/config-file) documentation. Below you can find an example config (can also be found in the [example app](https://github.com/FormidableLabs/react-native-owl/tree/main/example) of the repository). +Create a file called `owl.config.json` in the root of your project, next to your `package.json` (alternative locations can be specified whe using the cli). There you will have to specify your settings for **iOS** and **Android**. For more information on the config file, please refer to the [configuration file](/docs/introduction/config-file) documentation. + +Below you can find an example config (can also be found in the [example app](https://github.com/FormidableLabs/react-native-owl/tree/main/example) of the repository). ```json title="owl.config.json" { @@ -26,18 +31,88 @@ Create a file called `owl.config.json` in the root of your project, next to your }, "android": { "packageName": "com.owldemo" - } + }, } ``` ### Building the app -Placeholder. +Before the app can be tested, it must be built. + + + + +```bash +npm run owl build -- --platform ios +``` + + + + +```bash +yarn owl build --platform ios +``` + + + ### Running the tests -Placeholder. +This runs the app on the simulator, either comparing screenshots with the baseline images, or updating the baseline images. + +When comparing screenshots, and differences in the current vs baseline will fail the test. + +#### Examples + +Test against the baseline images (will create the baseline images if they don't exist). + + + + +```bash +npm run owl test -- --platform ios +``` + + + + +```bash +yarn owl test --platform ios +``` + + + + +Update the baseline images + + + + +```bash +npm run owl test -- --platform ios --update +``` + + + + +```bash +yarn owl test --platform ios --update +``` + + + ### Generated report -Placeholder. +When the tests have completed, either successfully or with failures, a report is generated, where you can view all the screenshots. For failing tests, differences in the current vs baseline screenshots will be highlighted. + +The report uri is included in the test output. + +#### Example: + +``` +... +[OWL] Generating Report +[OWL] Report was built at /Users/username/Code/FormidableLabs/react-native-owl/example/.owl/report/index.html +... +``` From 913c482aaaa717cb9d1b2d9b5f1fd6766906e24e Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Wed, 1 Dec 2021 15:33:26 +0000 Subject: [PATCH 03/19] Added more docs content --- README.md | 1 + docs/cli/build.md | 7 --- docs/cli/building-the-app.md | 36 +++++++++++++++ docs/cli/test.md | 25 ----------- docs/cli/testing-the-app.md | 65 ++++++++++++++++++++++++++++ docs/introduction/config-file.md | 37 +++++++++++++++- docs/introduction/getting-started.md | 6 +-- website/docusaurus.config.js | 4 +- 8 files changed, 143 insertions(+), 38 deletions(-) delete mode 100644 docs/cli/build.md create mode 100644 docs/cli/building-the-app.md delete mode 100644 docs/cli/test.md create mode 100644 docs/cli/testing-the-app.md diff --git a/README.md b/README.md index 084bd1a7..5e16f22f 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,7 @@ The config file - which unless specified in the cli should live in `./owl.config | **android config** | | | | | `android.buildCommand` | false | | Overrides the `assembleDebug` gradle command. Should build the apk | | `android.binaryPath` | false | | The path to the binary, if you are using a custom build command | +| `android.packageName` | | | The package name/unique identifier of the app | | `android.quiet` | false | | Passes the quiet flag to `gradlew` | ### Example diff --git a/docs/cli/build.md b/docs/cli/build.md deleted file mode 100644 index 563cb49a..00000000 --- a/docs/cli/build.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Build - -This is a placeholder. diff --git a/docs/cli/building-the-app.md b/docs/cli/building-the-app.md new file mode 100644 index 00000000..8a09fa39 --- /dev/null +++ b/docs/cli/building-the-app.md @@ -0,0 +1,36 @@ +--- +sidebar_position: 1 +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +# Building the app + +Before the app can be tested, it must be built. + +#### Options + +| Name | Required | Default | Options/Types | Description | +| ---------------- | -------- | ----------------- | --------------- | --------------------------------------- | +| `config`, `-c` | false | ./owl.config.json | String | Path to the configuration file | +| `platform`, `-p` | true | - | `ios`,`android` | The platform the app should be built on | + +#### Examples + + + + +```bash +npm run owl build -- --platform ios --config ./owl.config.json +``` + + + + +```bash +yarn owl build --platform ios --config ./owl.config.json +``` + + + diff --git a/docs/cli/test.md b/docs/cli/test.md deleted file mode 100644 index c0600d5c..00000000 --- a/docs/cli/test.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -sidebar_position: 2 ---- - -# Test - -This is a placeholder. - -:::info - -The **first** time you will run the test command, react-native-owl will generate all your baseline images. It is _very_ important to make sure these are correct before proceeding. - -::: - -### First run - -This is a placeholder. - -### Running tests - -This is a placeholder. - -### Updating the baseline - -This is a placeholder. diff --git a/docs/cli/testing-the-app.md b/docs/cli/testing-the-app.md new file mode 100644 index 00000000..26163875 --- /dev/null +++ b/docs/cli/testing-the-app.md @@ -0,0 +1,65 @@ +--- +sidebar_position: 2 +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +# Testing the app + +Use the `test` command to run the app on the simulator, either comparing screenshots with the baseline images, or updating the baseline images. + +When comparing images, any difference in the current vs baseline will fail the test. + +:::info + +The **first** time you will run the test command, react-native-owl will generate all your baseline images. It is _very_ important to make sure these are correct before proceeding. + +::: + +### First run + +The baseline images will be automatically generated. To regenerate the baseline images, use the `--update` option. + +### Running tests + + + + + +```bash +npm run owl test -- --platform ios +``` + + + + +```bash +yarn owl test --platform ios +``` + + + + + + +### Updating the baseline + +Update the baseline images + + + + +```bash +npm run owl test -- --platform ios --update +``` + + + + +```bash +yarn owl test --platform ios --update +``` + + + \ No newline at end of file diff --git a/docs/introduction/config-file.md b/docs/introduction/config-file.md index d61a0bf4..c327d6f7 100644 --- a/docs/introduction/config-file.md +++ b/docs/introduction/config-file.md @@ -4,4 +4,39 @@ sidebar_position: 2 # Config File -This is a placeholder. +The config file - which unless specified in the cli should live in `./owl.config.json` - is used to describe how Owl should run your app and your tests. Below you can find all the options the can be specified. + +### Options + +| Name | Required | Default | Description | +| ---------------------- | -------- | ------- | ----------------------------------------------------------------------- | +| **general** | | | | +| `debug` | false | `false` | Prevents the CLI/library from printing any logs/output. | +| `report` | false | `true` | Generate an HTML report, displaying the baseline, latest & diff images. | +| **ios config** | | | | +| `ios.workspace` | true | | Path to the `.xcworkspace` file of your react-native project | +| `ios.scheme` | true | | The name of the scheme you would like to use for building the app | +| `ios.configuration` | true | `Debug` | The build configuration that should be used. | +| `ios.buildCommand` | false | | Overrides the `xcodebuild` command making the above options obselete | +| `ios.binaryPath` | false | | The path to the binary, if you are using a custom build command | +| `ios.quiet` | false | | Passes the quiet flag to `xcode builds` | +| **android config** | | | | +| `android.buildCommand` | false | | Overrides the `assembleDebug` gradle command. Should build the apk | +| `android.binaryPath` | false | | The path to the binary, if you are using a custom build command | +| `android.packageName` | | | The package name/unique identifier of the app | +| `android.quiet` | false | | Passes the quiet flag to `gradlew` | + +### Example + +```json +{ + "ios": { + "workspace": "ios/OwlDemoApp.xcworkspace", + "scheme": "OwlDemoApp", + "device": "iPhone 13 Pro" + }, + "android": { + "packageName": "com.owldemoapp" + } +} +``` \ No newline at end of file diff --git a/docs/introduction/getting-started.md b/docs/introduction/getting-started.md index de37a5dc..f74e8156 100644 --- a/docs/introduction/getting-started.md +++ b/docs/introduction/getting-started.md @@ -17,7 +17,7 @@ npm install --save-dev react-native-owl ### Configuration -Create a file called `owl.config.json` in the root of your project, next to your `package.json` (alternative locations can be specified whe using the cli). There you will have to specify your settings for **iOS** and **Android**. For more information on the config file, please refer to the [configuration file](/docs/introduction/config-file) documentation. +Create a file called `owl.config.json` in the root of your project, next to your `package.json`. There you will have to specify your settings for **iOS** and **Android**. For more information on the config file, please refer to the [configuration file](/docs/introduction/config-file) documentation. Below you can find an example config (can also be found in the [example app](https://github.com/FormidableLabs/react-native-owl/tree/main/example) of the repository). @@ -27,7 +27,7 @@ Below you can find an example config (can also be found in the [example app](htt "workspace": "ios/OwlDemo.xcworkspace", "scheme": "OwlDemo", "configuration": "Release", - "device": "iPhone 12 Pro" + "device": "iPhone 13 Pro" }, "android": { "packageName": "com.owldemo" @@ -60,7 +60,7 @@ yarn owl build --platform ios This runs the app on the simulator, either comparing screenshots with the baseline images, or updating the baseline images. -When comparing screenshots, and differences in the current vs baseline will fail the test. +When comparing images, any difference in the current vs baseline will fail the test. #### Examples diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 0f000ec0..793c31e1 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -71,7 +71,7 @@ const config = { }, { label: 'CLI', - to: '/docs/cli/build/', + to: '/docs/cli/building-the-app/', }, { label: 'Methods', @@ -111,7 +111,7 @@ const config = { }, { label: 'CLI', - to: '/docs/cli/build/', + to: '/docs/cli/building-the-app/', }, { label: 'Methods', From 455da531c4911eda177847c59319aa258b96176a Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Thu, 2 Dec 2021 10:06:14 +0000 Subject: [PATCH 04/19] Remove placeholder content --- docs/more/_category_.json | 4 --- docs/more/congratulations.md | 19 ------------ docs/more/create-a-blog-post.md | 34 -------------------- docs/more/create-a-document.md | 55 --------------------------------- docs/more/create-a-page.md | 43 -------------------------- docs/more/deploy-your-site.md | 31 ------------------- 6 files changed, 186 deletions(-) delete mode 100644 docs/more/_category_.json delete mode 100644 docs/more/congratulations.md delete mode 100644 docs/more/create-a-blog-post.md delete mode 100644 docs/more/create-a-document.md delete mode 100644 docs/more/create-a-page.md delete mode 100644 docs/more/deploy-your-site.md diff --git a/docs/more/_category_.json b/docs/more/_category_.json deleted file mode 100644 index f7c7603d..00000000 --- a/docs/more/_category_.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "label": "More", - "position": 4 -} diff --git a/docs/more/congratulations.md b/docs/more/congratulations.md deleted file mode 100644 index 2786ef74..00000000 --- a/docs/more/congratulations.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -sidebar_position: 6 ---- - -# Congratulations! - -You have just learned the **basics of Docusaurus** and made some changes to the **initial template**. - -Docusaurus has **much more to offer**! - -Anything **unclear** or **buggy** in this tutorial? [Please report it!](https://github.com/facebook/docusaurus/discussions/4610) - -## What's next? - -- Read the [official documentation](https://docusaurus.io/). -- Add a custom [Design and Layout](https://docusaurus.io/docs/styling-layout) -- Add a [search bar](https://docusaurus.io/docs/search) -- Find inspirations in the [Docusaurus showcase](https://docusaurus.io/showcase) -- Get involved in the [Docusaurus Community](https://docusaurus.io/community/support) diff --git a/docs/more/create-a-blog-post.md b/docs/more/create-a-blog-post.md deleted file mode 100644 index 0d50aaf3..00000000 --- a/docs/more/create-a-blog-post.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -sidebar_position: 3 ---- - -# Create a Blog Post - -Docusaurus creates a **page for each blog post**, but also a **blog index page**, a **tag system**, an **RSS** feed... - -## Create your first Post - -Create a file at `blog/2021-02-28-greetings.md`: - -```md title="blog/2021-02-28-greetings.md" ---- -slug: greetings -title: Greetings! -authors: - - name: Joel Marcey - title: Co-creator of Docusaurus 1 - url: https://github.com/JoelMarcey - image_url: https://github.com/JoelMarcey.png - - name: Sébastien Lorber - title: Docusaurus maintainer - url: https://sebastienlorber.com - image_url: https://github.com/slorber.png -tags: [greetings] ---- - -Congratulations, you have made your first post! - -Feel free to play around and edit this post as much you like. -``` - -A new blog post is now available at `http://localhost:3000/blog/greetings`. diff --git a/docs/more/create-a-document.md b/docs/more/create-a-document.md deleted file mode 100644 index b4a072ec..00000000 --- a/docs/more/create-a-document.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -sidebar_position: 2 ---- - -# Create a Document - -Documents are **groups of pages** connected through: - -- a **sidebar** -- **previous/next navigation** -- **versioning** - -## Create your first Doc - -Create a markdown file at `docs/hello.md`: - -```md title="docs/hello.md" -# Hello - -This is my **first Docusaurus document**! -``` - -A new document is now available at `http://localhost:3000/docs/hello`. - -## Configure the Sidebar - -Docusaurus automatically **creates a sidebar** from the `docs` folder. - -Add metadatas to customize the sidebar label and position: - -```md title="docs/hello.md" {1-4} ---- -sidebar_label: 'Hi!' -sidebar_position: 3 ---- - -# Hello - -This is my **first Docusaurus document**! -``` - -It is also possible to create your sidebar explicitly in `sidebars.js`: - -```diff title="sidebars.js" -module.exports = { - tutorialSidebar: [ - { - type: 'category', - label: 'Tutorial', -- items: [...], -+ items: ['hello'], - }, - ], -}; -``` diff --git a/docs/more/create-a-page.md b/docs/more/create-a-page.md deleted file mode 100644 index e112b005..00000000 --- a/docs/more/create-a-page.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -sidebar_position: 1 ---- - -# Create a Page - -Add **Markdown or React** files to `src/pages` to create a **standalone page**: - -- `src/pages/index.js` -> `localhost:3000/` -- `src/pages/foo.md` -> `localhost:3000/foo` -- `src/pages/foo/bar.js` -> `localhost:3000/foo/bar` - -## Create your first React Page - -Create a file at `src/pages/my-react-page.js`: - -```jsx title="src/pages/my-react-page.js" -import React from 'react'; -import Layout from '@theme/Layout'; - -export default function MyReactPage() { - return ( - -

My React page

-

This is a React page

- - ); -} -``` - -A new page is now available at `http://localhost:3000/my-react-page`. - -## Create your first Markdown Page - -Create a file at `src/pages/my-markdown-page.md`: - -```mdx title="src/pages/my-markdown-page.md" -# My Markdown page - -This is a Markdown page -``` - -A new page is now available at `http://localhost:3000/my-markdown-page`. diff --git a/docs/more/deploy-your-site.md b/docs/more/deploy-your-site.md deleted file mode 100644 index 492eae02..00000000 --- a/docs/more/deploy-your-site.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -sidebar_position: 5 ---- - -# Deploy your site - -Docusaurus is a **static-site-generator** (also called **[Jamstack](https://jamstack.org/)**). - -It builds your site as simple **static HTML, JavaScript and CSS files**. - -## Build your site - -Build your site **for production**: - -```bash -npm run build -``` - -The static files are generated in the `build` folder. - -## Deploy your site - -Test your production build locally: - -```bash -npm run serve -``` - -The `build` folder is now served at `http://localhost:3000/`. - -You can now deploy the `build` folder **almost anywhere** easily, **for free** or very small cost (read the **[Deployment Guide](https://docusaurus.io/docs/deployment)**). From 2aff53fc4f10e97587ba0e9f213f0862bfd5e35c Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Thu, 2 Dec 2021 10:06:27 +0000 Subject: [PATCH 05/19] Add more docs content --- docs/advanced/running-ci.md | 73 +++++++++++++++++++++++++++- docs/api/matchers.md | 20 +++++++- docs/api/methods.md | 20 +++++++- docs/cli/testing-the-app.md | 19 +++++++- docs/introduction/getting-started.md | 33 ++++++++----- 5 files changed, 148 insertions(+), 17 deletions(-) diff --git a/docs/advanced/running-ci.md b/docs/advanced/running-ci.md index eb53f925..1d51a5b0 100644 --- a/docs/advanced/running-ci.md +++ b/docs/advanced/running-ci.md @@ -14,7 +14,78 @@ With visual regression testing, it is all about **consistency**. Please make sur ### GitHub Actions -Example. +#### 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 + +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. ### CircleCI diff --git a/docs/api/matchers.md b/docs/api/matchers.md index b66e4b6d..8d8baaa1 100644 --- a/docs/api/matchers.md +++ b/docs/api/matchers.md @@ -8,4 +8,22 @@ This is a placeholder. ### toMatchBaseline(name: string) -This is an example. +This custom matcher will try to find and compare the baseline screenshot by using the path of the latest screenshot (returned by `takeScreenshot()`). You will have to take a screenshot before using, and pass the path of that screenshot to the expect method. + +#### Example + +```js +import { takeScreenshot } from 'react-native-owl'; + +describe('App.tsx', () => { + it('takes a screenshot of the first screen', async () => { + const screen = await takeScreenshot('homescreen'); + + expect(screen).toMatchBaseline(); + }); +}); +``` + +The first time this test is run, or when run with the `--update` flag, the `.toMatchBaseline` expectation will always be successful. + +On subsequent test runs, the screenshot captured by `takeScreenshot` (and stored in `/current`) will be compared to the baseline screenshot. ***Any*** differences will cause the expectation to fail, and the report to be generated. \ No newline at end of file diff --git a/docs/api/methods.md b/docs/api/methods.md index 15594d8c..b1b47b7d 100644 --- a/docs/api/methods.md +++ b/docs/api/methods.md @@ -8,4 +8,22 @@ This is a placeholder. ### takeScreenshot(name: string) -This is an example. +Grabs a screenshot from the simulator and stores it under `latest` screenshots(ie. `./owl/latest/ios/`) using the specified filename (no extension required). If running the tests using the `--update` or `-u` flag, or its the first time its being run, this will store the screenshot under the `baseline` directory. + +#### Example + +```js +import { takeScreenshot } from 'react-native-owl'; + +describe('App.tsx', () => { + it('takes a screenshot of the first screen', async () => { + const screen = await takeScreenshot('homescreen'); + + expect(screen).toMatchBaseline(); + }); +}); +``` + +The first time this test is run, or when run with the `--update` flag, the screenshot will be stored at `./owl/baseline/ios/homescreen.png` (or `/android/` is testing on Android). + +On subsequent test runs, the screenshot will be stored at `./owl/current/ios/homescreen.png`. \ No newline at end of file diff --git a/docs/cli/testing-the-app.md b/docs/cli/testing-the-app.md index 26163875..b2424388 100644 --- a/docs/cli/testing-the-app.md +++ b/docs/cli/testing-the-app.md @@ -62,4 +62,21 @@ yarn owl test --platform ios --update ``` - \ No newline at end of file + + +### Viewing the report + +When the tests have failed any [`.toMatchBaseline()`](/docs/api/matchers.md) expectations, a report is generated, where you can view all the screenshots, where the differences in the current vs baseline screenshots will be highlighted. + +The report uri is included in the test output. + +#### Example: + +The following will be included the the output of failed tests: + +``` +... +[OWL] Generating Report +[OWL] Report was built at /Users/username/Code/FormidableLabs/react-native-owl/example/.owl/report/index.html +... +``` \ No newline at end of file diff --git a/docs/introduction/getting-started.md b/docs/introduction/getting-started.md index f74e8156..6e853fc0 100644 --- a/docs/introduction/getting-started.md +++ b/docs/introduction/getting-started.md @@ -35,6 +35,24 @@ Below you can find an example config (can also be found in the [example app](htt } ``` +### Add tests + +Use the [takeScreenshot](/docs/api/methods#takescreenshotname-string) and [.toMatchBaseline](/docs/api/matchers#tomatchbaselinename-string) api's to implement screenshot tests. + +#### Example + +```js +import { takeScreenshot } from 'react-native-owl'; + +describe('App.tsx', () => { + it('takes a screenshot of the first screen', async () => { + const screen = await takeScreenshot('homescreen'); + + expect(screen).toMatchBaseline(); + }); +}); +``` + ### Building the app Before the app can be tested, it must be built. @@ -102,17 +120,6 @@ yarn owl test --platform ios --update -### Generated report - -When the tests have completed, either successfully or with failures, a report is generated, where you can view all the screenshots. For failing tests, differences in the current vs baseline screenshots will be highlighted. - -The report uri is included in the test output. +### Failed tests report -#### Example: - -``` -... -[OWL] Generating Report -[OWL] Report was built at /Users/username/Code/FormidableLabs/react-native-owl/example/.owl/report/index.html -... -``` +When the tests have failed any [`.toMatchBaseline()`](/docs/api/matchers.md) expectations, a [report is generated](/docs/cli/testing-the-app#viewing-the-report), where you can view all the screenshots, where the differences in the current vs baseline screenshots will be highlighted. From 754a68f27a09a372d4ccf75d6a42d4298f196b37 Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Thu, 2 Dec 2021 10:15:54 +0000 Subject: [PATCH 06/19] Update readme --- README.md | 107 ++++++------------------------------------------------ 1 file changed, 11 insertions(+), 96 deletions(-) diff --git a/README.md b/README.md index 5e16f22f..9c00932c 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ > **Work In Progress**: Visual regression testing for React Native + + ## Installation ```sh @@ -10,107 +12,20 @@ yarn add -D react-native-owl npm install -D react-native-owl ``` -## Configuration file - -The config file - which unless specified in the cli should live in `./owl.config.json` - is used to descript how Owl should run your app and your tests. Below you can find all the options the can be specified. - -### Options - -| Name | Required | Default | Description | -| ---------------------- | -------- | ------- | ----------------------------------------------------------------------- | -| **general** | | | | -| `debug` | false | `false` | Prevents the CLI/library from printing any logs/output. | -| `report` | false | `true` | Generate an HTML report, displaying the baseline, latest & diff images. | -| **ios config** | | | | -| `ios.workspace` | true | | Path to the `.xcworkspace` file of your react-native project | -| `ios.scheme` | true | | The name of the scheme you would like to use for building the app | -| `ios.configuration` | true | `Debug` | The build configuration that should be used. | -| `ios.buildCommand` | false | | Overrides the `xcodebuild` command making the above options obselete | -| `ios.binaryPath` | false | | The path to the binary, if you are using a custom build command | -| `ios.quiet` | false | | Passes the quiet flag to `xcode builds` | -| **android config** | | | | -| `android.buildCommand` | false | | Overrides the `assembleDebug` gradle command. Should build the apk | -| `android.binaryPath` | false | | The path to the binary, if you are using a custom build command | -| `android.packageName` | | | The package name/unique identifier of the app | -| `android.quiet` | false | | Passes the quiet flag to `gradlew` | - -### Example - -```json -{ - "ios": { - "workspace": "ios/OwlDemoApp.xcworkspace", - "scheme": "OwlDemoApp", - "device": "iPhone 12 Pro" - }, - "android": { - "packageName": "com.owldemoapp" - } -} -``` - -## CLI - -### Building the app - -#### Options - -| Name | Required | Default | Options/Types | Description | -| ---------------- | -------- | ----------------- | --------------- | --------------------------------------- | -| `config`, `-c` | false | ./owl.config.json | String | Path to the configuration file | -| `platform`, `-p` | true | - | `ios`,`android` | The platform the app should be built on | - -#### Examples - -``` -owl build --platform ios --config ./owl.config.json -``` - -### Running the tests - -#### Options - -| Name | Required | Default | Options/Types | Description | -| ------------------ | -------- | ----------------- | --------------- | ----------------------------------------------- | -| `--config`, `-c` | false | ./owl.config.json | String | Path to the configuration file | -| `--platform`, `-p` | true | - | `ios`,`android` | The platform the app should be built on | -| `--update`, `-u` | true | false | Boolean | A flag about rewriting existing baseline images | - -#### Examples - -``` -owl test --platform ios -owl test --platform ios --config ./owl.config.json -owl test --platform ios --update -``` - -## Test Suite - -### Example - -```js -import { takeScreenshot } from 'react-native-owl'; - -describe('App.tsx', () => { - it('takes a screenshot of the first screen', async () => { - const screen = await takeScreenshot('homescreen'); - - expect(screen).toMatchBaseline(); - }); -}); -``` - -### Methods +## 📃 [Documentation](https://formidable.com/open-source/react-native-owl/docs/) -#### `takeScreenshot(filename: string)` +The documentation contains everything you need to know about `react-native-owl`, and contains several sections in order of importance +when you first get started: -Grabs a screenshot from the simulator and stores it under `latest` screenshots(ie. `./owl/latest/ios/`) with the specified filename(without the extension). If running the tests using the `--update` or `-u` flag, this will store the screenshot under the `baseline` directory. See example above. +- **[Getting started](https://formidable.com/open-source/react-native-owl/docs/introduction/getting-started)** — contains the "Getting Started" guide. +- **[Configuration](https://formidable.com/open-source/react-native-owl/introduction/config-file)** — explains all the configuration options for `react-native-owl`. +- **[Running on CI](https://formidable.com/open-source/react-native-owl/advanced/running-ci)** — example GitHub Action to run react-native-owl on CO. -### Jest Matchers +_You can find the raw markdown files inside this repository's `docs` folder._ -#### `.toMatchBaseline()` +## Maintenance Status -This custom matcher will try to find and compare the baseline screenshot by using the path of the _latest_ screenshot (returned by `takeScreenshot()`). You will have to take a screenshot before using and pass the path of that screenshot to the `expect` method. +**Active:** Formidable is actively working on this project, and we expect to continue work on this project for the foreseeable future. Bug reports, feature requests and pull requests are welcome. [github-image]: https://github.com/FormidableLabs/react-native-owl/workflows/Run%20Tests/badge.svg [github-url]: https://github.com/FormidableLabs/react-native-owl/actions From 644ade1530446b2371322d51cf9577bf183f5e82 Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Thu, 2 Dec 2021 10:21:16 +0000 Subject: [PATCH 07/19] Sync tab choice across all tabs --- docs/cli/building-the-app.md | 2 +- docs/cli/testing-the-app.md | 4 ++-- docs/introduction/getting-started.md | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/cli/building-the-app.md b/docs/cli/building-the-app.md index 8a09fa39..5f56de1a 100644 --- a/docs/cli/building-the-app.md +++ b/docs/cli/building-the-app.md @@ -18,7 +18,7 @@ Before the app can be tested, it must be built. #### Examples - + ```bash diff --git a/docs/cli/testing-the-app.md b/docs/cli/testing-the-app.md index b2424388..668ada80 100644 --- a/docs/cli/testing-the-app.md +++ b/docs/cli/testing-the-app.md @@ -24,7 +24,7 @@ The baseline images will be automatically generated. To regenerate the baseline ### Running tests - + ```bash @@ -47,7 +47,7 @@ yarn owl test --platform ios Update the baseline images - + ```bash diff --git a/docs/introduction/getting-started.md b/docs/introduction/getting-started.md index 6e853fc0..0685712c 100644 --- a/docs/introduction/getting-started.md +++ b/docs/introduction/getting-started.md @@ -57,7 +57,7 @@ describe('App.tsx', () => { Before the app can be tested, it must be built. - + ```bash @@ -84,7 +84,7 @@ When comparing images, any difference in the current vs baseline will fail the t Test against the baseline images (will create the baseline images if they don't exist). - + ```bash @@ -103,7 +103,7 @@ yarn owl test --platform ios Update the baseline images - + ```bash From 95c1d869eff04dba41484850d828eb04a6ab0fc2 Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Thu, 2 Dec 2021 10:21:54 +0000 Subject: [PATCH 08/19] Remove tab default attribute --- docs/cli/building-the-app.md | 2 +- docs/cli/testing-the-app.md | 4 ++-- docs/introduction/getting-started.md | 6 +++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/cli/building-the-app.md b/docs/cli/building-the-app.md index 5f56de1a..1bba83a9 100644 --- a/docs/cli/building-the-app.md +++ b/docs/cli/building-the-app.md @@ -19,7 +19,7 @@ Before the app can be tested, it must be built. #### Examples - + ```bash npm run owl build -- --platform ios --config ./owl.config.json diff --git a/docs/cli/testing-the-app.md b/docs/cli/testing-the-app.md index 668ada80..a9721a46 100644 --- a/docs/cli/testing-the-app.md +++ b/docs/cli/testing-the-app.md @@ -25,7 +25,7 @@ The baseline images will be automatically generated. To regenerate the baseline - + ```bash npm run owl test -- --platform ios @@ -48,7 +48,7 @@ yarn owl test --platform ios Update the baseline images - + ```bash npm run owl test -- --platform ios --update diff --git a/docs/introduction/getting-started.md b/docs/introduction/getting-started.md index 0685712c..da877120 100644 --- a/docs/introduction/getting-started.md +++ b/docs/introduction/getting-started.md @@ -58,7 +58,7 @@ describe('App.tsx', () => { Before the app can be tested, it must be built. - + ```bash npm run owl build -- --platform ios @@ -85,7 +85,7 @@ When comparing images, any difference in the current vs baseline will fail the t Test against the baseline images (will create the baseline images if they don't exist). - + ```bash npm run owl test -- --platform ios @@ -104,7 +104,7 @@ yarn owl test --platform ios Update the baseline images - + ```bash npm run owl test -- --platform ios --update From b229dc689862fc30c3bcee90c299d70a49fda7de Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Thu, 2 Dec 2021 11:48:59 +0000 Subject: [PATCH 09/19] Update website text --- website/src/components/HomepageFeatures/index.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/website/src/components/HomepageFeatures/index.tsx b/website/src/components/HomepageFeatures/index.tsx index a7f2b1ac..d0b6040c 100644 --- a/website/src/components/HomepageFeatures/index.tsx +++ b/website/src/components/HomepageFeatures/index.tsx @@ -10,8 +10,8 @@ const FeatureList = [ .default, description: ( <> - Docusaurus was designed from the ground up to be easily installed and - used to get your website up and running quickly. + Owl was designed make it easy to add visual regression testing to your + react native app. ), }, @@ -20,20 +20,17 @@ const FeatureList = [ Svg: require('../../../static/images/homepage/undraw_docusaurus_tree.svg') .default, description: ( - <> - Docusaurus lets you focus on your docs, and we'll do the chores. Go - ahead and move your docs into the docs directory. - + <>We've created a simple api for capturing and comparing screenshots. ), }, { - title: 'Find the differences', + title: 'View the differences', Svg: require('../../../static/images/homepage/visual-example.svg').default, svgClassName: styles.visualExample, description: ( <> - Extend or customize your website layout by reusing React. Docusaurus can - be extended while reusing the same header and footer. + Owl clearly highlights all differences, so no need to play + spot-the-difference! ), }, From 523cbd92161494c7169d7d521f5e3cbf369232a6 Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Thu, 2 Dec 2021 11:53:23 +0000 Subject: [PATCH 10/19] Fix the visual-example image to show actual diff --- website/static/images/homepage/visual-example.svg | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/website/static/images/homepage/visual-example.svg b/website/static/images/homepage/visual-example.svg index 8c691c0d..24cee936 100644 --- a/website/static/images/homepage/visual-example.svg +++ b/website/static/images/homepage/visual-example.svg @@ -23,7 +23,7 @@ Latest - + @@ -35,16 +35,16 @@ Diff - - - + + + + - + - From 89188a3d474eb66acb76d656fa1f615a74d087bd Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Thu, 2 Dec 2021 12:19:44 +0000 Subject: [PATCH 11/19] Small doc tweaks --- docs/advanced/running-ci.md | 3 +-- docs/introduction/config-file.md | 2 +- website/src/components/HomepageFeatures/index.tsx | 4 ++-- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/docs/advanced/running-ci.md b/docs/advanced/running-ci.md index 1d51a5b0..5969f311 100644 --- a/docs/advanced/running-ci.md +++ b/docs/advanced/running-ci.md @@ -18,8 +18,7 @@ With visual regression testing, it is all about **consistency**. Please make sur 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 - +```yaml title=".github/workflows/visual-regression-ios.yml" name: Run Visual Regression iOS on: [pull_request] diff --git a/docs/introduction/config-file.md b/docs/introduction/config-file.md index c327d6f7..2743a9ae 100644 --- a/docs/introduction/config-file.md +++ b/docs/introduction/config-file.md @@ -28,7 +28,7 @@ The config file - which unless specified in the cli should live in `./owl.config ### Example -```json +```json title="owl.config.json" { "ios": { "workspace": "ios/OwlDemoApp.xcworkspace", diff --git a/website/src/components/HomepageFeatures/index.tsx b/website/src/components/HomepageFeatures/index.tsx index d0b6040c..ff2d2f97 100644 --- a/website/src/components/HomepageFeatures/index.tsx +++ b/website/src/components/HomepageFeatures/index.tsx @@ -29,8 +29,8 @@ const FeatureList = [ svgClassName: styles.visualExample, description: ( <> - Owl clearly highlights all differences, so no need to play - spot-the-difference! + Owl clearly highlights all visual differences, so no need to play + spot-the-difference yourself! ), }, From dd348f30f43a8de8612cfb1935393a0c9da82441 Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Thu, 2 Dec 2021 14:18:53 +0000 Subject: [PATCH 12/19] Remove irrelevant screenshots --- .../src/components/HomepageFeatures/index.tsx | 14 +- .../homepage/undraw_docusaurus_mountain.svg | 170 ------------------ .../homepage/undraw_docusaurus_tree.svg | 1 - 3 files changed, 6 insertions(+), 179 deletions(-) delete mode 100644 website/static/images/homepage/undraw_docusaurus_mountain.svg delete mode 100644 website/static/images/homepage/undraw_docusaurus_tree.svg diff --git a/website/src/components/HomepageFeatures/index.tsx b/website/src/components/HomepageFeatures/index.tsx index ff2d2f97..a59923b7 100644 --- a/website/src/components/HomepageFeatures/index.tsx +++ b/website/src/components/HomepageFeatures/index.tsx @@ -6,8 +6,6 @@ import styles from './styles.module.css'; const FeatureList = [ { title: 'Take screenshots from your app', - Svg: require('../../../static/images/homepage/undraw_docusaurus_mountain.svg') - .default, description: ( <> Owl was designed make it easy to add visual regression testing to your @@ -17,8 +15,6 @@ const FeatureList = [ }, { title: 'Compare screenshots taken', - Svg: require('../../../static/images/homepage/undraw_docusaurus_tree.svg') - .default, description: ( <>We've created a simple api for capturing and comparing screenshots. ), @@ -45,10 +41,12 @@ export const HomepageFeatures = () => {

{description}

- + {!!Svg && ( + + )}
diff --git a/website/static/images/homepage/undraw_docusaurus_mountain.svg b/website/static/images/homepage/undraw_docusaurus_mountain.svg deleted file mode 100644 index 431cef2f..00000000 --- a/website/static/images/homepage/undraw_docusaurus_mountain.svg +++ /dev/null @@ -1,170 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/website/static/images/homepage/undraw_docusaurus_tree.svg b/website/static/images/homepage/undraw_docusaurus_tree.svg deleted file mode 100644 index a05cc03d..00000000 --- a/website/static/images/homepage/undraw_docusaurus_tree.svg +++ /dev/null @@ -1 +0,0 @@ -docu_tree \ No newline at end of file From 0503be14ad24e4a2b5b329614ec334f15bce675d Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Fri, 3 Dec 2021 08:55:04 +0000 Subject: [PATCH 13/19] Add Code of Conduct --- CODE_OF_CONDUCT.md | 80 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 CODE_OF_CONDUCT.md diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 00000000..30fd9d33 --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,80 @@ +# Contributor Covenant Code of Conduct + +## Our Pledge + +In the interest of fostering an open and welcoming environment, we as +contributors and maintainers pledge to making participation in our project and +our community a harassment-free experience for everyone, regardless of age, body +size, disability, ethnicity, sex characteristics, gender identity and expression, +level of experience, education, socio-economic status, nationality, personal +appearance, race, religion, or sexual identity and orientation. + +## Our Standards + +Examples of behavior that contributes to creating a positive environment +include: + +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +- The use of sexualized language or imagery and unwelcome sexual attention or + advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic + address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a + professional setting + +## Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable +behavior and are expected to take appropriate and fair corrective action in +response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or +reject comments, commits, code, wiki edits, issues, and other contributions +that are not aligned to this Code of Conduct, or to ban temporarily or +permanently any contributor for other behaviors that they deem inappropriate, +threatening, offensive, or harmful. + +## Scope + +This Code of Conduct applies both within project spaces and in public spaces +when an individual is representing the project or its community. Examples of +representing a project or community include using an official project e-mail +address, posting via an official social media account, or acting as an appointed +representative at an online or offline event. Representation of a project may be +further defined and clarified by project maintainers. + +## Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported by contacting the project team: + +- emmanouil.konstantinidis@formidable.com +- robert.walker@formidable.com + +All complaints will be reviewed and investigated and will result in a response that +is deemed necessary and appropriate to the circumstances. The project team is +obligated to maintain confidentiality with regard to the reporter of an incident. +Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good +faith may face temporary or permanent repercussions as determined by other +members of the project's leadership. + +## Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, +available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html + +[homepage]: https://www.contributor-covenant.org + +For answers to common questions about this code of conduct, see +https://www.contributor-covenant.org/faq \ No newline at end of file From b01b48bf1749b86e2c153fa0a4023d0cbe72986c Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Fri, 3 Dec 2021 16:10:49 +0000 Subject: [PATCH 14/19] More site and docs updates --- docs/cli/testing-the-app.md | 6 ++++ docs/introduction/getting-started.md | 12 +++++--- docs/introduction/setup-android.md | 7 ----- docs/introduction/setup-ios.md | 7 ----- docs/introduction/work-in-progress.md | 11 ++++++++ .../src/components/HomepageFeatures/index.tsx | 2 +- website/src/pages/index.tsx | 28 ++++++++++++++++++- 7 files changed, 53 insertions(+), 20 deletions(-) delete mode 100644 docs/introduction/setup-android.md delete mode 100644 docs/introduction/setup-ios.md create mode 100644 docs/introduction/work-in-progress.md diff --git a/docs/cli/testing-the-app.md b/docs/cli/testing-the-app.md index a9721a46..863e0737 100644 --- a/docs/cli/testing-the-app.md +++ b/docs/cli/testing-the-app.md @@ -17,6 +17,12 @@ The **first** time you will run the test command, react-native-owl will generate ::: +:::info + +You will need to manually start the correct simulator manually before the tests are run. + +::: + ### First run The baseline images will be automatically generated. To regenerate the baseline images, use the `--update` option. diff --git a/docs/introduction/getting-started.md b/docs/introduction/getting-started.md index da877120..9d463b90 100644 --- a/docs/introduction/getting-started.md +++ b/docs/introduction/getting-started.md @@ -2,9 +2,6 @@ sidebar_position: 1 --- -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; - # Getting Started ### Installation @@ -74,7 +71,14 @@ yarn owl build --platform ios -### Running the tests +### Work-In-Progress + +:::info + +You will need to manually start the correct simulator manually before the tests are run. + +::: + This runs the app on the simulator, either comparing screenshots with the baseline images, or updating the baseline images. diff --git a/docs/introduction/setup-android.md b/docs/introduction/setup-android.md deleted file mode 100644 index 9ffccd2d..00000000 --- a/docs/introduction/setup-android.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -sidebar_position: 3 ---- - -# Setup Android - -This is a placeholder. diff --git a/docs/introduction/setup-ios.md b/docs/introduction/setup-ios.md deleted file mode 100644 index e7240658..00000000 --- a/docs/introduction/setup-ios.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -sidebar_position: 2 ---- - -# Setup iOS - -This is a placeholder. diff --git a/docs/introduction/work-in-progress.md b/docs/introduction/work-in-progress.md new file mode 100644 index 00000000..df497793 --- /dev/null +++ b/docs/introduction/work-in-progress.md @@ -0,0 +1,11 @@ +--- +sidebar_position: 3 +--- + +# Work-in-Progress + +### Future functionality + + - We plan to integrate [Detox](https://wix.github.io/Detox/) intl the library, and add methods to our [API](/docs/api/methods) to allow tests to interact with the app. For example, this could allow the particular button to be tapped, or screen to be scrolled, before taking and comparing a screenshot as part of a test. + + - We will automate the launching to the relevant simulator, if not already running, when running tests. diff --git a/website/src/components/HomepageFeatures/index.tsx b/website/src/components/HomepageFeatures/index.tsx index a59923b7..587a372b 100644 --- a/website/src/components/HomepageFeatures/index.tsx +++ b/website/src/components/HomepageFeatures/index.tsx @@ -35,7 +35,7 @@ const FeatureList = [ export const HomepageFeatures = () => { return FeatureList.map(({ Svg, svgClassName, title, description }, idx) => { return ( -
+

{title}

{description}

diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index ae86af8d..ca3fad17 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -11,7 +11,33 @@ export default function Home() { description="Description will go into a meta tag in " > -
+
+

+ This library enables developers to introduce visual regression tests + to their apps for iOS and Android. + Being heavily inspired by{' '} + Detox, an end-to-end + testing and automation framework, this library uses a similar API that + makes setting up react-native-owl and running the tests locally and on + your preferred CI service, seamless. +

+ +

+ Learn more about the background behind this library in{' '} + + the accouncement on the Formidable Blog + + . +

+ +

+ + Note: This library is work-in-progress. We are still working on + adding additional functionality to allow full control of the app + being tested. + +

+
From 1f9e5096766f9365aa8129031d6407a53cb6040f Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Mon, 6 Dec 2021 08:39:28 +0000 Subject: [PATCH 15/19] Fix typo --- docs/cli/testing-the-app.md | 2 +- docs/introduction/getting-started.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/cli/testing-the-app.md b/docs/cli/testing-the-app.md index 863e0737..40ab7a98 100644 --- a/docs/cli/testing-the-app.md +++ b/docs/cli/testing-the-app.md @@ -19,7 +19,7 @@ The **first** time you will run the test command, react-native-owl will generate :::info -You will need to manually start the correct simulator manually before the tests are run. +You will need to manually start the correct simulator before the tests are run. ::: diff --git a/docs/introduction/getting-started.md b/docs/introduction/getting-started.md index 9d463b90..5cde236f 100644 --- a/docs/introduction/getting-started.md +++ b/docs/introduction/getting-started.md @@ -75,7 +75,7 @@ yarn owl build --platform ios :::info -You will need to manually start the correct simulator manually before the tests are run. +You will need to manually start the correct simulator before the tests are run. ::: From 8cb352ff997bbc0ccc369370f75323354ce31070 Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Mon, 6 Dec 2021 09:09:19 +0000 Subject: [PATCH 16/19] Fix links --- docs/cli/testing-the-app.md | 2 +- docs/introduction/getting-started.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/cli/testing-the-app.md b/docs/cli/testing-the-app.md index 40ab7a98..2de1e0c1 100644 --- a/docs/cli/testing-the-app.md +++ b/docs/cli/testing-the-app.md @@ -72,7 +72,7 @@ yarn owl test --platform ios --update ### Viewing the report -When the tests have failed any [`.toMatchBaseline()`](/docs/api/matchers.md) expectations, a report is generated, where you can view all the screenshots, where the differences in the current vs baseline screenshots will be highlighted. +When the tests have failed any [`.toMatchBaseline()`](/docs/api/matchers) expectations, a report is generated, where you can view all the screenshots, where the differences in the current vs baseline screenshots will be highlighted. The report uri is included in the test output. diff --git a/docs/introduction/getting-started.md b/docs/introduction/getting-started.md index 5cde236f..5ee489de 100644 --- a/docs/introduction/getting-started.md +++ b/docs/introduction/getting-started.md @@ -126,4 +126,4 @@ yarn owl test --platform ios --update ### Failed tests report -When the tests have failed any [`.toMatchBaseline()`](/docs/api/matchers.md) expectations, a [report is generated](/docs/cli/testing-the-app#viewing-the-report), where you can view all the screenshots, where the differences in the current vs baseline screenshots will be highlighted. +When the tests have failed any [`.toMatchBaseline()`](/docs/api/matchers) expectations, a [report is generated](/docs/cli/testing-the-app#viewing-the-report), where you can view all the screenshots, where the differences in the current vs baseline screenshots will be highlighted. From 4db04eef7cbbb00f0e8432f59226b15a0c36b256 Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Mon, 6 Dec 2021 10:14:58 +0000 Subject: [PATCH 17/19] Add work-in-progress link and fix typo --- website/src/pages/index.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index ca3fad17..fbcc1314 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -25,16 +25,17 @@ export default function Home() {

Learn more about the background behind this library in{' '} - the accouncement on the Formidable Blog + the announcement on the Formidable Blog .

- Note: This library is work-in-progress. We are still working on - adding additional functionality to allow full control of the app - being tested. + Note: This library is{' '} + work-in-progress. + We are still working on adding additional functionality to allow + full control of the app being tested.

From a57df321aaa8cc5c57ce3e23811d2844e2229d4a Mon Sep 17 00:00:00 2001 From: Rob Walker Date: Mon, 6 Dec 2021 15:25:40 +0000 Subject: [PATCH 18/19] Remove blog link for initial deployment --- website/src/pages/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index fbcc1314..3f919e21 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -22,13 +22,14 @@ export default function Home() { your preferred CI service, seamless.

+ {/* REMOVE INITIALLY AS THIS WILL BE DEPLOYED BEFORE THE BLOG IN PUBLISHED

Learn more about the background behind this library in{' '} the announcement on the Formidable Blog . -

+

*/}

From 3ab5a05bf2f6ea18ebf5b4ec8bab3574c4ac3f1f Mon Sep 17 00:00:00 2001 From: Manos Konstantinidis Date: Mon, 10 Jan 2022 11:25:40 +0000 Subject: [PATCH 19/19] chore: Update docs --- docs/advanced/running-ci.md | 4 ---- docs/cli/testing-the-app.md | 34 +++++++++++++++++++++++---- docs/introduction/work-in-progress.md | 4 ++-- 3 files changed, 32 insertions(+), 10 deletions(-) diff --git a/docs/advanced/running-ci.md b/docs/advanced/running-ci.md index 5969f311..4ca55948 100644 --- a/docs/advanced/running-ci.md +++ b/docs/advanced/running-ci.md @@ -85,7 +85,3 @@ jobs: ``` 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. - -### CircleCI - -Example. diff --git a/docs/cli/testing-the-app.md b/docs/cli/testing-the-app.md index 2de1e0c1..d5a161c3 100644 --- a/docs/cli/testing-the-app.md +++ b/docs/cli/testing-the-app.md @@ -9,6 +9,14 @@ import TabItem from '@theme/TabItem'; Use the `test` command to run the app on the simulator, either comparing screenshots with the baseline images, or updating the baseline images. +#### Options + +| Name | Required | Default | Options/Types | Description | +| ------------------ | -------- | ----------------- | --------------- | ----------------------------------------------- | +| `--config`, `-c` | false | ./owl.config.json | String | Path to the configuration file | +| `--platform`, `-p` | true | - | `ios`,`android` | The platform the app should be built on | +| `--update`, `-u` | true | false | Boolean | A flag about rewriting existing baseline images | + When comparing images, any difference in the current vs baseline will fail the test. :::info @@ -29,7 +37,6 @@ The baseline images will be automatically generated. To regenerate the baseline ### Running tests - @@ -47,8 +54,6 @@ yarn owl test --platform ios - - ### Updating the baseline Update the baseline images @@ -70,6 +75,27 @@ yarn owl test --platform ios --update +### Using a custom config file + +Update the baseline images + + + + +```bash +npm run owl test -- --platform ios --config ./owl.config.json +``` + + + + +```bash +yarn owl test --platform ios --config ./owl.config.json +``` + + + + ### Viewing the report When the tests have failed any [`.toMatchBaseline()`](/docs/api/matchers) expectations, a report is generated, where you can view all the screenshots, where the differences in the current vs baseline screenshots will be highlighted. @@ -85,4 +111,4 @@ The following will be included the the output of failed tests: [OWL] Generating Report [OWL] Report was built at /Users/username/Code/FormidableLabs/react-native-owl/example/.owl/report/index.html ... -``` \ No newline at end of file +``` diff --git a/docs/introduction/work-in-progress.md b/docs/introduction/work-in-progress.md index df497793..703c44e2 100644 --- a/docs/introduction/work-in-progress.md +++ b/docs/introduction/work-in-progress.md @@ -6,6 +6,6 @@ sidebar_position: 3 ### Future functionality - - We plan to integrate [Detox](https://wix.github.io/Detox/) intl the library, and add methods to our [API](/docs/api/methods) to allow tests to interact with the app. For example, this could allow the particular button to be tapped, or screen to be scrolled, before taking and comparing a screenshot as part of a test. +- We plan to integrate [Detox](https://wix.github.io/Detox/) into the library, and add methods to our [API](/docs/api/methods) to allow tests to interact with the app. For example, this could allow the particular button to be tapped, or screen to be scrolled, before taking and comparing a screenshot as part of a test. - - We will automate the launching to the relevant simulator, if not already running, when running tests. +- We will automate the launching to the relevant simulator, if not already running, when running tests.