test: setup visual tests, add bootstrap test suite

.circleci/config.yml

@@ -2,47 +2,90 @@
 #
 # Check https://circleci.com/docs/2.0/language-javascript/ for more details
 #
-version: 2
-jobs:
-  build:
-    docker:
-      # specify the version you desire here
-      - image: circleci/node:10.15-browsers
+version: 2.1
 
-    working_directory: ~/repo
+defaults: &defaults
+  working_directory: ~/repo
+  docker:
+    - image: circleci/node:10.15-browsers
 
+commands:
+  install_js:
     steps:
-      - checkout
-
-      # Download and cache dependencies
       - restore_cache:
           keys:
-          - v1-dependencies-{{ checksum "package.json" }}
-          # fallback to using the latest cache if no exact match is found
-          - v1-dependencies-
-
-      # Install dependencies
+             - v2-yarn-sha-{{ checksum "yarn.lock" }}
+             - v2-yarn-sha-
       - run:
           name: Install Dependencies
           command: yarn
 
-      # Keep cache
+jobs:
+  checkout:
+    <<: *defaults
+
+    steps:
+      - checkout
+      - install_js
+      - run:
+          name: Should not have any git not staged
+          command: git diff --exit-code
       - save_cache:
+          key: v2-yarn-sha-{{ checksum "yarn.lock" }}
           paths:
-            - node_modules
-          key: v1-dependencies-{{ checksum "package.json" }}
+            - ~/.cache/yarn/v4
+
+  test_browser:
+    <<: *defaults
+
+    steps:
+      - checkout
+      - install_js
 
-      # Run build
       - run:
           name: Build
           command: yarn build
 
-      # Run lint
       - run:
           name: Run lint
           command: yarn lint
 
-      # Run tests
       - run:
-          name: Run tests
+          name: Run tests in browsers
           command: yarn test
+
+  test_visual:
+    <<: *defaults
+
+    docker:
+      - image: circleci/node:10.15-browsers
+      - image: selenium/standalone-chrome:3.141.59
+
+    steps:
+      - checkout
+      - install_js
+
+      - run:
+          name: Build
+          command: yarn build
+
+      - run:
+          name: Run visual tests
+          command: |
+            DOCKER_TEST_URL=http://$(ip addr show lo | grep "inet\b" | awk '{print $2}' | cut -d/ -f1):3090 yarn test:visual
+            yarn argos
+
+workflows:
+  version: 2
+  pipeline:
+    jobs:
+      - checkout:
+          filters:
+            branches:
+              ignore: gh-pagest
+      - test_browser:
+          requires:
+            - checkout
+      - test_visual:
+          requires:
+            - test_browser

.gitignore

@@ -3,3 +3,6 @@ lerna-debug.log
 packages/**/src/**/styles/*-css.js
 packages/**/pkg
 coverage
+tmp
+test/visual/screenshots
+

babel.config.js

@@ -23,6 +23,19 @@ module.exports = {
           }
         ]
       ]
+    },
+    visual: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            modules: false,
+            targets: {
+              chrome: 73
+            }
+          }
+        ]
+      ]
     }
   }
 };

docker-compose.yml

@@ -0,0 +1,8 @@
+hub:
+  image: selenium/hub:3.11.0
+  ports:
+    - 4444:4444
+chrome:
+  image: selenium/node-chrome:3.11.0
+  links:
+    - hub

package.json

