extending your tdd cycle into javascriptfiles.meetup.com/310796/tdd_javascript.pdf · 1 wednesday,...

Gregory Moeck

Extending Your TDD Cycle Into JavaScript

@gregmoeck

Wednesday, May 16, 12

Quick Poll

Question1

Practice TDD/BDD In Ruby/Rails

Question2

Practice TDD/BDD In JavaScript

Why The Difference?

Why Can’t I Test My JS?

“All Of The Pain That We Feel When Writing Unit Tests

Points At Underlying Design Problems.

Michael Feathers, The Deep Synergy Between Good

Design and TestabilityWednesday, May 16, 12

“ In Test First Development, When We Feel Pain, We

Change Our Tests. In Test Driven Development When We Feel Pain, We Change

Our Architecture

Corey Haines, Fast Rails Tests

Story Time

Imagine A Newbie Has Heard About The

“Wonders” Of TDD, And Comes To You With A

Question:

How Would I Test This?

<?php...<div id= “vault_items”> ... $query1 = "SELECT * FROM storage_access_vault_items WHERE access_id = {$_GET[pid]}"; $result1 = mysql_query($query1); $inner_vault_items = array(); while($this_item = mysql_fetch_assoc($result1)) { ?> <div class= “vault_item”> <?= $this_item[‘description’] ?> ... </div><?php } ...</div>?>

Summary

Writing Code Is Easy

Testing Well Architected

Code Is EasyWednesday, May 16, 12

Architecting Code Well Is

HARD!!!!Wednesday, May 16, 12

Architectural Patterns To Help Testing

Ports &

AdaptersWednesday, May 16, 12

ApplicationDomain

Adapter

Key Idea:Isolate

Application Domain

What Is A Port?

An Interface To Technical

InfrastructureWednesday, May 16, 12

Examples:

Examples:DOM

XMLHTTPRequest

Examples:DOM

XMLHTTPRequest

Examples:DOM

XMLHTTPRequest

Websockets

Examples:DOM

XMLHTTPRequest

Websockets

IndexedDB

Examples:DOM

XMLHTTPRequest

Websockets

IndexedDB

LocalStorage

Examples:DOM

XMLHTTPRequest

Websockets

IndexedDB

LocalStorage

Etc...

What Is An Adapter?

An Interface To Translate Domain Into

TechnicalWednesday, May 16, 12

Example:

DOMBoard

Renderer

renderBoard(numberOfRows, numberOfColumns)

markCell(row, column, marker)

Why Is This Useful?

Isolates From

Technical Concerns

No Browser Dependency

Side Note:

Unit Tests

Unit Tests Node

Unit Tests NodeIntegration

Tests Browser

Acceptance Tests

Tests Browser

Acceptance Tests

Tests Browser

Acceptance Tests Webdriver

Manage Your

Objects Peers

Three Types Of Peers

Dependencies

Service The Object

NEEDS To Do Its Job

Example:

PlayerPieces

Tracker

markCell(row, column, marker)

BoardView

Should Pass Dependency

Into The Constructor

Notifications

Peers That Need To Be Kept Up To

DateWednesday, May 16, 12

Example:

Turn Tracker

newPlayersTurn(player)

TurnTrackerListener

Dynamically Add

Listeners At Run Time

Adjustments / Strategies

Example:

EventDispatcher

receiveCell(cell)

CurrentPlayer

Behavior Needs To Be Changeable At Runtime

Structural Example

Tic-Tac-Toe

Emergent Design, So

Not Perfectly Architected

Https://github.com/gmoeck/tic-tac-toe

Basic Tooling

CONFIG = ENV['CONFIG'] || 'Debug'

require 'rack'

namespace :test do

desc "Run all acceptance tests"

task :acceptance do

system("rspec spec/acceptance/end_to_end.rb --color")

desc "Run all unit tests"

task :unit do

system("node node_modules/jasmine-node/lib/jasmine-node/cli.js spec/unit --color")

desc "Run all integration tests"

task :integration do

File.delete("spec/integration/runner/all_tests.js") if File.file?("spec/integration/runner/all_tests.js")

File.open("spec/integration/runner/all_tests.js", 'w') do |f|

