Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/devonchurch/mozzarella
A build pipeline leveraging Angular and Azure
https://github.com/devonchurch/mozzarella
angular azure azure-devops azure-storage cypress visual-regression visual-regression-testing
Last synced: about 1 month ago
JSON representation
A build pipeline leveraging Angular and Azure
- Host: GitHub
- URL: https://github.com/devonchurch/mozzarella
- Owner: devonChurch
- Created: 2019-09-01T05:23:42.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T09:15:51.000Z (about 2 years ago)
- Last Synced: 2023-03-02T11:46:08.723Z (almost 2 years ago)
- Topics: angular, azure, azure-devops, azure-storage, cypress, visual-regression, visual-regression-testing
- Language: HTML
- Homepage:
- Size: 2.9 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mozzarella 🧀 🍕 😋
[](https://dev.azure.com/notifydevon/notifydevon/_build/latest?definitionId=1&branchName=master)
## 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**](https://github.com/palmerhq/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