workarea-storefront 3.4.12

data/test/javascripts/fixtures/address_region_fields.html.haml

@@ -0,0 +1,17 @@
+%form
+  .address-fields
+    .property{ data: { address_region_fields: 'country' } }
+      = label_tag "address[country]", nil, class: 'property__name' do
+        %span.property__text Country
+      .value
+        - options = options_for_select([["United States", "US"], ["Canada", "CA"], ['Mexico', 'MX'], ['American Samoa', 'AS']])
+        = select_tag "address[country]", options, title: "Address Country"
+
+    .property{ data: { address_region_fields: 'region' } }
+      = label_tag "address[region]", nil, class: 'property__name' do
+        %span.property__text Region
+      .value
+        - regions = { 'United States' => [['Pennsylvania', 'PA']], 'Canada' => [['Quebec', 'QC']], 'American Samoa' => [['Palauli', 'PL']] }
+        - options = grouped_options_for_select(regions, 'PA', prompt: 'Select Region')
+        = select_tag "address_region_select", options, required: true, title: "Address Region", class: 'hidden'
+        = text_field_tag "address[region]", 'PA', class: 'text-box', required: true, title: "Address Region"

data/test/javascripts/fixtures/analytics_add_to_cart_form.html.haml

@@ -0,0 +1,12 @@
+%form{ class: 'product-details__add-to-cart-form', data: { analytics: { event: 'addToCart', domEvent: 'submit', payload: { foo: 'baz' } }.to_json } }
+
+  = hidden_field_tag :product_id, 'PRODUCT1'
+  = hidden_field_tag :sku, 'foo'
+
+  .product-details__quantity
+    .property
+      = label_tag :quantity, nil, class: 'property__name', for: "quantity_PRODUCT1" do
+        %span.property__text Quantity
+      .value= number_field_tag :quantity, 1, class: 'text-box text-box--x-small', required: true, min: 1, id: "quantity_PRODUCT1"
+
+  %p.product-details__add-to-cart-action= button_tag 'Add to Cart', value: 'add_to_cart', class: 'button button--large'

data/test/javascripts/fixtures/analytics_product_click.html.haml

@@ -0,0 +1,7 @@
+%ul#product-list{ data: { analytics: { event: 'productList', name: 'Foo List', page: 2, per_page: 3 }.to_json } }
+  %li.product-summary
+    %p{ data: { analytics: { event: 'productClick', domEvent: 'click', payload: { foo: 'foo' } }.to_json, analytics_product_impression: { id: 'foo' }.to_json } }
+  %li.product-summary
+    %p{ data: { analytics: { event: 'productClick', domEvent: 'click', payload: { foo: 'bar' } }.to_json, analytics_product_impression: { id: 'bar' }.to_json } }
+  %li.product-summary
+    %p{ data: { analytics: { event: 'productClick', domEvent: 'click', payload: { foo: 'baz' } }.to_json, analytics_product_impression: { id: 'baz' }.to_json } }

data/test/javascripts/fixtures/authenticity_token.html.haml

@@ -0,0 +1,2 @@
+%form
+  %input{type: 'hidden', name: 'charset', value: 'utf-8'}/

data/test/javascripts/fixtures/back_to_top_button.html.haml

@@ -0,0 +1,2 @@
+#main_content
+  %div{ data: { back_to_top_button: '' } }

data/test/javascripts/fixtures/checkout_primary_payments.html.haml

@@ -0,0 +1,12 @@
+.checkout-payment__primary{ data: { checkout_primary_payment: '' } }
+  %form
+    #new_card.checkout-payment__primary-method.checkout-payment__primary-method--selected
+      %input{ type: 'radio', name: 'payment', value: 'new_card' }
+      %label{ for: 'payment[new_card]' }
+        New Card
+    %div
+      Saved Cards
+      #saved_card.checkout-payment__primary-method
+        %input{ type: 'radio', name: 'payment', value: 'saved_card_id' }
+        %label{ for: 'payment[saved_card_id]' }
+          Visa ending in XX-1234

data/test/javascripts/fixtures/dialog.html.haml

@@ -0,0 +1,16 @@
+.auto-dialog
+  #content-1 Dialog Content 1
+
+.auto-dialog
+  #content-2 Dialog Content 2
+
+.auto-dialog
+  #content-3 Dialog Content 3
+
+#manual-dialog
+  #content-4 Dialog Content 4
+
+#fragment-dialog
+  #content-5 Dialog Content 5
+
+= form_tag '/qux/quux', id: 'form-dialog'

data/test/javascripts/fixtures/form.html.haml

