Fixes for Node 12 and various other changes for maintance

RobertLowe · RobertLowe · commit 2ce89069c6d4 · 2020-05-09T16:03:00.000-04:00
- Fixes all jest tests
- Fixes various require statements to import
- Fixes docusaurus by locking version
- Changes `takeSnapshot` functions to `compareSnapshot`
- Changes related phrases for take to compare
- Replaces `When` for compare with `Then`, its only an assertion, even though there is a side effect of saving snapshots

Remaining work: Resolve cypress tests
diff --git a/__tests__/functions.spec.js b/__tests__/functions.spec.js
@@ -1,22 +1,27 @@
-import * as functions from '../functions';
+import * as functions from '../common/functions';
+import * as cypressFunctions from '../cypress/cypressFunctions';
 import { ELEMENT_SELECTORS, STATE, setScreens } from '../common/variables';
 
+
 let {
     hex2rgbCSS,
     buildClassSelector,
     parseNumberEls,
-    getNormalized,
     getSelector,
+} = functions;
 
+let {
+    getNormalized,
     scroll,
     click,
     type,
     replace,
     open,
     waitForResults,
     dragAbove,
-    takeSnapshot,
-    takeElSnapshot,
+    compareSnapshot,
+    compareElSnapshot,
+    compareNamedSnapshot,
     onPage,
     redirectedTo,
     nElements,
@@ -25,7 +30,7 @@ let {
     elDoesNotExist,
     elBackground,
     elBorder,
-} = functions;
+} = cypressFunctions;
 
 jest.mock('../common/variables');
 
@@ -387,28 +392,39 @@ describe('functions', () => {
 
 	});
 
