cucumber.js: cuke up your javascript!

77
...Cuke up your JavaScript! @cucumber_js

Upload: julien-biezemans

Post on 14-May-2015

10.373 views

Category:

Technology


2 download

DESCRIPTION

We're now living the golden age of JavaScript. An increasingly number of people are seeing it as a complete language. Therefore, agile development practices are now being adapted and applied to JavaScript code production. However, there has been a lack of support tools in the JS ecosystem, compared to what can be found on other platforms. A year ago, native BDD solutions similar to Cucumber were almost inexistant. Yet the need for it was manifest. It didn't take me long before I proposed and started hacking on the port of our favourite cucurbitaceae. Cucumber.js is a native JavaScript implementation of Cucumber. It is a strict port that can run on any JavaScript environment. It runs on Node.js as well as within any browsers, making it virtually serviceable against everything producing JavaScript and HTML (Node.js, Ruby on Rails, PHP, .Net, etc.). This is an introduction to the young Cucumber.js. After briefly exposing the history and goals of the project, I'll demonstrate how to write features, step definitions, hooks, support code, how to invoke it from both Node.js and browser environments. Presented at: - CukeUp! 2012: http://skillsmatter.com/podcast/agile-testing/cucumber-js-cuke-up-your-javascript - LNUG June 2012: http://lnug.org/

TRANSCRIPT

Page 1: Cucumber.js: Cuke up your JavaScript!

...Cuke up your JavaScript!

@cucumber_js

Page 2: Cucumber.js: Cuke up your JavaScript!

Julien Biezemans@jbpros

http://jbpros.net

Page 3: Cucumber.js: Cuke up your JavaScript!

Why?

Page 4: Cucumber.js: Cuke up your JavaScript!
Page 5: Cucumber.js: Cuke up your JavaScript!
Page 6: Cucumber.js: Cuke up your JavaScript!

Behaviour-DrivenDevelopment

Page 7: Cucumber.js: Cuke up your JavaScript!

Outside-in

Page 8: Cucumber.js: Cuke up your JavaScript!

Tools?

Page 9: Cucumber.js: Cuke up your JavaScript!

RSpec

Page 10: Cucumber.js: Cuke up your JavaScript!
Page 11: Cucumber.js: Cuke up your JavaScript!

?

Page 12: Cucumber.js: Cuke up your JavaScript!

Bootstrap

Page 13: Cucumber.js: Cuke up your JavaScript!
Page 14: Cucumber.js: Cuke up your JavaScript!
Page 15: Cucumber.js: Cuke up your JavaScript!

Environments

Page 16: Cucumber.js: Cuke up your JavaScript!

Node.js

Page 17: Cucumber.js: Cuke up your JavaScript!

CLI apps

Page 18: Cucumber.js: Cuke up your JavaScript!

Selenium

Web apps

Page 19: Cucumber.js: Cuke up your JavaScript!

zombie.js, phantom.js, ...

Headless web apps

Page 20: Cucumber.js: Cuke up your JavaScript!

Browser

Page 21: Cucumber.js: Cuke up your JavaScript!

Web apps

Page 22: Cucumber.js: Cuke up your JavaScript!

Cukecipes

Page 23: Cucumber.js: Cuke up your JavaScript!
Page 24: Cucumber.js: Cuke up your JavaScript!

Getting started

Page 25: Cucumber.js: Cuke up your JavaScript!

features/manage_recipes.feature

Page 26: Cucumber.js: Cuke up your JavaScript!
Page 27: Cucumber.js: Cuke up your JavaScript!
Page 28: Cucumber.js: Cuke up your JavaScript!

World

Page 29: Cucumber.js: Cuke up your JavaScript!
Page 30: Cucumber.js: Cuke up your JavaScript!
Page 31: Cucumber.js: Cuke up your JavaScript!

app/models/recipe.js

Page 32: Cucumber.js: Cuke up your JavaScript!
Page 33: Cucumber.js: Cuke up your JavaScript!