@@ -0,0 +1,10 @@
+%form
+  .property#required_property
+    .value= text_field_tag 'required_input', nil, required: true
+  .property#text_box_property
+    .value= text_field_tag 'text_box', nil, required: true, class: 'text-box'
+  .property#preexisting_error
+    .value
+      = text_field_tag 'text_box_with_error', nil, required: true, class: 'text-box'
+      %span.value__error Error
+  = submit_tag

data/test/javascripts/fixtures/optional_fields.html.haml

@@ -0,0 +1,4 @@
+.hidden-if-js-enabled{ data: { optional_field: 'foobar' } }
+  %span#content
+    %input#input{ type: 'text' }
+

data/test/javascripts/fixtures/popup_button.html.haml

@@ -0,0 +1 @@
+= link_to 'Foo', 'http://bar.com', data: { popup_button: { width: 200, height: 300 }.to_json }

data/test/javascripts/fixtures/product_details_sku_select.html.haml

@@ -0,0 +1,8 @@
+.product-details
+  %form
+    = hidden_field_tag :via, 'foo_via'
+    .property
+      = label_tag :sku, nil, class: 'property__name', for: "sku_select" do
+        %span.property__text Select Options
+      .value
+        = select_tag :sku, options_for_select(['', ['foo', 'foo', { data: { sku_option_details: { color: ['blue'] }.to_json } }], ['bar', 'bar', { data: { sku_option_details: {}.to_json } }]], 'foo'), required: true, id: "sku_select", data: { product_details_sku_select: 'foo-product' }

data/test/javascripts/fixtures/product_details_sku_select_without_sku_option_details.html.haml

@@ -0,0 +1,7 @@
+.product-details
+  %form
+    .property
+      = label_tag :sku, nil, class: 'property__name', for: "sku_select" do
+        %span.property__text Select Options
+      .value
+        = select_tag :sku, options_for_select(['', 'foo', 'bar'], 'foo'), required: true, id: "sku_select", data: { product_details_sku_select: 'foo-product' }

data/test/javascripts/fixtures/scroll_to_element.html.haml

@@ -0,0 +1,19 @@
+.pdp
+  .view
+    %a.reviews-link{ href: '/products/some-product#reviews', data: { scroll_to_button: '' } }
+      Read Reviews
+    #reviews
+      %h1 Reviews for "Current Product"
+
+.ui-dialog
+  .view
+    %nav
+      %a.reviews-link{ href: '/products/some-product#reviews', data: { scroll_to_button: '' } }
+        Read Reviews
+      %a.returns-link{ href: '/products/some-product#returns', data: { scroll_to_button: '' } }
+        Return Policy
+      %a.external-link{ href: '/products/some-product#missing', data: { scroll_to_button: '' } }
+        Missing ID
+    #returns
+      %h1 Return Policy
+      %p This is the return policy for "Quickview Product"

data/test/javascripts/forms_spec.js

@@ -0,0 +1,85 @@
+(function () {
+    'use strict';
+
+    describe('WORKAREA.forms', function() {
+        describe('init', function () {
+            it('displays errors if input is invalid', function () {
+                this.fixtures = fixture.load('form.html');
+
+                WORKAREA.forms.init($(this.fixtures));
+
+                expect(
+                    _.isEmpty($('#required_property .value__error'))
+                ).to.equal(true);
+
+                $('form').trigger('submit');
+
+                expect(
+                    _.isEmpty($('#required_property .value__error'))
+                ).to.equal(false);
+                expect(
+                    $('#required_property .value__error').is('label')
+                ).to.equal(true);
+            });
+
+            it('adds invalid modifier for property on blur', function () {
+                this.fixtures = fixture.load('form.html');
+
+                WORKAREA.forms.init($(this.fixtures));
+
+                $('#required_input').trigger('focus');
+                $('#text_box').trigger('focus');
+
+                expect(
+                    $('#required_property').is('.property--invalid')
+                ).to.equal(true);
+
+                $('#required_input').trigger('focus').val('Foo');
+                $('#text_box').trigger('focus');
+
+                expect(
+                    $('#required_property').is('.property--invalid')
+                ).to.equal(false);
+            });
+
+            it('toggles valid/invalid modifier for text-box on blur', function () {
+                this.fixtures = fixture.load('form.html');
+
+                WORKAREA.forms.init($(this.fixtures));
+
+                $('#text_box').trigger('focus');
+                $('#required_input').trigger('focus');
+
+                expect($('#text_box').is('.text-box--invalid')).to.equal(true);
+
+                $('#text_box').trigger('focus').val('Foo');
+                $('#required_input').trigger('focus');
+
+                expect($('#text_box').is('.text-box--valid')).to.equal(true);
+
+                $('#text_box').trigger('focus').val('');
+                $('#required_input').trigger('focus');
+
+                expect($('#text_box').is('.text-box--valid')).to.equal(false);
+            });
+
+            it('invalidates properties containing errors on-load', function () {
+                this.fixtures = fixture.load('form.html');
+
+                WORKAREA.forms.init($(this.fixtures));
+
+                expect($('#preexisting_error').is('.property--invalid')).to.be.true;
+            });
+
+            it('removes visible errors when input becomes valid', function () {
+                this.fixtures = fixture.load('form.html');
+
+                WORKAREA.forms.init($(this.fixtures));
+
+                $('#text_box_with_error').val('foobar').trigger('blur');
+
+                expect(_.isEmpty($('#preexisting_error .value__error'))).to.be.true;
+            });
+        });
+    });
+}());

