Pipeline Driven Development

Angular / Circle / Cypress / Firebase

by Code Mortals

Agenda

• Intros: 7:00pm
• Part 1: 7:15pm Angular
• Part 2: 7:30pm Circle CI
• Part 3: 7:45pm Cypress
• Part 4: 8:15pm Cucumber
• Part 5: 8:30pm Firebase Hosting (stretch)

ngular

npm install -g @angular/cli

ng new codemortals

cd codemortals

ng serve

http://localhost:4200

CircleCI (CI)

CircleCI (CI)

                        version: 2

jobs:
    build:
    docker:
        - image: circleci/node:10
    steps:
        - checkout
        - run: npm install
        - run: npm run build
        - store_artifacts:
            path: dist
                        
                    

Cypress

npm install cypress --save-dev

npm run cypress:open

Cypress

Cucumber

github.com/TheBrainFamily/cypress-cucumber-preprocessor

npm install --save-dev cypress-cucumber-preprocessor

Cucumber

// cypress/plugins/index.js
const cucumber = require('cypress-cucumber-preprocessor').default

module.exports = (on, config) => {
    on('file:preprocessor', cucumber())
}

// cypress.json
{
    "testFiles": "**/*.feature"
}

Cucumber

// cypress/integration/Google.feature
Feature: The Facebook

I want to open a social network page

@focus
Scenario: Opening a social network page
    Given I open Google page
    Then I see "google" in the title

// cypress/integration/navigation.js
import { Given } from "cypress-cucumber-preprocessor/steps";

Given('I open {string}', (url) => {
    cy.visit(url)
})

Firebase Hosting

• 1. Login into Firebase Console
• 2. Create a project
• 3. Add web app and follow instructions
• 4. Perform deployment manually
• 5. Deploy via CircleCI (don't forget to add your envarionment variable token to circle)