update backstop, add focus testing, add some tests for focus states

backstop.js

@@ -7,7 +7,7 @@ const scenariosArr = [];
 let defs = [];
 const scenarioDefaults = {
   url: 'http://localhost:3000',
-  delay: 100,
+  misMatchThreshold: 0.1,
   readyEvent: null,
   onReadyScript: 'onReady.js',
 };
@@ -18,49 +18,52 @@ function createScenario(def) {
   scenariosArr.push(finalScenario);
 }
 
-function createHoverScenario(def) {
-  // handle normal selectors
-  if (Object.prototype.hasOwnProperty.call(def, 'selectors')) {
-    const normalScenario = Object.assign({}, def);
-    delete normalScenario.hoverSelectors;
-    createScenario(normalScenario);
-  }
-  // handle hover selectors
-  const hoverScenario = Object.assign({}, def);
-  hoverScenario.label = `${hoverScenario.label} Hover`;
-  hoverScenario.selectors = [];
-  hoverScenario.hoverWait = 2000;
-  const copy = Object.assign({}, hoverScenario);
-  delete copy.hoverSelectors;
-
-  hoverScenario.hoverSelectors.forEach((selector) => {
-    copy.hoverSelector = selector;
-    copy.selectors = [];
-    copy.selectors.push(selector);
-    createScenario(copy);
+function splitScenario(def, type = '', selectorsArr, extraOptions = {}) {
+  const scenario = Object.assign({}, extraOptions, def);
+  scenario.label = `${def.label} ${type}`;
+  selectorsArr.forEach((s) => {
+    scenario[`${type}Selector`] = true;
+    scenario.selectors = [s];
+    createScenario(scenario);
   });
 }
 
-// get backstop definition files and concat the contents
+// leaving this here for testing
 // const files = glob.sync(
-//   './src/components/anchor/*.backstop.js',
+//   // './src/**/*[!{cdr}].backstop.js',
+//   './src/**/testing.backstop.js',
 //   { ignore: './src/**/node_modules/**' },
 // );
-const files = glob.sync('./src/**/*.backstop.js', { ignore: './src/**/node_modules/**' });
+
+// get backstop definition files and concat the contents
+const files = glob.sync('./src/**/*.backstop.js', { ignore: ['./src/**/node_modules/**'] });
+
+console.log(files.length);
 
 files.forEach((file) => {
   defs = defs.concat(require(file));
 });
 
-
 defs.forEach((def) => {
-  if (Object.prototype.hasOwnProperty.call(def, 'hoverSelectors')) {
-    createHoverScenario(def);
-  } else {
-    createScenario(def);
+  const currDef = def;
+
+  if (Object.prototype.hasOwnProperty.call(currDef, 'hoverSelectors')) {
+    const { hoverSelectors } = currDef;
+    delete currDef.hoverSelectors;
+    splitScenario(currDef, 'hover', hoverSelectors, { hoverWait: 1000 });
+  }
+
+  if (Object.prototype.hasOwnProperty.call(currDef, 'focusSelectors')) {
+    const { focusSelectors } = currDef;
+    delete currDef.focusSelectors;
+    splitScenario(currDef, 'focus', focusSelectors, { focusWait: 1000 });
   }
+
+  createScenario(currDef);
 });
 
+console.log(scenariosArr);
+
 module.exports = {
   id: 'cedar',
   viewports: [
@@ -99,4 +102,5 @@ module.exports = {
   report: ['browser'],
   debug: false,
   debugWindow: false,
+  startingPort: 9350,
 };

backstop_data/engine_scripts/focus.js

@@ -0,0 +1,13 @@
+module.exports = (chromy, scenario) => {
+  if (Object.prototype.hasOwnProperty.call(scenario, 'focusSelector')) {
+    const focusSelector = scenario.selectors[0];
+    const waitTime = scenario.focusWait || 0;
+    chromy.evaluate(`_selector = '${focusSelector}'`);
+    chromy
+      .wait(focusSelector)
+      .evaluate(() => {
+        document.querySelector(_selector).focus(); // eslint-disable-line
+      })
+      .wait(waitTime);
+  }
+};

backstop_data/engine_scripts/hover.js

@@ -1,15 +1,13 @@
-module.exports = (chromy, scenario, vp) => {
-  const { hoverSelector } = scenario;
-  const waitTime = scenario.hoverWait || 0;
-
-
-  if (hoverSelector) {
+module.exports = (chromy, scenario) => {
+  if (Object.prototype.hasOwnProperty.call(scenario, 'hoverSelector')) {
+    const waitTime = scenario.hoverWait || 0;
+    const hoverSelector = scenario.selectors[0];
     chromy
       .wait(hoverSelector)
       .rect(hoverSelector)
       .result((rect) => {
         chromy.mouseMoved(rect.left, rect.top);
-        chromy.wait(waitTime);
-      });
+      })
+      .wait(waitTime);
   }
 };

backstop_data/engine_scripts/onReady.js

@@ -1,6 +1,8 @@
 const hover = require('./hover');
+const focus = require('./focus');
 
 module.exports = (chromy, scenario, vp) => {
   hover(chromy, scenario);
+  focus(chromy, scenario);
   // add more ready handlers here...
 };

build/webpack.dev.conf.js

@@ -7,7 +7,7 @@ const baseWebpackConfig = require('./webpack.common.conf')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 const StyleLintPlugin = require('stylelint-webpack-plugin')
-const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
+// const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
 
 // Define entries here so we can bind hot reloading below
 const entryObj = {
@@ -47,19 +47,19 @@ module.exports = merge(baseWebpackConfig, {
       files: ['**/*.postcss', '**/*.pcss', '**/*.vue'],
     }),
     new FriendlyErrorsPlugin(),
-    new BrowserSyncPlugin(
-      {
-        // browse to http://localhost:3000/ during development 
-        host: 'localhost',
-        port: 3000,
-        // proxy the dev server endpoint through BrowserSync 
-        proxy: 'http://localhost:8080/',
-        notify: false,
-      },
-      {
-        // prevent BrowserSync from reloading the page and let the dev server take care of this 
-        reload: false,
-      }
-    ),
+    // new BrowserSyncPlugin(
+    //   {
+    //     // browse to http://localhost:3000/ during development 
+    //     host: 'localhost',
+    //     port: 3000,
+    //     // proxy the dev server endpoint through BrowserSync 
+    //     proxy: 'http://localhost:8080/',
+    //     notify: false,
+    //   },
+    //   {
+    //     // prevent BrowserSync from reloading the page and let the dev server take care of this 
+    //     reload: false,
+    //   }
+    // ),
   ]
 })

config/index.js

@@ -40,8 +40,8 @@ module.exports = {
   },
   dev: {
     env: require('./dev.env'),
-    port: 8080,
-    autoOpenBrowser: false, // Set to false because using BrowserSync
+    port: 3000,
+    autoOpenBrowser: true, // Set to false if using BrowserSync
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {},

src/components/Utilities/utilities.backstop.js

@@ -6,7 +6,5 @@ module.exports = [
       '[data-backstop="visibility-utilities"]',
       '[data-backstop="align-utilities"]',
     ],
-    delay: 0,
-    misMatchThreshold: 0.1,
   },
 ];

src/components/anchor/cdrA.backstop.js

@@ -7,6 +7,4 @@ module.exports = [{
     '[data-backstop="cdr-link"]',
     '[data-backstop="cdr-link--standalone"]',
   ],
-  delay: 0,
-  misMatchThreshold: 0.1,
 }];

src/components/button/cdrButton.backstop.js

@@ -4,12 +4,13 @@ module.exports = [
     selectors: [
       '[data-backstop="buttons"]',
     ],
+    focusSelectors: [
+      '[data-backstop="cdr-button"]',
+    ],
     hoverSelectors: [
       '[data-backstop="cdr-button"]',
       '[data-backstop="cdr-button--secondary"]',
       '[data-backstop="cdr-button--cta-sale"]',
     ],
-    delay: 0,
-    misMatchThreshold: 0.1,
   },
 ];

src/components/card/cdrCard.backstop.js

@@ -4,7 +4,5 @@ module.exports = [
     selectors: [
       '[data-backstop="simple-card"]',
     ],
-    delay: 0,
-    misMatchThreshold: 0.1,
   },
 ];

