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 diff --git a/README.md b/README.md index 084bd1a7..9c00932c 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ > **Work In Progress**: Visual regression testing for React Native + + ## Installation ```sh @@ -10,106 +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.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 diff --git a/docs/advanced/running-ci.md b/docs/advanced/running-ci.md index eb53f925..4ca55948 100644 --- a/docs/advanced/running-ci.md +++ b/docs/advanced/running-ci.md @@ -14,8 +14,74 @@ With visual regression testing, it is all about **consistency**. Please make sur ### GitHub Actions -Example. +#### Example -### CircleCI +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). -Example. +```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/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/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..1bba83a9 --- /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..d5a161c3 --- /dev/null +++ b/docs/cli/testing-the-app.md @@ -0,0 +1,114 @@ +--- +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. + +#### 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 + +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. + +::: + +:::info + +You will need to manually start the correct simulator before the tests are run. + +::: + +### 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 +``` + + + + +### 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. + +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 +... +``` diff --git a/docs/introduction/config-file.md b/docs/introduction/config-file.md index d61a0bf4..2743a9ae 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 title="owl.config.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 62f6b608..5ee489de 100644 --- a/docs/introduction/getting-started.md +++ b/docs/introduction/getting-started.md @@ -14,7 +14,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`. 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" { @@ -22,22 +24,106 @@ Create a file called `owl.config.json` in the root of your project, next to your "workspace": "ios/OwlDemo.xcworkspace", "scheme": "OwlDemo", "configuration": "Release", - "device": "iPhone 12 Pro" + "device": "iPhone 13 Pro" }, "android": { "packageName": "com.owldemo" - } + }, } ``` +### 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 -Placeholder. +Before the app can be tested, it must be built. + + + + +```bash +npm run owl build -- --platform ios +``` + + + + +```bash +yarn owl build --platform ios +``` + + + + +### Work-In-Progress + +:::info + +You will need to manually start the correct simulator before the tests are run. -### Running the tests +::: + + +This runs 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. + +#### 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 +``` -Placeholder. + + -### Generated report +### Failed tests report -Placeholder. +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. 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..703c44e2 --- /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/) 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. 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)**). 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', diff --git a/website/src/components/HomepageFeatures/index.tsx b/website/src/components/HomepageFeatures/index.tsx index a7f2b1ac..587a372b 100644 --- a/website/src/components/HomepageFeatures/index.tsx +++ b/website/src/components/HomepageFeatures/index.tsx @@ -6,34 +6,27 @@ 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: ( <> - 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. ), }, { title: 'Compare screenshots taken', - 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 visual differences, so no need to play + spot-the-difference yourself! ), }, @@ -42,16 +35,18 @@ const FeatureList = [ export const HomepageFeatures = () => { return FeatureList.map(({ Svg, svgClassName, title, description }, idx) => { return ( -
+

{title}

{description}

- + {!!Svg && ( + + )}
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index ae86af8d..3f919e21 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -11,7 +11,35 @@ 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. +

+ + {/* 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 + + . +

*/} + +

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

+
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. 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 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 - - - + + + + - + -