test: add End-2-End test suite (#4035)

.circleci/config.yml

@@ -68,10 +68,25 @@ jobs:
           name: Unit tests
           command: yarn run test --maxWorkers=4
 
+  test_e2e:
+    <<: *defaults
+    steps:
+      - checkout
+      - run: *install_yarn_version
+      - restore_cache: *restore_yarn_cache
+      - run: *run_yarn_install
+      - save_cache: *save_yarn_cache
+      - run:
+          name: End-2-End tests
+          command: |
+            yarn run website:build
+            yarn run test:e2e:saucelabs
+
 workflows:
   version: 2
   ci:
     jobs:
       - test_build
       - test_unit
       - test_lint
+      - test_e2e

.gitignore

@@ -3,6 +3,7 @@ node_modules/
 npm-debug.log
 yarn-error.log
 .DS_Store
+.env
 
 # Bundle build files
 /dist

examples/calendar-widget/package.json

@@ -3,6 +3,6 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "build": "rm -rf ./dist/ ./dist/ && rsync -r . ./dist/ && rsync -r ../../dist/ ./dist/"
+    "build": "rm -rf ./dist/ && mkdir dist && cp -r `ls -A | grep -v 'dist'` ./dist/ && cp ../../dist/* ./dist/"
   }
 }

examples/media/package.json

@@ -3,6 +3,6 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "build": "rm -rf ./dist/ ./dist/ && rsync -r . ./dist/ && rsync -r ../../dist/ ./dist/"
+    "build": "rm -rf ./dist/ && mkdir dist && cp -r `ls -A | grep -v 'dist'` ./dist/ && cp ../../dist/* ./dist/"
   }
 }

examples/tourism/package.json

@@ -3,6 +3,6 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "build": "rm -rf ./dist/ ./dist/ && rsync -r . ./dist/ && rsync -r ../../dist/ ./dist/"
+    "build": "rm -rf ./dist/ && mkdir dist && cp -r `ls -A | grep -v 'dist'` ./dist/ && cp ../../dist/* ./dist/"
   }
 }

netlify.toml

@@ -1,5 +1,5 @@
 [build]
-  command="yarn run website:build"
+  command="yarn run storybook:build && yarn run website:build"
   publish="website"
 
 [build.environment]

package.json

@@ -28,13 +28,16 @@
     "doctoc": "doctoc --no-title --maxlevel 3 README.md CONTRIBUTING.md",
     "storybook": "start-storybook --quiet --port 6006 --ci --static-dir .storybook/static",
     "storybook:build": "build-storybook --quiet --output-dir website/stories --static-dir .storybook/static",
-    "website:build": "yarn build && yarn run storybook:build && ./scripts/website/build-examples.sh",
+    "website:build": "yarn build && ./scripts/website/build-examples.sh",
     "lint": "eslint --ext .js,.ts,.tsx .",
     "lint:fix": "eslint --ext .js,.ts,.tsx --fix .",
     "type-check": "tsc",
     "type-check:watch": "yarn type-check --watch",
     "test": "jest",
     "test:watch": "jest --watch --bail",
+    "test:e2e": "yarn test:e2e:local",
+    "test:e2e:local": "wdio wdio.local.conf.js",
+    "test:e2e:saucelabs": "wdio wdio.saucelabs.conf.js",
     "test:size": "bundlesize",
     "test:argos": "argos upload functional-tests/screenshots --token $ARGOS_TOKEN || true",
     "release": "./scripts/release/publish.js",
@@ -80,6 +83,13 @@
     "@types/storybook__addon-actions": "^3.4.2",
     "@typescript-eslint/eslint-plugin": "1.13.0",
     "@typescript-eslint/parser": "1.13.0",
+    "@wdio/cli": "5.12.5",
+    "@wdio/jasmine-framework": "5.12.1",
+    "@wdio/local-runner": "5.12.5",
+    "@wdio/sauce-service": "5.12.5",
+    "@wdio/selenium-standalone-service": "5.12.1",
+    "@wdio/spec-reporter": "5.12.1",
+    "@wdio/static-server-service": "5.12.1",
     "algoliasearch": "3.33.0",
     "babel-eslint": "10.0.2",
     "babel-jest": "24.9.0",
@@ -106,6 +116,7 @@
     "eslint-plugin-prettier": "3.1.0",
     "eslint-plugin-react": "7.14.3",
     "inquirer": "6.5.2",
+    "instantsearch-e2e-tests": "algolia/instantsearch-e2e-tests#v1.2.0",
     "jest": "24.9.0",
     "jest-diff": "24.9.0",
     "jest-environment-jsdom": "24.9.0",

scripts/website/build-examples.sh

@@ -12,6 +12,6 @@ for example in examples/*; do
     name=$(basename "$example")
     echo "Building $name example..."
 
-    (cd "$example" && yarn && yarn build && rsync -r "dist/" "../../website/examples/$name/")
+    (cd "$example" && yarn && yarn build && cp -r "dist/" "../../website/examples/$name/")
   fi
 done

wdio.local.conf.js

@@ -0,0 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
+const { local } = require('instantsearch-e2e-tests');
+
+exports.config = local;

wdio.saucelabs.conf.js

@@ -0,0 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
+const { saucelabs } = require('instantsearch-e2e-tests');
+
+exports.config = saucelabs;