mtz-ui-scripts

We've got ~50 repos we need to get testing and configuration set up inside, both short-term, and longer-term when we update or need to include security patches. So rather than do error-prone copy & pasting, we can automate most of the process to automatically pull in templates from a centralized source.

Later, I'd like to be able to automate this and generate pull requests with passing tests for us (ex: when we update from polymer 1 to polymer 2).

Generating a test

To use this package to generate a test:

// anywhere
npm i -g mtz-ui-scripts

// to add a new test
mtz-ui-scripts-add-test tag-name

This will create a file in: ./test/${tagName}_test.html prepopulated with some basic test logic.

Installing Test/Linting Config

To use this package:

// anywhere
npm i -g mtz-ui-scripts

// in the root directory of a component with a bower.json file, run
mtz-ui-scripts-install

// after
npm i

This will:

• copy over a centralized .gitignore
• copy over .eslintrc configuration
• copy over polymer.json linting config
• copy over wct.config.js
• generate a new package from the existing bower.json file

Make sure to run npm install!

Git Hooks

Git hooks are commands that are executed when a certain git action happens. Git hooks live in .git/hooks. Check it out - each file is named something like pre-push or pre-commit, and contains a list of commands git should execute when that thing happens.

So, for example, we want to run our linters before we can complete a commit. So in pre-commit, we're going to want to run our eslint and polymer lint commands. The convention around commands like this are, if you run a command and it returns a 0, it was successful. If it returns anything other than 0, (usually 1), it failed.

So we add a set of commands inside the pre-commit git hook file that can look at that output and decide what to do. In plain english, "run the linters. if either of them aren't successful, cancel this commit."

Rather than manage all the git hooks manually (you can't put the .git directory itself inside version control), we rely on an npm package named husky to do so. Inside your package.json, you can have it automatically generate your git hooks for you in a much more readable/configurable fashion.

So in a package.json, you'll have some configuration that look like this:

  "husky": {
    "hooks": {
      "pre-commit": "npm lint && npm test"
    }
  },

These commands, npm lint, and npm test, are referring to some commands we set up elsewhere inside package.json as 'npm scripts'. It's good to have these things be scripts instead of just putting all the commands inside of husky so we can use the same command manually from our terminal if we wanted.

Those scripts, specifically, look like:

  "scripts": {
    "lint": "polymer lint && eslint *.html",
    "test": "wct"
  },

So this is just all a way of having the computer automatically run stuff for you instead of you having to do it.

TODO

This whole package is largely untested, so I'd like to manually run it across some environments and add in more safety features (ex: intelligent package.json generation instead of just overwriting).

Other known enhancements needed down the line:

• Make sure local pre-commit only tests on headless firefox and chrome
• CI integration
• CI integration partner configuration (either crossbrowsertesting or sauce labs)