Dir.glob("spec/integration/*_spec.js").each do |file_name|

file_name = file_name.slice(/[a-zA-z]*_spec/)

f.write("require('#{file_name}');\n")

system("./bin/build_integration_tests.js")

system("open spec/integration/runner/runner.html")

task :all => [:unit, :acceptance]

desc "Debug the application"

task :debug do

system("./bin/build_application.js")

sleep 1

system("open public/index.html")

desc "Run a server for prototyping"

task :server do

Rack::Handler::Thin.run Rack::Directory.new(File.expand_path('public')), :Port => 3000

Summary:

Summary:Uses Modulr For Package Dependencies

Summary:Rake Test:[unit,integration,acceptance]

Uses Modulr For Package Dependencies

Summary:Rake Test:[unit,integration,acceptance]

Rake Debug

Uses Modulr For Package Dependencies

First End-To-End

TestWednesday, May 16, 12

describe "end to end acceptance test", :type => :request do before(:each) do @application = TicTacToeApplicationDriver.new @application.start end

it "marks the board" do @application.mark_board(1,1) @application.shows_board( [ [' ',' ',' '], [' ','X',' '], [' ',' ',' '] ] ) endend

class TicTacToeApplicationDriver include Capybara::DSL include Capybara::RSpecMatchers APPLICATION_PORT = 1234 def initialize @application_server = ApplicationServer.new end def start @application_server.start visit "http://localhost:#{APPLICATION_PORT}/index.html" end def mark_board(x,y) cell_at(x,y).click end def shows_board(board) board.each_index do |row| board[row].each_index do |column| if board[row][column] != ' ' cell_at(column, row).text.should == board[row][column] end end end end

private def cell_at(x,y) find("[data-board-x='#{x}'][data-board-y='#{y}']") endend

Failure/Error: @application.mark_board(0,0)

Capybara::ElementNotFound:

Unable to find css "[data-board-x='0'][data-board-y='0']"

rake test:acceptanceFailure/Error: @application.mark_board(0,0)

Capybara::ElementNotFound:

Unable to find css "[data-board-x='0'][data-board-y='0']"

var DOMBoardView = require('./ui/dom_board_view').DOMBoardView;

document.addEventListener("DOMContentLoaded", function() { var boardView = new DOMBoardView(); boardView.renderBoard(3,3);});

main.js

var DOMBoardView = require('ui/dom_board_view').DOMBoardView;

describe('DOMBoardView', function() { var view; beforeEach(function() { view = new BoardView(); view.renderBoard(3,3); });

afterEach(function() { view.remove(); });

it('renders the proper number of cells', function() { expect(document.querySelectorAll('[data-board-x][data-board-y]').length).toBe(9); }); });

var DOMBoardView = require('ui/dom_board_view').DOMBoardView;

describe('DOMBoardView', function() { var view; beforeEach(function() { view = new BoardView(); view.renderBoard(3,3); });

afterEach(function() { view.remove(); });

it('renders the proper number of cells', function() { expect(document.querySelectorAll('[data-board-x][data-board-y]').length).toBe(9); }); });

spec/integration/dom_board_view_spec.js

Failure

rake test:integration

Failure

var DOMBoardView = function() {};

DOMBoardView.prototype = { renderBoard: function(rows, columns) { for(var i = 0; i < rows; i++) { for(var j = 0; j < columns; i++) { var cell = document.createElement('div'); cell.setAttribute('data-board-x', j); cell.setAttribute('data-board-y', i); document.body.appendChild(cell); } } }};

src/ui/dom_board_view.js

Passed

