Adding Applitools Storybook Visual Testing to Vue-material Docs

.gitignore

@@ -8,3 +8,5 @@ yarn-debug.log
 npm-debug.log
 .vscode
 .idea
+cypress/videos/**
+cypress/screenshots/**

.travis.yml

@@ -4,43 +4,56 @@ node_js:
 sudo: false
 env:
   global:
-  - NODE_ENV="CI"
-  - CC_TEST_REPORTER_ID=8e14ec33d4a45de3a712db3dcdbef17329465c636cd58e740d871e29b5a121f0
-  - secure: n8S9oRQc7C9vq6UsQKFS3dclz83GohtPH5iF0xUkOurhgIrZ8NwFtxYNoi5BDHuxCo/HdVd1vN8hKBcyPdsuVZstvA39O8xbtdDs+pgDAPDmoVLCkEK10yva+aYvf8fdleJi40mcoucgtWCBYkOwMZlbBqwNZ7pf9CT3QMzjvbnC7skP1A5Ju0PXm43eFgZ8OEBWEd0qHl8cFIwOljWcYcwErdcq9Xo0VNwbp8cELTAM+GkNbGLtSJmArG3dkGxb1MINb+FkjjW94j2oF3U1QjbdTvQ2f/gbrrg0i9el+T1mLdukGoaZRpG3LzBTYs9e37MyIqgIm3kwCwjYTJP4Uqv9cI6egSnBDsuQ314LEyKkQeYFIXzeKEoNJ8PnROY20TjFmoAvNoA09hbgdrfcCALn5Tpp6PjayD0pb7+HWSfY0tEqJsLWzArRsKRXSozYud8sDMyySyQTAtAG4AxsDR5+wFz1T7faZP61JJulHJYZY5UbmjDPe8FHUq8SNrxwOFYa59jb1yCyGftTgWfLCNrYL9JOw0jMPTVuCeo94l0yCF5N8Mo18iYnnZd/6btWR0OO7Q3CgPJQGUMxLx6UhfYiIlhDq4OKsAEUD/+ZQDfWueM0lmHyn3tsRi9bVwNvf5HlFYkgc5x4UbkGUsCQUjM8ceoKlnfhup72fyWesQI=
+    - NODE_ENV="CI"
+    - CC_TEST_REPORTER_ID=8e14ec33d4a45de3a712db3dcdbef17329465c636cd58e740d871e29b5a121f0
+    - secure: n8S9oRQc7C9vq6UsQKFS3dclz83GohtPH5iF0xUkOurhgIrZ8NwFtxYNoi5BDHuxCo/HdVd1vN8hKBcyPdsuVZstvA39O8xbtdDs+pgDAPDmoVLCkEK10yva+aYvf8fdleJi40mcoucgtWCBYkOwMZlbBqwNZ7pf9CT3QMzjvbnC7skP1A5Ju0PXm43eFgZ8OEBWEd0qHl8cFIwOljWcYcwErdcq9Xo0VNwbp8cELTAM+GkNbGLtSJmArG3dkGxb1MINb+FkjjW94j2oF3U1QjbdTvQ2f/gbrrg0i9el+T1mLdukGoaZRpG3LzBTYs9e37MyIqgIm3kwCwjYTJP4Uqv9cI6egSnBDsuQ314LEyKkQeYFIXzeKEoNJ8PnROY20TjFmoAvNoA09hbgdrfcCALn5Tpp6PjayD0pb7+HWSfY0tEqJsLWzArRsKRXSozYud8sDMyySyQTAtAG4AxsDR5+wFz1T7faZP61JJulHJYZY5UbmjDPe8FHUq8SNrxwOFYa59jb1yCyGftTgWfLCNrYL9JOw0jMPTVuCeo94l0yCF5N8Mo18iYnnZd/6btWR0OO7Q3CgPJQGUMxLx6UhfYiIlhDq4OKsAEUD/+ZQDfWueM0lmHyn3tsRi9bVwNvf5HlFYkgc5x4UbkGUsCQUjM8ceoKlnfhup72fyWesQI=
 addons:
   code_climate:
     repo_token: 8e14ec33d4a45de3a712db3dcdbef17329465c636cd58e740d871e29b5a121f0
-before_install:
-  - curl -o- -L https://yarnpkg.com/install.sh | bash -s
-  - export PATH="$HOME/.yarn/bin:$PATH"
-  - yarn -v
-  - npm i -g npm
-install:
-  - yarn add --dev --ignore-scripts babel-cli
-  - yarn --ignore-scripts
-before_script:
-  - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
-  - chmod +x ./cc-test-reporter
-  - ./cc-test-reporter before-build
-script:
-  - npm rebuild node-sass
-  - yarn lint
-  - yarn coverage
-  - yarn build
-after_success:
-  - if [ "$TRAVIS_PULL_REQUEST" == "false" ]; then ./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT; fi
-  - yarn changelog
-  - RELEASE_NOTES=`cat RELEASE_NOTES.md`
-  - PACKAGE_VERSION=$(grep '"version":' package.json | cut -d\" -f4)
-  - yarn github-release -- delete \
-      --owner=vuematerial \
-      --repo=vue-material \
-      --tag="v${PACKAGE_VERSION}" \
-      --name="v${PACKAGE_VERSION}"
-  - yarn github-release -- upload \
-      --owner=vuematerial \
-      --repo=vue-material \
-      --tag="${PACKAGE_VERSION}" \
-      --name="v${PACKAGE_VERSION}" \
-      --body="v${RELEASE_NOTES}"
-  - rm -rf RELEASE_NOTES.md CHANGELOG.md
+  apt:
+    packages:
+      - libgconf-2-4
+cache:
+  # cache both npm modules and Cypress binary
+  directories:
+    - ~/.npm
+    - ~/.cache
+  override:
+    - npm ci
+    - npm run cy:verify
+jobs:
+  include:
+    - stage: Visual test
+      env:
+        - STAGE_NAME="Applitools Storybook on Travis CI"
+      script:
+        - yarn dev & wait-on http://localhost:8080
+        - yarn run e2e-test -- $STAGE_NAME
+        - kill $(jobs -p) || true
+    - stage: Unit test
+      before_script:
+        - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
+        - chmod +x ./cc-test-reporter
+        - ./cc-test-reporter before-build
+      script:
+        - npm rebuild node-sass
+        - yarn lint
+        - yarn coverage
+        - yarn build
+      after_success:
+        - if [ "$TRAVIS_PULL_REQUEST" == "false" ]; then ./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT; fi
+        - yarn changelog
+        - RELEASE_NOTES=`cat RELEASE_NOTES.md`
+        - PACKAGE_VERSION=$(grep '"version":' package.json | cut -d\" -f4)
+        - yarn github-release -- delete \
+          --owner=vuematerial \
+          --repo=vue-material \
+          --tag="v${PACKAGE_VERSION}" \
+          --name="v${PACKAGE_VERSION}"
+        - yarn github-release -- upload \
+          --owner=vuematerial \
+          --repo=vue-material \
+          --tag="${PACKAGE_VERSION}" \
+          --name="v${PACKAGE_VERSION}" \
+          --body="v${RELEASE_NOTES}"
+        - rm -rf RELEASE_NOTES.md CHANGELOG.md

cypress.json

@@ -0,0 +1,5 @@
+{
+  "baseUrl": "http://localhost:8080",
+  "video": false,
+  "blacklistHosts": ["api.codefund.app"]
+}

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/integration/examples/visual-testing.spec.js

@@ -0,0 +1,44 @@
+/// <reference types="Cypress" />
+
+context('Visual testing', () => {
+  before(() => {
+    cy.visit('/');
+  });
+
+  afterEach(() => {
+    cy.eyesClose();
+  });
+
+  it('shows the landing page', () => {
+    cy.wait(1000);
+    cy.eyesOpen({
+      appName: 'Vue Material',
+      testName: 'Shows the landing page',
+      browser: { width: 800, height: 600 }
+    });
+    cy.eyesCheckWindow('Landing page');
+  });
+
+  it('shows the getting started page', () => {
+    cy.get('[data-cy=gettingStarted]').click();
+    cy.wait(1000);
+    cy.eyesOpen({
+      appName: 'Vue Material',
+      testName: 'Shows the getting started page',
+      browser: { width: 800, height: 600 }
+    });
+    cy.eyesCheckWindow('Getting Started page');
+  });
+
+  it('shows the components page', () => {
+    cy.go('back');
+    cy.get('[data-cy=components]').click();
+    cy.wait(1000);
+    cy.eyesOpen({
+      appName: 'Vue Material',
+      testName: 'Shows the components page',
+      browser: { width: 800, height: 600 }
+    });
+    cy.eyesCheckWindow('Component page');
+  });
+});

cypress/plugins/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}
+
+
+require('@applitools/eyes-cypress')(module);

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,23 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+
+import '@applitools/eyes-cypress/commands'
+
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

docs/app/pages/Home/HomeHeader.vue

@@ -10,8 +10,16 @@
       <p>{{ $t('pages.home.slogan') }}</p>
 
       <div class="home-actions">
-        <md-button class="md-button-spaced md-plain md-raised" to="/getting-started">{{ $t('pages.gettingStarted.title') }}</md-button>
-        <md-button class="md-button-spaced md-plain md-raised" to="/components">{{ $t('pages.components.title') }}</md-button>
+        <md-button
+          class="md-button-spaced md-plain md-raised"
+          data-cy="gettingStarted"
+          to="/getting-started"
+        >{{ $t('pages.gettingStarted.title') }}</md-button>
+        <md-button
+          class="md-button-spaced md-plain md-raised"
+          data-cy="components"
+          to="/components"
+        >{{ $t('pages.components.title') }}</md-button>
       </div>
     </div>
   </header>

package.json

@@ -33,15 +33,18 @@
     "release": "sh build/release.sh",
     "new-component": "babel-node build/new-component.js",
     "github-release": "github-release",
-    "commit": "git-cz"
+    "commit": "git-cz",
+    "e2e-test": "cypress run"
   },
   "engines": {
     "node": ">= 7.0"
   },
   "peerDependencies": {
     "vue": "^2.5.0"
   },
-  "dependencies": {},
+  "dependencies": {
+    "@applitools/eyes-cypress": "^3.6.50"
+  },
   "devDependencies": {
     "autoprefixer": "^7.2.6",
     "avoriaz": "^6.3.0",
@@ -65,6 +68,7 @@
     "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^0.28.11",
     "css-mqpacker": "^6.0.2",
+    "cypress": "^3.4.1",
     "cz-conventional-changelog": "^2.1.0",
     "date-fns": "^2.0.0-alpha.27",
     "deepmerge": "^3.2.0",
@@ -114,6 +118,7 @@
     "vuelidate": "^0.7.4",
     "vuex": "^3.1.1",
     "vuex-router-sync": "^5.0.0",
+    "wait-on": "^3.2.0",
     "webpack": "^3.12.0",
     "webpack-bundle-analyzer": "^2.13.1",
     "webpack-dev-middleware": "^2.0.6",
@@ -142,6 +147,10 @@
       "json",
       "vue"
     ],
+    "modulePathIgnorePatterns": [
+      "<rootDir>/cypress/"
+    ],
+    "testURL": "http://localhost/",
     "transform": {
       "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
       ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue"