Integrate the mobile React Native testsuite with the main Gutenberg b…

…uild (WordPress#9883)

* Install Yarn as part of the local setup

* Add scripts to run the mobile testsuite

The mobile code is assumed to be in the `gutenberg-mobile` subfolder.

* Add the native mobile app repo as a submodule

* Run the mobile testsuite as Travis jobs

* Ignore mobile subfolder when linting

The mobile project has its own lint rules and until the two projects can
work off the same rules the main Gutenberg project needs to ignore it.

* Ignore the mobile subfolder to run Jest tests

The mobile project still has Gutenberg as its own git submodule and so,
many packages can be found in two places. Jest tests need to ignore the
occurance of this second gutenberg sourcetree instance.

* yarn install shouldn't be ran as part of the test script

Instead, run `yarn install` earlier or in the same manner as `npm install`.

* Run the mobile testsuite as part of the `test` script

* yarn install inside mobile when in Travis

* Ignore the mobile subfolder to run e2e Jest tests

* Add some use and debugging instructions for mobile tests

* Fix typo

* Yarn as a dev dep and auto fetch and install mobile code

* Yarn is installed locally as a development dependency
* The mobile submodule is updated in preinstall
* The mobile packages are installed in preinstall as well
* Yarn is executed by providing the working (sub)directory as a
parameter
* No need to install yarn globally in Travis

* No need for npx. yarn is available to npm in scripts

* No need for npx in postinstall either

* Fix copy&paster error. Only update submodule in preinstall

* Run the mobile tests in parallel for the `test` script

* Add the mobile submodule to coverage ignore patterns

.eslintignore

@@ -5,3 +5,4 @@ node_modules
 test/e2e/test-plugins
 vendor
 packages/block-serialization-spec-parser/index.js
+gutenberg-mobile

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "gutenberg-mobile"]
+	path = gutenberg-mobile
+	url = ../../wordpress-mobile/gutenberg-mobile

.stylelintignore

@@ -0,0 +1 @@
+gutenberg-mobile

.travis.yml

@@ -69,3 +69,41 @@ jobs:
       script:
         - npm install || exit 1
         - ./bin/run-e2e-tests.sh || exit 1
+    - stage: test
+      language: node_js
+      node_js: 8
+      env:
+        LANE='node'
+        CHECK_CORRECTNESS='true'
+      cache:
+        yarn: true
+      script:
+        - cd ./gutenberg-mobile
+        - yarn install
+        - ./.travis/travis-checks-js.sh
+    - stage: test
+      language: node_js
+      node_js: 8
+      env:
+        LANE='node'
+        CHECK_TESTS='true'
+        TEST_RN_PLATFORM='android'
+      cache:
+        yarn: true
+      script:
+        - cd ./gutenberg-mobile
+        - yarn install
+        - ./.travis/travis-checks-js.sh
+    - stage: test
+      language: node_js
+      node_js: 8
+      env:
+        LANE='node'
+        CHECK_TESTS='true'
+        TEST_RN_PLATFORM='ios'
+      cache:
+        yarn: true
+      script:
+        - cd ./gutenberg-mobile
+        - yarn install
+        - ./.travis/travis-checks-js.sh

docs/reference/testing-overview.md

