test(vrt): resolve race-condition with e2e tests (uber#2129)

.buildkite/pipeline.yml

@@ -107,12 +107,14 @@ steps:
       queue: builders
   - name: 'Visual regression tests'
     command: yarn vrt:ci
+    env:
+      - PORT: 8081
     plugins:
       'docker-compose#v3.0.3':
         run: e2e-test
         pull:
-          - e2e-server
-          - e2e-server-healthy
+          - vrt-server
+          - vrt-server-healthy
     agents:
       queue: builders
     artifact_paths:

docker-compose.yml

@@ -20,6 +20,25 @@ services:
       timeout: 10s
       retries: 5
 
+  vrt-server:
+    command: yarn vrt:serve
+    build:
+      dockerfile: e2e.Dockerfile
+      context: .
+    expose:
+      - 8081
+    ports:
+      - '8081:8081'
+    healthcheck:
+      test:
+        [
+          'CMD-SHELL',
+          'curl -H "Accept: text/html" -f http://localhost:8081 || exit 1',
+        ]
+      interval: 5s
+      timeout: 10s
+      retries: 5
+
   # tests if the e2e-server is ready to serve traffic
   e2e-server-healthy:
     build: .
@@ -28,6 +47,13 @@ services:
       e2e-server:
         condition: service_healthy
 
+  vrt-server-healthy:
+    build: .
+    network_mode: 'host'
+    depends_on:
+      vrt-server:
+        condition: service_healthy
+
   # running the e2e tests in ci
   e2e-test:
     build: .
@@ -37,6 +63,7 @@ services:
     network_mode: 'host'
     depends_on:
       - e2e-server-healthy
+      - vrt-server-healthy
     environment:
       - CODECOV_TOKEN
       - CI=true

jest-puppeteer.config.js

@@ -21,7 +21,9 @@ module.exports = {
   },
   browserContext: 'default',
   tests: {
-    url: process.env.PUPPETEER_TARGET_URL || 'http://localhost:8080',
+    url:
+      process.env.PUPPETEER_TARGET_URL ||
+      `http://localhost:${process.env.PORT || '8080'}`,
   },
   exitOnPageError: false,
 };

package.json

@@ -45,6 +45,7 @@
     "vrt:docker:run": "docker-compose run e2e-test bash -c 'yarn add puppeteer && yarn vrt'",
     "vrt:docker:update": "docker-compose run e2e-test bash -c 'yarn add puppeteer && yarn vrt -u'",
     "vrt:ci": "node ./vrt/ci.js",
+    "vrt:serve": "static-server e2e/dist --port 8081",
     "icon:generate": "node ./src/icon/build-icons.js",
     "thumbs:generate": "svgr --template ./documentation-site/components/thumbs/template.js --replace-attr-values \"#F6F6F6={props.colors[0]}\" --replace-attr-values \"#E2E2E2={props.colors[1]}\" --replace-attr-values \"#CBCBCB={props.colors[2]}\" -d ./documentation-site/components/thumbs/components ./documentation-site/components/thumbs/svg",
     "install": "node -e \"console.log('If you are using Webpack, please make sure to update to version ^4.32.0, as this Base Web version depends on a webpack fix delivered in that version. If you are using Fusion.js make sure to upgrade fusion-cli to ^2.4.2 as it has the Webpack upgrade.')\"",