src/components/checkbox/cdrCheckbox.backstop.js

@@ -7,7 +7,8 @@ module.exports = [
     hoverSelectors: [
       '[data-backstop="checkbox-checked"]',
     ],
-    delay: 0,
-    misMatchThreshold: 0.1,
+    focusSelectors: [
+      '[data-backstop="checkbox-focus"]+label',
+    ],
   },
 ];

src/components/checkbox/examples/checkboxes.vue

@@ -4,6 +4,7 @@
     <cdr-checkbox
       v-model="ex1"
       @change="logChange"
+      data-backstop="checkbox-focus"
     >single</cdr-checkbox>
     <p>single: {{ ex1 }}</p>
     <span data-backstop="checkbox-checked">

src/components/grid/grid.backstop.js

@@ -13,7 +13,5 @@ module.exports = [
       '[data-backstop="row-mosaic"]',
       '[data-backstop="row-mosaic-list"]',
     ],
-    delay: 0,
-    misMatchThreshold: 0.1,
   },
 ];

src/components/heading/heading.backstop.js

@@ -4,7 +4,5 @@ module.exports = [
     selectors: [
       '[data-backstop="headings"]',
     ],
-    delay: 0,
-    misMatchThreshold: 0.1,
   },
 ];

src/components/icon/cdrIcon.backstop.js

