Press "Enter" to skip to content

Build a Modern JS Project – #11 Travis CI & Coveralls

it’s another way of a test suite it
would be a good time to set up a build
pipeline so let’s head over to Travis CI
and I’m going to go to Travis CI org so
the first thing you want to make sure is
to go to your github account and log in
and once you do you should be able to
sign into Travis with your github
account the first time you log in you’re
gonna have to activate your github
repositories in my case I’ve already
done that so I’m gonna go to my
repositories and then if we look for
react CSS spinners that’s gonna be this
project so what we can do is we can
actually enable it so we’re gonna just
turn on the switch and once we do we
should now see this page so this one is
gonna indicate that we don’t have any
built for this repository so that means
that we can actually go back to our
project and we can create a special
llamó file known as Travis dot yml and
then this file is where we write the
configuration for our build pipeline so
we’re gonna tell it that the language
for this project is going to be nodejs
meaning JavaScript we’re also gonna tell
it to turn off the pseudo mode because
when installing the packages or when
running the tests we don’t actually need
to have access to the sudo privileges
the next thing we can specify is the
nodejs version I’ll be careful with this
spacing in this file I’m gonna put two
spaces – and this is where we can
specify the no J’s versions for example
we can put eight or ten or we can even
simply say node so this is gonna pull in
the latest version of node which at the
time of this recording is node 11 now we
talked about stages in the build process
when it comes to Travis CI there’s also
a concept known as phases in fact if you
go to the documentation section if you
go to core concepts for beginners you’re
gonna find more information about this
but essentially there’s three phases
known as install script and deploy so by
default the install phase is going to
execute a command and known as NPM CI
and this one is gonna do a clean install
of all of our dependencies and by the
way it’s also going to do an implicit
NPM audit as of NPM 6 and now the script
phase is going to do NPM tests by
default so we’re good with the install
phase we’re gonna install all of our
dependencies but we can customize the
script phase now in this case instead of
doing NPM tests which will simply run
our test suite we’d like to
adjust coverage command so we can
generate the coverage reports for our
project but before we can actually do
that we also need to set up another
service known as coveralls and of course
you could also go with code coverage or
code cough this time I’m gonna go with
coveralls so the service is free just
like Travis CI and if you’re already
signed in to github you can also sign in
with your github account so let’s do
that and then we can go to our repos and
from there we can look for react CSS
spinners and now this one we can turn on
and so from there we can go to NPM that
I am slash coveralls we’re gonna need to
install this package so we can do so as
a dev dependency let’s install it and
from there using just what we can do is
we can invoke just with the coverage
option and pipe the results into
coveralls like this so now let’s copy
this command and I’ll create a new
script let’s call it test coveralls
let’s paste it in and back in Travis
llamo I’m gonna do NPM run test
coveralls so once again we’re going to
run the test suite but we’re also going
to generate a coverage report and we’re
going to send it off to Kairos at the
same time and then once we run the test
suite in fact before we even run the
test suite let’s also do NPM run lint so
we’re gonna first run es lens to make
sure we don’t have any linting issues
and then after that we’re gonna run the
test suite and also generate the e test
coverage for coveralls and I’m gonna add
one last optional thing this one is the
notifications settings I’m going to set
email to false so this way I’m going to
disable any email notifications all
right so let’s go ahead and commit our
code so do get status I’ll add all files
let’s do a commit integrate Travis CI
and coveralls so now let’s do a get push
in this should trigger a build and
Travis so let’s go back so now if you go
to your branches there’s gonna be one
popping up it’s still in the queue but
if you click on it eventually it’s gonna
start so as you can see it’s setting up
the environment cloning the repo doing
an install of node version 11.6 point
zero then doing NPM CI to install the
dependencies and then we’re running our
lint command we’re running a test suite
generating the test coverage and it
looks like it’s succeeded so now we have
a one build past so if I switch back to
coveralls let’s go to details and if you
scroll down you’re gonna see a 100%
coverage in fact the last thing we can
do is we can also copy the badge
so let’s embed it we’re gonna use the
markdown syntax let’s go back to our
readme so I’ll add one for coveralls and
let’s also add one from Travis so let’s
click on it let’s use markdown syntax
gonna copy it let’s go back in here
paste it in and now we have a basic pipeline running

Please follow and like us: