[UI] Clean up backstop js usages (#3113)

frontend/.gitignore

@@ -8,8 +8,6 @@ swagger-codegen-cli.jar
 
 # testing
 /coverage
-backstop_data/html_report/
-backstop_data/bitmaps_test/
 
 # production
 /build

frontend/Dockerfile

@@ -9,21 +9,6 @@ COPY . .
 
 WORKDIR ./frontend
 
-# Workaround for ppc64le since phantomjs does not support ppc64le
-RUN if [ "$(uname -m)" = "ppc64le" ]; then \
-        wget --no-verbose -O /tmp/phantomjs-2.1.1-linux-ppc64.tar.bz2 https://github.com/ibmsoe/phantomjs/releases/download/2.1.1/phantomjs-2.1.1-linux-ppc64.tar.bz2 \
-        && tar xf /tmp/phantomjs-2.1.1-linux-ppc64.tar.bz2 -C /usr/local/ \
-        && ln -s /usr/local/phantomjs-2.1.1-linux-ppc64/bin/phantomjs /usr/bin/phantomjs; \
-    fi
-
-# Workaround for aarch64 since phantomjs does not support aarch64
-RUN if [ "$(uname -m)" = "aarch64" ]; then \
-        wget --no-verbose -O /tmp/phantomjs_2.1.1_arm64.tgz https://github.com/fg2it/phantomjs-on-raspberry/releases/download/v2.1.1-jessie-stretch-arm64/phantomjs_2.1.1_arm64.tgz \
-        && tar zxvf /tmp/phantomjs_2.1.1_arm64.tgz -C /usr/local/bin \
-        && cp /usr/local/bin/phantomjs /usr/bin/phantomjs \
-        && chmod +x /usr/bin/phantomjs; \
-    fi
-
 RUN npm install && npm run postinstall
 RUN npm run build
 

frontend/backstop.json

@@ -1,62 +0,0 @@
-{
-  "id": "pipelines",
-  "viewports": [
-    {
-      "width": 1024,
-      "height": 768
-    }
-  ],
-  "onReadyScript": "steps.js",
-  "scenarios": [
-    {
-      "label": "initial state",
-      "url": "http://localhost:3000"
-    },
-    {
-      "label": "hover on first row",
-      "url": "http://localhost:3000",
-      "steps": [
-        { "action": "hover", "selector": ".row" }
-      ]
-    },
-    {
-      "label": "select one row",
-      "url": "http://localhost:3000",
-      "steps": [
-        { "action": "click", "selector": ".row" }
-      ]
-    },
-    {
-      "label": "select multiple rows",
-      "url": "http://localhost:3000",
-      "steps": [
-        { "action": "click", "selector": ".row" },
-        { "action": "click", "selector": ".row:nth-of-type(2) td" },
-        { "action": "click", "selector": ".row:nth-of-type(5) td" }
-      ]
-    },
-    {
-      "label": "open upload dialog",
-      "url": "http://localhost:3000",
-      "steps": [
-        { "action": "click", "selector": "#uploadBtn" }
-      ]
-    }
-  ],
-  "paths": {
-    "bitmaps_reference": "backstop_data/bitmaps_reference",
-    "bitmaps_test": "backstop_data/bitmaps_test",
-    "engine_scripts": "backstop_data/engine_scripts",
-    "html_report": "backstop_data/html_report",
-    "ci_report": "backstop_data/ci_report"
-  },
-  "report": ["browser"],
-  "engine": "puppeteer",
-  "engineOptions": {
-    "args": ["--no-sandbox"]
-  },
-  "asyncCaptureLimit": 5,
-  "asyncCompareLimit": 5,
-  "debug": false,
-  "debugWindow": false
-}

frontend/backstop.ts

@@ -1,73 +0,0 @@
-/*
- * Copyright 2018 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-// tslint:disable-next-line:no-var-requires
-const backstopjs = require('backstopjs');
-const url = 'http://localhost:3000';
-
-const config = {
-  asyncCaptureLimit: 10,
-  asyncCompareLimit: 50,
-  debug: false,
-  debugWindow: false,
-  engine: 'puppeteer',
-  engineOptions: {
-    args: ['--no-sandbox'],
-  },
-  id: 'pipelines',
-  onReadyScript: 'steps.js',
-  paths: {
-    bitmaps_reference: 'backstop_data/bitmaps_reference',
-    bitmaps_test: 'backstop_data/bitmaps_test',
-    ci_report: 'backstop_data/ci_report',
-    engine_scripts: 'backstop_data/engine_scripts',
-    html_report: 'backstop_data/html_report',
-  },
-  report: ['browser'],
-  scenarios: [
-    {
-      label: 'initial state',
-      url,
-    },
-    {
-      label: 'hover on first row',
-      steps: [{ action: 'hover', selector: '.tableRow' }],
-      url,
-    },
-    {
-      label: 'select one row',
-      steps: [{ action: 'click', selector: '.tableRow' }],
-      url,
-    },
-    {
-      label: 'select multiple rows',
-      steps: [
-        { action: 'click', selector: '.tableRow' },
-        { action: 'click', selector: `.tableRow:nth-of-type(2)` },
-        { action: 'click', selector: `.tableRow:nth-of-type(5)` },
-      ],
-      url,
-    },
-    {
-      label: 'open upload dialog',
-      steps: [{ action: 'click', selector: '#uploadBtn' }, { action: 'pause' }],
-      url,
-    },
-  ],
-  viewports: [{ width: 1024, height: 768 }],
-};
-
-backstopjs('test', { config });

frontend/backstop_data/engine_scripts/steps.js

@@ -1,41 +0,0 @@
-/*
- * Copyright 2018 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * https://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-module.exports = async (page, scenario) => {
-  const steps = scenario.steps;
-  if (!steps || !steps.length) {
-    return;
-  }
-  for (const s of steps) {
-    console.log('performing action: ' + s.action + ' on: ' + s.selector);
-    switch (s.action) {
-      case 'click':
-        await page.click(s.selector);
-        break;
-      case 'hover':
-        await page.hover(s.selector);
-        break;
-      case 'waitFor':
-        await page.waitFor(s.selector);
-        break;
-      case 'pause':
-        await page.waitFor(300);
-        break;
-      default:
-        throw new Error('Unknown action: ' + s.action);
-    }
-  }
-};

frontend/package.json

@@ -56,9 +56,7 @@
     "test:server:coverage": "cd ./server && npm test -- --coverage && cd ..",
     "test:coverage": "npm test -- --coverage && npm run test:server:coverage",
     "test:ci": "npm run format:check && npm run lint && npm run test:coverage",
-    "test:ci:prow": "npm set unsafe-perm true && npm ci && npm run test:ci && ./scripts/report-coveralls.sh",
-    "vr-approve": "backstop approve",
-    "vr-test": "ts-node -O '{\"module\": \"commonjs\"}' backstop.ts"
+    "test:ci:prow": "npm set unsafe-perm true && npm ci && npm run test:ci && ./scripts/report-coveralls.sh"
   },
   "devDependencies": {
     "@google-cloud/storage": "^4.1.3",
@@ -82,7 +80,6 @@
     "@types/react-router-dom": "^4.3.1",
     "@types/react-test-renderer": "^16.0.2",
     "@types/react-virtualized": "^9.18.7",
-    "backstopjs": "^3.5.16",
     "coveralls": "^3.0.2",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.15.1",

frontend/tsconfig.json

@@ -24,8 +24,6 @@
     "__mocks__",
     "acceptance-tests",
     "analyze_bundle.js",
-    "backstop.ts",
-    "backstop_data",
     "build",
     "coverage",
     "gen_licenses.js",

frontend/tslint.json

@@ -9,7 +9,6 @@
       "src/apis/**/*.ts",
       "src/config/**/*.json",
       "coverage/lcov-report/*.js",
-      "backstop_data/**/*.js",
       "generated/**",
       "src/api/*.ts",
       "scripts/**",