backstop tests

Author: zfletch

.eslintignore

@@ -1,5 +1,5 @@
 src/index.js
 src/serviceWorker.js
-src/setupTests.js
 build/
 public/
+test/backstop_data

.eslintrc.json

@@ -3,26 +3,5 @@
   "parser": "babel-eslint",
   "rules": {
     "react/jsx-filename-extension": [1, { "extensions": [".js"] }]
-  },
- "overrides": [
-    {
-      "files": [
-        "**/*.test.js"
-      ],
-      "env": {
-        "jest": true
-      },
-      "plugins": ["jest"],
-      "rules": {
-        "jest/no-disabled-tests": "warn",
-        "jest/no-focused-tests": "error",
-        "jest/no-identical-title": "error",
-        "jest/prefer-to-have-length": "warn",
-        "jest/valid-expect": "error"
-      },
-      "globals": {
-        "window": true
-      }
-    }
-  ]
+  }
 }

.github/workflows/deploy.yml

@@ -18,10 +18,8 @@ jobs:
       - name: Install dependencies
         run: yarn install
 
-      # - name: Run tests
-      #   run: yarn test --coverage
-      #   env:
-      #     CI: true
+      - name: Run tests
+        run: yarn test
 
       - name: Build GitHub
         run: yarn build

.github/workflows/test.yml

@@ -25,10 +25,8 @@ jobs:
       # - name: Audit dependencies
       #   - run: yarn audit
 
-      # - name: Run tests
-      #   run: yarn test --coverage
-      #   env:
-      #     CI: true
+      - name: Run tests
+        run: yarn test
 
       - name: Build
         run: yarn build

Dockerfile-test

@@ -0,0 +1,6 @@
+FROM node:14.2.0
+
+ADD . /app
+WORKDIR /app
+
+RUN yarn install

docker-compose.test.yml

@@ -0,0 +1,18 @@
+version: '3'
+services:
+  test:
+    build:
+      context: .
+      dockerfile: Dockerfile-test
+    volumes:
+      - .:/app
+    command: yarn start
+    ports:
+      - 3000:3000
+    stdin_open: true # https://github.com/facebook/create-react-app/issues/8688
+  backstop:
+    image: backstopjs/backstopjs:5.0.1
+    volumes:
+      - ./test:/src
+    depends_on:
+      - test

package.json

@@ -4,9 +4,6 @@
   "private": true,
   "homepage": "https://perseids-project.github.io/treebank-wordcloud/",
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.3",
-    "@testing-library/react": "^10.4.8",
-    "@testing-library/user-event": "^12.1.1",
     "bootstrap": "^4.5.2",
     "cross-fetch": "^3.0.5",
     "eslint-config-airbnb": "^18.2.0",
@@ -18,7 +15,6 @@
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
-    "react-test-renderer": "^16.13.1",
     "react-wordcloud": "^1.2.7",
     "typeface-arimo": "^0.0.72",
     "typeface-tinos": "^0.0.72"
@@ -32,7 +28,8 @@
     "cleanup": "rm -rf node_modules/gh-pages/.cache",
     "start": "react-scripts start",
     "build": "react-scripts build && cp build/index.html build/404.html",
-    "test": "react-scripts test",
+    "test": "bash test/test.sh",
+    "approve-changes": "bash test/approve-changes.sh",
     "lint": "eslint --ext=js --ext=jsx .",
     "eject": "react-scripts eject"
   },

src/setupTests.js

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+docker-compose -f docker-compose.test.yml run backstop approve

test/approve-changes.sh

@@ -0,0 +1,92 @@
+{
+  "id": "test",
+  "viewports": [
+    {
+      "label": "phone",
+      "width": 320,
+      "height": 480
+    },
+    {
+      "label": "tablet",
+      "width": 1024,
+      "height": 768
+    }
+  ],
+  "onBeforeScript": "puppet/onBefore.js",
+  "onReadyScript": "puppet/onReady.js",
+  "scenarios": [
+    {
+      "label": "Home page renders",
+      "cookiePath": "backstop_data/engine_scripts/cookies.json",
+      "url": "http://test:3000/",
+      "referenceUrl": "",
+      "readyEvent": "",
+      "readySelector": "",
+      "delay": 2000,
+      "hideSelectors": [],
+      "removeSelectors": [],
+      "hoverSelector": "",
+      "clickSelector": "",
+      "postInteractionWait": 0,
+      "selectors": [],
+      "selectorExpansion": true,
+      "expect": 0,
+      "misMatchThreshold" : 0.1,
+      "requireSameDimensions": true
+    },
+    {
+      "label": "Word cloud renders",
+      "cookiePath": "backstop_data/engine_scripts/cookies.json",
+      "url": "http://test:3000/aHR0cHM6Ly9wZXJzZWlkcy1wdWJsaWNhdGlvbnMuZ2l0aHViLmlvL2dvcm1hbi10cmVlcy94bWwvaGR0LTEtMS0xOS1idTMueG1s",
+      "referenceUrl": "",
+      "readyEvent": "",
+      "readySelector": "",
+      "delay": 2000,
+      "hideSelectors": [],
+      "removeSelectors": [],
+      "hoverSelector": "",
+      "clickSelector": "",
+      "postInteractionWait": 0,
+      "selectors": [],
+      "selectorExpansion": true,
+      "expect": 0,
+      "misMatchThreshold" : 0.1,
+      "requireSameDimensions": true
+    },
+    {
+      "label": "Word cloud renders given an index",
+      "cookiePath": "backstop_data/engine_scripts/cookies.json",
+      "url": "http://test:3000/aHR0cHM6Ly9wZXJzZWlkcy1wdWJsaWNhdGlvbnMuZ2l0aHViLmlvL2dvcm1hbi10cmVlcy94bWwvaGR0LTEtMS0xOS1idTMueG1s/18",
+      "referenceUrl": "",
+      "readyEvent": "",
+      "readySelector": "",
+      "delay": 2000,
+      "hideSelectors": [],
+      "removeSelectors": [],
+      "hoverSelector": "",
+      "clickSelector": "",
+      "postInteractionWait": 0,
+      "selectors": [],
+      "selectorExpansion": true,
+      "expect": 0,
+      "misMatchThreshold" : 0.1,
+      "requireSameDimensions": true
+    }
+  ],
+  "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": 50,
+  "debug": false,
+  "debugWindow": false
+}