Failure/Error: @application.shows_board(

expected: "X"

got: "" (using ==)

rake test:acceptance Failure/Error: @application.shows_board(

expected: "X"

got: "" (using ==)

var DOMBoardView = require('ui/dom_board_view').DOMBoardView;var fireEvent = require('./test_helpers').fireEvent;

describe('DOMBoardView', function() { ... describe('when clicking on a cell', function() { it('marks the cell with "X" when clicked', function() { fireEvent(document.querySelector('[data-board-x="1"][data-board-y="1"]'), 'click');

expect(document.querySelector('[data-board-x="1"][data-board-y="1"]').innerText).toEqual('X'); }); });});

var DOMBoardView = require('ui/dom_board_view').DOMBoardView;var fireEvent = require('./test_helpers').fireEvent;

describe('DOMBoardView', function() { ... describe('when clicking on a cell', function() { it('marks the cell with "X" when clicked', function() { fireEvent(document.querySelector('[data-board-x="1"][data-board-y="1"]'), 'click');

expect(document.querySelector('[data-board-x="1"][data-board-y="1"]').innerText).toEqual('X'); }); });});

Failure

DOMBoardView.prototype = { renderBoard: function(rows, columns) { for(var i = 0; i < rows; i++) { for(var j = 0; j < columns; i++) { var cell = document.createElement('div'); cell.setAttribute('data-board-x', j); cell.setAttribute('data-board-y', i); cell.addEventListener('click', this._cellClicked.bind(this, i, j)); document.body.appendChild(cell); } } }, _cellClicked: function(row, column) { var cell = document.querySelector( '[data-board-x="' + column + '"]' + '[data-board-y="' + row + '"]'); cell.innerText = 'X'; }};

Passed

rake test:acceptance

Passed

Refactor To Add Style In Rendering

Refactor To Be True Adapter

describe('DOMBoardView', function() { ... describe('when clicking on a cell', function() { it('marks the cell with "X" when clicked', function() { var listener = { cellSelected: jasmine.createSpy('listener#cellSelected') }; view.addListener('cellSelected', listener);

fireEvent(document.querySelector('[data-board-x="1"][data-board-y="1"]'), 'click');

expect(listener.cellSelected).toHaveBeenCalledWith({ row: 1, column: 1 }); }); });});

describe('DOMBoardView', function() { ... describe('when clicking on a cell', function() { it('marks the cell with "X" when clicked', function() { var listener = { cellSelected: jasmine.createSpy('listener#cellSelected') }; view.addListener('cellSelected', listener);

fireEvent(document.querySelector('[data-board-x="1"][data-board-y="1"]'), 'click');

expect(listener.cellSelected).toHaveBeenCalledWith({ row: 1, column: 1 }); }); });});

Failure

DOMBoardView.prototype = { ... addListener: function(event, listener) { this._listener = listener; },

_cellClicked: function(row, column) { this._listener.cellSelected(row, column); }};

DOMBoardView.prototype = { ... addListener: function(event, listener) { this._listener = listener; },

_cellClicked: function(row, column) { this._listener.cellSelected(row, column); }};

Failure/Error: @application.shows_board(

expected: "X"

got: "" (using ==)

rake test:acceptance Failure/Error: @application.shows_board(

expected: "X"

got: "" (using ==)

main.js

Passed

DOMBoardView

cellSelected

iewLis

markCell

Mark Multiple

CellsWednesday, May 16, 12

DOMBoardView

cellSelected

iewLis

markCell

TurnTracker

newPlayersTurn

TurnTrackerListener

var DOMBoardView = require('./ui/dom_board_view').DOMBoardView;var TurnTracker = require('./turn_tracker').TurnTracker;

turnTracker.startNewGame(); boardView.renderBoard(3,3);});

var DOMBoardView = require('./ui/dom_board_view').DOMBoardView;var TurnTracker = require('./turn_tracker').TurnTracker;

turnTracker.startNewGame(); boardView.renderBoard(3,3);});

main.js

var TurnTracker = require('../../src/turn_tracker').TurnTracker;

