This project is part of the tutorial BDD with Angular and CucumberJs

BDD (Behavior Driven Developement) became more common these years specially with Scrum teams since it gives more agility between product owners (and functionnal people) and the develpers.

One of the best tool to achieve BDD is cucumber along with its syntax called gherkin it gives an easier way to accomplish BDD.

The gherkin syntax looks like this :

  Scenario: Some determinable business situation
    Given some precondition
      And some other precondition
     When some action by the actor
      And some other action
      And yet another action
     Then some testable outcome is achieved
      And something else we can check happens too

Since this example is focused on Angular a we will use CucumberJS along with Protractor and the framework protractor-cucumber-framework

We will start first by creating a simple Angular counter app. We will do so just by changing the app component of the deault app generated with the angular cli via the command ng new angular-bdd to the following:

<h3 id="counter">{{ counter }}</h3>

<button id="increment" (click)="increment()">INCREMENT</button>

<button id="decrement" (click)="decrement()">DECREMENT</button>

And

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.sass"]
})
export class AppComponent {
  counter = 0;

  increment(): void {
    this.counter++;
  }

  decrement(): void {
    this.counter--
  }
}