From 45df6bf9c83148c9bddfdc40cc9059b5cb22026c Mon Sep 17 00:00:00 2001 From: Enoah Netzach Date: Wed, 18 Jan 2017 14:31:10 +0100 Subject: [PATCH 1/7] Local testing with docker --- package.json | 1 + tasks/local-test.sh | 87 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 88 insertions(+) create mode 100755 tasks/local-test.sh diff --git a/package.json b/package.json index e6bd7b0c3cf..d5c7a6c8fbd 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "changelog": "lerna-changelog", "create-react-app": "tasks/cra.sh", "e2e": "tasks/e2e-simple.sh", + "e2e:docker": "tasks/local-test.sh", "postinstall": "lerna bootstrap && cd packages/react-error-overlay/ && npm run build:prod", "publish": "tasks/release.sh", "start": "node packages/react-scripts/scripts/start.js", diff --git a/tasks/local-test.sh b/tasks/local-test.sh new file mode 100755 index 00000000000..b516e69e554 --- /dev/null +++ b/tasks/local-test.sh @@ -0,0 +1,87 @@ +#!/usr/bin/env bash + +function print_help { + echo "Usage: ${0} [OPTIONS]" + echo "" + echo "OPTIONS:" + echo " --node-version the node version to use while testing [6]" + echo " --git-branch the git branch to checkout for testing [the current one]" + echo " --test-suite which test suite to use ('simple', installs', 'kitchensink', 'all') ['all']" + echo " --yarn if present, use yarn as the package manager" + echo " --help print this message and exit" + echo "" +} + +cd $(dirname $0) + +node_version=6 +git_branch=`git rev-parse --abbrev-ref HEAD` +use_yarn=no +test_suite=all + +while [ "$1" != "" ]; do + case $1 in + "--node-version") + shift + node_version=$1 + ;; + "--git-branch") + shift + git_branch=$1 + ;; + "--yarn") + use_yarn=yes + ;; + "--test-suite") + shift + test_suite=$1 + ;; + "--help") + print_help + exit 0 + ;; + esac + shift +done + +test_command="./tasks/e2e-simple.sh && ./tasks/e2e-kitchensink.sh && ./tasks/e2e-installs.sh" +case ${test_suite} in + "all") + ;; + "simple") + test_command="./tasks/e2e-simple.sh" + ;; + "kitchensink") + test_command="./tasks/e2e-kitchensink.sh" + ;; + "installs") + test_command="./tasks/e2e-installs.sh" + ;; + *) + ;; +esac + +read -r -d '' command <<- CMD +echo "prefix=~/.npm" > ~/.npmrc +mkdir ~/.npm +export PATH=\$PATH:~/.npm/bin +set -x +git clone /var/create-react-app create-react-app --branch ${git_branch} +cd create-react-app +node --version +npm --version +npm install +set +x +${test_command} && echo -e "\n\e[1;32m✔ Job passed\e[0m" || echo -e "\n\e[1;31m✘ Job failes\e[0m" +CMD + +docker run \ + --env CI=true \ + --env NPM_CONFIG_QUIET=true \ + --env USE_YARN=${use_yarn} \ + --tty \ + --user node \ + --volume ${PWD}/..:/var/create-react-app \ + --workdir /home/node \ + node:${node_version} \ + bash -c "${command}" From 33bca08d9b8efdc4112f248e095b47eba0743e18 Mon Sep 17 00:00:00 2001 From: Enoah Netzach Date: Wed, 31 May 2017 20:19:03 +0200 Subject: [PATCH 2/7] Docs on e2e testing --- CONTRIBUTING.md | 4 ++ .../fixtures/kitchensink/README.md | 54 +++++++++++++++++++ 2 files changed, 58 insertions(+) create mode 100644 packages/react-scripts/fixtures/kitchensink/README.md diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a4e3414be66..c2a9b906774 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -90,6 +90,10 @@ and then run `npm start` or `npm run build`. *Note: if you are using yarn, we suggest that you use `yarn install --no-lockfile` instead of the bare `yarn` or `yarn install` because we [intentionally](https://github.com/facebookincubator/create-react-app/pull/2014#issuecomment-300811661) do not ignore or add yarn.lock to our repo.* +## Contributing to E2E (end to end) tests + +All information are in the dedicated [README](/packages/react-scripts/fixtures/kitchensink/README.md). + ## Cutting a Release 1. Tag all merged pull requests that go into the release with the relevant milestone. Each merged PR should also be labeled with one of the [labels](https://github.com/facebookincubator/create-react-app/labels) named `tag: ...` to indicate what kind of change it is. diff --git a/packages/react-scripts/fixtures/kitchensink/README.md b/packages/react-scripts/fixtures/kitchensink/README.md new file mode 100644 index 00000000000..a1f0676b489 --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/README.md @@ -0,0 +1,54 @@ +# Contributing to Create React App's E2E tests + +This test suite is a [kitchensink](FIXME: link needed), but has multiple usages in it. + +## Running the test suite + +Tests are automatically run by the CI tools. +In order to run them locally, without having to manually install and configure everything, the `yarn e2e:docker` CLI command can be used. + +This is a simple script that runs a **Docker** container, where the node version, git branch to clone, test suite, and whether to run it with `yarn` or `npm` can be chosen. +Simply run `yarn e2e:docker -- --help` to get additional info. + +N.B.: this command will clone the local repository in the docker container, so any uncommitted changes are ignored. + +## Writing tests + +Each time a new feature is added, it is advised to add at least one test covering it. + +Features are categorized by their scope: + + - *env*, all those which deal with environment variables (e.g. `NODE_PATH`) + + - *syntax*, all those which showcase a single EcmaScript syntax feature that is expected to be transpiled by **Babel** + + - *webpack*, all those which make use of webpack settings, loaders or plugins + +### Using it as Unit Tests + +In it's most basic for this serve as a collection of unit tests on a single functionality. + +Unit tests are written in a `src/features/**/*.test.js` file located in the same folder as the feature they test, and usually consist of a simple `ReactDOM.render` call. + +These tests are run by **jest** and the environment is `test`, so that it resembles how a **Create React App** application is tested. + +### Using it as Integration Tests + +This suite tests how the single features as before behave while development and in production. +A local HTTP server is started, then every single feature is loaded, one by one, to be tested. + +Test are written in `integration/{env|syntax|webpack}.test.js`, depending on their scope. + +For every test case added there is just a little chore to do: + + - a `case` statement must be added in `src/App.js`, which simply perform a dynamic `import()` of the feature + + - add a test case in the appropriate integration test file, which calls and awaits `initDOM` with the previous `SwitchCase` string + +An usual flow for the test itself is something similar to: + + - add an `id` attribute in a target HTML tag in the feature itself + + - since `initDOM` returns a `Document` element, the previous `id` attribute is used to target the feature's DOM and `expect` accordingly + +These tests are run by **mocha** (why not **jest**? See [this issue](https://github.com/facebook/jest/issues/2288)) and the environments used are both `development` and `production`. From 09010d48b47ba1c52770baa07f773f6cbde031e9 Mon Sep 17 00:00:00 2001 From: Enoah Netzach Date: Wed, 31 May 2017 20:34:47 +0200 Subject: [PATCH 3/7] `bash` callback after docker --- tasks/local-test.sh | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/tasks/local-test.sh b/tasks/local-test.sh index b516e69e554..116aa0cf71a 100755 --- a/tasks/local-test.sh +++ b/tasks/local-test.sh @@ -8,6 +8,7 @@ function print_help { echo " --git-branch the git branch to checkout for testing [the current one]" echo " --test-suite which test suite to use ('simple', installs', 'kitchensink', 'all') ['all']" echo " --yarn if present, use yarn as the package manager" + echo " --interactive gain a bash shell after the test run" echo " --help print this message and exit" echo "" } @@ -18,6 +19,7 @@ node_version=6 git_branch=`git rev-parse --abbrev-ref HEAD` use_yarn=no test_suite=all +interactive=false while [ "$1" != "" ]; do case $1 in @@ -36,6 +38,9 @@ while [ "$1" != "" ]; do shift test_suite=$1 ;; + "--interactive") + interactive=true + ;; "--help") print_help exit 0 @@ -73,6 +78,7 @@ npm --version npm install set +x ${test_command} && echo -e "\n\e[1;32m✔ Job passed\e[0m" || echo -e "\n\e[1;31m✘ Job failes\e[0m" +$([[ ${interactive} == 'true' ]] && echo 'bash') CMD docker run \ @@ -83,5 +89,6 @@ docker run \ --user node \ --volume ${PWD}/..:/var/create-react-app \ --workdir /home/node \ + $([[ ${interactive} == 'true' ]] && echo '--interactive') \ node:${node_version} \ bash -c "${command}" From d4e0baa4c71a3a5d9b542ad9b5890cbf2a5ba172 Mon Sep 17 00:00:00 2001 From: Enoah Netzach Date: Thu, 1 Jun 2017 10:32:20 +0200 Subject: [PATCH 4/7] Add a TL;DR in the CONTRIBUTING section --- CONTRIBUTING.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c2a9b906774..1c93e310da3 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -92,7 +92,9 @@ and then run `npm start` or `npm run build`. ## Contributing to E2E (end to end) tests -All information are in the dedicated [README](/packages/react-scripts/fixtures/kitchensink/README.md). +**TL;DR** use the command yarn e2e:docker to run unit and e2e tests. + +More detailed information are in the dedicated [README](/packages/react-scripts/fixtures/kitchensink/README.md). ## Cutting a Release From 69f16116123fc087268d17efbe7d8c113a1084e4 Mon Sep 17 00:00:00 2001 From: Enoah Netzach Date: Thu, 1 Jun 2017 11:19:53 +0200 Subject: [PATCH 5/7] Local e2e testing with modified files --- tasks/local-test.sh | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/tasks/local-test.sh b/tasks/local-test.sh index 116aa0cf71a..42d98ffcdcf 100755 --- a/tasks/local-test.sh +++ b/tasks/local-test.sh @@ -16,7 +16,8 @@ function print_help { cd $(dirname $0) node_version=6 -git_branch=`git rev-parse --abbrev-ref HEAD` +current_git_branch=`git rev-parse --abbrev-ref HEAD` +git_branch=${current_git_branch} use_yarn=no test_suite=all interactive=false @@ -66,6 +67,24 @@ case ${test_suite} in ;; esac +read -r -d '' apply_changes <<- CMD +cd /var/create-react-app +git config --global user.name "Create React App" +git config --global user.email "cra@email.com" +git stash save -u +git stash show -p > patch +git diff 4b825dc642cb6eb9a060e54bf8d69288fbee4904 stash^3 >> patch +git stash pop +cd - +mv /var/create-react-app/patch . +git apply patch +rm patch +CMD + +if [ ${git_branch} != ${current_git_branch} ]; then + apply_changes='' +fi + read -r -d '' command <<- CMD echo "prefix=~/.npm" > ~/.npmrc mkdir ~/.npm @@ -73,9 +92,9 @@ export PATH=\$PATH:~/.npm/bin set -x git clone /var/create-react-app create-react-app --branch ${git_branch} cd create-react-app +${apply_changes} node --version npm --version -npm install set +x ${test_command} && echo -e "\n\e[1;32m✔ Job passed\e[0m" || echo -e "\n\e[1;31m✘ Job failes\e[0m" $([[ ${interactive} == 'true' ]] && echo 'bash') From 63327c92885142c804f153e8b686d869cdce839d Mon Sep 17 00:00:00 2001 From: Fabrizio Castellarin Date: Thu, 1 Jun 2017 22:13:28 +0200 Subject: [PATCH 6/7] Remove the N.B. from the README --- packages/react-scripts/fixtures/kitchensink/README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react-scripts/fixtures/kitchensink/README.md b/packages/react-scripts/fixtures/kitchensink/README.md index a1f0676b489..174046b3a05 100644 --- a/packages/react-scripts/fixtures/kitchensink/README.md +++ b/packages/react-scripts/fixtures/kitchensink/README.md @@ -10,8 +10,6 @@ In order to run them locally, without having to manually install and configure e This is a simple script that runs a **Docker** container, where the node version, git branch to clone, test suite, and whether to run it with `yarn` or `npm` can be chosen. Simply run `yarn e2e:docker -- --help` to get additional info. -N.B.: this command will clone the local repository in the docker container, so any uncommitted changes are ignored. - ## Writing tests Each time a new feature is added, it is advised to add at least one test covering it. From ef0eabcead126239d1a238318f6240543ebd5775 Mon Sep 17 00:00:00 2001 From: Fabrizio Castellarin Date: Sat, 3 Jun 2017 02:01:09 +0200 Subject: [PATCH 7/7] Fixed a fixme in e2e doc --- packages/react-scripts/fixtures/kitchensink/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/fixtures/kitchensink/README.md b/packages/react-scripts/fixtures/kitchensink/README.md index 174046b3a05..8d259d56e94 100644 --- a/packages/react-scripts/fixtures/kitchensink/README.md +++ b/packages/react-scripts/fixtures/kitchensink/README.md @@ -1,6 +1,6 @@ # Contributing to Create React App's E2E tests -This test suite is a [kitchensink](FIXME: link needed), but has multiple usages in it. +This is an end to end kitchensink test suite, but has multiple usages in it. ## Running the test suite