add packages/detox for e2e (#79)

.circleci/config.yml

@@ -20,7 +20,7 @@ executors:
   macos:
     <<: *defaults
     macos:
-      xcode: &_XCODE_VERSION '12.1.0'
+      xcode: &_XCODE_VERSION '12.5.0'
 
 commands:
   setup:
@@ -77,6 +77,10 @@ jobs:
     steps:
       - setup:
           os: << parameters.os >>
+      - run:
+          name: Build
+          command: yarn build
+          no_output_timeout: 30m
       - run:
           name: E2E
           command: yarn e2e

.gitignore

@@ -37,3 +37,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# Local Circleci
+process.yml

e2e/detox-e2e/jest.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html'],
+  maxWorkers: 1,
+  globals: { 'ts-jest': { tsconfig: '<rootDir>/tsconfig.spec.json' } },
+  displayName: 'e2e-detox',
+  setupFilesAfterEnv: ['<rootDir>/test-setup.ts'],
+  testTimeout: 600000,
+};

e2e/detox-e2e/test-setup.ts

@@ -0,0 +1,22 @@
+import { join } from 'path';
+import {
+  ensureNxProject,
+  patchPackageJsonForPlugin,
+  runPackageManagerInstall,
+} from '@nrwl/nx-plugin/testing';
+import { appRootPath } from '@nrwl/workspace/src/utilities/app-root';
+import { readJsonFile, writeJsonFile } from '@nrwl/devkit';
+
+beforeAll(() => {
+  // delete @nrlw/detox form react-native package.json so it will not pull @nrwl/detox from npm registry and use local one
+  const path = join(appRootPath, 'dist/packages/react-native/package.json');
+  const json = readJsonFile(path);
+  delete json.dependencies['@nrwl/detox'];
+  writeJsonFile(path, json);
+});
+
+beforeEach(() => {
+  ensureNxProject('@nrwl/detox', 'dist/packages/detox');
+  patchPackageJsonForPlugin('@nrwl/react-native', 'dist/packages/react-native');
+  runPackageManagerInstall();
+});

e2e/detox-e2e/tests/ios.test.ts

@@ -0,0 +1,28 @@
+import { readJsonFile, writeJsonFile } from '@nrwl/devkit';
+import { runNxCommandAsync, uniq } from '@nrwl/nx-plugin/testing';
+import { platform } from 'os';
+
+describe('Detox iOS', () => {
+  // Currently there is known issue that for react native 0.65rc, Folly dual symbols preventing ios from building successfully.
+  xtest('should pass detox e2e tests on ios', async () => {
+    if (platform() !== 'darwin') {
+      return;
+    }
+    const myapp = uniq('myapp');
+    await runNxCommandAsync(
+      `generate @nrwl/react-native:app ${myapp} --e2eTestRunner=detox --linter=eslint`
+    );
+
+    const androidBuildResult = await runNxCommandAsync(
+      `build-ios ${myapp}-e2e`
+    );
+    expect(androidBuildResult.stdout).toContain('BUILD SUCCESS');
+
+    const androidTestResult = await runNxCommandAsync(
+      `test-ios ${myapp}-e2e --cleanup`
+    );
+    expect(androidTestResult.stdout).toContain(
+      'Running target "test-ios" succeeded'
+    );
+  });
+});

