Angular 5 + Travis-CI continuous integration/deployment
I have created a sample application using angular-cli and OpenweatherMap api for showing a weather forecast. This application uses Angular 5 and Karma Test Runner . The repository and live-demo can be found here.
This article will cover the configuration for Travis CI/CD and Karma test runner in order to automate the build and testing of the application .First thing we need to do is add .travis.yml file at the root of our project where we write all our configurations
Automated tests using Headless chrome
A headless browser is a great tool for automated testing and server environments where you don’t need a visible UI shell.
Headless Chrome is a way to run the Chrome browser in a headless environment without the full browser UI. Headless Chrome gives you a real browser context without the memory overhead of running a full version of Chrome.
The Google Chrome addon allows Travis CI builds to install Google Chrome at run time. To use the addon you need to be running builds on either the Trusty build environment or the OS X build environment.
Karma configuration for headless browser
autoWatch
It Enable or disable watching files and executing the tests whenever one of these files changes. If set to true it keeps watching files for changes even after successful execution of tests to prevent that we set this to false
singleRun
If true, Karma will start and capture all configured browsers, run tests and then exit with an exit code of 0 or 1 depending on whether all tests passed or any tests failed.
List of other options for configuration can be found here.
Deployment using Travis:
Travis CI can automatically deploy your application after a successful build to Heroku , AWS or other platforms.
To use the default configuration, add your encrypted api key to your .travis.yml:
eg: the following example showcase configuration for heroku deployment
Travis CI can automatically trigger a new Deployment on AWS CodeDeploy after a successful build. other deployment options can be found here.
