Add visual testing (#725)

* build: add eslint config

* test: update test file (styling) and helper

* feat: add visual test dep

* test: update runner config for visual tests dep

* test: add visual tests for navigation, endpoints, and operations

* test: add baselint screenshots for visual tests

* test: increase visual test render timeout to 500ms

* test: set visual test threshold to 0.1

* test: increase visual test render timeout to 1000ms

* build: adding macos to deployment pipeline

* test: testing threshold at 0.5 for visual tests

* test: testing threshold at 1 for visual tests

* test: update visual baselines

* test: fix tets, run only funcional tests

* test: add test script for visual tests

* test: add some awaits to tests

* test: increase timeout in a test

* test: added multiple awaits

* test: add an await

.eslintrc.js

@@ -0,0 +1,241 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+  'env': {
+    'browser': true,
+    'es2021': true,
+    'mocha': true,
+  },
+  'extends': 'eslint:recommended',
+  'parserOptions': {
+    'ecmaVersion': 12,
+    'sourceType': 'module',
+  },
+  'rules': {
+    'accessor-pairs': 'error',
+    'array-bracket-newline': 'error',
+    'array-bracket-spacing': ['error', 'never'],
+    'array-callback-return': 'error',
+    'array-element-newline': [
+      'error', {
+        'ArrayExpression': 'consistent',
+        'ArrayPattern': { 'multiline': true },
+      },
+    ],
+    'arrow-body-style': 'error',
+    'arrow-parens': 'error',
+    'arrow-spacing': [
+      'error', {
+        'after': true,
+        'before': true,
+      },
+    ],
+    'block-scoped-var': 'error',
+    'block-spacing': 'error',
+    'brace-style': ['error', '1tbs'],
+    'camelcase': 'error',
+    'capitalized-comments': 'off',
+    'class-methods-use-this': 'error',
+    'comma-dangle': 'off',
+    'comma-spacing': [
+      'error', {
+        'after': true,
+        'before': false,
+      },
+    ],
+    'comma-style': ['error', 'last'],
+    'complexity': 'error',
+    'computed-property-spacing': ['error', 'never'],
+    'consistent-return': [
+      'error', {
+        'treatUndefinedAsUnspecified': false,
+      },
+    ],
+    'consistent-this': 'error',
+    'curly': 'error',
+    'default-case': 'error',
+    'default-case-last': 'error',
+    'default-param-last': 'error',
+    'dot-location': 'error',
+    'dot-notation': 'error',
+    'eol-last': 'error',
+    'eqeqeq': 'error',
+    'func-call-spacing': 'error',
+    'func-name-matching': 'error',
+    'func-names': 'error',
+    'func-style': 'error',
+    'function-paren-newline': 'error',
+    'generator-star-spacing': 'error',
+    'grouped-accessor-pairs': 'error',
+    'guard-for-in': 'error',
+    'id-denylist': 'error',
+    'id-length': 'off',
+    'id-match': 'error',
+    'implicit-arrow-linebreak': ['error', 'beside'],
+    'indent': 'off',
+    'init-declarations': 'off',
+    'jsx-quotes': 'error',
+    'key-spacing': 'error',
+    'keyword-spacing': [
+      'error', {
+        'after': true,
+        'before': true,
+      },
+    ],
+    'line-comment-position': 'error',
+    'linebreak-style': ['error', 'unix'],
+    'lines-around-comment': 'off',
+    'lines-between-class-members': ['error', 'always'],
+    'max-classes-per-file': 'error',
+    'max-depth': 'error',
+    'max-len': 'off',
+    'max-lines': 'off',
+    'max-lines-per-function': 'off',
+    'max-nested-callbacks': 'error',
+    'max-statements': 'off',
+    'max-statements-per-line': 'error',
+    'multiline-comment-style': 'off',
+    'multiline-ternary': ['error', 'never'],
+    'new-parens': 'error',
+    'newline-per-chained-call': 'error',
+    'no-alert': 'error',
+    'no-array-constructor': 'error',
+    'no-await-in-loop': 'error',
+    'no-bitwise': 'error',
+    'no-caller': 'error',
+    'no-confusing-arrow': 'error',
+    'no-console': 'error',
+    'no-constructor-return': 'error',
+    'no-continue': 'error',
+    'no-div-regex': 'error',
+    'no-duplicate-imports': 'error',
+    'no-else-return': 'error',
+    'no-empty-function': 'error',
+    'no-eq-null': 'error',
+    'no-eval': 'error',
+    'no-extend-native': 'error',
+    'no-extra-bind': 'error',
+    'no-extra-label': 'error',
+    'no-extra-parens': 'off',
+    'no-floating-decimal': 'error',
+    'no-implicit-globals': 'error',
+    'no-implied-eval': 'error',
+    'no-inline-comments': 'off',
+    'no-invalid-this': 'error',
+    'no-iterator': 'error',
+    'no-label-var': 'error',
+    'no-labels': 'error',
+    'no-lone-blocks': 'error',
+    'no-lonely-if': 'error',
+    'no-loop-func': 'error',
+    'no-loss-of-precision': 'error',
+    'no-magic-numbers': 'off',
+    'no-mixed-operators': 'error',
+    'no-multi-assign': 'error',
+    'no-multi-spaces': 'error',
+    'no-multi-str': 'error',
+    'no-multiple-empty-lines': 'error',
+    'no-negated-condition': 'error',
+    'no-nested-ternary': 'error',
+    'no-new': 'error',
+    'no-new-func': 'error',
+    'no-new-object': 'error',
+    'no-new-wrappers': 'error',
+    'no-nonoctal-decimal-escape': 'error',
+    'no-octal-escape': 'error',
+    'no-param-reassign': 'error',
+    'no-plusplus': 'off',
+    'no-promise-executor-return': 'error',
+    'no-proto': 'error',
+    'no-restricted-exports': 'error',
+    'no-restricted-globals': 'error',
+    'no-restricted-imports': 'error',
+    'no-restricted-properties': 'error',
+    'no-restricted-syntax': 'error',
+    'no-return-assign': 'error',
+    'no-return-await': 'error',
+    'no-script-url': 'error',
+    'no-self-compare': 'error',
+    'no-sequences': 'error',
+    'no-shadow': 'error',
+    'no-tabs': 'error',
+    'no-template-curly-in-string': 'error',
+    'no-ternary': 'off',
+    'no-throw-literal': 'error',
+    'no-trailing-spaces': 'error',
+    'no-undef-init': 'error',
+    'no-undefined': 'off',
+    'no-underscore-dangle': 'off',
+    'no-unmodified-loop-condition': 'error',
+    'no-unneeded-ternary': 'error',
+    'no-unreachable-loop': 'error',
+    'no-unsafe-optional-chaining': 'error',
+    'no-unused-expressions': 'error',
+    'no-use-before-define': 'error',
+    'no-useless-backreference': 'error',
+    'no-useless-call': 'error',
+    'no-useless-computed-key': 'error',
+    'no-useless-concat': 'error',
+    'no-useless-constructor': 'error',
+    'no-useless-rename': 'error',
+    'no-useless-return': 'error',
+    'no-var': 'error',
+    'no-void': 'error',
+    'no-whitespace-before-property': 'error',
+    'nonblock-statement-body-position': 'error',
+    'object-curly-newline': 'error',
+    'object-curly-spacing': ['error', 'always'],
+    'object-shorthand': 'error',
+    'one-var': 'off',
+    'one-var-declaration-per-line': 'error',
+    'operator-assignment': 'error',
+    'operator-linebreak': 'error',
+    'padded-blocks': 'off',
+    'padding-line-between-statements': 'error',
+    'prefer-arrow-callback': 'error',
+    'prefer-const': 'error',
+    'prefer-destructuring': 'error',
+    'prefer-exponentiation-operator': 'error',
+    'prefer-named-capture-group': 'off',
+    'prefer-numeric-literals': 'error',
+    'prefer-object-spread': 'error',
+    'prefer-promise-reject-errors': 'error',
+    'prefer-regex-literals': 'error',
+    'prefer-rest-params': 'error',
+    'prefer-spread': 'error',
+    'prefer-template': 'error',
+    'quote-props': 'off',
+    'quotes': ['error', 'single'],
+    'radix': 'error',
+    'require-atomic-updates': 'error',
+    'require-await': 'error',
+    'require-unicode-regexp': 'off',
+    'rest-spread-spacing': 'error',
+    'semi': 'error',
+    'semi-spacing': 'error',
+    'semi-style': ['error', 'last'],
+    'sort-keys': 'off',
+    'sort-vars': 'error',
+    'space-before-blocks': 'error',
+    'space-before-function-paren': 'off',
+    'space-in-parens': ['error', 'never'],
+    'space-infix-ops': 'off',
+    'space-unary-ops': 'error',
+    'spaced-comment': ['error', 'always'],
+    'strict': 'error',
+    'switch-colon-spacing': [
+      'error', {
+        'after': true,
+        'before': false,
+      },
+    ],
+    'symbol-description': 'error',
+    'template-curly-spacing': ['error', 'never'],
+    'template-tag-spacing': ['error', 'never'],
+    'unicode-bom': ['error', 'never'],
+    'vars-on-top': 'error',
+    'wrap-iife': 'error',
+    'wrap-regex': 'off',
+    'yield-star-spacing': 'error',
+    'yoda': ['error', 'never'],
+  },
+};

