Permalink
Browse files

clean up code and add unit test for the javascript

  • Loading branch information...
1 parent 4975480 commit 4b3eb61c9f799cdcd4d86223a483bd16eb0947f0 @endor endor committed Jun 1, 2012
View
@@ -9,6 +9,8 @@ gem 'rails', '3.2.1'
gem 'pg', '0.12.2'
+gem 'jasmine'
+
# Gems used only for assets and not required
# in production environments by default.
group :assets do
View
@@ -28,25 +28,38 @@ GEM
activesupport (3.2.1)
i18n (~> 0.6)
multi_json (~> 1.0)
+ addressable (2.2.8)
arel (3.0.2)
builder (3.0.0)
+ childprocess (0.3.2)
+ ffi (~> 1.0.6)
coffee-rails (3.2.2)
coffee-script (>= 2.2.0)
railties (~> 3.2.0)
coffee-script (2.2.0)
coffee-script-source
execjs
coffee-script-source (1.3.1)
+ diff-lcs (1.1.3)
erubis (2.7.0)
execjs (1.3.0)
multi_json (~> 1.0)
+ ffi (1.0.11)
hike (1.2.1)
i18n (0.6.0)
+ jasmine (1.2.0)
+ jasmine-core (>= 1.2.0)
+ rack (~> 1.0)
+ rspec (>= 1.3.1)
+ selenium-webdriver (>= 0.1.3)
+ jasmine-core (1.2.0)
journey (1.0.3)
jquery-rails (2.0.2)
railties (>= 3.2.0, < 5.0)
thor (~> 0.14)
json (1.6.6)
+ libwebsocket (0.1.3)
+ addressable
mail (2.4.4)
i18n (>= 0.4.0)
mime-types (~> 1.16)
@@ -80,11 +93,26 @@ GEM
rake (0.9.2.2)
rdoc (3.12)
json (~> 1.4)
+ rspec (2.10.0)
+ rspec-core (~> 2.10.0)
+ rspec-expectations (~> 2.10.0)
+ rspec-mocks (~> 2.10.0)
+ rspec-core (2.10.1)
+ rspec-expectations (2.10.0)
+ diff-lcs (~> 1.1.3)
+ rspec-mocks (2.10.1)
+ rubyzip (0.9.8)
sass (3.1.16)
sass-rails (3.2.5)
railties (~> 3.2.0)
sass (>= 3.1.10)
tilt (~> 1.3)
+ selenium-webdriver (2.22.0)
+ childprocess (>= 0.2.5)
+ ffi (~> 1.0)
+ libwebsocket (~> 0.1.3)
+ multi_json (~> 1.0)
+ rubyzip
sprockets (2.1.2)
hike (~> 1.2)
rack (~> 1.0)
@@ -104,6 +132,7 @@ PLATFORMS
DEPENDENCIES
coffee-rails (~> 3.2.1)
+ jasmine
jquery-rails
pg (= 0.12.2)
rails (= 3.2.1)
View
@@ -3,6 +3,7 @@
# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
require File.expand_path('../config/application', __FILE__)
+require File.expand_path('../test/javascripts/support/jasmine_config', __FILE__)
Bread::Application.load_tasks
@@ -1,10 +1,4 @@
-// # Place all the behaviors and hooks related to the matching controller here.
-// # All this logic will automatically be available in application.js.
-// # You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
-
bread.initOrderBackbone = function() {
- var componentsArray = [];
-
bread.OrderModel = Backbone.Model.extend({
defaults: {
quantity: 1,
@@ -48,7 +42,7 @@ bread.initOrderBackbone = function() {
return this.get('order_id');
},
setOrderId: function(id){
- this.set('order_id', id)
+ this.set('order_id', id);
},
quantity: function(){
return this.get('quantity');
@@ -88,39 +82,38 @@ bread.initOrderBackbone = function() {
model.setStep(3);
model.setOrderId(data.order_id);
model.setPaypalEncrypted(data.paypal_encrypted_str);
- },
- error: function (xhr, status) {alert ('Sorry, there was a problem!')}
- })
+ },
+ error: function (xhr, status) { alert('Sorry, there was a problem!'); }
+ });
},
orderText: function() {
- var component_text = '';
+ var componentText = '',
+ componentName = function(comp_name) {
+ return "<span class='selected-component'>" + comp_name + "</span>"
+ };
var selected_elements = _.reduce(this.get("components"), function(components, selected, name) {
if(selected) { components.push(name); }
return components;
}, []);
if(selected_elements.length > 0) {
- component_text = componentName(selected_elements[selected_elements.length-1]);
+ componentText = componentName(selected_elements[selected_elements.length-1]);
//b and c
//a, b and c
var second_last_component = selected_elements.length-2;
for(var i = second_last_component; i >= 0; i--){
if(i == second_last_component){
- component_text = componentName(selected_elements[i]) + " and " + component_text;
+ componentText = componentName(selected_elements[i]) + " and " + componentText;
} else {
- component_text = componentName(selected_elements[i]) + ", " + component_text;
+ componentText = componentName(selected_elements[i]) + ", " + componentText;
}
}
- component_text = " with " + component_text;
- }
- return component_text;
-
- function componentName(comp_name){
- return "<span class='selected-component'>" + comp_name + "</span>";
+ componentText = " with " + componentText;
}
+ return componentText;
},
deliveryAddress: function(){
return this.get('delivery_address');
@@ -157,7 +150,7 @@ bread.initOrderBackbone = function() {
this.set('user_phone', s, {silent: true});
}
});
-
+
bread.OrderView = Backbone.View.extend({
tagName: "div",
@@ -202,12 +195,12 @@ bread.initOrderBackbone = function() {
events: {
"click #bread-crumbs span": "breadCrumbsHandler",
- "click #quantity-plus": "plusButtonHandler",
- "click #quantity-minus": "minusButtonHandler",
- "click .component-image": "componentImageHandler",
- "click #step-button": "stepButtonHandler",
- "change input:radio": "deliveryTypeHandler",
- "keyup #delivery-address": "addressChangeHandler",
+ "click #quantity-plus": "plusButtonHandler",
+ "click #quantity-minus": "minusButtonHandler",
+ "click .component-image": "componentImageHandler",
+ "click #step-button": "stepButtonHandler",
+ "change input:radio": "deliveryTypeHandler",
+ "keyup #delivery-address": "addressChangeHandler",
"blur #user-name": "userNameChangeHandler",
"blur #user-email": "userEmailChangeHandler",
"blur #user-comment": "userCommentChangeHandler",
@@ -1,16 +1,5 @@
bread.orderStart = function() {
- bread.initOrderBackbone(); //create Backbone Order related model and view
-
+ bread.initOrderBackbone();
bread.orderModel = new bread.OrderModel;
new bread.OrderView({ model: bread.orderModel });
-
- //extract avaiable components and set in the model
- // var availableComponents = $(".component-image");
- // var componentsArray = new Array(availableComponents.length);
- //
- // for(var i=0; i < availableComponents.length; i++){
- // componentsArray[i] = $(availableComponents[i]).attr('alt');
- // }
- //
- // bread.orderModel.setComponents(componentsArray);
};
View
@@ -1,13 +1,9 @@
development:
- adapter: postgresql
+ adapter: sqlite3
encoding: unicode
database: bread_db_dev
- username: mk
- pool: 5
test:
- adapter: postgresql
+ adapter: sqlite3
encoding: unicode
database: bread_db_test
- username: mk
- pool: 5
@@ -0,0 +1,143 @@
+<script type="text/template" id="bread-crumbs-template">
+
+<div id="bread-crumbs">
+ <span id='step1' class="<%= step == 1 ? 'active' : '' %> enabled">Step 1</span> >
+ <span id='step2' class="<%= step == 2 ? 'active' : '' %><%= max_step >= 2 ? ' enabled' : ' disabled' %>">Step 2</span> >
+ <span id='step3' class="<%= step == 3 ? 'active' : '' %><%= max_step >= 3 ? ' enabled' : ' disabled' %>">Step 3</span>
+</div>
+
+</script>
+
+<script type="text/template" id="select-template">
+
+<table id="table">
+
+<tr>
+ <td class="left-column">
+ <div id="bread-image"></div>
+
+ <% _.each(availableComponents, function(url, name) { %>
+ <img alt="<%= name %>" src="<%= url %>" class="component-image<%= components[name] ? ' selected' : '' %>"/>
+ <% }); %>
+ </td>
+
+ <td class="right-column">
+ <span id="order-text">You are about to order <span id="order-quantity"><%= quantity %></span> Banana bread <span id="order-loaf"><%= loaf %></span><span id="order-components"><%= order_text %></span>.</span>
+ <div id="quantity-control">
+ Quantity <br/>
+ <div id="quantity-plus" class="button plus-minus <%= quantity == 3 ? 'disabled' : '' %> ">+</div>
+ <div id="quantity-minus" class="button plus-minus <%= quantity == 1 ? 'disabled' : '' %>">-</div>
+ </div>
+
+ <div id="order-step">
+ <div id="step-button" class="button order">Step 2</div>
+ Next step: enter your address and payment info
+ </div>
+ </td>
+</tr>
+
+</table>
+
+</script>
+
+
+<script type="text/template" id="payment-template">
+
+<table id="table">
+
+<tr>
+ <td class="left-column">
+ <form method="post">
+ <ul class="form-ul">
+ <li>
+ <span class="form-label">Your name:</span>
+ <input id="user-name" name="user-name" type="text" placeholder="First and last name" value="<%= user_name %>"/>
+ </li>
+ <li>
+ <span class="form-label">Your email:</span>
+ <input id="user-email" name="user-email" type="email" placeholder="banana@bread.com" value="<%= user_email%>"/>
+ </li>
+ <li>
+ <span class="form-label">Comment:</span>
+ <textarea id="user-comment" name="user-comment">
+ <%= user_comment%>
+ </textarea>
+ </li>
+ </ul>
+
+ <input type="radio" name="delivery-type" value="pickup" <%= delivery_type == 'pickup' ? 'checked' : '' %> /> Pickup
+ <br/>
+ <input type="radio" name="delivery-type" value="delivery" <%= delivery_type == 'delivery' ? 'checked' : '' %> /> Delivery
+ <div id="delivery-address" style="display:none;">
+ <ul class="form-ul">
+ <li>
+ <span class="form-label">Your address:</span>
+ <input id="street-address" type="text" value="<%= delivery_address %>">
+ </li>
+ <li>
+ <span class="form-label">Your phone #:</span>
+ <input id="user_phone" type="text" value=<%= user_phone%>>
+ </li>
+ </ul>
+ </div>
+ <div id="delivery">
+ <div id="map-canvas"></div>
+ <div id="message">
+ <div id="delivery-message">
+ </div>
+ <div id="distance-message">
+ </div>
+ <div id="distance-message-error" class="red">
+ </div>
+ </div>
+ </div>
+ </form>
+ </td>
+
+ <td class="right-column">
+ <span id="order-text">You are about to order <span id="order-quantity"><%= quantity %></span> Banana bread <span id="order-loaf"><%= loaf %></span><span id="order-components"><%= order_text %></span>.</span>
+
+ <div id="order-step">
+ <div id="step-button" class="button order">Review</div>
+ Next step: confirm your order
+ </div>
+ </td>
+</tr>
+
+</table>
+
+</script>
+
+
+<script type="text/template" id="review-template">
+
+<table id="table">
+
+<tr>
+ <td class='left-column'>
+ <div id="review-info">
+ You chose <%= delivery_type %>.
+ Order number is <%= order_id %>
+ </div>
+ </td>
+
+ <td class='right-column'>
+ <span id="order-text">You are about to order <span id="order-quantity"><%= quantity %></span> Banana bread <span id="order-loaf"><%= loaf %></span><span id="order-components"><%= order_text %></span>.</span>
+ <div id="order-step">
+
+ <form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post">
+ <div id="payment">
+ <input type="hidden" name="cmd" value="_s-xclick">
+ <input type="hidden" name="encrypted" value="<%= paypal_encrypted %>">
+ <input type="submit" class="button" value="Pay">
+
+ <div>You will be redirected to PayPal</div>
+ </div>
+ </form>
+ </div>
+ </td>
+</tr>
+
+</table>
+
+</script>
No changes.
Oops, something went wrong.

0 comments on commit 4b3eb61

Please sign in to comment.