describe('TurnTracker', function() { it('notifies its listeners that it is the first players turn when told to start a new game', function() { var player1 = {player: 1}, player2 = {player:2}; var turnTracker = new TurnTracker(player1, player2); var listener = { newPlayersTurn: jasmine.createSpy(‘listener#newPlayersTurn’) }; turnTracker.addListener(‘newPlayersTurn’, listener); turnTracker.startNewGame();

expect(listener.newPlayersTurn).toHaveBeenCalledWith( player1);

});});

describe('TurnTracker', function() { it('notifies its listeners that it is the first players turn when told to start a new game', function() { var player1 = {player: 1}, player2 = {player:2}; var turnTracker = new TurnTracker(player1, player2); var listener = { newPlayersTurn: jasmine.createSpy(‘listener#newPlayersTurn’) }; turnTracker.addListener(‘newPlayersTurn’, listener); turnTracker.startNewGame();

expect(listener.newPlayersTurn).toHaveBeenCalledWith( player1);

});});

spec/unit/turn_tracker_spec.js

Failure

rake test:unit

Failure

var TurnTracker = function(player1, player2) { this._player1 = player1; this._player2 = player2;};

TurnTracker.prototype = { addListener: function(event, listener) { this._listener = listener; },

startNewGame: function() { this._listener.newPlayersTurn(player1); }};

var TurnTracker = function(player1, player2) { this._player1 = player1; this._player2 = player2;};

TurnTracker.prototype = { addListener: function(event, listener) { this._listener = listener; },

startNewGame: function() { this._listener.newPlayersTurn(player1); }};

src/turn_tracker.js

Passed

rake test:unit

Passed

Duplicate Code For

EventsWednesday, May 16, 12

var Announce = require('../../src/util/announcer').Announcer;

describe('Announcer', function() { var announcer, listener; beforeEach(function() { announcer = new Announcer(); listener = { someEvent: jasmine.createSpy('listener#someEvent') }; });

it('notifies its listeners when an event they are registered for happens', function() { announcer.addListener('someEvent', listener);

announcer.announce('someEvent', 'abc');

expect(listener.someEvent).toHaveBeenCalledWith('abc'); });});

describe('Announcer', function() { var announcer, listener; beforeEach(function() { announcer = new Announcer(); listener = { someEvent: jasmine.createSpy('listener#someEvent') }; });

it('notifies its listeners when an event they are registered for happens', function() { announcer.addListener('someEvent', listener);

expect(listener.someEvent).toHaveBeenCalledWith('abc'); });});

spec/unit/announcer_spec.js

Failure

rake test:unit

Failure

var Announcer = function() {};

Announcer.prototype = { addListener: function(event, listener) { this._listener = listener; },

announce: function(event, data) { this._listener.someEvent(data); }};

Announcer.prototype = { addListener: function(event, listener) { this._listener = listener; },

announce: function(event, data) { this._listener.someEvent(data); }};

src/util/announcer.js

Passed

rake test:unit

Passed

describe('Announcer', function() { ... it('does not notify its listeners when an event they are not registered for happens', function() { announcer.addListener('anotherEvent', listener);

expect(listener.someEvent).not.toHaveBeenCalled(); });});

describe('Announcer', function() { ... it('does not notify its listeners when an event they are not registered for happens', function() { announcer.addListener('anotherEvent', listener);

expect(listener.someEvent).not.toHaveBeenCalled(); });});

Failure

rake test:unit

Failure

Announcer.prototype = { addListener: function(event, listener) { this._listener = listener; this._event = event; },

announce: function(event, data) { if (this._event === event) { this._listener.someEvent(data); } }};

Announcer.prototype = { addListener: function(event, listener) { this._listener = listener; this._event = event; },

announce: function(event, data) { if (this._event === event) { this._listener.someEvent(data); } }};

Passed

rake test:unit

Passed

describe('Announcer', function() { ... it('notifies multiple listeners when an event they are registered for happens', function() { var listener2 = { anotherEvent: jasmine.createSpy('listener2#anotherEvent') };

announcer.addListener('anotherEvent', listener); announcer.addListener('anotherEvent', listener2); announcer.announce('anotherEvent', 'abc');

expect(listener.someEvent).toHaveBeenCalledWith('abc'); expect(listener2.someEvent).toHaveBeenCalledWith('abc'); });});

describe('Announcer', function() { ... it('notifies multiple listeners when an event they are registered for happens', function() { var listener2 = { anotherEvent: jasmine.createSpy('listener2#anotherEvent') };

announcer.addListener('anotherEvent', listener); announcer.addListener('anotherEvent', listener2); announcer.announce('anotherEvent', 'abc');

expect(listener.someEvent).toHaveBeenCalledWith('abc'); expect(listener2.someEvent).toHaveBeenCalledWith('abc'); });});

Failure

rake test:unit

Failure

var Announcer = function() { this._events = {};};

Announcer.prototype = { addListener: function(event, listener) { this._events[event] = this._events[event] || []; this._events[event].push(listener); },

announce: function(event, data) { var registeredListeners = this._events[event] || []; registeredListeners.forEach(function(listener) { listener[event](data); }); }};

var Announcer = function() { this._events = {};};

Announcer.prototype = { addListener: function(event, listener) { this._events[event] = this._events[event] || []; this._events[event].push(listener); },

announce: function(event, data) { var registeredListeners = this._events[event] || []; registeredListeners.forEach(function(listener) { listener[event](data); }); }};

Passed

rake test:unit

Passed

var Announcer = require('./util/announcer').Announcer;var TurnTracker = function(player1, player2) { this._player1 = player1; this._player2 = player2; this._announcer = new Announcer();};

TurnTracker.prototype = { addListener: function(event, listener) { this._announcer.addListener(event, listener); },

startNewGame: function() { this._announcer.announce('newPlayersTurn', this._player1); }};

var Announcer = require('./util/announcer').Announcer;var TurnTracker = function(player1, player2) { this._player1 = player1; this._player2 = player2; this._announcer = new Announcer();};

startNewGame: function() { this._announcer.announce('newPlayersTurn', this._player1); }};

src/turn_tracker.js

Passed

rake test:unit

Passed

Same With DOM Board

ViewWednesday, May 16, 12

describe('TurnTracker', function() { ... it('notifies its listeners that it is the next players turn when told to that a player now owns a new cell', function() { turnTracker.startNewGame(); listener.newPlayersTurn.reset();

turnTracker.playerOwnsNewCell({row: 1, column: 1});

expect(listener.newPlayersTurn).toHaveBeenCalledWith( player2); });});

describe('TurnTracker', function() { ... it('notifies its listeners that it is the next players turn when told to that a player now owns a new cell', function() { turnTracker.startNewGame(); listener.newPlayersTurn.reset();

turnTracker.playerOwnsNewCell({row: 1, column: 1});

expect(listener.newPlayersTurn).toHaveBeenCalledWith( player2); });});

spec/unit/turn_tracker_spec.js

Failure

rake test:unit

Failure

With Some Refactoring

var STATES = { PLAYER1_TURN: { playerOwnsNewCell: function(newCellInformation) { this._announcer.announce('newPlayersTurn', this._player2); this._currentState = STATES.PLAYER2_TURN; } },

PLAYER2_TURN: { playerOwnsNewCell: function(newCellInformation) { this._announcer.announce('newPlayersTurn', this._player1); this._currentState = STATES.PLAYER1_TURN; } }};

var TurnTracker = function(player1, player2) { this._announcer = new Announcer(); this._player1 = player1; this._player2 = player2; this._currentState = STATES.PLAYER1_TURN;};

playerOwnsNewCell: function(newCellInformation) { this._currentState.playerOwnsNewCell.call(this, newCellInformation); },

startNewGame: function() { this._announcer.announce('newPlayersTurn', this._player1); this._currentState = STATES.PLAYER1_TURN; }};

var STATES = { PLAYER1_TURN: { playerOwnsNewCell: function(newCellInformation) { this._announcer.announce('newPlayersTurn', this._player2); this._currentState = STATES.PLAYER2_TURN; } },

PLAYER2_TURN: { playerOwnsNewCell: function(newCellInformation) { this._announcer.announce('newPlayersTurn', this._player1); this._currentState = STATES.PLAYER1_TURN; } }};

var TurnTracker = function(player1, player2) { this._announcer = new Announcer(); this._player1 = player1; this._player2 = player2; this._currentState = STATES.PLAYER1_TURN;};

playerOwnsNewCell: function(newCellInformation) { this._currentState.playerOwnsNewCell.call(this, newCellInformation); },

startNewGame: function() { this._announcer.announce('newPlayersTurn', this._player1); this._currentState = STATES.PLAYER1_TURN; }};

src/turn_tracker.js

Passed

rake test:unit

Passed

Show And Track Victory

describe "end to end acceptance test", :type => :request do ... it "marks the board" do ... @application.mark_board(1,0) @application.shows_board( [ ['X','X',' '], ['O','O',' '], [' ',' ',' '] ] ) @application.mark_board(0,2) @application.shows_board( [ ['X','X','X'], ['O','O',' '], [' ',' ',' '] ] ) @application.shows_player1_won endend

Failure/Error: @application.shows_player1_won

DOMBoardView

cellSelected

iewLis

markCell

TurnTracker

newPlayersTurn

TurnTrackerListener

playerOwnsNewCell

DOMBoardView

TurnTracker

PlayerplayerOwnsNewCell

markCell

DOMAlert

RenderershowPlayerWonGame

receiveCell

turnTracker.addListener('newPlayersTurn', eventHandler); boardView.addListener('cellSelected', eventHandler); player1.addListener('playerOwnsNewCell', turnTracker); player2.addListener('playerOwnsNewCell', turnTracker);

turnTracker.startNewGame(); boardView.renderBoard(3, 3);});