@@ -7,7 +7,5 @@ module.exports = [
     hoverSelectors: [
       '[data-backstop="cdr-icon-add"]',
     ],
-    delay: 0,
-    misMatchThreshold: 0.1,
   },
 ];

src/components/image/cdrImg.backstop.js

@@ -7,7 +7,5 @@ module.exports = [
       '[data-backstop="image-mods"]',
       '[data-backstop="image-standard"]',
     ],
-    delay: 0,
-    misMatchThreshold: 0.1,
   },
 ];

src/components/input/cdrInput.backstop.js

@@ -4,7 +4,8 @@ module.exports = [
     selectors: [
       '[data-backstop="inputs"]',
     ],
-    delay: 0,
-    misMatchThreshold: 0.1,
+    // focusSelectors: [
+    //   '[data-backstop="text-input"]',
+    // ],
   },
 ];

src/components/list/lists.backstop.js

@@ -4,7 +4,5 @@ module.exports = [
     selectors: [
       '[data-backstop="lists"]',
     ],
-    delay: 0,
-    misMatchThreshold: 0.1,
   },
 ];

src/components/mediaObject/cdrMediaObject.backstop.js

@@ -7,7 +7,5 @@ module.exports = [
       '[data-backstop="media-shape-align"]',
       '[data-backstop="media-object-overlay"]',
     ],
-    delay: 0,
-    misMatchThreshold: 0.1,
   },
 ];

src/components/radio/cdrRadio.backstop.js

@@ -4,7 +4,5 @@ module.exports = [
     selectors: [
       '[data-backstop="radios"]',
     ],
-    delay: 0,
-    misMatchThreshold: 0.1,
   },
 ];

src/components/rating/cdrRating.backstop.js

@@ -4,7 +4,5 @@ module.exports = [
     selectors: [
       '[data-backstop="ratings"]',
     ],
-    delay: 0,
-    misMatchThreshold: 0.1,
   },
 ];

src/components/select/cdrSelect.backstop.js

@@ -4,7 +4,5 @@ module.exports = [
     selectors: [
       '[data-backstop="selects"]',
     ],
-    delay: 0,
-    misMatchThreshold: 0.1,
   },
 ];

src/compositions/activityCard/cdrActivityCard.backstop.js

@@ -7,7 +7,6 @@ module.exports = [
     hoverSelectors: [
       '[data-backstop="activity-card"]',
     ],
-    delay: 0,
-    misMatchThreshold: 0.1,
+    hoverWait: 2000,
   },
 ];

src/compositions/search/cdrSearch.backstop.js

@@ -4,7 +4,5 @@ module.exports = [
     selectors: [
       '[data-backstop="search"]',
     ],
-    delay: 0,
-    misMatchThreshold: 0.1,
   },
 ];

src/directives/mountain/mountain.backstop.js

@@ -1,10 +1,6 @@
-module.exports = [
-  {
-    label: 'Mountains',
-    selectors: [
-      '[data-backstop="mountain-shapes"]',
-    ],
-    delay: 0,
-    misMatchThreshold: 0.1,
-  },
-];
+module.exports = [{
+  label: 'Mountains',
+  selectors: [
+    '[data-backstop="mountain-shapes"]',
+  ],
+}];

templates/[name].backstop.js

@@ -1,6 +1,4 @@
 module.exports = [{
   label: '{NAME-PASCAL}',
-  delay: 0,
-  misMatchThreshold: 0.1,
   selectors: [],
 }];