I've been learning Vue.js in my spare time. I've been using this weather forecast app 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.
Below is the GitHub Workflow that I created that lints and tests my Vue.js CLI project on push:
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?
Let's break down the commands used in the
First of all, I'm using a pipe (|) operator to specify multiple commands.
The first command,
npm ci, per the docs, "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 buildis a script that's defined in my project's
vue-cli-service build. I run this command before I test and lint...just to make sure it will build.
npm run test:unitruns
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 lintruns
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.
I've used GitHub Actions/Workflows here and there, but am still pretty much a noob. I found the GitHub Actions Cheat Sheet and the Intro 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.