Skip to content

Commit

Permalink
Building out the childViews.
Browse files Browse the repository at this point in the history
  • Loading branch information
cebartling committed Mar 4, 2014
1 parent 6861a83 commit 9a54c2e
Show file tree
Hide file tree
Showing 16 changed files with 222 additions and 37 deletions.
2 changes: 1 addition & 1 deletion web-client/app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
</div>

<!-- build:js scripts/vendor.js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/backbone/backbone.js"></script>
<script src="bower_components/handlebars/handlebars.js"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@
team2: {region_seeding: 9, team_name: "Villanova", record: "(20-13)", score: 71, winner: false}
},
game3: {
team1: {region_seeding: 5, team_name: "Virginia Commonwealth", record: "(26-8)", score: 88, winner: true},
team1: {region_seeding: 5, team_name: "Virginia Common.", record: "(26-8)", score: 88, winner: true},
team2: {region_seeding: 12, team_name: "Akron", record: "(26-6)", score: 52, winner: false}
},
game4: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
<h3>{{ this.round_header }}</h3>
</div>
<div class="row">
<div class="tournament-bracket-header-view col-sm-3">
<div class="tournament-bracket-header-view col-sm-2">
Midwest
</div>
<div class="tournament-bracket-header-view col-sm-3">
<div class="tournament-bracket-header-view col-sm-offset-1 col-sm-2">
West
</div>
<div class="tournament-bracket-header-view col-sm-3">
<div class="tournament-bracket-header-view col-sm-offset-1 col-sm-2">
South
</div>
<div class="tournament-bracket-header-view col-sm-3">
<div class="tournament-bracket-header-view col-sm-offset-1 col-sm-2">
East
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion web-client/app/scripts/views/tournament-bracket-view.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
'use strict';

BasketballTournament.Views.TournamentBracketView = Backbone.View.extend({
className: 'tournament-bracket-view col-sm-3',
className: 'tournament-bracket-view col-sm-2',
template: JST['app/scripts/templates/tournament-bracket-view.hbs'],

render: function () {
Expand Down
36 changes: 23 additions & 13 deletions web-client/app/scripts/views/tournament-first-round-view.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,38 @@
className: 'tournament-round-view',
template: JST['app/scripts/templates/tournament-first-round-view.hbs'],

initialize: function(options) {
this.childViews = [];
},

render: function () {
this.$el.html(this.template(this.model.toJSON()));
this.renderBrackets();
return this;
},

renderBrackets: function () {
var game1Model = new BasketballTournament.Models.BracketModel(this.model.get('game1'));
var game1View = new BasketballTournament.Views.TournamentBracketView({ model: game1Model });
var game2Model = new BasketballTournament.Models.BracketModel(this.model.get('game2'));
var game2View = new BasketballTournament.Views.TournamentBracketView({ model: game2Model });
var game3Model = new BasketballTournament.Models.BracketModel(this.model.get('game3'));
var game3View = new BasketballTournament.Views.TournamentBracketView({ model: game3Model });
var game4Model = new BasketballTournament.Models.BracketModel(this.model.get('game4'));
var game4View = new BasketballTournament.Views.TournamentBracketView({ model: game4Model });
this.removeChildViews();
var row = $('<div class="row"></div>');
row.append(game1View.render().el);
row.append(game2View.render().el);
row.append(game3View.render().el);
row.append(game4View.render().el);
var games = ['game1', 'game2', 'game3', 'game4'];
var addOffset = false;
_.each(games, $.proxy(function(game){
var model = new BasketballTournament.Models.BracketModel(this.model.get(game));
var className = (addOffset) ? 'tournament-bracket-view col-sm-offset-1 col-sm-2'
: 'tournament-bracket-view col-sm-2';
var view = new BasketballTournament.Views.TournamentBracketView({ model: model, className: className });
this.childViews.push(view);
row.append(view.render().el);
addOffset = true;
}, this));
this.$el.find('div#brackets-container').append(row);
}
},

removeChildViews: function() {
_.each(this.childViews, function(childView){
childView.remove();
});
this.childViews = [];
}
});
})();
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,5 @@
row.append(game2View.render().el);
this.$el.find('div#brackets-container').append(row);
}

});
})();
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,16 @@
var midwestBracketView = new BasketballTournament.Views.TournamentBracketView({model: midwestGameModel});

