Add E2E tests on CircleCI with SauceLabs

.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

e2e/test.js

@@ -6,9 +6,7 @@ describe('InstantSearch e-commerce demo', () => {
   });
 
   it('must work', async () => {
-    await browser.url(
-      'https://deploy-preview-3967--instantsearchjs.netlify.com/examples/e-commerce/'
-    );
+    await browser.url('http://localhost:5000/examples/e-commerce/');
 
     // Select "Apple" brand in list
     const brand = await browser.$('span=Apple');

examples/calendar-widget/package.json

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

examples/media/package.json

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

examples/tourism/package.json

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

package.json

@@ -90,6 +90,7 @@
     "@wdio/crossbrowsertesting-service": "5.11.4",
     "@wdio/local-runner": "5.11.7",
     "@wdio/mocha-framework": "5.11.0",
+    "@wdio/sauce-service": "5.11.1",
     "@wdio/spec-reporter": "5.11.7",
     "algoliasearch": "3.33.0",
     "babel-eslint": "10.0.2",
@@ -139,6 +140,7 @@
     "rollup-plugin-uglify": "6.0.2",
     "scriptjs": "2.5.9",
     "semver": "6.3.0",
+    "serve-handler": "6.1.0",
     "shelljs": "0.8.3",
     "typescript": "3.5.3",
     "webpack": "4.38.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.saucelabs.config.js

@@ -1,10 +1,16 @@
-/* eslint-disable import/no-commonjs */
+/* eslint-disable import/no-commonjs, no-console */
+const handler = require('serve-handler');
+const http = require('http');
 
 const config = {
-  hostname: 'ondemand.eu-central-1.saucelabs.com',
-  port: 443,
-  user: process.env.SAUCELABS_USER,
-  key: process.env.SAUCELABS_KEY,
+  user: process.env.SAUCE_USERNAME,
+  key: process.env.SAUCE_ACCESS_KEY,
+  services: ['sauce'],
+  region: 'eu',
+  sauceConnect: true,
+  sauceConnectOpts: {
+    x: 'https://eu-central-1.saucelabs.com/rest/v1',
+  },
 
   specs: ['./e2e/test.js'],
   maxInstances: 10,
@@ -19,6 +25,8 @@ const config = {
       platform: 'Windows 10',
       version: '75.0',
       screenResolution: '1680x1050',
+      extendedDebugging: true,
+      capturePerformance: true,
     },
     {
       browserName: 'firefox',
@@ -48,6 +56,16 @@ const config = {
     ui: 'bdd',
     timeout: 60000,
   },
+
+  onPrepare() {
+    http
+      .createServer((request, response) =>
+        handler(request, response, { public: 'website' })
+      )
+      .listen(5000, () => {
+        console.log('Running at http://localhost:5000');
+      });
+  },
 };
 
 // Map common capabilities to capabilities