Extending Your TDD Cycle Into JavaScriptfiles.meetup.com/310796/tdd_javascript.pdf · 1 Wednesday, May 16, 12. Practice TDD/BDD In Ruby/Rails Wednesday, May 16, 12. Question 2 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

Port

Adapter

Port

Adapter

Port

Adapter

Port


Key Idea:Isolate

Application Domain


What Is A Port?


An Interface To Technical

InfrastructureWednesday, May 16, 12

Examples:


Examples:DOM


Examples:DOM

XMLHTTPRequest


Examples:DOM

XMLHTTPRequest

WEBDB


Examples:DOM

XMLHTTPRequest

WEBDB

Websockets


Examples:DOM

XMLHTTPRequest

WEBDB

Websockets

IndexedDB


Examples:DOM

XMLHTTPRequest

WEBDB

Websockets

IndexedDB

LocalStorage


Examples:DOM

XMLHTTPRequest

WEBDB

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


Unit Tests Node


Unit Tests NodeIntegration

Tests



Tests



Tests Browser



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


XO

OO

XX X

Tic-Tac-Toe


Emergent Design, So

Not Perfectly Architected


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


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

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")

end

desc "Run all unit tests"

task :unit do

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

end

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")

end

end

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

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

end

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

end

desc "Debug the application"

task :debug do

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

sleep 1

system("open public/index.html")

end

desc "Run a server for prototyping"

task :server do

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

end


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


http://localhost

http://localhost

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



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



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



Passed


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



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 ==)



document.addEventListener("DOMContentLoaded", function() { var boardView = new DOMBoardView(); var eventHandler = { cellSelected: function(row, column) { boardView.markCell(row, column, ‘X’); } }; boardView.addListener(‘cellSelected’, eventHandler); boardView.renderBoard(3,3);});







main.js


Passed



Passed


DOMBoardView

Main

cellSelected

DO

MBo

ardV

iewLis

tene

r

markCell


Mark Multiple

CellsWednesday, May 16, 12

DOMBoardView

Main

cellSelected

DO

MBo

ardV

iewLis

tene

r

markCell

TurnTracker

newPlayersTurn

TurnTrackerListener


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

document.addEventListener("DOMContentLoaded", function() { var boardView = new DOMBoardView(); var turnTracker = new TurnTracker(‘X’, ‘O’); var eventHandler = { cellSelected: function(row, column) { boardView.markCell(row, column, ‘X’); turnTracker.playerOwnsNewCell({row: row, column: column}); } }; turnTracker.addListener(‘newPlayersTurn’, eventHandler); boardView.addListener(‘cellSelected’, eventHandler);

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


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

document.addEventListener("DOMContentLoaded", function() { var boardView = new DOMBoardView(); var turnTracker = new TurnTracker(‘X’, ‘O’); var eventHandler = { cellSelected: function(row, column) { boardView.markCell(row, column, ‘X’); turnTracker.playerOwnsNewCell({row: row, column: column}); } }; turnTracker.addListener(‘newPlayersTurn’, eventHandler); boardView.addListener(‘cellSelected’, eventHandler);

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


Passed



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



Failure/Error: @application.shows_player1_won


DOMBoardView

Main

cellSelected

DO

MBo

ardV

iewLis

tene

r

markCell

TurnTracker

newPlayersTurn

TurnTrackerListener

playerOwnsNewCell


DOMBoardView

Main

TurnTracker

PlayerplayerOwnsNewCell

markCell

DOMAlert

RenderershowPlayerWonGame

receiveCell


document.addEventListener("DOMContentLoaded", function() { var boardView = new DOMBoardView(); var player1 = new Player('X', boardView, alertRenderer); var player2 = new Player('O', boardView, alertRenderer); var turnTracker = new TurnTracker(player1, player2); var eventHandler = { cellSelected: function(cellInformation) { this._currentPlayer.receiveCell(cellInformation); }, newPlayersTurn: function(player) { this._currentPlayer = player; } } var alertRenderer = new DOMAlertRenderer();

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

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


document.addEventListener("DOMContentLoaded", function() { var boardView = new DOMBoardView(); var player1 = new Player('X', boardView, alertRenderer); var player2 = new Player('O', boardView, alertRenderer); var turnTracker = new TurnTracker(player1, player2); var eventHandler = { cellSelected: function(cellInformation) { this._currentPlayer.receiveCell(cellInformation); }, newPlayersTurn: function(player) { this._currentPlayer = player; } } var alertRenderer = new DOMAlertRenderer();

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'); }); });




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'}); });});


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


Passed



Passed


Other Features


AI Player?


DOMBoardView

Main

TurnTracker


markCell

DOMAlert


receiveCell


Remote Player?


DOMBoardView

Main

TurnTracker


markCell

DOMAlert


receiveCell


Questions?

Gregory Moeck@gregmoeck


Documents

Extending Your TDD Cycle Into JavaScriptfiles.meetup.com/310796/tdd_javascript.pdf · 1 Wednesday, May 16, 12. Practice TDD/BDD In Ruby/Rails Wednesday, May 16, 12. Question 2 Wednesday,