turnTracker.addListener('newPlayersTurn', eventHandler); boardView.addListener('cellSelected', eventHandler); player1.addListener('playerOwnsNewCell', turnTracker); player2.addListener('playerOwnsNewCell', turnTracker);

turnTracker.startNewGame(); boardView.renderBoard(3, 3);});

main.js

describe('Player', function() { var player, board, listener; beforeEach(function() { board = new BoardRole(); player = new Player('X', board); listener = new PlayerListenerRole(); player.addListener('playerOwnsNewCell', listener); });

describe('when it is told that to receive a cell', function() { beforeEach(function() { player.receiveCell({row: 2, column: 2}); });

it('tells its board to mark that square with its marker', function() { expect(board.markCell).toHaveBeenCalledWith(2,2,'X'); }); });

spec/unit/player_spec.js

Failure

rake test:unit

Failure

var Player = function(marker, board, alertRenderer) { this._marker = marker; this._board = board;};

Player.prototype = { receiveCell: function(cellInformation) { this._board.markCell(cellInformation.row, cellInformation.column, this._marker); }};

var Player = function(marker, board, alertRenderer) { this._marker = marker; this._board = board;};

Player.prototype = { receiveCell: function(cellInformation) { this._board.markCell(cellInformation.row, cellInformation.column, this._marker); }};

src/player.js

Passed

rake test:unit

Passed

it('tells its board to mark that square with its marker', function() { expect(board.markCell).toHaveBeenCalledWith(2,2,'X'); });

it('notifies its listeners that it owns the cell that was selected', function() { expect(listener.playerOwnsNewCell).toHaveBeenCalledWith( {row: 2, column: 2}); }); ... });