var westGameModel = new BasketballTournament.Models.BracketModel(regions.west[gameIndex]);
var westBracketView = new BasketballTournament.Views.TournamentBracketView({model: westGameModel});
var westBracketView = new BasketballTournament.Views.TournamentBracketView({model: westGameModel,
className: 'tournament-bracket-view col-sm-offset-1 col-sm-2'});

var southGameModel = new BasketballTournament.Models.BracketModel(regions.south[gameIndex]);
var southBracketView = new BasketballTournament.Views.TournamentBracketView({model: southGameModel});
var southBracketView = new BasketballTournament.Views.TournamentBracketView({model: southGameModel,
className: 'tournament-bracket-view col-sm-offset-1 col-sm-2'});

var eastGameModel = new BasketballTournament.Models.BracketModel(regions.east[gameIndex]);
var eastBracketView = new BasketballTournament.Views.TournamentBracketView({model: eastGameModel});
var eastBracketView = new BasketballTournament.Views.TournamentBracketView({model: eastGameModel,
className: 'tournament-bracket-view col-sm-offset-1 col-sm-2'});

var row = $('<div class="row"></div>');
row.append(midwestBracketView.render().el);
Expand Down
5 changes: 3 additions & 2 deletions web-client/app/styles/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,15 @@ body {
text-align: center;
}


.tournament-bracket-view {
margin-bottom: 20px;
background-color: #ddd;
border: 1px solid transparent;
border: 1px solid #bcbcbc;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
font-size: 16px;
font-size: 13px;
}

.tournament-bracket-view > .team1 {
Expand Down
10 changes: 5 additions & 5 deletions web-client/bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@
"name": "web-client",
"version": "0.0.0",
"dependencies": {
"bootstrap": "~3.0.0",
"jquery": "~1.9.0",
"underscore": "~1.5.2",
"backbone": "~1.1.0",
"modernizr": "~2.6.2",
"bootstrap": "~3.1.1",
"jquery": "~2.1.0",
"underscore": "~1.6.0",
"backbone": "~1.1.2",
"modernizr": "~2.7.1",
"handlebars": "~1.0.0"
},
"devDependencies": {}
Expand Down
5 changes: 2 additions & 3 deletions web-client/karma.conf.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,11 @@ module.exports = function (config) {


files: [
'app/bower_components/jquery/jquery.js',
'app/bower_components/jquery/dist/jquery.js',
'app/bower_components/underscore/underscore.js',
'app/bower_components/backbone/backbone.js',
'app/bower_components/handlebars/handlebars.js',
'app/bower_components/bootstrap/dist/js/bootstrap.js',
'test/bower_components/jasmine-jquery/lib/jasmine-jquery.js',
'app/scripts/namespaces.js',
'.tmp/scripts/templates.js',
'app/scripts/**/*.js',
Expand Down Expand Up @@ -80,7 +79,7 @@ module.exports = function (config) {
// source files, that you wanna generate coverage for
// do not include tests or libraries
// (these files will be instrumented by Istanbul)
'app/scripts/*.js': ['coverage']
'app/scripts/**/*.js': ['coverage']
},

// optionally, configure the reporter
Expand Down
2 changes: 1 addition & 1 deletion web-client/test/bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "web-client",
"version": "0.0.0",
"dependencies": {
"jasmine": "~1.3.1"
"jasmine": "1.3.1"
},
"devDependencies": {}
}
4 changes: 2 additions & 2 deletions web-client/test/spec/views/tournament-bracket-view-spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
expect(view.tagName).toBe('div');
});

it('sets the className to "tournament-bracket-view col-sm-3".', function () {
expect(view.className).toBe('tournament-bracket-view col-sm-3');
it('sets the className to "tournament-bracket-view col-sm-2".', function () {
expect(view.className).toBe('tournament-bracket-view col-sm-2');
});
});

