diff --git a/docs/api/matchers.md b/docs/api/matchers.md
index 0b626dbc..5039282d 100644
--- a/docs/api/matchers.md
+++ b/docs/api/matchers.md
@@ -1,5 +1,5 @@
---
-sidebar_position: 2
+sidebar_position: 3
---
# Matchers
@@ -10,13 +10,14 @@ This custom matcher will try to find and compare the baseline screenshot by usin
#### Example
-```js {7}
+```js title="__tests__/App.owl.tsx"
import { takeScreenshot } from 'react-native-owl';
describe('App.tsx', () => {
it('takes a screenshot of the first screen', async () => {
const screen = await takeScreenshot('homescreen');
+ // highlight-next-line
expect(screen).toMatchBaseline();
});
});
diff --git a/docs/api/methods.md b/docs/api/methods.md
index 16155815..b91be8d4 100644
--- a/docs/api/methods.md
+++ b/docs/api/methods.md
@@ -10,11 +10,12 @@ Grabs a screenshot from the simulator and stores it under `latest` screenshots(i
#### Example
-```js {5}
+```js title="__tests__/App.owl.tsx"
import { takeScreenshot } from 'react-native-owl';
describe('App.tsx', () => {
it('takes a screenshot of the first screen', async () => {
+ // highlight-next-line
const screen = await takeScreenshot('homescreen');
expect(screen).toMatchBaseline();
@@ -25,3 +26,212 @@ describe('App.tsx', () => {
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`.
+
+### toExist(testID: string)
+
+Waits for an element to exist where its `testID` prop matches the methods `testID` argument.
+
+If there is no matching element, it will retry for 10 seconds before throwing an Error.
+
+#### Example
+
+```js title="App.tsx"
+...
+const [isLoaded, setIsLoaded] = React.useState(false);
+
+React.useEffect(() => {
+ setTimeout(() => {
+ setIsLoaded(true);
+ }, 1000);
+}, []);
+
+<>
+ {isLoaded && (
+
+ )}
+>
+...
+```
+
+```js title="__tests__/App.owl.tsx"
+import { toExist, takeScreenshot } from 'react-native-owl';
+
+describe('App.tsx', () => {
+ it('waits for an element, then takes a screenshot', async () => {
+ // highlight-next-line
+ await toExist('textInput');
+
+ const screen = await takeScreenshot('textInputExists');
+
+ expect(screen).toMatchBaseline();
+ });
+});
+```
+
+### press(testID: string)
+
+Calls the `onPress` prop callback of the element where its `testID` prop matches the methods `testID` argument.
+
+If there is no matching element, it will retry for 10 seconds before throwing an Error.
+
+The element must have a `onPress` prop, or an Error will be thrown.
+
+#### Example
+
+```js title="App.tsx"
+...
+ {
+ // Will be called by the react-native-owl `press` method
+}} />
+...
+```
+
+```js title="__tests__/App.owl.tsx"
+import { press, takeScreenshot } from 'react-native-owl';
+
+describe('App.tsx', () => {
+ it('presses a button with testID = `button` then takes a screenshot', async () => {
+ // highlight-next-line
+ await press('button');
+
+ const screen = await takeScreenshot('afterButtonPress');
+
+ expect(screen).toMatchBaseline();
+ });
+});
+```
+
+### longPress(testID: string)
+
+Calls the `onLongPress` prop callback of the element where its `testID` prop matches the methods `testID` argument.
+
+If there is no matching element, it will retry for 10 seconds before throwing an Error.
+
+The element must have a `onLongPress` prop, or an Error will be thrown.
+
+#### Example
+
+```js title="App.tsx"
+...
+ {
+ // Will be called by the react-native-owl `longPress` method
+}} />
+...
+```
+
+```js title="__tests__/App.owl.tsx"
+import { longPress, takeScreenshot } from 'react-native-owl';
+
+describe('App.tsx', () => {
+ it('long presses a button with testID = `button` then takes a screenshot', async () => {
+ // highlight-next-line
+ await longPress('button');
+
+ const screen = await takeScreenshot('afterButtonLongPress');
+
+ expect(screen).toMatchBaseline();
+ });
+});
+```
+
+### changeText(testID: string, text: string)
+
+Calls the `onChangeText` prop callback of the element where its `testID` prop matches the methods `testID` argument.
+
+If there is no matching element, it will retry for 10 seconds before throwing an Error.
+
+The element must have a `onChangeText` prop, or an Error will be thrown.
+
+#### Example
+
+```js title="App.tsx"
+...
+
+...
+```
+
+```js title="__tests__/App.owl.tsx"
+import { changeText, takeScreenshot } from 'react-native-owl';
+
+describe('App.tsx', () => {
+ it('changes text in a TextInput with testID = `email` then takes a screenshot', async () => {
+ // highlight-next-line
+ await changeText('email', 'john.smith@example.com');
+
+ const screen = await takeScreenshot('afterChangeText');
+
+ expect(screen).toMatchBaseline();
+ });
+});
+```
+
+### scrollTo(testID: string, position: {x?: number, y?: number})
+
+Calls the `scrollTo` method of the element where its `testID` prop matches the methods `testID` argument.
+
+If there is no matching element, it will retry for 10 seconds before throwing an Error.
+
+The element must have a `scrollTo` method (i.e `ScrollView`), or an Error will be thrown.
+
+#### Example
+
+```js title="App.tsx"
+...
+
+ ...
+
+...
+```
+
+```js title="__tests__/App.owl.tsx"
+import { scrollTo, takeScreenshot } from 'react-native-owl';
+
+describe('App.tsx', () => {
+ it('scroll down the screen a bit then takes a screenshot', async () => {
+ // highlight-next-line
+ await scrollTo('scrollView', {y: 50});
+
+ const screen = await takeScreenshot('afterScrollTo');
+
+ expect(screen).toMatchBaseline();
+ });
+});
+```
+
+### scrollToEnd(testID: string)
+
+Calls the `scrollToEnd` method of the element where its `testID` prop matches the methods `testID` argument.
+
+If there is no matching element, it will retry for 10 seconds before throwing an Error.
+
+The element must have a `scrollToEnd` method (i.e `ScrollView`), or an Error will be thrown.
+
+#### Example
+
+```js title="App.tsx"
+...
+
+ ...
+
+...
+```
+
+```js title="__tests__/App.owl.tsx"
+import { scrollToEnd, takeScreenshot } from 'react-native-owl';
+
+describe('App.tsx', () => {
+ it('scroll down the screen a bit then takes a screenshot', async () => {
+ // highlight-next-line
+ await scrollToEnd('scrollView');
+
+ const screen = await takeScreenshot('afterScrollToEnd');
+
+ expect(screen).toMatchBaseline();
+ });
+});
+```
diff --git a/docs/introduction/getting-started.md b/docs/introduction/getting-started.md
index 5ee489de..e3e8f793 100644
--- a/docs/introduction/getting-started.md
+++ b/docs/introduction/getting-started.md
@@ -39,7 +39,7 @@ Use the [takeScreenshot](/docs/api/methods#takescreenshotname-string) and [.toMa
#### Example
```js
-import { takeScreenshot } from 'react-native-owl';
+import { press, takeScreenshot } from 'react-native-owl';
describe('App.tsx', () => {
it('takes a screenshot of the first screen', async () => {
@@ -48,6 +48,16 @@ describe('App.tsx', () => {
expect(screen).toMatchBaseline();
});
});
+
+describe('App.tsx', () => {
+ it('presses a button, then takes a screenshot', async () => {
+ await press('button')
+
+ const screen = await takeScreenshot('afterButtonPress');
+
+ expect(screen).toMatchBaseline();
+ });
+});
```
### Building the app
@@ -71,8 +81,6 @@ yarn owl build --platform ios
-### Work-In-Progress
-
:::info
You will need to manually start the correct simulator before the tests are run.
diff --git a/docs/introduction/work-in-progress.md b/docs/introduction/work-in-progress.md
index d5d01e24..6966d05c 100644
--- a/docs/introduction/work-in-progress.md
+++ b/docs/introduction/work-in-progress.md
@@ -7,6 +7,4 @@ title: 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/lib/cli/build.test.ts b/lib/cli/build.test.ts
index aa50e8ef..97781d6c 100644
--- a/lib/cli/build.test.ts
+++ b/lib/cli/build.test.ts
@@ -1,15 +1,11 @@
import path from 'path';
import execa from 'execa';
-import { buildAndroid, buildHandler, buildIOS } from './build';
+import { buildAndroid, buildHandler, buildIOS, ENTRY_FILE } from './build';
import { CliBuildOptions, Config, ConfigEnv } from '../types';
import { Logger } from '../logger';
import * as configHelpers from './config';
-const env: ConfigEnv = {
- ENTRY_FILE: './node_modules/react-native-owl/dist/client/index.app.js',
-};
-
describe('build.ts', () => {
const logger = new Logger();
const execMock = jest.spyOn(execa, 'command').mockImplementation();
@@ -26,7 +22,7 @@ describe('build.ts', () => {
scheme: 'RNDemo',
configuration: 'Debug',
device: 'iPhone Simulator',
- env,
+ env: { ENTRY_FILE },
},
};
@@ -35,7 +31,7 @@ describe('build.ts', () => {
expect(execMock).toHaveBeenCalledTimes(1);
expect(execMock).toHaveBeenCalledWith(
`xcodebuild -workspace ios/RNDemo.xcworkspace -scheme RNDemo -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build`,
- { stdio: 'inherit', env }
+ { stdio: 'inherit', env: { ENTRY_FILE } }
);
});
@@ -47,7 +43,7 @@ describe('build.ts', () => {
configuration: 'Debug',
quiet: true,
device: 'iPhone Simulator',
- env,
+ env: { ENTRY_FILE },
},
};
@@ -58,7 +54,7 @@ describe('build.ts', () => {
`xcodebuild -workspace ios/RNDemo.xcworkspace -scheme RNDemo -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build -quiet`,
{
stdio: 'inherit',
- env,
+ env: { ENTRY_FILE },
}
);
});
@@ -68,7 +64,7 @@ describe('build.ts', () => {
ios: {
buildCommand: "echo 'Hello World'",
device: 'iPhone Simulator',
- env,
+ env: { ENTRY_FILE },
},
};
@@ -77,7 +73,7 @@ describe('build.ts', () => {
expect(execMock).toHaveBeenCalledTimes(1);
expect(execMock).toHaveBeenCalledWith(`echo 'Hello World'`, {
stdio: 'inherit',
- env,
+ env: { ENTRY_FILE },
});
});
});
@@ -87,7 +83,7 @@ describe('build.ts', () => {
const config: Config & { android: { env: ConfigEnv } } = {
android: {
packageName: 'com.rndemo',
- env,
+ env: { ENTRY_FILE },
},
};
@@ -99,7 +95,7 @@ describe('build.ts', () => {
{
stdio: 'inherit',
cwd: path.join(process.cwd(), 'android'),
- env,
+ env: { ENTRY_FILE },
}
);
});
@@ -109,7 +105,7 @@ describe('build.ts', () => {
android: {
packageName: 'com.rndemo',
quiet: true,
- env,
+ env: { ENTRY_FILE },
},
};
@@ -121,7 +117,7 @@ describe('build.ts', () => {
{
stdio: 'inherit',
cwd: path.join(process.cwd(), 'android'),
- env,
+ env: { ENTRY_FILE },
}
);
});
@@ -131,7 +127,7 @@ describe('build.ts', () => {
android: {
packageName: 'com.rndemo',
buildCommand: "echo 'Hello World'",
- env,
+ env: { ENTRY_FILE },
},
};
@@ -142,7 +138,7 @@ describe('build.ts', () => {
`echo 'Hello World' -PisOwlBuild=true`,
{
stdio: 'inherit',
- env,
+ env: { ENTRY_FILE },
}
);
});
diff --git a/lib/cli/build.ts b/lib/cli/build.ts
index 20aad9d9..2f8a7071 100644
--- a/lib/cli/build.ts
+++ b/lib/cli/build.ts
@@ -5,7 +5,8 @@ import { CliBuildOptions, Config } from '../types';
import { Logger } from '../logger';
import { getConfig } from './config';
-const ENTRY_FILE = './node_modules/react-native-owl/dist/client/index.app.js';
+export const ENTRY_FILE =
+ './node_modules/react-native-owl/dist/client/index.app.js';
export const buildIOS = async (
config: Config,
diff --git a/website/src/components/Hero/index.tsx b/website/src/components/Hero/index.tsx
index d729d06d..92a96139 100644
--- a/website/src/components/Hero/index.tsx
+++ b/website/src/components/Hero/index.tsx
@@ -9,7 +9,9 @@ import styles from './styles.module.css';
const LogoBadge = require('../../../static/images/badge.svg').default;
const heroExample = `describe('App.tsx', () => {
- it('takes a screenshot of the first screen', async () => {
+ it('presses a button & takes a screenshot', async () => {
+ await press('button');
+
const screen = await takeScreenshot('homescreen');
expect(screen).toMatchBaseline();
@@ -39,9 +41,7 @@ export const Hero = () => {
-
- {heroExample}
-
+ {heroExample}
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index bb717a62..4feb476d 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -42,14 +42,6 @@ export default function Home() {
.
-
-
- Note: This library is work-in-progress. We are still working on
- adding additional functionality to allow full control of the app
- being tested.
-
-
-