@littleq/testing-webcomponents NPM

automated-testing-and-deployment

A take on automating testing and deployment. This is an upgrade of the testing-webcomponents project.

Any addition?

uses renovate for updating dependencies
uses vscode and overrides some IDE settings

Workflow

When doing a feature

create branch from develop
push commit to branch
create PR to develop
when tests are ok, merge PR

When doing a pre-release

create branch from develop
test on branch
edit bugs if ever
do local test
when tests are ok, run npm version
create PR to master
when tests are ok, merge PR

After making a release

create branch from master
run github_changelog_generator
commit with ci-skip
create PR to master
merge to master
create PR to develop (using master)
merge to develop

Note The next part of README is how to test Web components

Testing Web Components

See how it runs?

Install dependencies

Install dev dependencies to make it work

npm i

Run

npm test

It will run the following unit tests specified in the runner.html inside the test folder

How to copy and use in my code?

Have package.json

If you don't have one, run npm init to create one.

Add these packages inside the devDependencies in package.json

"devDependencies": {
  "@polymer/iron-test-helpers": "0.0.3",
  "babel-eslint": "^8.2.1",
  "babel-plugin-external-helpers": "^6.22.0",
  "babel-plugin-transform-object-rest-spread": "^6.26.0",
  "babel-plugin-transform-runtime": "^6.23.0",
  "babel-preset-env": "^1.6.1",
  "chai": "^4.1.2",
  "eslint": "^4.16.0",
  "eslint-config-semistandard": "^12.0.0",
  "eslint-config-standard": "^11.0.0-beta.0",
  "eslint-plugin-chai-friendly": "^0.4.1",
  "eslint-plugin-html": "^3.2.2",
  "eslint-plugin-import": "^2.8.0",
  "eslint-plugin-mocha": "^4.12.1",
  "eslint-plugin-node": "^5.2.1",
  "eslint-plugin-promise": "^3.6.0",
  "eslint-plugin-standard": "^3.0.1",
  "lodash": "^3.10.1",
  "mocha": "^5.0.4",
  "semistandard": "^12.0.1",
  "size-limit": "^0.16.1",
  "wct-browser-legacy": "0.0.1-pre.11",
  "web-component-tester": "^6.5.0"
}

These installs the following files that will be needed in linting, sizing, and testing your project.

Add these on your scripts in package.json

"scripts": {
  "size": "./node_modules/.bin/size-limit",
  "semistandard": "./node_modules/.bin/semistandard",
  "wct": "./node_modules/.bin/wct --npm",
  "wct-prod": "./node_modules/.bin/wct --npm --configFile wct-prod.conf.json",
  "test": "npm run semistandard && npm run size && npm run wct-prod",
  "prepublishOnly": "npm test"
}

These allow us to run the test script using npm test command or just run specific parts like npm run wct. The scripts are as follows:

npm run size - runs size-limit to check size of element
npm run semistandard - runs linting using semistandard config
npm run wct - runs testing with persistence flag set to true so that you can manually refresh the browser testing machine whenever you update your code
npm run wct-prod - runs testing that opens chrome and firefox
npm run prepublishOnly - runs test before publishing to npm

Add these two other attribtues in your package.json

"size-limit": [
  {
    "path": "your-component.js",
    "limit": "3KB"
  }
],
"semistandard": {
  "parser": "babel-eslint",
  "ignore": [
    "test/*",
    "dist/*",
    "polyfills/*"
  ],
  "env": [
    "mocha"
  ]
}

This allows you to test the size of your element (to be under a specified size) and the linting rules using semistandard

Copy the following files in this project to yours

.eslintignore - ignore files or folders when testing lint
.eslintrc.js - for linting rules when using and IDE like VSCode
.travis.yml - allows you to run the test on Travis
jsconfig.json - for VSCode rules on types
wct-prod.conf.json - testing configuration that opens firefox and chrome for testing
wct-conf.json - testing configuration that runs testing with persistence flag set to true so that you can manually refresh the browser testing machine whenever you update your code
test/runner.html - this is where your test starts, see next part

Examine Runner.html

<html>
  <head>
    <meta charset="utf-8">
    <script>
      WCT = {
        mochaOptions: {
          timeout: 60000
        }
      }
    </script>
    <script src="../../../node_modules/wct-browser-legacy/browser.js"></script>
  </head>
  <body>
    <script>
      'use script';
      let suites = [
        './unit/test-component.test.html'
      ];
      WCT.loadSuites(suites);
    </script>
  </body>
</html>

The changeable part is the suites. Add the test config files that you want to add. My recommended pattern is inside the unit folder.