diff --git a/.eslintignore b/.eslintignore index 35fff82ce771c..771c6bce35da5 100644 --- a/.eslintignore +++ b/.eslintignore @@ -5,3 +5,4 @@ node_modules test/e2e/test-plugins vendor packages/block-serialization-spec-parser/index.js +gutenberg-mobile diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000000000..c70c9c4d7133e --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "gutenberg-mobile"] + path = gutenberg-mobile + url = ../../wordpress-mobile/gutenberg-mobile diff --git a/.stylelintignore b/.stylelintignore new file mode 100644 index 0000000000000..e6c31cdc0d8e3 --- /dev/null +++ b/.stylelintignore @@ -0,0 +1 @@ +gutenberg-mobile diff --git a/.travis.yml b/.travis.yml index 51ae7a8eaa9e0..9f6b5795d8371 100644 --- a/.travis.yml +++ b/.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 diff --git a/docs/reference/testing-overview.md b/docs/reference/testing-overview.md index fcfc951cfd90f..306f2961e798e 100644 --- a/docs/reference/testing-overview.md +++ b/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 diff --git a/gutenberg-mobile b/gutenberg-mobile new file mode 160000 index 0000000000000..e6d6ed9120ec4 --- /dev/null +++ b/gutenberg-mobile @@ -0,0 +1 @@ +Subproject commit e6d6ed9120ec41ba3ca536a66e2ff669e2c07265 diff --git a/package-lock.json b/package-lock.json index b325cc394e67d..388c7fd19cc40 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21305,6 +21305,12 @@ "camelcase": "^4.1.0" } }, + "yarn": { + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/yarn/-/yarn-1.9.4.tgz", + "integrity": "sha1-O4LYRGtlJ3VyOQC0cNlmhhl2kks=", + "dev": true + }, "yauzl": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.4.1.tgz", diff --git a/package.json b/package.json index 1e65d03a2d1ef..e94c2047f765d 100644 --- a/package.json +++ b/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", diff --git a/test/e2e/jest.config.json b/test/e2e/jest.config.json index 354879e3d358a..21c7aecb7809c 100644 --- a/test/e2e/jest.config.json +++ b/test/e2e/jest.config.json @@ -1,5 +1,9 @@ { "rootDir": "../../", + "coveragePathIgnorePatterns": [ + "/node_modules/", + "/gutenberg-mobile/" + ], "preset": "jest-puppeteer", "setupTestFrameworkScriptFile": "/test/e2e/support/setup-test-framework.js", "testMatch": [ @@ -7,5 +11,8 @@ ], "transform": { "^.+\\.jsx?$": "/node_modules/babel-jest" - } + }, + "modulePathIgnorePatterns": [ + "/gutenberg-mobile/" + ] } diff --git a/test/unit/jest.config.json b/test/unit/jest.config.json index fec5aad1e2bc8..92003b1382709 100644 --- a/test/unit/jest.config.json +++ b/test/unit/jest.config.json @@ -9,7 +9,8 @@ "/.*/build/", "/.*/build-module/", "/packages/.*/benchmark/", - "/packages/.*/test/" + "/packages/.*/test/", + "/gutenberg-mobile/" ], "moduleNameMapper": { "@wordpress\\/(components|edit-post|block-library)$": "$1", @@ -25,5 +26,8 @@ "/test/e2e", "/.*/build/", "/.*/build-module/" + ], + "modulePathIgnorePatterns": [ + "/gutenberg-mobile/" ] }