data/test/javascripts/messages_spec.js

@@ -0,0 +1,50 @@
+(function () {
+    'use strict';
+
+    describe('WORKAREA.messages', function () {
+        describe('insertMessage', function () {
+            it('adds a flash message if no $parent is provided', function () {
+                fixture.set('<p class="page-messages"></p>');
+
+                WORKAREA.messages.insertMessage('foo', 'bar');
+
+                expect($('.page-messages').text()).to.include('foo');
+            });
+
+            it('adds a static message if $parent is provided', function () {
+                fixture.set('<p id="my-message"></p>');
+
+                WORKAREA.messages.insertMessage('baz', 'bat', $('#my-message'));
+
+                expect($('#my-message').text()).to.include('baz');
+            });
+        });
+
+        describe('insertPageMessages', function() {
+            it('will not add the same message twice', function () {
+                var event = {},
+                    xhr = {
+                        getResponseHeader: function() {
+                            return JSON.stringify({ ball: 'fuzz' });
+                        }
+                    };
+                fixture.set('<p class="page-messages"></p>');
+
+                WORKAREA.messages.insertPageMessages(event, xhr);
+                WORKAREA.messages.insertPageMessages(event, xhr);
+
+                expect($('.page-messages .message').length).to.equal(1);
+            });
+        });
+
+        describe('initMessage', function () {
+            it('does not add a dismiss if told not to', function () {
+                fixture.set('<div class="messages" data-message-show-dismiss="false"></div>');
+
+                WORKAREA.messages.init($(this.fixtures));
+
+                expect($('.message__dismiss-action').length).to.equal(0);
+            });
+        });
+    });
+}());

data/test/javascripts/optional_fields_spec.js

@@ -0,0 +1,20 @@
+(function () {
+    'use strict';
+
+    describe('WORKAREA.optionalFields', function () {
+        describe('init', function () {
+            it('toggles normal DOM', function () {
+                this.fixtures = fixture.load('optional_fields.html');
+
+                WORKAREA.optionalFields.init($(this.fixtures));
+
+                expect($('button.link').text()).to.contain('foobar');
+
+                $('button.link').trigger('click');
+
+                expect(_.isEmpty($('button.link'))).to.be.true;
+                expect(_.isEmpty($('.hidden-if-js-enabled'))).to.be.true;
+            });
+        });
+    });
+}());

data/test/javascripts/popup_button_spec.js

@@ -0,0 +1,19 @@
+(function () {
+    'use strict';
+
+    describe('WORKAREA.popupButtons', function () {
+        describe('getOptionString', function () {
+            it('converts supplied config to window.open param string', function () {
+                var markup = 'popup_button.html',
+                    $fixture = $(fixture.load(markup, true)),
+
+                    button = $('[data-popup-button]', $fixture)[0],
+                    windowOpenParams;
+
+                windowOpenParams = WORKAREA.popupButtons.getOptionString(button);
+
+                expect(windowOpenParams).to.equal('width=200,height=300');
+            });
+        });
+    });
+}());

data/test/javascripts/product_details_sku_selects_spec.js