e2e/detox-e2e/tsconfig.e2e.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": ["**/*.test.ts"]
+}

e2e/detox-e2e/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.e2e.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

e2e/detox-e2e/tsconfig.spec.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
+}

e2e/react-native-e2e/jest.config.js

@@ -7,5 +7,6 @@ module.exports = {
   maxWorkers: 1,
   globals: { 'ts-jest': { tsconfig: '<rootDir>/tsconfig.spec.json' } },
   displayName: 'e2e-react-native',
+  setupFilesAfterEnv: ['<rootDir>/test-setup.ts'],
   testTimeout: 600000,
 };

e2e/react-native-e2e/test-setup.ts

@@ -0,0 +1,22 @@
+import { join } from 'path';
+import {
+  ensureNxProject,
+  patchPackageJsonForPlugin,
+  runPackageManagerInstall,
+} from '@nrwl/nx-plugin/testing';
+import { appRootPath } from '@nrwl/workspace/src/utilities/app-root';
+import { readJsonFile, writeJsonFile } from '@nrwl/devkit';
+
+beforeAll(() => {
+  // delete @nrlw/detox form react-native package.json so it will not pull @nrwl/detox from npm registry and use local one
+  const path = join(appRootPath, 'dist/packages/react-native/package.json');
+  const json = readJsonFile(path);
+  delete json.dependencies['@nrwl/detox'];
+  writeJsonFile(path, json);
+});
+
+beforeEach(() => {
+  ensureNxProject('@nrwl/detox', 'dist/packages/detox');
+  patchPackageJsonForPlugin('@nrwl/react-native', 'dist/packages/react-native');
+  runPackageManagerInstall();
+});

e2e/react-native-e2e/tests/react-native.test.ts

@@ -1,7 +1,6 @@
 import {
   checkFilesExist,
-  ensureNxProject,
-  readFile,
+  readJson,
   runNxCommandAsync,
   uniq,
   updateFile,
@@ -10,7 +9,6 @@ import { join } from 'path';
 
 test('create ios and android JS bundles', async () => {
   const appName = uniq('my-app');
-  ensureNxProject('@nrwl/react-native', 'dist/packages/react-native');
   await runNxCommandAsync(`generate @nrwl/react-native:application ${appName}`);
 
   await expect(runNxCommandAsync(`test ${appName}`)).resolves.toMatchObject({
@@ -34,7 +32,6 @@ test('create ios and android JS bundles', async () => {
 
 test('sync npm dependencies for autolink', async () => {
   const appName = uniq('my-app');
-  ensureNxProject('@nrwl/react-native', 'dist/packages/react-native');
   await runNxCommandAsync(`generate @nrwl/react-native:application ${appName}`);
   // Add npm package with native modules
   updateFile(join('package.json'), (content) => {
@@ -53,7 +50,7 @@ test('sync npm dependencies for autolink', async () => {
     `sync-deps ${appName} --include=react-native-gesture-handler,react-native-safe-area-context`
   );
 
-  const result = JSON.parse(readFile(join('apps', appName, 'package.json')));
+  const result = readJson(join('apps', appName, 'package.json'));
   expect(result).toMatchObject({
     dependencies: {
       'react-native-image-picker': '*',

nx.json

@@ -22,6 +22,13 @@
     }
   },
   "projects": {
+    "detox": {
+      "tags": []
+    },
+    "detox-e2e": {
+      "tags": [],
+      "implicitDependencies": ["detox"]
+    },
     "react-native": {
       "tags": []
     },

package.json

@@ -6,10 +6,11 @@
   "scripts": {
     "nx": "nx",
     "start": "nx serve",
-    "build": "nx build react-native",
+    "build": "nx build detox && nx build react-native",
     "test": "nx run-many --target=test --all --parallel",
     "lint": "nx workspace-lint && nx run-many --target=lint --all --parallel",
-    "e2e": "nx e2e react-native-e2e",
+    "e2e": "nx e2e react-native-e2e && nx e2e detox-e2e",
+    "detox-e2e": "nx e2e detox-e2e",
     "release": "./tools/scripts/publish.sh",
     "local-registry": "./tools/scripts/local-registry.sh",
     "affected:apps": "nx affected:apps",
@@ -26,7 +27,7 @@
     "update": "nx migrate latest",
     "dep-graph": "nx dep-graph",
     "help": "nx help",
-    "doctoc": "doctoc packages/react-native/README.md",
+    "doctoc": "doctoc packages/react-native/README.md && doctoc packages/detox/README.md",
     "workspace-generator": "nx workspace-generator"
   },
   "dependencies": {},

packages/detox/.eslintrc

@@ -0,0 +1 @@
+{ "extends": "../../.eslintrc", "rules": {}, "ignorePatterns": ["!**/*"] }

packages/detox/README.md