@@ -5,6 +5,7 @@
   "author": "Serhii Kulykov <[email protected]>",
   "license": "MIT",
   "scripts": {
+    "argos": "argos upload test/visual/screenshots/chrome --token $ARGOS_TOKEN || true",
     "build": "yarn build-styling",
     "build-styling": "./scripts/build-styling.sh",
     "deploy-storybook": "storybook-to-ghpages",
@@ -14,6 +15,7 @@
     "lint:scss": "stylelint packages/**/*.scss",
     "storybook": "start-storybook -p 6006",
     "test": "karma start",
+    "test:visual": "rimraf tmp && BABEL_ENV=visual webpack --config test/visual/webpack.config.js && rimraf test/visual/screenshots/chrome/* && vrtest run --config test/visual/vrtest.config.js --record",
     "watch": "node scripts/watcher.js"
   },
   "workspaces": [
@@ -24,12 +26,14 @@
     "@babel/plugin-transform-runtime": "^7.3.4",
     "@babel/preset-env": "^7.3.4",
     "@babel/runtime": "^7.3.4",
+    "@open-wc/testing-helpers": "^0.7.24",
     "@storybook/addon-knobs": "^5.0.3",
     "@storybook/addons": "^5.0.3",
     "@storybook/core": "^5.0.3",
     "@storybook/polymer": "^5.0.3",
     "@storybook/storybook-deployer": "^2.8.1",
     "@webcomponents/webcomponentsjs": "^2.2.4",
+    "argos-cli": "^0.1.1",
     "babel-loader": "^8.0.5",
     "chai": "^4.2.0",
     "command-line-args": "^5.0.2",
@@ -62,13 +66,16 @@
     "prettier": "^1.16.4",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
+    "rimraf": "^2.6.3",
     "sass": "^1.17.2",
     "sinon": "^7.2.7",
     "sinon-chai": "^3.3.0",
     "stylelint": "^9.10.1",
     "stylelint-config-prettier": "^5.0.0",
     "stylelint-config-twbs-bootstrap": "^0.3.0",
-    "webpack": "^4.29.6"
+    "vrtest": "^0.2.0",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.3.0"
   },
   "husky": {
     "hooks": {

packages/bootstrap/package.json

@@ -17,6 +17,7 @@
     "lit-element": "^2.0.1"
   },
   "devDependencies": {
+    "@open-wc/testing-helpers": "^0.7.24",
     "@pika/pack": "^0.3.0",
     "@pika/plugin-build-web": "^0.3.0",
     "@pika/plugin-bundle-web": "^0.3.0",

packages/bootstrap/tests/abs-button.test.js

@@ -0,0 +1,60 @@
+import { css } from 'lit-element';
+import { html, defineCE, unsafeStatic } from '@open-wc/testing-helpers';
+import { AbsButton } from '../src/components/abs-button.js';
+import { colors, variants } from '../theme/theme.js';
+
+const Button = defineCE(
+  class extends AbsButton {
+    static get styles() {
+      return [
+        super.styles,
+        css`
+          :host {
+            margin: 5px;
+          }
+        `
+      ];
+    }
+  }
+);
+
+const buttonTag = unsafeStatic(Button);
+
+const fixture = ({
+  theme = '',
+  size = '',
+  disabled = false,
+  link = null,
+  outline = false,
+  label = 'button'
+}) => {
+  /* eslint-disable lit/binding-positions, lit/no-invalid-html */
+  return html`
+    <${buttonTag}
+      .disabled="${disabled}"
+      .link="${link}"
+      theme="${theme}"
+      size="${size}"
+      ?outline="${outline}"
+    >
+      ${label}
+    </${buttonTag}>
+  `;
+};
+
+const tpl = Object.values(colors).map(theme => {
+  return html`
+    <div>
+      ${fixture({ theme, label: theme || 'button' })}
+      ${fixture({ theme, disabled: true, label: 'disabled' })}
+      ${fixture({ theme, outline: true, label: 'outline' })}
+      ${fixture({ theme, disabled: true, outline: true, label: 'outline disabled' })}
+      ${fixture({ theme, link: 'https://example.com', label: 'Link' })}
+      ${variants.map(size => fixture({ theme, size, label: size }))}
+    </div>
+  `;
+});
+
+export default html`
+  ${tpl}
+`;

packages/bootstrap/tests/abs-checkbox.test.js

@@ -0,0 +1,57 @@
+import { css } from 'lit-element';
+import { html, defineCE, unsafeStatic } from '@open-wc/testing-helpers';
+import { AbsCheckbox } from '../src/components/abs-checkbox.js';
+import { themes } from '../theme/theme.js';
+
+const Checkbox = defineCE(
+  class extends AbsCheckbox {
+    static get styles() {
+      return [
+        super.styles,
+        css`
+          :host {
+            margin: 5px;
+          }
+        `
+      ];
+    }
+  }
+);
+
+const checkboxTag = unsafeStatic(Checkbox);
+
+const fixture = ({
+  theme = '',
+  disabled = false,
+  checked = false,
+  indeterminate = false,
+  label = 'checkbox'
+}) => {
+  /* eslint-disable lit/binding-positions, lit/no-invalid-html */
+  return html`
+    <${checkboxTag}
+      .disabled="${disabled}"
+      .checked="${checked}"
+      .indeterminate="${indeterminate}"
+      theme="${theme}"
+      >
+      ${label}
+    </${checkboxTag}>
+  `;
+};
+
+const tpl = themes.map(theme => {
+  return html`
+    <div>
+      ${fixture({ theme, label: theme })} ${fixture({ theme, disabled: true, label: 'disabled' })}
+      ${fixture({ theme, checked: true, label: 'checked' })}
+      ${fixture({ theme, checked: true, disabled: true, label: 'checked disabled' })}
+      ${fixture({ theme, indeterminate: true, label: 'indeterminate' })}
+      ${fixture({ theme, indeterminate: true, disabled: true, label: 'indeterminate disabled' })}
+    </div>
+  `;
+});
+
+export default html`
+  ${tpl}
+`;

packages/bootstrap/tests/abs-progress.test.js

@@ -0,0 +1,58 @@
+import { css } from 'lit-element';
+import { html, defineCE, unsafeStatic } from '@open-wc/testing-helpers';
+import { AbsProgress } from '../src/components/abs-progress.js';
+import { themes, variants } from '../theme/theme.js';
+
+const Progress = defineCE(
+  class extends AbsProgress {
+    static get styles() {
+      return [
+        super.styles,
+        /* add margin and disable transitions for visual tests */
+        css`
+          :host {
+            margin: 5px;
+          }
+
+          progress::-webkit-progress-value {
+            transition: none;
+          }
+
+          progress::-moz-progress-bar {
+            transition: none;
+          }
+
+          progress::-ms-fill {
+            transition: none;
+          }
+        `
+      ];
+    }
+  }
+);
+
+const progressTag = unsafeStatic(Progress);
+
+const fixture = ({ theme = '', size = '', value = 50, max = 100, striped = false }) => {
+  /* eslint-disable lit/binding-positions, lit/no-invalid-html */
+  return html`
+    <${progressTag}
+      .value="${value}"
+      .max="${max}"
+      theme="${theme}"
+      size="${size}"
+      ?striped="${striped}"
+    ></${progressTag}>
+  `;
+};
+
+const tpl = themes.map(theme => {
+  return html`
+    ${fixture({ theme })} ${fixture({ theme, striped: true })}
+    ${variants.map(size => fixture({ theme, size }))}
+  `;
+});
+
+export default html`
+  ${tpl}
+`;