Tags

Page 34: Cucumber.js: Cuke up your JavaScript!
Page 35: Cucumber.js: Cuke up your JavaScript!

Hooks

Page 36: Cucumber.js: Cuke up your JavaScript!
Page 37: Cucumber.js: Cuke up your JavaScript!
Page 38: Cucumber.js: Cuke up your JavaScript!

Headless

Page 39: Cucumber.js: Cuke up your JavaScript!

Manyworlds

Page 40: Cucumber.js: Cuke up your JavaScript!
Page 41: Cucumber.js: Cuke up your JavaScript!

features/support/world.js

Page 42: Cucumber.js: Cuke up your JavaScript!

features/support/persistence_world.js

Page 43: Cucumber.js: Cuke up your JavaScript!

Zombie.js

Page 44: Cucumber.js: Cuke up your JavaScript!
Page 45: Cucumber.js: Cuke up your JavaScript!
Page 46: Cucumber.js: Cuke up your JavaScript!

Automated browser

Page 47: Cucumber.js: Cuke up your JavaScript!

Selenium

Page 48: Cucumber.js: Cuke up your JavaScript!
Page 49: Cucumber.js: Cuke up your JavaScript!
Page 50: Cucumber.js: Cuke up your JavaScript!

In-browser

Page 51: Cucumber.js: Cuke up your JavaScript!
Page 52: Cucumber.js: Cuke up your JavaScript!
Page 53: Cucumber.js: Cuke up your JavaScript!

http://is.gd/cukejs

Page 54: Cucumber.js: Cuke up your JavaScript!

http://is.gd/cukejs

Page 55: Cucumber.js: Cuke up your JavaScript!

Full stack

http://is.gd/cukejs

Page 56: Cucumber.js: Cuke up your JavaScript!

http://is.gd/cukejs

Page 57: Cucumber.js: Cuke up your JavaScript!

Anyone can cuke.

Page 58: Cucumber.js: Cuke up your JavaScript!
Page 59: Cucumber.js: Cuke up your JavaScript!

How to set the context?

Page 60: Cucumber.js: Cuke up your JavaScript!

Photo: Richard Vantielcke - LudImaginary (http://www.ludimaginary.net)

Page 61: Cucumber.js: Cuke up your JavaScript!
Page 62: Cucumber.js: Cuke up your JavaScript!

Is it stable?

Page 63: Cucumber.js: Cuke up your JavaScript!

itself

Page 64: Cucumber.js: Cuke up your JavaScript!

Node.js & Ruby on Rails

Page 65: Cucumber.js: Cuke up your JavaScript!

.net, PHP, Java, ...

Page 66: Cucumber.js: Cuke up your JavaScript!

The future

Page 67: Cucumber.js: Cuke up your JavaScript!

Kite

App

Browser

DSLStepdefs

SeleniumDriver

World

CukestallDriver

Zombie.jsDriver

iFrame

Zombie.js

Gherkin

EXPER

IMEN

TAL

Page 68: Cucumber.js: Cuke up your JavaScript!

features/support/kite_world.js

EXPE

RIMEN

TAL

Page 69: Cucumber.js: Cuke up your JavaScript!

features/support/kite_world.js

EXPE

RIMEN

TAL

Page 70: Cucumber.js: Cuke up your JavaScript!

Cukestall

EXPE

RIMEN

TAL

Page 71: Cucumber.js: Cuke up your JavaScript!

cucumber-html

Page 72: Cucumber.js: Cuke up your JavaScript!

Catch up with Cucumber.rb

Page 73: Cucumber.js: Cuke up your JavaScript!

Documentation

* This book does not exist, obviously.

Page 74: Cucumber.js: Cuke up your JavaScript!

We need you!

Page 75: Cucumber.js: Cuke up your JavaScript!
Page 76: Cucumber.js: Cuke up your JavaScript!