testcafe acceptance test: concurrency and browser update (#1481)

Update testcafe concurrency and browser type when running acceptance test

- update testcafe command to use a config file, including `--app` or `appCommand` option to start server instead of starting/shutting down server per fixture
- update run_browserstack_acceptance script to spin up 2 browserstack instances of ie11 only on dev branch. Will only test safari as well when run on master and release branches. Chrome and firefox is tested in headless acceptance test with concurrency of 3.
- overall time is reduced by half (~4mins) with 2 instances of ie11.

J=SLAP-1426
TEST=auto

- ran acceptance tests from circleCI workflow multiple times. See that number of instance of the expected browser type is setup in browserStack. See that the time, for the most part, is reduced by ~4 mins.
- tested script locally: change the CIRCLE_BRANCH var to different branch names and see what command line is called
- tested script through circleCI from pr: made a push to pr with a hardcoded CIRCLE_BRANCH value (hotfix/test-something) and see that it spin up 2 ie11 instance in browserstack. made a push without hardcoded value (which will take this pr name dev/testcafe-browsers) and see that 1 instance of ie11 and safari is up in browserstack.

.circleci/config.yml

@@ -91,7 +91,7 @@ jobs:
       - setup-workspace
       - attach_workspace:
           at: ~/answers
-      - run: npx testcafe chrome:headless,firefox:headless tests/acceptance/acceptancesuites/*.js -q
+      - run: ./.circleci/run_headless_acceptance.sh
   # run the browserstack testcafe acceptance tests
   browserstack_acceptance_test:
     docker:

.circleci/run_browserstack_acceptance.sh

@@ -5,4 +5,12 @@ export BROWSERSTACK_BUILD_ID="${CIRCLE_BRANCH} - ${CIRCLE_BUILD_NUM}"
 COMMIT_MSG_TITLE=$(git log -n 1 --pretty=format:%s)
 export BROWSERSTACK_TEST_RUN_NAME=$COMMIT_MSG_TITLE
 
-npx testcafe "browserstack:ie@11.0,browserstack:safari" tests/acceptance/acceptancesuites/*.js -q
+if [[ $CIRCLE_BRANCH == release/*
+  || $CIRCLE_BRANCH == hotfix/*
+  || $CIRCLE_BRANCH == master
+  || $CIRCLE_BRANCH == support* ]]
+then
+  npx testcafe "browserstack:ie@11.0,browserstack:safari" --config-file ./.circleci/testcafe.json
+else
+  npx testcafe -c 2 "browserstack:ie@11.0" --config-file ./.circleci/testcafe.json
+fi

.circleci/run_headless_acceptance.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+
+if [[ $CIRCLE_BRANCH == release/*
+  || $CIRCLE_BRANCH == hotfix/*
+  || $CIRCLE_BRANCH == master
+  || $CIRCLE_BRANCH == support* ]]
+then
+  npx testcafe -c 3 "chrome:headless,firefox:headless" --config-file ./.circleci/testcafe.json
+else
+  npx testcafe -c 3 "chrome:headless" --config-file ./.circleci/testcafe.json
+fi

.circleci/testcafe.json

@@ -0,0 +1,6 @@
+{
+  "src": "tests/acceptance/acceptancesuites/*.js",
+  "quarantineMode": true,
+  "appCommand": "npx serve -l tcp://0.0.0.0:9999",
+  "appInitDelay": 4000
+}

package.json

@@ -112,7 +112,7 @@
     "docs": "jsdoc -R README.md -d docs/ -r src/",
     "lint": "eslint .",
     "test": "eslint . && stylelint src/**/*.scss && jest",
-    "acceptance": "testcafe safari,chrome tests/acceptance/acceptancesuites/*.js",
+    "acceptance": "testcafe safari,chrome --config-file ./.circleci/testcafe.json",
     "size": "size-limit",
     "fix": "eslint . --fix",
     "extract-translations": "gulp extractTranslations",