How I Set Up a GitHub Workflow to Automatically Lint and Test My Vue Project on Push
Tags: vue, github
Published: 2021-05-01 22:58:49

I've been learning Vue.js in my spare time. I've been using this [weather forecast app](https://github.com/JasonFritsche/weather-vue) that I created as a sandbox for learning Vue. As you can see in the repo, I documented some goals that I have for this project. One of those goals is to write unit tests using Jest. Today I created a simple GitHub Workflow that will automatically run my unit tests as well as lint anytime I push to my repo. Today I'll share this workflow with you.

# The Workflow
Below is the GitHub Workflow that I created that lints and tests my Vue.js CLI project on push:
```yaml
name: Run Unit Tests and Lint Files
"on": push
jobs:
  unit_test-lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: |
              npm ci
              npm run build
              npm run test:unit
              npm run lint
```
These twelve lines of YAML serve as a gatekeeper of sorts. Of course I can build, run my unit tests, and lint locally before I push, but what if I forget. What if I have a contributor that forgets? 

There is nothing inherently 'Vue.js' about this workflow. You could plug it in to other JavaScript projects. You would just need to make sure the scripts that you run are defined in your projects `package.json` file. 

Let's break down the commands used in the `run` key. 

First of all, I'm using a pipe (|) operator to specify multiple commands. 

* The first command, `npm ci`, per the [docs](https://preview-docs.npmjs.com/cli-commands/npm-ci), "is similar to `npm install`, except it's meant to be used in automated environments such as test platforms, continuous integration, and deployment -- or any situation where you want to make sure you're doing a clean install of your dependencies."

* `npm run build` is a script that's defined in my project's `package.json` that runs `vue-cli-service build`. I run this command before I test and lint...just to make sure it will build. 

* `npm run test:unit` runs `vue-cli-service test:unit`. This is the command that runs my unit tests. If any of the unit tests fail, the workflow will fail, and that PR definitely ain't getting merged.

* `npm run lint` runs `vue-cli-service lint`. Similar to the build and unit tests commands, if linting fails, the workflow will fail.

To implement a Workflow in your GitHub project, you need to first click on the **Actions** tab. Once in the **Actions** tab, click the **New Workflow** button. From there, click the **set up a workflow yourself** link. You'll see an editor with some YAML inside of it. Once you get your workflow created, just click the **Start Commit** button. You'll be given the option to commit to your main/master branch, or create a new branch. You can pick whichever works for you, I personally choose to create a new branch.

# Conclusion
I've used GitHub Actions/Workflows here and there, but am still pretty much a noob. I found the [GitHub Actions Cheat Sheet](https://resources.github.com/whitepapers/GitHub-Actions-Cheat-sheet/) and the [Intro to GitHub Actions](https://docs.github.com/en/actions/learn-github-actions/introduction-to-github-actions) to be very helpful in gaining a better understanding of GitHub Actions/Workflows.

I'm still a bit confused on when to call it an Action vs a Workflow. If you can ELI5 in the discussion below, that would be helpful.