Expand Down
79 changes: 79 additions & 0 deletions web-client/test/spec/views/tournament-first-round-view-spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
(function () {
'use strict';

describe('BasketballTournament.Views.TournamentFirstRoundView', function () {
var view, model;

beforeEach(function () {
model = new BasketballTournament.Models.TournamentRoundModel(BasketballTournament.DataBuilders.TournamentRoundDataBuilder.round1, {round: 1});
view = new BasketballTournament.Views.TournamentFirstRoundView({model: model});
});

describe('Initialization', function () {

it('sets the Handlebars template.', function () {
expect(view.template).toBe(JST['app/scripts/templates/tournament-first-round-view.hbs']);
});

it('sets the tagName to "div".', function () {
expect(view.tagName).toBe('div');
});

it('sets the className to "tournament-round-view".', function () {
expect(view.className).toBe('tournament-round-view');
});

it('initializes an empty childViews array.', function () {
expect(view.childViews).toBeDefined();
});
});

describe('Render view', function () {

it("invokes the template function, passing an empty context.", function () {
var spy = spyOn(view, 'template').andCallThrough();
view.render();
expect(spy).toHaveBeenCalledWith(model.toJSON());
});

it("invokes the $el.html function, pass the template invocation output.", function () {
var spy = spyOn(view.$el, 'html').andCallThrough();
view.render();
expect(spy).toHaveBeenCalledWith(view.template(model.toJSON()));
});

it('invokes the renderBrackets function.', function () {
var spy = spyOn(view, 'renderBrackets');
view.render();
expect(spy).toHaveBeenCalled();
});

it("returns a reference to the view itself, for method chaining.", function () {
expect(view.render()).toBe(view);
});
});

describe('.renderBrackets function', function () {
beforeEach(function () {
view.$el = $('<div><div id="brackets-container"></div></div>');
});

it('should remove all previous child views.', function () {
var spy = spyOn(view, 'removeChildViews');
view.renderBrackets();
expect(spy).toHaveBeenCalled();
});

it('should render 4 game brackets for the first round.', function () {
view.renderBrackets();
expect(view.$el.find('div.tournament-bracket-view').length).toBe(4);
});

it('should have 4 child views in the childViews array.', function () {
view.renderBrackets();
expect(view.childViews.length).toBe(4);
});
});
});

})();
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
(function () {
'use strict';

describe('BasketballTournament.Views.TournamentNationalFinalsRoundView', function () {
var view, model;

beforeEach(function () {
model = new BasketballTournament.Models.TournamentRoundModel(BasketballTournament.DataBuilders.TournamentRoundDataBuilder.round7, {round: 7});
view = new BasketballTournament.Views.TournamentNationalFinalsRoundView({model: model});
});

describe('Initialization', function () {
it('sets the Handlebars template.', function () {
expect(view.template).toBe(JST['app/scripts/templates/tournament-national-finals-round-view.hbs']);
});

it('sets the tagName to "div".', function () {
expect(view.tagName).toBe('div');
});

it('sets the className to "tournament-round-view".', function () {
expect(view.className).toBe('tournament-round-view');
});
});

describe('Render view', function () {

it("invokes the template function, passing an empty context.", function () {
var spy = spyOn(view, 'template').andCallThrough();
view.render();
expect(spy).toHaveBeenCalledWith(model.toJSON());
});

it("invokes the $el.html function, pass the template invocation output.", function () {
var spy = spyOn(view.$el, 'html').andCallThrough();
view.render();
expect(spy).toHaveBeenCalledWith(view.template(model.toJSON()));
});

it("returns a reference to the view itself, for method chaining.", function () {
expect(view.render()).toBe(view);
});
});
});

})();

Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
(function () {
'use strict';

describe('BasketballTournament.Views.TournamentNationalSemifinalsRoundView', function () {
var view, model;

beforeEach(function () {
model = new BasketballTournament.Models.TournamentRoundModel(BasketballTournament.DataBuilders.TournamentRoundDataBuilder.round6, {round: 6});
view = new BasketballTournament.Views.TournamentNationalSemifinalsRoundView({model: model});
});

describe('Initialization', function () {
it('sets the Handlebars template.', function () {
expect(view.template).toBe(JST['app/scripts/templates/tournament-national-semifinals-round-view.hbs']);
});

it('sets the tagName to "div".', function () {
expect(view.tagName).toBe('div');
});

it('sets the className to "tournament-round-view".', function () {
expect(view.className).toBe('tournament-round-view');
});
});

describe('Render view', function () {

it("invokes the template function, passing an empty context.", function () {
var spy = spyOn(view, 'template').andCallThrough();
view.render();
expect(spy).toHaveBeenCalledWith(model.toJSON());
});

it("invokes the $el.html function, pass the template invocation output.", function () {
var spy = spyOn(view.$el, 'html').andCallThrough();
view.render();
expect(spy).toHaveBeenCalledWith(view.template(model.toJSON()));
});

it("returns a reference to the view itself, for method chaining.", function () {
expect(view.render()).toBe(view);
});
});
});

})();

0 comments on commit 9a54c2e

Please sign in to comment.