From 3b1fcca39b128705ea67faede225f22986df3683 Mon Sep 17 00:00:00 2001 From: Will Marshall Date: Thu, 8 May 2014 16:07:56 +1000 Subject: [PATCH] Splitting out the accordion stuff for checkout --- .../checkout/accordion_controller.js.coffee | 11 ++++++ .../checkout/checkout_controller.js.coffee | 16 ++++++++ .../controllers/checkout_controller.js.coffee | 38 ------------------ ...{user.js.coffee => current_user.js.coffee} | 5 +-- app/views/checkout/_authentication.html.haml | 15 +++---- app/views/checkout/edit.html.haml | 3 +- .../consumer/shopping/checkout_auth_spec.rb | 17 ++++++-- .../accordion_controller_spec.js.coffee | 19 +++++++++ .../checkout_controller_spec.js.coffee | 39 +++++++++++++++++++ .../checkout_controller_spec.js.coffee | 28 ------------- 10 files changed, 107 insertions(+), 84 deletions(-) create mode 100644 app/assets/javascripts/darkswarm/controllers/checkout/accordion_controller.js.coffee create mode 100644 app/assets/javascripts/darkswarm/controllers/checkout/checkout_controller.js.coffee delete mode 100644 app/assets/javascripts/darkswarm/controllers/checkout_controller.js.coffee rename app/assets/javascripts/darkswarm/services/{user.js.coffee => current_user.js.coffee} (53%) create mode 100644 spec/javascripts/unit/darkswarm/controllers/checkout/accordion_controller_spec.js.coffee create mode 100644 spec/javascripts/unit/darkswarm/controllers/checkout/checkout_controller_spec.js.coffee delete mode 100644 spec/javascripts/unit/darkswarm/controllers/checkout_controller_spec.js.coffee diff --git a/app/assets/javascripts/darkswarm/controllers/checkout/accordion_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/checkout/accordion_controller.js.coffee new file mode 100644 index 0000000000..b6f533e751 --- /dev/null +++ b/app/assets/javascripts/darkswarm/controllers/checkout/accordion_controller.js.coffee @@ -0,0 +1,11 @@ +Darkswarm.controller "AccordionCtrl", ($scope, storage) -> + $scope.accordion = + details: true + shipping: false + payment: false + billing: false + storage.bind $scope, "accordion", {storeName: "accordion_#{$scope.order.id}"} + + $scope.show = (name)-> + $scope.accordion[name] = true + diff --git a/app/assets/javascripts/darkswarm/controllers/checkout/checkout_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/checkout/checkout_controller.js.coffee new file mode 100644 index 0000000000..b0b6e64806 --- /dev/null +++ b/app/assets/javascripts/darkswarm/controllers/checkout/checkout_controller.js.coffee @@ -0,0 +1,16 @@ +Darkswarm.controller "CheckoutCtrl", ($scope, storage, CheckoutFormState, Order, CurrentUser) -> + $scope.Order = Order + storage.bind $scope, "Order.order", {storeName: "order_#{Order.order.id}"} + $scope.order = Order.order # Ordering is important + + if CurrentUser + $scope.enabled = true + else + $scope.enabled = false + + $scope.purchase = (event)-> + event.preventDefault() + $scope.Order.submit() + + $scope.CheckoutFormState = CheckoutFormState + storage.bind $scope, "CheckoutFormState.ship_address_same_as_billing", { defaultValue: true} diff --git a/app/assets/javascripts/darkswarm/controllers/checkout_controller.js.coffee b/app/assets/javascripts/darkswarm/controllers/checkout_controller.js.coffee deleted file mode 100644 index a342864dd5..0000000000 --- a/app/assets/javascripts/darkswarm/controllers/checkout_controller.js.coffee +++ /dev/null @@ -1,38 +0,0 @@ -Darkswarm.controller "CheckoutCtrl", ($scope, Order, storage, CheckoutFormState, User) -> - - # We put Order.order into the scope for convenience - # However, storage.bind replaces Order.order - # So we must put Order.order into the scope AFTER it's bound to localStorage - $scope.Order = Order - storage.bind $scope, "Order.order", {storeName: "order_#{Order.order.id}"} - $scope.order = Order.order - - if User - $scope.accordion = {details: true} - else - $scope.accordion = {user: true} - $scope.show = (name)-> - $scope.accordion[name] = true - storage.bind $scope, "accordion", {storeName: "accordion_#{$scope.order.id}"} - # If we are logged in, but the cached accordion panel is user, move to details - if User and $scope.accordion.user - $scope.accordion.user = false - $scope.accordion.details = true - - # TODO MAKE THIS BETTER SOMEHOW - # if User - # show details - # else - # show user - # - # localStorage overrides above - # - # If localStorage set to user, but User exists - # Then default to details - - $scope.CheckoutFormState = CheckoutFormState - storage.bind $scope, "CheckoutFormState.ship_address_same_as_billing", { defaultValue: true} - - $scope.purchase = (event)-> - event.preventDefault() - $scope.Order.submit() diff --git a/app/assets/javascripts/darkswarm/services/user.js.coffee b/app/assets/javascripts/darkswarm/services/current_user.js.coffee similarity index 53% rename from app/assets/javascripts/darkswarm/services/user.js.coffee rename to app/assets/javascripts/darkswarm/services/current_user.js.coffee index 2a71d6c7b8..382324e22c 100644 --- a/app/assets/javascripts/darkswarm/services/user.js.coffee +++ b/app/assets/javascripts/darkswarm/services/current_user.js.coffee @@ -1,7 +1,6 @@ -Darkswarm.factory 'User', (user)-> - # This is for the current user +Darkswarm.factory 'CurrentUser', (user)-> # This is for the current user if user and !$.isEmptyObject(user) - new class User + new class CurrentUser constructor: -> @[k] = v for k, v of user else diff --git a/app/views/checkout/_authentication.html.haml b/app/views/checkout/_authentication.html.haml index 13eee42b9f..58db9ada0d 100644 --- a/app/views/checkout/_authentication.html.haml +++ b/app/views/checkout/_authentication.html.haml @@ -1,9 +1,6 @@ -%fieldset - %accordion-group{heading: "User", "is-open" => "accordion.user"} - .row - .large-4.columns.text-center{"ng-controller" => "AuthenticationCtrl"} - %button{"ng-click" => "open('/login')"} Login - .large-4.columns.text-center{"ng-controller" => "AuthenticationCtrl"} - %button{"ng-click" => "open('/signup')"} Signup - .large-4.columns.text-center - %button{"ng-click" => "show('details')"} Checkout as guest +#checkout_login.row{"ng-show" => "!enabled"} + .large-4.columns.text-center{"ng-controller" => "AuthenticationCtrl"} + %button{"ng-click" => "open()"} Login + + .large-4.columns.text-center + %button{"ng-click" => "enabled = true"} Checkout as guest diff --git a/app/views/checkout/edit.html.haml b/app/views/checkout/edit.html.haml index e43d4f282d..2c376643d1 100644 --- a/app/views/checkout/edit.html.haml +++ b/app/views/checkout/edit.html.haml @@ -11,8 +11,7 @@ .large-9.columns - unless spree_current_user = render partial: "checkout/authentication" - .row + .row{"ng-show" => "enabled", "ng-controller" => "AccordionCtrl"} = render partial: "checkout/form" .large-3.columns = render partial: "checkout/summary" - diff --git a/spec/features/consumer/shopping/checkout_auth_spec.rb b/spec/features/consumer/shopping/checkout_auth_spec.rb index 5574aedc57..b9589f75fd 100644 --- a/spec/features/consumer/shopping/checkout_auth_spec.rb +++ b/spec/features/consumer/shopping/checkout_auth_spec.rb @@ -22,15 +22,24 @@ feature "As a consumer I want to check out my cart", js: true do quick_login_as user visit checkout_path within "section[role='main']" do - page.should_not have_content "USER" + page.should_not have_content "Login" + page.should have_content "Customer Details" end end - it "renders the login form when logged out" do + it "renders the login buttons when logged out" do visit checkout_path - toggle_accordion "User" within "section[role='main']" do - page.should have_content "User" + page.should have_content "Login" + click_button "Login" end + page.should have_content "Remember Me" + end + + it "allows user to checkout as guest" do + visit checkout_path + click_button "Checkout as guest" + page.should have_content "Customer Details" end end + diff --git a/spec/javascripts/unit/darkswarm/controllers/checkout/accordion_controller_spec.js.coffee b/spec/javascripts/unit/darkswarm/controllers/checkout/accordion_controller_spec.js.coffee new file mode 100644 index 0000000000..1c0c199351 --- /dev/null +++ b/spec/javascripts/unit/darkswarm/controllers/checkout/accordion_controller_spec.js.coffee @@ -0,0 +1,19 @@ +describe "AccordionCtrl", -> + ctrl = null + scope = scope + + beforeEach -> + module "Darkswarm" + localStorage.clear() + inject ($controller, $rootScope) -> + scope = $rootScope.$new() + scope.order = + id: 129 + ctrl = $controller 'AccordionCtrl', {$scope: scope} + + it "defaults the details accordion to visible", -> + expect(scope.accordion.details).toEqual true + + it "changes accordion", -> + scope.show "shipping" + expect(scope.accordion["shipping"]).toEqual true diff --git a/spec/javascripts/unit/darkswarm/controllers/checkout/checkout_controller_spec.js.coffee b/spec/javascripts/unit/darkswarm/controllers/checkout/checkout_controller_spec.js.coffee new file mode 100644 index 0000000000..8632cb49ec --- /dev/null +++ b/spec/javascripts/unit/darkswarm/controllers/checkout/checkout_controller_spec.js.coffee @@ -0,0 +1,39 @@ +describe "CheckoutCtrl", -> + ctrl = null + scope = null + Order = null + CurrentUser = null + + beforeEach -> + module("Darkswarm") + angular.module('Darkswarm').value('user', {}) + Order = + submit: -> + navigate: -> + order: + id: 1 + + describe "with user", -> + beforeEach -> + inject ($controller, $rootScope) -> + scope = $rootScope.$new() + ctrl = $controller 'CheckoutCtrl', {$scope: scope, Order: Order, CurrentUser: {}} + + it "delegates to the service on submit", -> + event = + preventDefault: -> + spyOn(Order, "submit") + scope.purchase(event) + expect(Order.submit).toHaveBeenCalled() + + it "is enabled", -> + expect(scope.enabled).toEqual true + + describe "without user", -> + beforeEach -> + inject ($controller, $rootScope) -> + scope = $rootScope.$new() + ctrl = $controller 'CheckoutCtrl', {$scope: scope, Order: Order, CurrentUser: undefined} + + it "is disabled", -> + expect(scope.enabled).toEqual false diff --git a/spec/javascripts/unit/darkswarm/controllers/checkout_controller_spec.js.coffee b/spec/javascripts/unit/darkswarm/controllers/checkout_controller_spec.js.coffee deleted file mode 100644 index 11cb4b7f3c..0000000000 --- a/spec/javascripts/unit/darkswarm/controllers/checkout_controller_spec.js.coffee +++ /dev/null @@ -1,28 +0,0 @@ -describe "CheckoutCtrl", -> - ctrl = null - scope = null - Order = null - - beforeEach -> - module("Darkswarm") - angular.module('Darkswarm').value('user', {}) - Order = { - submit: -> - navigate: -> - order: - id: 1 - } - inject ($controller, $rootScope) -> - scope = $rootScope.$new() - ctrl = $controller 'CheckoutCtrl', {$scope: scope, Order: Order} - - it "defaults the user accordion to visible", -> - expect(scope.accordion.user).toEqual true - - it "delegates to the service on submit", -> - event = { - preventDefault: -> - } - spyOn(Order, "submit") - scope.purchase(event) - expect(Order.submit).toHaveBeenCalled()