@@ -0,0 +1,78 @@
+# Detox Plugin for Nx
+
+[![License](https://img.shields.io/npm/l/@nrwl/workspace.svg?style=flat-square)]()
+[![NPM Version](https://badge.fury.io/js/%40nrwl%2Fdetox.svg)](https://www.npmjs.com/@nrwl/detox)
+[![Join the chat at https://gitter.im/nrwl-nx/community](https://badges.gitter.im/nrwl-nx/community.svg)](https://gitter.im/nrwl-nx/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![Join us @nrwl/community on slack](https://img.shields.io/badge/slack-%40nrwl%2Fcommunity-brightgreen)](https://join.slack.com/t/nrwlcommunity/shared_invite/enQtNzU5MTE4OTQwOTk0LTgxY2E0ZWYzMWE0YzA5ZDA2MWM1NDVhNmI2ZWMyYmZhNWJiODk3MjkxZjY3MzU5ZjRmM2NmNWU1OTgyZmE4Mzc)
+
+</div>
+
+## Table of Contents
+
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+
+- [Setup](#setup)
+  - [Install applesimutils (Mac only)](#install-applesimutils-mac-only)
+  - [Install Jest Globally](#install-jest-globally)
+  - [Commands](#commands)
+  - [Manually Add E2E Folder](#manually-add-e2e-folder)
+  - [Change Testing Simulator/Emulator](#change-testing-simulatoremulator)
+- [Learn more](#learn-more)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
+## Setup
+
+#### Install applesimutils (Mac only)
+
+[applesimutils](https://github.com/wix/AppleSimulatorUtils) is a collection of utils for Apple simulators.
+
+```sh
+brew tap wix/brew
+brew install applesimutils
+```
+
+#### Install Jest Globally
+
+```sh
+npm install -g jest
+```
+
+### Commands
+
+A built app must exist before run test commands.
+
+- `nx build-ios <app-name-e2e>`: build the iOS app (Mac only)
+- `nx test-ios <app-name-e2e>`: run e2e tests on the built iOS app (Mac only)
+- `nx build-ios <app-name-e2e> --prod` and `nx test-ios <app-name-e2e> --prod`: build and run release version of iOS app. Note: you might need open the xcode project under iOS and choose a team under "Sign & Capabilities".
+- `nx build-android <app-name-e2e>`: build the android app
+- `nx test-android <app-name-e2d>`: run e2e tests on the built android app
+- `nx build-android <app-name-e2e> --prod` and `nx test-android <app-name-e2e> --prod`: build and run release version of android app.
+
+### Manually Add E2E Folder
+
+A `<app-name-e2e>` folder is automatically generate when you create a react native app. However, if you want to add e2e folder manually, you need to:
+
+- Install @nrwl/detox
+
+  ```sh
+  # Using npm
+  npm install --save-dev @nrwl/detox
+
+  # Using yarn
+  yarn add -D @nrwl/detox
+  ```
+
+- Run `nx generate @nrwl/detox:app <app-name-e2e>`
+- Follow instructions https://github.com/wix/Detox/blob/master/docs/Introduction.Android.md to manully change android files.
+
+### Change Testing Simulator/Emulator
+
+For iOS, in terminal, run `xcrun simctl list` to view a list of simulators on your Mac. To open your active simulator, `run open -a simulator`. In `<app-name-e2e>/.detoxrc.json`, you could change the simulator under `devices.simulator.device`.
+
+For Android: in terminal, run `emulator -list-avds` to view a list of emulators installed. To open your emulator, run `emulator -avd <your emulator name>`. In `<app-name-e2e>/.detoxrc.json`, you could change the simulator under `devices.emulator.device`.
+
+## Learn more
+
+Visit the [Nx Documentation](https://nx.dev) to learn more.

packages/detox/builders.json

@@ -0,0 +1,14 @@
+{
+  "executors": {
+    "build": {
+      "implementation": "./src/executors/build/build.impl",
+      "schema": "./src/executors/build/schema.json",
+      "description": "Run the command defined in build property of the specified configuration."
+    },
+    "test": {
+      "implementation": "./src/executors/test/test.impl",
+      "schema": "./src/executors/test/schema.json",
+      "description": "Initiating your detox test suite."
+    }
+  }
+}

packages/detox/collection.json

@@ -0,0 +1,19 @@
+{
+  "name": "Nx Detox",
+  "version": "0.1",
+  "extends": ["@nrwl/workspace"],
+  "schematics": {
+    "init": {
+      "factory": "./src/generators/init/init#detoxInitGenerator",
+      "schema": "./src/generators/init/schema.json",
+      "description": "Initialize the @nrwl/detox plugin",
+      "hidden": true
+    },
+    "application": {
+      "factory": "./src/generators/application/application#detoxApplicationSchematic",
+      "schema": "./src/generators/application/schema.json",
+      "aliases": ["app"],
+      "description": "Create an application"
+    }
+  }
+}

packages/detox/index.ts

@@ -0,0 +1,2 @@
+export { detoxInitGenerator } from './src/generators/init/init';
+export { detoxApplicationGenerator } from './src/generators/application/application';

packages/detox/jest.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': 'ts-jest',
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'html', 'json'],
+  globals: {
+    'ts-jest': { tsconfig: '<rootDir>/tsconfig.spec.json' },
+  },
+  displayName: 'react-native',
+  testEnvironment: 'node',
+};

packages/detox/migrations.json

@@ -0,0 +1 @@
+{}