It’s nice to have the sense of security and confidence in your code that testing can provide, but running tests manually before every push can feel like a real chore. Thankfully there are some very handy cloud-based SaaS solutions that can outsource this repetitive task.
Before We Start
Get or Make the App
This repository has some starter code. Alternately, you can install vue-cli and set up a new project. After running create, remember to choose:
Cool. You should be good to go. Take a minute to
cd into your new app and spin up the local dev server, run the tests and familiarize yourself with it. While you are there check that you have a config file on the right path. If you don’t, add it:
$ touch .circleci/config.yml
Link Everything Up
Sign in to your CircleCI account and navigate to the add projects tab. Search for your Vue Hello World repo and select add project.Preflight checklist done. Let’s set up our CI/CD.
Orbs and Workflows
Orbs are certified or third party configurations that streamline an action while simultaneously allowing you to access the underlying configuration options. We are going to use two orbs. The Heroku orb and the Cypress orb. The Heroku orb is in CircleCI’s registry. For the Cypress orb to work correctly, you’ll need to change security settings in CircleCI to allow for uncertified and third-party orbs.
Workflows are a collection of jobs run in parallel or sequence. We’ll define those as we build our configuration file.
Config Setup, Simple
Orbs are only available in version 2.1 of CircleCI, so we need to specify that version on the first line of our config file. After that CircleCI is going to be looking for some defaults. Let’s add those in as well.
# .circle/config.yml version: 2.1 jobs: build: docker: - image: circleci/node:12 # the primary container, where your job's commands are run steps: - checkout # check out the code in the project directory - run: echo "hello world" # print a message to verify action workflows: test_then_build: jobs: - build
As we begin to add lines to our
yaml we can use our command line tool to validate and confirm steps incrementally.
$ circleci run validate Config file at .circle/config.yml is valid.
Then you can pack it up and push it to GitHub. The build won’t take too long for this one. Take a look at the logs in CircleCI. You should see your
echo run in the console: Adding Orbs
We could build out each step in turn by picking the container, establishing each process and testing it, but we have orbs! Someone has already done that for us. Let’s scratch some of that original file and add our e2e test runner.
Wait! before you push that…
cypress/run is going to run our tests inside the container and needs some direction to find its way. Let’s add a
"pluginsFile": "tests/e2e/plugins/index.js", "baseUrl": "http://localhost:8080"
Now, when our container spins up and runs Cypress, instead of looking for local files it will look for a base url and run our e2e tests. Add it, commit it and open up your workflows panel in CircleCI.Passed, with flying colors. Now let’s add the next step:
version: 2.1 orbs: cypress: cypress-io/cypress@1 + heroku: circleci/heroku@0 # Heroku orb for deployment workflows: test_then_build: jobs: - cypress/run: start: npm run serve # We need our server running wait-on: 'http://localhost:8080' + - heroku/deploy-via-git: + requires: # Makes the above command wait until the required command is complete + - cypress/run
Reading down to the jobs section of the Heroku orb at the
deploy-via-git command you’ll see that CircleCI needs an API key and an app name to complete its remote URI. We can set those up in our project env vars.
Push it to GitHub and watch it build:Now as you start to build tests and code CircleCI will check all your tests and only deploy if your tests pass. From here you can customize even further. Some options you can experiment with are adding unit tests, running them in parallel, deploying different branches or deploying to different hosting services. There are a lot of possibilities. Take some time and keep exploring.