.github/workflows/deployment.yml

@@ -21,7 +21,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        os: [ubuntu-20.04, windows-latest]
+        os: [ubuntu-20.04, windows-latest, macos-latest]
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v2

package.json

@@ -62,6 +62,7 @@
     "@polymer/iron-test-helpers": "^3.0.0",
     "@web/test-runner": "^0.12.5",
     "@web/test-runner-playwright": "^0.8.0",
+    "@web/test-runner-visual-regression": "^0.6.3",
     "amf-client-js": "^4.6.0",
     "body-parser": "^1.19.0",
     "deepmerge": "^4.2.1",
@@ -96,8 +97,10 @@
     "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore",
     "lint": "npm run lint:eslint",
     "format": "npm run format:eslint",
-    "test": "web-test-runner test/**/*.test.js --coverage --node-resolve --playwright --browsers chromium firefox webkit",
-    "test:watch": "web-test-runner test/**/*.test.js --node-resolve --watch",
+    "test": "web-test-runner test/*.test.js --coverage --node-resolve --playwright --browsers chromium firefox webkit",
+    "test:visual": "web-test-runner test/visual/*.test.js --coverage --node-resolve --playwright --browsers chromium firefox webkit",
+    "test:watch": "web-test-runner test/*.test.js --node-resolve --watch",
+    "test:visual:update": "web-test-runner test/**/*.test.js --coverage --node-resolve --playwright --browsers chromium firefox webkit --update-visual-baseline\n",
     "build": "rimraf dist && rollup -c rollup.config.js",
     "build:vendor": "node tasks/prepare.js",
     "build:models": "node demo/model.js",