@@ -0,0 +1,154 @@
+(function () {
+    'use strict';
+
+    describe('WORKAREA.productDetailsSkuSelects', function () {
+        describe('init', function () {
+            var server;
+
+            describe('with option sku selects', function() {
+
+                beforeEach(function () {
+                    this.fixtures = fixture.load('product_details_sku_select.html');
+
+                    server = sinon.fakeServer.create();
+                    server.respondWith(
+                        'GET',
+                        WORKAREA.routes.storefront.detailsProductPath(
+                            { id: 'foo-product', via: 'foo_via', sku: 'bar', _options: true }
+                        ),
+                        [200, { 'Content-Type': 'text/html' }, '<div class="product-details">SUCCESS</div>']
+                    );
+                    server.respondWith(
+                        'GET',
+                        WORKAREA.routes.storefront.detailsProductPath(
+                            { id: 'foo-product', via: 'foo_via', sku: 'foo', _options: true }
+                        ),
+                        [200, { 'Content-Type': 'text/html' }, '<div class="product-details">BLUE SUCCESS</div>']
+                    );
+                });
+
+                afterEach(function () {
+                    var cleanUrl = window.location.href.replace('sku=bar', '');
+                    window.history.replaceState(null, null, cleanUrl);
+
+                    // destroy all open dialogs
+                    _.forEach(WORKAREA.dialog.all(), function (dialog) {
+                        $(dialog).dialog('destroy');
+                    });
+
+                    server.restore();
+                });
+
+                it('passes all details in the url when requesting a new variant', function () {
+                    WORKAREA.productDetailsSkuSelects.init($(this.fixtures));
+
+                    $('[data-product-details-sku-select]', this.fixtures)
+                        .val('foo').trigger('change');
+
+                    server.respond();
+
+                    expect($('.product-details', this.fixtures).html()).to.include(
+                        'BLUE SUCCESS'
+                    );
+                });
+
+                it('replaces the .product-details container with server response on change', function () {
+                    WORKAREA.productDetailsSkuSelects.init($(this.fixtures));
+
+                    $('[data-product-details-sku-select]', this.fixtures)
+                        .val('bar').trigger('change');
+
+                    server.respond();
+
+                    expect($('.product-details', this.fixtures).html()).to.include(
+                        'SUCCESS'
+                    );
+                });
+
+                it('replaces history state if not in dialog', function () {
+                    WORKAREA.productDetailsSkuSelects.init($(this.fixtures));
+
+                    $('[data-product-details-sku-select]')
+                        .val('bar')
+                        .trigger('change');
+
+                    server.respond();
+                    expect(window.location.href).to.include('sku=bar');
+                });
+
+                it('does not change url when multiple product-details exist', function () {
+                    $(this.fixtures).append('<div class="product-details" />');
+                    WORKAREA.productDetailsSkuSelects.init($(this.fixtures));
+
+                    $('[data-product-details-sku-select]')
+                        .val('bar')
+                        .trigger('change');
+
+                    server.respond();
+                    expect(window.location.href).to.not.include('sku=bar');
+                });
+
+                it('does not change url when product-details nested in dialog', function () {
+                    WORKAREA.dialog.create(this.fixtures);
+                    WORKAREA.productDetailsSkuSelects.init($(this.fixtures));
+
+                    $('[data-product-details-sku-select]')
+                        .val('bar')
+                        .trigger('change');
+
+                    server.respond();
+                    expect(window.location.href).to.not.include('sku=bar');
+                });
+            });
+
+            describe('with no colors to select', function() {
+                var server;
+
+                beforeEach(function () {
+                    this.fixtures = fixture.load('product_details_sku_select_without_sku_option_details.html');
+
+                    server = sinon.fakeServer.create();
+                    server.respondWith(
+                        'GET',
+                        WORKAREA.routes.storefront.detailsProductPath(
+                            { id: 'foo-product', sku: 'bar', _options: true }
+                        ),
+                        [200, { 'Content-Type': 'text/html' }, '<div class="product-details">SUCCESS</div>']
+                    );
+                    server.respondWith(
+                        'GET',
+                        WORKAREA.routes.storefront.detailsProductPath(
+                            { id: 'foo-product', sku: 'foo', _options: true }
+                        ),
+                        [200, { 'Content-Type': 'text/html' }, '<div class="product-details">BLUE SUCCESS</div>']
+                    );
+                });
+
+                afterEach(function () {
+                    var cleanUrl = window.location.href.replace('sku=bar', '');
+                    window.history.replaceState(null, null, cleanUrl);
+
+                    // destroy all open dialogs
+                    _.forEach(WORKAREA.dialog.all(), function (dialog) {
+                        $(dialog).dialog('destroy');
+                    });
+
+                    server.restore();
+                });
+
+                it('still works without color variants', function() {
+                    WORKAREA.productDetailsSkuSelects.init($(this.fixtures));
+
+                    $('[data-product-details-sku-select]', this.fixtures)
+                        .val('foo').trigger('change');
+
+                    server.respond();
+
+                    expect($('.product-details', this.fixtures).html()).to.include(
+                        'SUCCESS'
+                    );
+                });
+            });
+        });
+    });
+}());