Skip to content

Commit

Permalink
docs: Rewrite end-to-end testing documentation
Browse files Browse the repository at this point in the history
Update for breaking changes from upgrading Appium 2. Reduce verbosity
and duplication between the `WordPress/gutenberg` repository to improve
the approachability and maintainability of the documentation.
  • Loading branch information
dcalhoun committed Oct 20, 2023
1 parent ba3d3b0 commit f5630ae
Showing 1 changed file with 12 additions and 28 deletions.
40 changes: 12 additions & 28 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -122,40 +122,24 @@ Then, open `chrome://inspect` in Chrome to attach the debugger (look into the "R

This project is set up to use [jest](https://facebook.github.io/jest/) for tests. You can configure whatever testing strategy you like, but jest works out of the box. Create test files in directories called `__tests__` or with the `.test.js` extension to have the files loaded by jest. See an example test [here](https://github.com/WordPress/gutenberg/blob/HEAD/packages/react-native-editor/src/test/api-fetch-setup.test.js). The [jest documentation](https://facebook.github.io/jest/docs/en/getting-started.html) is also a wonderful resource, as is the [React Native testing tutorial](https://facebook.github.io/jest/docs/en/tutorial-react-native.html).

## UI Tests
## End-to-End Tests

This repository uses Appium to run UI tests. The tests live in `__device-tests__` and are written using Appium to run tests against simulators and real devices. To run these you'll need to check off a few things:
This repository extends the end-to-end (E2E) tests found in the Gutenberg for Mobile Apps (GMA) [project repository](https://github.com/WordPress/gutenberg). The majority of E2E tests should reside in the GMA repository. However, experimental tests or non-core-related tests should be placed in the `gutenberg-mobile` repository.

### Set up
Reviewing the GMA E2E test [documentation](https://github.com/WordPress/gutenberg/tree/trunk/packages/react-native-editor/__device-tests__#readme) is the best approach for understanding the test environment and how to set up your computer to run tests. Much of the information and approaches outlined there also apply to the tests found in this repository. The only difference being that this repository includes its own matching npm scripts to run the test, e.g. `npm run test:e2e:ios:local`.

- When running the tests, you'll need to ensure the Metro bundler (`npm run start`) is not running.
- [Appium CLI](https://appium.io/docs/en/about-appium/getting-started/) installed and available globally. We also recommend using [appium-doctor](https://github.com/appium/appium-doctor) to ensure all of Appium's dependencies are good to go. You don't have to worry about starting the server yourself, the tests handle starting the server on port 4723, just be sure that the port is free or feel free to change the port number in the test file.
- For iOS a simulator should automatically launch but for Android you'll need to have an emulator fired up and running. The emulators must match the devices in Gutenberg's [caps.js](https://github.com/WordPress/gutenberg/blob/trunk/packages/react-native-editor/__device-tests__/helpers/caps.js) file.
After reviewing the GMA E2E test documentation, the following examples showcase running the E2E tests found in this repository using the repositories scripts.

- iOS: **iPhone 13, iOS 15.4**
- Android: **Google Pixel 3 XL GoogleAPI Emulator, Android 11** _(Note: when creating the Pixel 3 XL emulator, ensure that "Enable Device Frame" is unchecked on the Verify Configuration screen.)_
```shell
# Setup the E2E environment
npm run core test:e2e:setup

<img width="512" alt="Device Tests" src="https://github.com/wordpress-mobile/gutenberg-mobile/assets/643285/19c223cc-96d6-4c5a-98f1-a463bb98e927">
# Run a single test file on iOS
npm run test:e2e:ios:local -- -- [email protected]

### Running the tests

Then, to run the UI tests on iOS:

`npm run test:e2e:ios:local`

and for Android:

`npm run test:e2e:android:local`

**Note:** Make sure you've run the above commands at least once, so the demo app binaries are built before running individual tests below.

To run a single test instead of the entire suite, use `npm run device-tests:local`. Here's an example that runs only `gutenberg-editor-paragraph.test`:

`TEST_RN_PLATFORM=ios npm run device-tests:local gutenberg-editor-paragraph.test`

Note: You might experience problems that seem to be related to the tests starting the Appium server, e.g. errors that say `Connection Refused`, `Connection Reset` or `The requested environment is not available`. If so, you can manually start the Appium server via `npm run native appium:start`, and (optionally) comment out related code in the `beforeAll` and `afterAll` block.

For a more detailed outline of the UI tests and how to get started writing one, please visit the [UI Test documentation](https://github.com/WordPress/gutenberg/blob/HEAD/packages/react-native-editor/__device-tests__/README.md) and our [contributing guide](https://github.com/WordPress/gutenberg/blob/HEAD/packages/react-native-editor/__device-tests__/CONTRIBUTING.md).
# Enable watch mode on Android
npm run test:e2e:android:local -- --watch
```

## Static analysis and code style

Expand Down

0 comments on commit f5630ae

Please sign in to comment.