Merge pull request #777 from yext/feature/test-infra-fixes

use express instead of serve-handler for snapshots (#766)
remove + signs from percy snapshot query params (#765)
fix test-site's mock date (#764)
fix acceptance tests false positives (#778)
update acceptance test workflow name (#779)

J=SLAP-1313

.github/run_browserstack_acceptance.sh

@@ -6,4 +6,4 @@ export BROWSERSTACK_BUILD_ID="${GITHUB_BRANCH} - ${GITHUB_RUN_ID}"
 COMMIT_MSG_TITLE=$(git log -n 1 --pretty=format:%s)
 export BROWSERSTACK_TEST_RUN_NAME=$COMMIT_MSG_TITLE
 
-npm run acceptance -- --browsers browserstack:ie@11.0 browserstack:safari
+npm run acceptance -- --browsers browserstack:ie@11.0 browserstack:safari browserstack:firefox

.github/workflows/acceptance.yml

@@ -1,4 +1,4 @@
-name: BrowserStack Acceptance Tests
+name: Acceptance Tests
 
 on: push
 
@@ -31,4 +31,4 @@ jobs:
       - run: npm run setup-test-site
       - run: npm run build-test-site
       - name: Run Acceptance Tests
-        run: npm run acceptance -- --browsers chrome:headless firefox:headless
+        run: npm run acceptance -- --browsers chrome:headless

package.json

@@ -26,6 +26,7 @@
     "babel-jest": "^25.5.1",
     "comment-json": "^4.1.0",
     "cross-env": "^7.0.2",
+    "express": "^4.17.1",
     "file-system": "^2.2.2",
     "full-icu": "^1.3.1",
     "handlebars": "^4.7.6",
@@ -40,7 +41,7 @@
     "testcafe-browser-provider-browserstack": "^1.13.1",
     "underscore.string": "^3.3.5",
     "urijs": "1.18.12",
-    "yargs": "^17.0"
+    "yargs": "^17.0.1"
   },
   "jest": {
     "collectCoverageFrom": [

test-site/static/js/formatters-custom.js

@@ -1,6 +1,5 @@
-const mockedDate = new Date('December 25, 2020 12:42:00');
 global.Date = class extends Date {
-  constructor(date) {
-    return date ? super(date) : mockedDate;
+  constructor(date = 'December 25, 2020 12:42:00 GMT-0500') {
+    super(date);
   }
 };

tests/acceptance/index.js

@@ -23,11 +23,14 @@ runTests(argv.browsers);
 async function runTests (browsers) {
   const testcafe = await createTestCafe();
   try {
-    await testcafe.createRunner()
+    const numberTestsFailed = await testcafe.createRunner()
       .src('tests/acceptance/suites/*.js')
       .browsers(browsers)
       .startApp(`npx serve -p ${PORT} test-site/public`, 4000)
       .run({ quarantineMode: true });
+    if (numberTestsFailed > 0) {
+      process.exit(1);
+    }
   }
   finally {
     await testcafe.close();

tests/percy/iframepagenavigator.js

@@ -19,14 +19,14 @@ class IframePageNavigator extends PageNavigator {
 
   async gotoUniversalPage(queryParams = {}) {
     const queryParamsString = getQueryParamsString(queryParams);
-    const url = `${this._siteUrl}/${this._iframePage}?${queryParamsString}`;
+    const url = `${this._siteUrl}/${this._iframePage}.html?${queryParamsString}`;
     await this._page.goto(url);
     await waitTillHTMLRendered(this._page);
   }
 
   async gotoVerticalPage(vertical, queryParams = {}) {
     const queryParamsString = getQueryParamsString(queryParams);
-    const url = `${this._siteUrl}/${this._iframePage}?verticalUrl=${vertical}&${queryParamsString}`;
+    const url = `${this._siteUrl}/${this._iframePage}.html?verticalUrl=${vertical}.html&${queryParamsString}`;
     await this._page.goto(url);
     await waitTillHTMLRendered(this._page);
   }

tests/percy/photographer.js

@@ -34,7 +34,7 @@ class Photographer {
     await this._pageNavigator.gotoUniversalPage({ query: 'a' });
     await this._camera.snapshot('universal-search');
 
-    await this._pageNavigator.gotoUniversalPage({ query: 'office+sparce'});
+    await this._pageNavigator.gotoUniversalPage({ query: 'office sparce'});
     await this._camera.snapshot('universal-search--spellcheck');
   }
 
@@ -73,7 +73,7 @@ class Photographer {
     await this._camera.snapshotMobileOnly('vertical-full-page-map__mobile-detail-view');
 
     await this._pageNavigator
-      .gotoVerticalPage('locations_full_page_map', { query: 'office+sparce'});
+      .gotoVerticalPage('locations_full_page_map', { query: 'office sparce'});
     await this._camera.snapshotDesktopOnly('vertical-full-page-map--spellcheck__desktop-view');
     await this._camera.snapshotMobileOnly('vertical-full-page-map--spellcheck__mobile-list-view');
 

tests/percy/standardpagenavigator.js

@@ -24,7 +24,7 @@ class StandardPageNavigator extends PageNavigator {
 
   async gotoVerticalPage(vertical, queryParams = {}) {
     const queryParamsString = getQueryParamsString(queryParams);
-    const url = `${this._siteUrl}/${vertical}?${queryParamsString}`;
+    const url = `${this._siteUrl}/${vertical}.html?${queryParamsString}`;
     await this._page.goto(url);
     await waitTillHTMLRendered(this._page);
   }

tests/test-utils/server.js

@@ -1,5 +1,4 @@
-const http = require('http');
-const handler = require('serve-handler');
+const express = require('express');
 
 /**
  * A simple http server
@@ -13,20 +12,18 @@ class HttpServer {
    * @param {number} config.port - The port to serve at
    */
   constructor ({dir, port}) {
-    this._server = http.createServer((request, response) => {
-      return handler(request, response, {
-        "public": dir
-      });
-    });
-
+    this._app = express();
+    this._app.use(express.static(dir));
     this._port = port;
   }
 
   /**
    * Starts the server
    */
   start () {
-    this._server.listen(this._port);
+    this._server = this._app.listen(this._port, () => {
+      console.log(`listening at http://localhost:${this._port}`);
+    });
   }
 
   /**