Testing throughout the MEAN stack

Part 1

starting off with the front-end

Marton Hipszki

Aug 13 2014

@mhipszki

full stack Javascript 

test-obsessed :)

http://blog.hipzter.co.uk

We are going to

build a simple
Application Feature
using

test-first approach

turning a User Story

to failing test cases

specifying behaviours

writing Production code

in baby-steps

to fulfill test requirements

User Story

As an Administrator

I want to register a new Phone

so that I can keep track of phones

Acceptance Criteria

scenarios defined in

Cucumber format

Scenario #1

GIVEN that I am an Administrator

WHEN I open home page of the application in the browser

THEN I can click on the Register Phone button in the Navigation Bar

AND I am taken to the Register New Phone form

Scenario #2

GIVEN that I am an Administrator

WHEN I am on the Register New Phone form

THEN I can enter the Phone's Brand, Type, IMEI number and MAC address

AND I can click Submit to register a new Phone in the system

Scenario #3

GIVEN that I am an Administrator

WHEN I click the Submit button

THEN the provided information will be sent to the back-end

AND the provided information will be validated against the rules

RULES

  • Phone Brand is mandatory, less or equal than 20 characters
  • Phone Type is mandatory, less or equal than 30 characters
  • Phone IMEI number is mandatory, 15 digits
  • Phone MAC address is optional, format is `00:11:22:33:44:55`

Scenario #3

Scenario #4

GIVEN that I am an Administrator

WHEN I submit invalid information

THEN I am prompted with the errors helping me correct my mistake

Scenario #5

GIVEN that I am an Administrator

WHEN I submit correct information

THEN I am prompted with a success message

proper User Story

with Acceptance Criteria

helps us to understand the problem

turning Criteria

to test cases

helps us to understand
the (missing) requirements

discover our technical debt

Dev environment

Node.js + npm

MongoDB

Bower

Grunt

Yeoman

Let's get started!

scaffolding the MEAN project

$ yo angular

Additional Packages

$ npm install --save-dev grunt-cli
$ npm install --save-dev jshint-stylish
$ npm install --save-dev karma-mocha-reporter
$ npm install --save-dev protractor

for API development

$ npm install --save express
$ npm install --save mongo
$ npm install --save mongojs
$ npm install --save native-promise-only

for API testing

$ npm install --save-dev mocha
$ npm install --save-dev expect.js
$ npm install --save-dev should
$ npm install --save-dev supertest
$ npm install --save-dev grunt-mocha-cli

a User Story

explains a Feature

from the User's perspecitve

User Story

(recap)

As an Administrator
I want to register a new Phone
so that I can keep track of phones

Scenarios

can be transformed into

End-to-End test suites

Scenario #1

GIVEN that I am an Administrator

WHEN I open home page of the application in the browser

THEN I can click on the Register Phone button in the Navigation Bar

AND I am taken to the Register New Phone form

so what does it say?

1. on the front page

2. there should be a Nav Bar

3. and a button called Register Phone

4. clicking on that button

5. the User will be taken to the Register Phone page

now we understand

the requirements

so let's turn them to tests

livecoding!

ok, give me a sec... :)

Takeaway

full spectrum testing is not hard

gives you confidence

saves you lot of time

pays off quickly

all content

will be available on 

GitHub

and on my blog

slid.es

Thank you!

@mhipszki

http://blog.hipzter.co.uk

Made with Slides.com