Merge pull request #4 from uktrade/feature/add-test-jobs-to-build

Add test jobs to build and introduce eslint

Author: PippoRaimondi

.circleci/config.yml

@@ -3,6 +3,25 @@ aliases:
   - &node_version node:12.14.1
 
 jobs:
+  test:
+    machine:
+      docker_layer_caching: true
+    working_directory: ~/cypress-image-diff
+    steps:
+      - checkout
+      - run:
+          name: Build docker
+          command: make build
+      - run:
+          name: Run eslint
+          command: make lint-test
+      - run:
+          name: Run unit
+          command: make unit-test
+      - run:
+          name: Run eslint
+          command: make e2e-test
+
   build_and_publish:
     docker:
       - image: *node_version
@@ -21,7 +40,10 @@ workflows:
   version: 2
   cypressimagediff:
     jobs:
+      - test
       - build_and_publish:
+          requires:
+            - test
           filters:
             branches:
               only:

.eslintrc

@@ -0,0 +1,17 @@
+{
+    "extends": [
+      "airbnb-base",
+      "prettier"
+    ],
+    "rules": {
+      "prefer-object-spread": 0
+    },
+    "overrides": [
+      {
+        "files": ["src/**/*.js", "cypress/**/*.js"],
+        "rules": {
+          "no-undef": "off"
+        }
+      }
+    ]
+}

Dockerfile

@@ -0,0 +1,49 @@
+FROM node:12.18.0
+
+ENV NPM_CONFIG_LOGLEVEL    warn
+ENV NPM_CONFIG_UNSAFE_PERM true
+ENV TERM                   xterm
+ENV CHROME_VERSION         86.0.4240.75-1
+
+RUN apt-get update
+
+# Install common dependencies
+RUN apt-get install -y \
+  tzdata \
+  wget \
+  curl \
+  make \
+  git
+
+# Fix error when libpng cannot be found after CircleCI restores cache for pngquant-bin.
+# See https://github.com/tcoopman/image-webpack-loader/issues/95
+RUN wget -q -O /tmp/libpng12.deb http://mirrors.kernel.org/ubuntu/pool/main/libp/libpng/libpng12-0_1.2.54-1ubuntu1_amd64.deb \
+  && dpkg -i /tmp/libpng12.deb \
+  && rm /tmp/libpng12.deb
+
+# Install Cypress dependencies
+RUN apt-get install -y \
+  libgtk2.0-0 \
+  libnotify-dev \
+  libgconf-2-4 \
+  libnss3 \
+  libxss1 \
+  libasound2 \
+  xvfb
+
+# Install Chrome (Version 86)
+# See all available versions for download on: https://www.ubuntuupdates.org/package_logs?type=ppas&vals=8
+RUN apt-get install -y xvfb xdg-utils libgtk-3-0 lsb-release libappindicator3-1 fonts-liberation libasound2 libnspr4 libnss3 \
+  && curl https://dl.google.com/linux/chrome/deb/pool/main/g/google-chrome-stable/google-chrome-stable_${CHROME_VERSION}_amd64.deb -O \
+  && dpkg -i google-chrome-stable_${CHROME_VERSION}_amd64.deb \
+  && rm google-chrome-stable_${CHROME_VERSION}_amd64.deb \
+  && google-chrome --version
+
+WORKDIR /code
+
+# Install dev packages
+COPY package.json .
+COPY package-lock.json .
+RUN npm install
+
+COPY . /code

Makefile

@@ -0,0 +1,8 @@
+build:
+	docker-compose build
+lint-test:
+	docker-compose run --no-deps --rm test bash -c 'npm run lint'
+unit-test:
+	docker-compose run --no-deps --rm test bash -c 'npm run test:unit'
+e2e-test:
+	docker-compose run --no-deps --rm test bash -c 'npm run test:e2e'

cypress-visual-screenshots/baseline/image-diff-spec - element.png

@@ -1,14 +1,20 @@
-it('should compare screenshot of the entire page', () => {
-  cy.visit('../../report-example.html')
-  cy.compareSnapshot('wholePage')
-})
-
-it('should compare screenshot of the entire page', () => {
-  cy.visit('../../report-example.html')
-  cy.compareSnapshot('wholePageThreshold', 0.2)
-})
+describe('Visuals', () => {
+  beforeEach(() => {
+    cy.viewport(1280, 720)
+  })
 
-it('should compare screenshot from a given element', () => {
-  cy.visit('../../report-example.html')
-  cy.get('#report-header').compareSnapshot('element')
+  it('should compare screenshot of the entire page', () => {
+    cy.visit('../../report-example.html')
+    cy.compareSnapshot('wholePage')
+  })
+  
+  it('should compare screenshot of the entire page', () => {
+    cy.visit('../../report-example.html')
+    cy.compareSnapshot('wholePageThreshold', 0.2)
+  })
+  
+  it('should compare screenshot from a given element', () => {
+    cy.visit('../../report-example.html')
+    cy.get('#report-header').compareSnapshot('element')
+  })
 })

cypress-visual-screenshots/baseline/image-diff-spec - wholePage.png

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-unresolved
 const compareSnapshotCommand = require('../../dist/command')
 
 compareSnapshotCommand()

cypress-visual-screenshots/baseline/image-diff-spec - wholePageThreshold.png

@@ -0,0 +1,9 @@
+version: '3.2'
+
+services:
+  test:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    volumes:
+      - ./cypress-visual-screenshots:/code/cypress-visual-screenshots