-    test('takeSnapshot', () => {
-        takeSnapshot('Test');
+    test('compareSnapshot', () => {
+        compareSnapshot();
 
         expect(matchImageSnapshot).toBeCalledWith(
-            'Test', {
-                threshold: 1000,
-                thresholdType: 'pixel'
+            null, {
+              failureThreshold: 0.1,
+              failureThresholdType: "percent"
             }
         );
 	});
 
-    test('takeElSnapshot', () => {
-        takeElSnapshot('Input');
+    test('compareElSnapshot', () => {
+        compareElSnapshot('Input');
 
         expect(matchImageSnapshot).toBeCalledWith(
             'Input', {
-                threshold: 1000,
-                thresholdType: 'pixel'
+              failureThreshold: 0.1,
+              failureThresholdType: "percent"
             }
         );
 	});
 
+  test('compareNamedSnapshot', () => {
+      compareNamedSnapshot('Test Page');
+
+      expect(matchImageSnapshot).toBeCalledWith(
+          'Test Page', {
+              failureThreshold: 0.1,
+              failureThresholdType: "percent"
+          }
+      );
+});
+
     test('onPage', () => {
         onPage('Home');
 
diff --git a/__tests__/phrases.spec.js b/__tests__/phrases.spec.js
@@ -1,4 +1,4 @@
-import { REGEX } from '../phrases';
+import * as REGEX from '../common/regex';
 
 describe('REGEX', () => {
     describe('SCROLL', () => {
@@ -217,19 +217,28 @@ describe('REGEX', () => {
         });
     });
 
-    describe('TAKE_SNAPSHOT', () => {
-        it('I take a snapshot named "Home Page"', () => {
-            const m = 'I take a snapshot named "Home Page"'
-                .match(REGEX.TAKE_SNAPSHOT);
+    describe('COMPARE_SNAPSHOT', () => {
+        it('I compare a snapshot', () => {
+            const m = 'I compare a snapshot'
+                .match(REGEX.COMPARE_SNAPSHOT);
+            
+            expect(m[1]).toBe(undefined);
+        });
+    });
+
+    describe('COMPARE_SNAPSHOT_NAMED', () => {
+        it('I compare a snapshot named "Home Page"', () => {
+            const m = 'I compare a snapshot named "Home Page"'
+                .match(REGEX.COMPARE_SNAPSHOT_NAMED);
             
             expect(m[1]).toBe('Home Page');
         });
     });
 
-    describe('TAKE_EL_SNAPSHOT', () => {
-        it('I take a snapshot of the "Modal"', () => {
-            const m = 'I take a snapshot of the "Modal"'
-                .match(REGEX.TAKE_EL_SNAPSHOT);
+    describe('COMPARE_EL_SNAPSHOT', () => {
+        it('I compare a snapshot of the "Modal"', () => {
+            const m = 'I compare a snapshot of the "Modal"'
+                .match(REGEX.COMPARE_EL_SNAPSHOT);
             
             expect(m[1]).toBe('Modal');
         });
diff --git a/__tests__/regexBuilder.spec.js b/__tests__/regexBuilder.spec.js
@@ -5,7 +5,7 @@ import {
     int,
     elInEl,
     page,
-} from '../regexBuilder';
+} from '../common/regexBuilder';
 
 describe('RegexBuilder', () => {
     describe('r', () => {
diff --git a/__tests__/router.spec.js b/__tests__/router.spec.js
@@ -1,4 +1,4 @@
-import { processRoutes } from "../router";
+import { processRoutes } from "../cypress/router";
 
 describe('Router', () => {
     describe('buildMap', () => {
diff --git a/common/functions.js b/common/functions.js
@@ -1,7 +1,9 @@
 const hex2rgb = require('hex-rgb');
-const { wordsToNumbers } = require('words-to-numbers');
+let wordsToNumbers = require('words-to-numbers');
+wordsToNumbers = wordsToNumbers.default;
 const pluralize = require('pluralize');
-const { ELEMENT_SELECTORS } = require('../common/variables');
+let variables = require('../common/variables');
+let { ELEMENT_SELECTORS } = variables;
 
 // COMMON FUNCTIONS
 
diff --git a/common/regex.js b/common/regex.js
@@ -1,10 +1,11 @@
+const regexBuilder = require('./regexBuilder');
 const {
     r,
     string,
     int,
     elInEl,
     page,
-} = require('./regexBuilder');
+} = regexBuilder;
 
 module.exports = {
     SCROLL: r(`I scroll to the (top|bottom) of the page`),
@@ -16,9 +17,9 @@ module.exports = {
     WAIT_FOR_RESULTS: r(`I wait for results to load`),
     WAIT_SECONDS: r(`I wait ${int} seconds`),
     DRAG_ABOVE: r(`I drag${elInEl} above${elInEl}`),
-    TAKE_SNAPSHOT:  r(`I take a snapshot`),
-    TAKE_EL_SNAPSHOT: r(`I take a snapshot of${elInEl}`),
-    TAKE_SNAPSHOT_NAMED: r(`I take a snapshot named ${string}`),
+    COMPARE_SNAPSHOT:  r(`I compare a snapshot`),
+    COMPARE_EL_SNAPSHOT: r(`I compare a snapshot of${elInEl}`),
+    COMPARE_SNAPSHOT_NAMED: r(`I compare a snapshot named ${string}`),
     ON_PAGE: r(`I should be on${page}`),
     REDIRECTED_TO: r(`I should be redirected to${page}`),
     N_ELEMENTS: r(`I should see ${int}${elInEl}`),
diff --git a/cypress/cypressFunctions.js b/cypress/cypressFunctions.js
@@ -1,10 +1,13 @@
-const {
+const variables = require('../common/variables');
+let {
     SCREENS,
     STATE,
     setState,
-} = require('../common/variables');
+} = variables;
+
+const functions = require('../common/functions');
+let { getSelector, hex2rgbCSS } = functions;
 
-const { getSelector, hex2rgbCSS } = require('../common/functions');
 
 const getNormalized = (elements, { text, singular } = {}) => {
     const { className, firstOrdinal } = getSelector(elements, { text, singular, showOrdinals: true })
@@ -123,16 +126,15 @@ const snapshotOptions = {
     failureThresholdType: 'percent',
 }
 
-const takeSnapshot = () => {
+const compareSnapshot = () => {
     cy.matchImageSnapshot(null, snapshotOptions);
-
 }
 
-const takeNamedSnapshot = (name) => {
+const compareNamedSnapshot = (name) => {
     cy.matchImageSnapshot(name, snapshotOptions);
 }
 
-const takeElSnapshot =  (el, parent) => {
+const compareElSnapshot =  (el, parent) => {
     getNormalized([parent, el]).matchImageSnapshot(el, snapshotOptions);
 }
 
@@ -180,9 +182,9 @@ module.exports = {
     wait,
     waitForResults,
     dragAbove,
-    takeSnapshot,
-    takeElSnapshot,
-    takeNamedSnapshot,
+    compareSnapshot,
+    compareElSnapshot,
+    compareNamedSnapshot,
     onPage,
     redirectedTo,
     nElements,
diff --git a/cypress/cypressPhrases.js b/cypress/cypressPhrases.js
@@ -6,9 +6,9 @@ const {
     open,
     waitForResults,
     dragAbove,
-    takeSnapshot,
-    takeElSnapshot,
-    takeNamedSnapshot,
+    compareSnapshot,
+    compareElSnapshot,
+    compareNamedSnapshot,
     onPage,
     redirectedTo,
     nElements,
@@ -56,12 +56,9 @@ module.exports = () => {
     // This is experimental and not part of the official API
     When(REGEX.DRAG_ABOVE, dragAbove);
 
-    When(REGEX.TAKE_SNAPSHOT, takeSnapshot);
-    When(REGEX.TAKE_EL_SNAPSHOT, takeElSnapshot);
-    When(REGEX.TAKE_SNAPSHOT_NAMED, takeNamedSnapshot)
-    Then(REGEX.TAKE_SNAPSHOT, takeSnapshot);
-    Then(REGEX.TAKE_EL_SNAPSHOT, takeElSnapshot);
-    Then(REGEX.TAKE_SNAPSHOT_NAMED, takeNamedSnapshot)
+    Then(REGEX.COMPARE_SNAPSHOT, compareSnapshot);
+    Then(REGEX.COMPARE_EL_SNAPSHOT, compareElSnapshot);
+    Then(REGEX.COMPARE_SNAPSHOT_NAMED, compareNamedSnapshot)
 
     // ex: I should be on the "Login Screen"
     Then(REGEX.ON_PAGE, onPage);
diff --git a/cypress/router.js b/cypress/router.js
@@ -16,7 +16,7 @@ const processRoutes = (routes) => {
     });
 }
 
-module.exports =(routes, { stubAll } = {}) => {
+module.exports = (routes, { stubAll } = {}) => {
     beforeEach(() => {
         cy.server();
         
@@ -25,4 +25,6 @@ module.exports =(routes, { stubAll } = {}) => {
 
         processRoutes(routes);
     });
-}
+}
+
+module.exports.processRoutes = processRoutes
diff --git a/docs/functions.md b/docs/functions.md
@@ -208,18 +208,18 @@ waitForResults() =>
 cy.timeout(1000)
 ```
 
-### takeSnapshot
-Takes s a snapshot of the entire page and matches it against al old snapshot taken. Save is under the name specified
+### compareSnapshot
+Saves and compares a snapshot of the entire page to the previously (if one) taken snapshot. Saved under the name specified
 
 ```
-takeSnapshot('Test Page')
+compareSnapshot('Test Page')
 ```
 
-### takeElSnapshot
+### compareElSnapshot
 Takes a snapshot of an element
 
 ```
-takeElSnapshot('Input');
+compareElSnapshot('Input');
 ```
 
 ### onPage
diff --git a/docs/phrases.md b/docs/phrases.md
@@ -116,18 +116,18 @@ Waits for an AJAX request to finish.
 
 This is currently not working as it should so I replaced with a `wait(1000)`. Feel free to submit PRs to fix
 
-### Taking a Snapshot
-`I take a snapshot"`
+### Comparing a Snapshot
+`I compare a snapshot`
 
-Takes a snapshot of the current screen and compares to a previous snapshot. I guess this is a `Then` as well as `When` functionality wise.
+Takes & Compares a snapshot of the current screen and compares to a previous snapshot.
 
 ### Taking a Named Snapshot
-`I take a snapshot named "{string}"`
+`I compare a snapshot named "{string}"`
 
-Takes a snapshot of the current screen and names it the string you give, then compares to a previous snapshot. I guess this is a `Then` as well as `When` functionality wise.
+Takes a snapshot of the current screen and names it the string you give, then compares to a previous snapshot.
 
 ### Taking an Element Snapshot
-`I take a snapshot of the "Header"`
+`I compare a snapshot of the "Header"`
 Takes a snapshot of just the element, saves it with the Element's name, and compares to a previous snapshot.
 
 ## Thens
diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "babel-preset-stage-0": "^6.24.1",
     "babel-watch": "^2.0.7",
     "chai": "^4.2.0",
-    "jest": "^23.5.0",
+    "jest": "=23.5.0",
     "jest-cucumber": "^1.0.11"
   }
 }
diff --git a/selenium/seleniumFunctions.js b/selenium/seleniumFunctions.js
@@ -88,12 +88,12 @@ const waitForResults = (browser) => {
 const dragAbove = (browser, el1, el1Parent, el1Contains, el2, el2Parent, el2Contains) => {
 }
 
-const takeSnapshot = (browser) => {
+const compareSnapshot = (browser) => {
     const [{ isWithinMisMatchTolerance }] = browser.checkViewport();
     assert.isTrue(isWithinMisMatchTolerance);
 }
 
-const takeElSnapshot =  (browser, el, parent) => {
+const compareElSnapshot =  (browser, el, parent) => {
     const [{ isWithinMisMatchTolerance }] = browser.checkElement(getNormalized(browser, [parent, el]));
     assert.isTrue(isWithinMisMatchTolerance);
 }
@@ -149,8 +149,8 @@ module.exports = {
     wait,
     waitForResults,
     dragAbove,
-    takeSnapshot,
-    takeElSnapshot,
+    compareSnapshot,
+    compareElSnapshot,
     onPage,
     redirectedTo,
     nElements,
diff --git a/selenium/seleniumPhrases.js b/selenium/seleniumPhrases.js
@@ -8,8 +8,8 @@ const {
     wait,
     waitForResults,
     dragAbove,
-    takeSnapshot,
-    takeElSnapshot,
+    compareSnapshot,
+    compareElSnapshot,
     onPage,
     redirectedTo,
     nElements,
@@ -67,9 +67,9 @@ addPhrase(REGEX.WAIT_SECONDS, (seconds) => {
 // This is experimental and not part of the official API
 addPhrase(REGEX.DRAG_ABOVE, dragAbove);
 
-addPhrase(REGEX.TAKE_SNAPSHOT, takeSnapshot);
+addPhrase(REGEX.COMPARE_SNAPSHOT, compareSnapshot);
 
-addPhrase(REGEX.TAKE_EL_SNAPSHOT, takeElSnapshot);
+addPhrase(REGEX.COMPARE_EL_SNAPSHOT, compareElSnapshot);
 
 // ex: I should be on the "Login Screen"
 addPhrase(REGEX.ON_PAGE, onPage);
diff --git a/website/cypress/integration/home/home.feature b/website/cypress/integration/home/home.feature
@@ -12,7 +12,7 @@ Feature: Home
 
     # # Scenario: I should see a presentation
     # #     Then I wait 2 seconds
-    # #     Then I take a snapshot of "Presentation"
+    # #     Then I compare a snapshot of "Presentation"
 
     Scenario: I should be able to search for a doc
         When I type "recommended" into the "Search Input" in the "Header"
diff --git a/website/package.json b/website/package.json
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { processRoutes } from "../router";`
	`1`	`+import { processRoutes } from "../cypress/router";`
`2`	`2`
`3`	`3`	`describe('Router', () => {`
`4`	`4`	`describe('buildMap', () => {`