Mozzarella 🧀 🍕 😋

What 👋

A build pipeline leveraging Angular and Azure as an application base with enhanced testing capabilities using Cypress.

Note 📋

This is a barebones proof-of-concept that was used as the catalyst for a green field project during a contracting tenure.

Why 🤔

I felt that Angular's default deployment configuration was lacking in areas that I had already solutionized in the React world.

• Environment Configuration 😞

  Angular’s built-in environments files require a new build "trigger" for each version to be populated with their environment-specific parameters. This slows down build times and mutates previously tested build artifacts.

• End-to-end Tests 😦

  Angular’s built-in e2e testing library Protactor felt cumbersome, verbose, slow and unreliable compared to newer alternatives like Puppeteer and Cypress. Having confidence in a tests suites reliability is important to promote the expansion of tests through the codebase.

• Visual Regression 😥

  Angular lacks a built-in visual regression system. When developing a UI component architecture, confidence in not only the mechanics but also the aesthetics is critical to achieving fast, robust code iteration.

How 💡

With a few small but crucial amendments to the Angular boilerplate, I have a much more robust deployment system.

• Environment Configuration 😊

  All builds are now environment agnostic in that augmentation relating to environments happen at runtime via an external configuration dependency. This allows the initial build artifact that Azure creates to be leveraged throughout each stage in the QA process Staging, UAT, Production etc. Each environment (including Development) has a bespoke configuration file that is referenced by the application at run time.

  

• End-to-end Tests 😀

  Cypress has replaced Protractor as the e2e testing library. Its fast, reliable and tests can be written in a very lean format. Cypress's development mode is unrivaled and brings simplicity and elegance to this testing genre.

  

• Visual Regression 😍

  Leveraging Cypress with Cypress Image Snapshot and Docker creates a solid platform that can test application aesthetics regardless of environment configuration (Windows, MacOS, Linux). In that regard, the visual regression suite can be run consistently on Local and CI/CD environments.

  

License 📜

MIT