@@ -379,5 +379,30 @@ Code style in PHP is enforced using [PHP_CodeSniffer](https://github.com/squizla
 
 To run unit tests only, without the linter, use `npm run test-unit-php` instead.
 
+## Native Mobile Testing
+
+To enable automated testing against the native mobile app currently in development, the whole of the mobile source code is pulled in as a git submodule. Its testsuite is included in the Travis tests run but it can also be used locally, during development.
+
+To test locally, along with the typical Gutenberg setup and testing instructions already mentioned earlier, make sure you check out the code of the submodule:
+```
+git submodule --init --recursive
+```
+You can then use the available script to launch the mobile testsuite in isolation:
+```
+npm run test-mobile
+```
+
+or the typical `npm run test` to run all the lint, unit and mobile tests in one go.
+
+The mobile tests pick up the compiled Gutenberg code/packages and so, don't forget to run `npm install` (while at the Gutenberg root) after you've made changes to the code.
+
+### Debugging native mobile
+
+Say you have made some changes to Gutenberg's code and turns out the mobile tests get broken. What's the path forward? Hopefully, the Jest tests output will have an error message and stacktrace that is indicative enough and helps point where the error happens and what went wrong. Oftenly, what happens is that the code being shared between the web and the mobile project is no longer compatible.
+
+For example, changing an intermmediate interface can inadvertently bring the `file.js` and `file.native.js` pair out of sync. You'll then need to update the `.native.js` file to adhere to the new interface or iterate on the interface itself. Feel free to reach out to mobile devs for help if needed.
+
+In other usual cases, you might directly employ HTML elements in a `render()` function but those are not actually offered by React Native, the UI framework the native mobile is build on. Those elements are usually starting with a lower-case character like `div` or `span`. In any case that code is incompatible or doesn't make sense for mobile, what needs to be done is to wrap that code in a new component and provide a "nativized" variant of it to be loaded when on native mobile instead. To "nativize" a component just create a new `.native.js` file right alongside the web version one and in it return/run the code that is compatible with mobile. The proper variant will be picked up by the toolchain automatically.
+
 [snapshot testing]: https://facebook.github.io/jest/docs/en/snapshot-testing.html
 [update snapshots]: https://facebook.github.io/jest/docs/en/snapshot-testing.html#updating-snapshots

package.json

@@ -121,7 +121,8 @@
 		"webpack": "4.8.3",
 		"webpack-cli": "2.1.3",
 		"webpack-livereload-plugin": "2.1.1",
-		"webpack-rtl-plugin": "github:yoavf/webpack-rtl-plugin#develop"
+		"webpack-rtl-plugin": "github:yoavf/webpack-rtl-plugin#develop",
+		"yarn": "1.9.4"
 	},
 	"npmPackageJsonLintConfig": {
 		"extends": "@wordpress/npm-package-json-lint-config",
@@ -175,16 +176,20 @@
 		"lint-css": "stylelint '**/*.scss'",
 		"lint-css:fix": "stylelint '**/*.scss' --fix",
 		"package-plugin": "./bin/build-plugin-zip.sh",
-		"postinstall": "npm run check-licenses && npm run build:packages",
+		"mobile-submodule-update": "git submodule update --init --recursive",
+		"mobile-install": "yarn --cwd gutenberg-mobile install",
+		"preinstall": "npm run mobile-submodule-update",
+		"postinstall": " npm run mobile-install && npm run check-licenses && npm run build:packages",
 		"pot-to-php": "./bin/pot-to-php.js",
 		"precommit": "lint-staged",
 		"publish:check": "npm run build:packages && lerna updated",
 		"publish:dev": "npm run build:packages && lerna publish --npm-tag next",
 		"publish:prod": "npm run build:packages && lerna publish",
-		"test": "npm run lint && npm run test-unit",
+		"test": "concurrently \"npm run lint && npm run test-unit\" \"npm run test-mobile\"",
 		"pretest-e2e": "concurrently \"./bin/reset-e2e-tests.sh\" \"npm run build\"",
 		"test-e2e": "cross-env JEST_PUPPETEER_CONFIG=test/e2e/puppeteer.config.js wp-scripts test-unit-js --config test/e2e/jest.config.json --runInBand",
 		"test-e2e:watch": "npm run test-e2e -- --watch",
+		"test-mobile": "yarn --cwd gutenberg-mobile test:inside-gb",
 		"test-php": "npm run lint-php && npm run test-unit-php",
 		"test-unit": "wp-scripts test-unit-js --config test/unit/jest.config.json",
 		"test-unit:coverage": "npm run test-unit -- --coverage",

test/e2e/jest.config.json

@@ -1,11 +1,18 @@
 {
 	"rootDir": "../../",
+	"coveragePathIgnorePatterns": [
+		"/node_modules/",
+		"<rootDir>/gutenberg-mobile/"
+	],
 	"preset": "jest-puppeteer",
 	"setupTestFrameworkScriptFile": "<rootDir>/test/e2e/support/setup-test-framework.js",
 	"testMatch": [
 		"<rootDir>/test/e2e/specs/**/(*.)test.js"
 	],
 	"transform": {
 		"^.+\\.jsx?$": "<rootDir>/node_modules/babel-jest"
-	}
+	},
+	"modulePathIgnorePatterns": [
+		"<rootDir>/gutenberg-mobile/"
+	]
 }

test/unit/jest.config.json

@@ -9,7 +9,8 @@
 		"<rootDir>/.*/build/",
 		"<rootDir>/.*/build-module/",
 		"<rootDir>/packages/.*/benchmark/",
-		"<rootDir>/packages/.*/test/"
+		"<rootDir>/packages/.*/test/",
+		"<rootDir>/gutenberg-mobile/"
 	],
 	"moduleNameMapper": {
 		"@wordpress\\/(components|edit-post|block-library)$": "$1",
@@ -26,5 +27,8 @@
 		"/test/e2e",
 		"<rootDir>/.*/build/",
 		"<rootDir>/.*/build-module/"
+	],
+	"modulePathIgnorePatterns": [
+		"<rootDir>/gutenberg-mobile/"
 	]
 }