it('tells its board to mark that square with its marker', function() { expect(board.markCell).toHaveBeenCalledWith(2,2,'X'); });

it('notifies its listeners that it owns the cell that was selected', function() { expect(listener.playerOwnsNewCell).toHaveBeenCalledWith( {row: 2, column: 2}); }); ... });

Failure

rake test:unit

Failure

var Player = function(marker, board, alertRenderer) { this._marker = marker; this._board = board; this._announcer = new Announcer();};

Player.prototype = { receiveCell: function(cellInformation) { this._board.markCell(cellInformation.row, cellInformation.column, this._marker); this._announcer.announce('playerOwnsNewCell’, cellInformation); }};

var Player = function(marker, board, alertRenderer) { this._marker = marker; this._board = board; this._announcer = new Announcer();};

Player.prototype = { receiveCell: function(cellInformation) { this._board.markCell(cellInformation.row, cellInformation.column, this._marker); this._announcer.announce('playerOwnsNewCell’, cellInformation); }};

src/player.js

Passed

rake test:unit

Passed

describe('Player', function() { ... it('notifies tells its alerter that it has one the game when it receives all the cells in a row', function() { player.receiveCell({row: 0, column: 0}); player.receiveCell({row: 0, column: 1}); player.receiveCell({row: 0, column: 2}); expect(alerter.playerWonGame).toHaveBeenCalledWith({player: 'X'}); });});

Failure

rake test:unit

Failure

With Some Refactoring

var Player = function(marker, board, alertRenderer) { this._marker = marker; this._board = board; this._alerter = alertRenderer; this._announcer = new Announcer(); this._rows = []; for(var i = 0; i < 3; i++) { this._rows[i] = new CellTracker(3); }};

Player.prototype = { receiveCell: function(cellInformation) { this._board.markCell(cellInformation.row, cellInformation.column, this._marker); this._announcer.announce('playerOwnsNewCell’, cellInformation); this._rows[cellInformation.row].takeCell(); if (this._hasWonGame(cellInformation)) { this._alerter.playerWonGame({player: this._marker}); } }};...

var Player = function(marker, board, alertRenderer) { this._marker = marker; this._board = board; this._alerter = alertRenderer; this._announcer = new Announcer(); this._rows = []; for(var i = 0; i < 3; i++) { this._rows[i] = new CellTracker(3); }};

Player.prototype = { receiveCell: function(cellInformation) { this._board.markCell(cellInformation.row, cellInformation.column, this._marker); this._announcer.announce('playerOwnsNewCell’, cellInformation); this._rows[cellInformation.row].takeCell(); if (this._hasWonGame(cellInformation)) { this._alerter.playerWonGame({player: this._marker}); } }};...

src/player.js

var CellTracker = function(totalCells) { this._remainingCells = totalCells;};

CellTracker.prototype = { takeCell: function() { this._remainingCells -= 1; },

hasAllCells: function() { return this._remainingCells === 0; }};

var CellTracker = function(totalCells) { this._remainingCells = totalCells;};

CellTracker.prototype = { takeCell: function() { this._remainingCells -= 1; },

hasAllCells: function() { return this._remainingCells === 0; }};

src/player.js

Passed

rake test:unit

Passed

var DOMAlertRenderer = require('ui/dom_alert_renderer').DOMAlertRenderer;

describe('DOMAlertRenderer', function() { it('renders an alert when a player wins the game', function() { var renderer = new DOMAlertRenderer(); renderer.playerWonGame({player: 'X'});

expect(document.body.querySelector('.alert').innerText).toEqual("'X' Wins"); });});

var DOMAlertRenderer = require('ui/dom_alert_renderer').DOMAlertRenderer;

describe('DOMAlertRenderer', function() { it('renders an alert when a player wins the game', function() { var renderer = new DOMAlertRenderer(); renderer.playerWonGame({player: 'X'});

expect(document.body.querySelector('.alert').innerText).toEqual("'X' Wins"); });});

spec/integration/dom_alert_renderer_spec.js

Failure

rake test:unit

Failure

var DOMAlertRenderer = function() {};

DOMAlertRenderer.prototype = { playerWonGame: function(playerInformation) { var element = document.createElement('div'); element.className = 'alert'; element.innerText = ”’” + playerInformation.player + “‘ Wins”; document.body.appendChild(element); }};

var DOMAlertRenderer = function() {};

DOMAlertRenderer.prototype = { playerWonGame: function(playerInformation) { var element = document.createElement('div'); element.className = 'alert'; element.innerText = ”’” + playerInformation.player + “‘ Wins”; document.body.appendChild(element); }};

ui/dom_alert_renderer.js

Passed

rake test:unit

Passed

Other Features

AI Player?

DOMBoardView

TurnTracker

markCell

DOMAlert

receiveCell

Remote Player?

DOMBoardView

TurnTracker

markCell

DOMAlert

receiveCell

Questions?

Gregory Moeck@gregmoeck

extending your tdd cycle into javascriptfiles.meetup.com/310796/tdd_javascript.pdf · 1 wednesday,...

Documents

intro to tdd and bdd

tdd & bdd as efficient practices of software development

bdd behaviour driven development - lech...

i os tdd-with-bdd

making agile real executable requirements: bdd with easyb...

emergent architecture with tdd/bdd...emergent architecture...

the why behind tdd/bdd and the how with rspec

test and behaviour driven development with python€¦ ·...

emergent architecture with tdd/bdd

intro to tdd & bdd

tdd & bdd in f# at progressive f# tutorials 2011

shallow depth of tests scallable bdd and tdd

brainwindbrainwind.de/brainwind-portfolio.pdf · mvvm,...

a bird’s eye view on the agile forest...development...

test and behaviour driven development (tdd/bdd)

synerzip · tdd = refactoring + tfd xp - extreme...

tdd, bdd and mocks

[tech talk] testing for the skeptical developer (tdd, bdd &...

introduction to tdd and bdd

understanding bdd and tdd with lego