Feature/npm package updates (#1355)

* Update tests reference files * Update test, for some reason I don't understand is failing * Update nodejs versions in travis * Update package-lock.json file * Update eslint version * Run eslint and fix eslint warnings/errors * Fix 'each' is not defined no-undef * Re-generate compare-output * Fix .forEach loops for null values * Fix eslint errors(remove .eslintrc.json file) * Fix eslint errors * Add gitlab-ci.yml, out of travis credits * Fix .gitlab-ci.yml name * Fix node version * Update gitlab-ci code
garris · Aug 24, 2021 · 9fa768b · 9fa768b
1 parent 608a6b8
commit 9fa768b
Show file tree

Hide file tree

Showing 50 changed files with 3,408 additions and 2,006 deletions.
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
@@ -0,0 +1,27 @@
+
+image: ubuntu:20.04
+
+before_script:
+  - export DEBIAN_FRONTEND=noninteractive
+  - apt-get update
+  - apt-get install curl wget -y
+  - wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+  - apt-get install ./google-chrome-stable_current_amd64.deb  -y
+  - curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
+  - . ~/.nvm/nvm.sh
+  - nvm --version
+  - nvm install $NODEJS
+  - node -v
+  - npm -v
+  - npm install
+
+tests:
+  script:
+    - npm run lint && npm run unit-test
+  parallel:
+    matrix:
+      - NODEJS:
+          - 10
+          - 12
+          - 14
+          - 16
diff --git a/.travis.yml b/.travis.yml
@@ -2,8 +2,10 @@ addons: # get google-chrome [stable|beta]
   chrome: beta
 language: node_js
 node_js:
-  - 8
   - 10
+  - 12
+  - 14
+  - 16
 install:
   - npm install
 script:

diff --git a/capture/engine_scripts/puppet/ignoreCSP.js b/capture/engine_scripts/puppet/ignoreCSP.js
@@ -46,7 +46,7 @@ module.exports = async function (page, scenario) {
       const result = await fetch(requestUrl, options);
 
       const buffer = await result.buffer();
-      let cleanedHeaders = result.headers._headers || {};
+      const cleanedHeaders = result.headers._headers || {};
       cleanedHeaders['content-security-policy'] = '';
       await request.respond({
         body: buffer,

diff --git a/capture/engine_scripts/puppet/overrideCSS.js b/capture/engine_scripts/puppet/overrideCSS.js
@@ -1,4 +1,4 @@
-const BACKSTOP_TEST_CSS_OVERRIDE = `html {background-image: none;}`;
+const BACKSTOP_TEST_CSS_OVERRIDE = 'html {background-image: none;}';
 
 module.exports = async (page, scenario) => {
   // inject arbitrary css to override styles

diff --git a/cli/index.js b/cli/index.js
@@ -31,7 +31,7 @@ function main () {
     return;
   }
 
-  const commandName = argsOptions['_'][0];
+  const commandName = argsOptions._[0];
 
   if (!commandName) {
     console.log(usage);

diff --git a/compare/output/index_bundle.js b/compare/output/index_bundle.js
diff --git a/compare/src/components/atoms/ButtonFilter.js b/compare/src/components/atoms/ButtonFilter.js
@@ -38,7 +38,7 @@ const Button = styled.button`
 
 export default class ButtonFilter extends React.Component {
   render () {
-    let { count, label, status } = this.props;
+    const { count, label, status } = this.props;
 
     return (
       <Button

diff --git a/compare/src/components/atoms/ButtonSettings.js b/compare/src/components/atoms/ButtonSettings.js
@@ -49,7 +49,7 @@ const Button = styled.button`
 
 export default class ButtonSettings extends React.Component {
   render () {
-    let isActive = this.props.active ? 'active' : '';
+    const isActive = this.props.active ? 'active' : '';
 
     return (
       <Button onClick={this.props.onClick} className={isActive}>

diff --git a/compare/src/components/atoms/DiffDetails.js b/compare/src/components/atoms/DiffDetails.js
@@ -18,7 +18,7 @@ const Value = styled.span`
 
 export default class DiffDetails extends React.Component {
   render () {
-    let { diff, suppress } = this.props;
+    const { diff, suppress } = this.props;
     if (!diff || suppress) {
       return null;
     }

diff --git a/compare/src/components/atoms/ImageScrubber.js b/compare/src/components/atoms/ImageScrubber.js
@@ -157,7 +157,7 @@ export default class ImageScrubber extends React.Component {
         'message',
         function (result) {
           const divergedImgData = result.data;
-          let clampedImgData = getEmptyImgData(h, w);
+          const clampedImgData = getEmptyImgData(h, w);
           for (let i = divergedImgData.length - 1; i >= 0; i--) {
             clampedImgData.data[i] = divergedImgData[i];
           }
@@ -305,7 +305,7 @@ function getImgDataDataFromContext (context) {
 }
 
 function getEmptyImgData (h, w) {
-  var o = imageToCanvasContext(null, h, w);
+  const o = imageToCanvasContext(null, h, w);
   return o.createImageData(w, h);
 }
 

diff --git a/compare/src/components/atoms/NavButtons.js b/compare/src/components/atoms/NavButtons.js
@@ -23,24 +23,24 @@ const ButtonNav = styled.div`
   height: 32px;
   width: 32px;
   margin: 0 0px 0 5px;
-  transform: ${props => (props.prev ? `rotate(0)` : `rotate(180deg)`)};
-  opacity: ${props => (props.disabled ? `0.2` : `1`)};
+  transform: ${props => (props.prev ? 'rotate(0)' : 'rotate(180deg)')};
+  opacity: ${props => (props.disabled ? '0.2' : '1')};
   display: inline-block;
 
   &:hover {
-    cursor: ${props => (props.disabled ? `` : `pointer`)};
+    cursor: ${props => (props.disabled ? '' : 'pointer')};
     background-color: ${props => (props.disabled ? `${colors.lightGray}` : `${colors.medGray}`)};
   }
 `;
 
 export default class NavButtons extends React.Component {
   nextTest () {
-    let dest = `#test${this.props.currentId + 1}`;
+    const dest = `#test${this.props.currentId + 1}`;
     this.jumpTo(dest);
   }
 
   prevTest () {
-    let dest = `#test${this.props.currentId - 1}`;
+    const dest = `#test${this.props.currentId - 1}`;
     this.jumpTo(dest);
   }
 
@@ -52,7 +52,7 @@ export default class NavButtons extends React.Component {
   }
 
   render () {
-    let { currentId, lastId } = this.props;
+    const { currentId, lastId } = this.props;
 
     return (
       <Wrapper>

diff --git a/compare/src/components/atoms/SettingOption.js b/compare/src/components/atoms/SettingOption.js
@@ -21,7 +21,7 @@ const WrapperOption = styled.div`
 
 export default class SettingOption extends React.Component {
   render () {
-    let { label, value, onToggle } = this.props;
+    const { label, value, onToggle } = this.props;
 
     return (
       <WrapperOption>

diff --git a/compare/src/components/ecosystems/List.js b/compare/src/components/ecosystems/List.js
@@ -14,8 +14,8 @@ const ListWrapper = styled.section`
 
 class List extends React.Component {
   render () {
-    let { tests, settings } = this.props;
-    let onlyText =
+    const { tests, settings } = this.props;
+    const onlyText =
       !settings.refImage && !settings.testImage && !settings.diffImage;
 
     return (

diff --git a/compare/src/components/molecules/ApproveButton.js b/compare/src/components/molecules/ApproveButton.js
@@ -76,7 +76,8 @@ class ApproveButton extends React.Component {
         errorMsg: `${err.message}. 🧐
 Looks like the "approve" operation failed.
 Please check that backstopRemote is running.
-      ` });
+      `
+      });
       alert(this.state.errorMsg);
     }
   }

diff --git a/compare/src/components/molecules/FiltersSwitch.js b/compare/src/components/molecules/FiltersSwitch.js
@@ -33,8 +33,8 @@ function ButtonsFilter (props) {
 
 class FiltersSwitch extends React.Component {
   render () {
-    let tests = this.props.tests;
-    let availableStatus = [
+    const tests = this.props.tests;
+    const availableStatus = [
       {
         id: 'all',
         label: 'all',

diff --git a/compare/src/components/molecules/ScrubberButton.js b/compare/src/components/molecules/ScrubberButton.js
@@ -39,7 +39,7 @@ const ButtonSD = styled.button`
 
 class ScrubberButton extends React.Component {
   onClick () {
-    let { openModal } = this.props;
+    const { openModal } = this.props;
     openModal(this.props.info);
   }
 

diff --git a/compare/src/components/molecules/SettingsPopup.js b/compare/src/components/molecules/SettingsPopup.js
@@ -65,7 +65,7 @@ class SettingsPopup extends React.Component {
   }
 
   render () {
-    let { settings } = this.props;
+    const { settings } = this.props;
 
     return (
       <PopupWrapper>

diff --git a/compare/src/components/molecules/TestImages.js b/compare/src/components/molecules/TestImages.js
@@ -21,14 +21,14 @@ class TestImages extends React.Component {
   }
 
   onImageClick (img) {
-    let { openModal } = this.props;
+    const { openModal } = this.props;
     this.props.info.targetImg = img;
     openModal(this.props.info);
   }
 
   render () {
-    let { reference, test } = this.props.info;
-    let { status, settings } = this.props;
+    const { reference, test } = this.props.info;
+    const { status, settings } = this.props;
 
     this.state.images = [
       {

diff --git a/compare/src/components/molecules/TextSearch.js b/compare/src/components/molecules/TextSearch.js
@@ -12,7 +12,7 @@ const InputWrapper = styled.div`
 
 class TextSearch extends React.Component {
   onChange (event) {
-    let value = event.target.value;
+    const value = event.target.value;
 
     if (value.length > 0) {
       this.props.findTest(value);

diff --git a/compare/src/components/organisms/TestCard.js b/compare/src/components/organisms/TestCard.js
@@ -49,8 +49,8 @@ function isRemoteOption () {
 
 export default class TestCard extends React.Component {
   render () {
-    let { pair: info, status } = this.props.test;
-    let onlyText = this.props.onlyText;
+    const { pair: info, status } = this.props.test;
+    const onlyText = this.props.onlyText;
 
     return (
       <CardWrapper id={this.props.id} status={status}>

diff --git a/compare/src/reducers/scrubber.js b/compare/src/reducers/scrubber.js
@@ -25,9 +25,9 @@ function getModeFromImgId (imgId) {
 }
 
 const scrubber = (state = {}, action) => {
+  let targetImgId = '';
   switch (action.type) {
     case 'OPEN_SCRUBBER_MODAL':
-      let targetImgId = '';
       try {
         targetImgId = action.value.targetImg.id;
       } catch (err) {}

diff --git a/compare/src/reducers/tests.js b/compare/src/reducers/tests.js
@@ -27,8 +27,8 @@ const tests = (state = {}, action) => {
       if (action.value.length > 0) {
         return Object.assign({}, state, {
           filtered: state.all.filter(e => {
-            let fileName = e.pair.fileName.toLowerCase();
-            let label = e.pair.label.toLowerCase();
+            const fileName = e.pair.fileName.toLowerCase();
+            const label = e.pair.label.toLowerCase();
 
             if (state.filterStatus !== 'all') {
               if (
@@ -46,6 +46,7 @@ const tests = (state = {}, action) => {
                 return true;
               }
             }
+            return false;
           })
         });
       }

diff --git a/core/command/index.js b/core/command/index.js
@@ -1,4 +1,5 @@
 const path = require('path');
+const _ = require('lodash');
 const logger = require('../util/logger')('COMMAND');
 
 /*
@@ -86,7 +87,7 @@ const commands = commandNames
 
 const exposedCommands = exposedCommandNames
   .filter(function commandIsDefined (commandName) {
-    return commands.hasOwnProperty(commandName);
+    return _.has(commands, commandName);
   })
   .map(function (commandName) {
     return {
@@ -97,8 +98,8 @@ const exposedCommands = exposedCommandNames
   .reduce(toObjectReducer, {});
 
 function execute (commandName, config) {
-  if (!exposedCommands.hasOwnProperty(commandName)) {
-    if (commandName.charAt(0) === '_' && commands.hasOwnProperty(commandName.substring(1))) {
+  if (!_.has(exposedCommands, commandName)) {
+    if (commandName.charAt(0) === '_' && _.has(commands, commandName.substring(1))) {
       commandName = commandName.substring(1);
     } else {
       throw new Error('The command "' + commandName + '" is not exposed publicly.');

diff --git a/core/command/remote.js b/core/command/remote.js
@@ -9,7 +9,7 @@ module.exports = {
     const projectPath = path.resolve(config.projectPath);
 
     return new Promise(function (resolve, reject) {
-      let commandStr = `node ${ssws} ${projectPath} ${MIDDLEWARE_PATH} --config=${config.backstopConfigFileName}`;
+      const commandStr = `node ${ssws} ${projectPath} ${MIDDLEWARE_PATH} --config=${config.backstopConfigFileName}`;
 
       logger.log(`Starting remote with: ${commandStr}`);
 

diff --git a/core/command/report.js b/core/command/report.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const chalk = require('chalk');
+const _ = require('lodash');
 const cloneDeep = require('lodash/cloneDeep');
 
 const allSettled = require('../util/allSettled');
@@ -80,17 +81,15 @@ function writeBrowserReport (config, reporter) {
 
     // Fixing URLs in the configuration
     const report = toAbsolute(config.html_report);
-    for (let i in browserReporter.tests) {
-      if (browserReporter.tests.hasOwnProperty(i)) {
-        const pair = browserReporter.tests[i].pair;
-        pair.reference = path.relative(report, toAbsolute(pair.reference));
-        pair.test = path.relative(report, toAbsolute(pair.test));
-
-        if (pair.diffImage) {
-          pair.diffImage = path.relative(report, toAbsolute(pair.diffImage));
-        }
+    _.forEach(browserReporter.tests, test => {
+      const pair = test.pair;
+      pair.reference = path.relative(report, toAbsolute(pair.reference));
+      pair.test = path.relative(report, toAbsolute(pair.test));
+
+      if (pair.diffImage) {
+        pair.diffImage = path.relative(report, toAbsolute(pair.diffImage));
       }
-    }
+    });
 
     const reportConfigFilename = toAbsolute(config.compareConfigFileName);
     const testReportJsonName = toAbsolute(config.bitmaps_test + '/' + config.screenshotDateTime + '/report.json');
@@ -147,12 +146,7 @@ function writeJunitReport (config, reporter) {
   const suite = builder.testSuite()
     .name(reporter.testSuite);
 
-  for (let i in reporter.tests) {
-    if (!reporter.tests.hasOwnProperty(i)) {
-      continue;
-    }
-
-    const test = reporter.tests[i];
+  _.forEach(reporter.tests, test => {
     const testCase = suite.testCase()
       .className(test.pair.selector)
       .name(' ›› ' + test.pair.label);
@@ -162,7 +156,7 @@ function writeJunitReport (config, reporter) {
       testCase.failure(error);
       testCase.error(error);
     }
-  }
+  });
 
   return new Promise(function (resolve, reject) {
     let testReportFilename = config.testReportFileName || config.ciReport.testReportFileName;
@@ -193,17 +187,15 @@ function writeJsonReport (config, reporter) {
 
     // Fixing URLs in the configuration
     const report = toAbsolute(config.json_report);
-    for (let i in jsonReporter.tests) {
-      if (jsonReporter.tests.hasOwnProperty(i)) {
-        const pair = jsonReporter.tests[i].pair;
-        pair.reference = path.relative(report, toAbsolute(pair.reference));
-        pair.test = path.relative(report, toAbsolute(pair.test));
-
-        if (pair.diffImage) {
-          pair.diffImage = path.relative(report, toAbsolute(pair.diffImage));
-        }
+    _.forEach(jsonReporter.tests, test => {
+      const pair = test.pair;
+      pair.reference = path.relative(report, toAbsolute(pair.reference));
+      pair.test = path.relative(report, toAbsolute(pair.test));
+
+      if (pair.diffImage) {
+        pair.diffImage = path.relative(report, toAbsolute(pair.diffImage));
       }
-    }
+    });
 
     return fs.writeFile(toAbsolute(config.compareJsonFileName), JSON.stringify(jsonReporter.getReport(), null, 2)).then(function () {
       logger.log('Wrote Json report to: ' + toAbsolute(config.compareJsonFileName));