Merge pull request #1821 from jairo-bc/STRF-8599-fixes

fix(storefront): STRF-8599 Drop Jquery: Replaced event's current target to the element passed from utils(on hook)
bigcommerce · Oct 9, 2020 · e886965 · e886965
2 parents 78bc81d + 7059324
commit e886965
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 48 deletions.
diff --git a/assets/js/test-unit/theme/common/faceted-search.spec.js b/assets/js/test-unit/theme/common/faceted-search.spec.js
@@ -197,11 +197,11 @@ describe('FacetedSearch', () => {
     describe('when price range form is submitted', () => {
         let event;
         let eventName;
+        let currentTarget = '#facet-range-form';
 
         beforeEach(() => {
             eventName = 'facetedSearch-range-submitted';
             event = {
-                currentTarget: '#facet-range-form',
                 preventDefault: jest.fn(),
             };
 
@@ -210,7 +210,7 @@ describe('FacetedSearch', () => {
         });
 
         it('should set `min_price` and `max_price` query param to corresponding form values if form is valid', () => {
-            hooks.emit(eventName, event);
+            hooks.emit(eventName, event, currentTarget);
 
             expect(urlUtils.goToUrl).toHaveBeenCalledWith('/?min_price=0&max_price=100');
         });
@@ -232,20 +232,21 @@ describe('FacetedSearch', () => {
     describe('when price range form is submitted with other facets selected', () => {
         let event;
         let eventName;
+        let currentTarget;
 
         beforeEach(() => {
             eventName = 'facetedSearch-range-submitted';
             event = {
-                currentTarget: '#facet-range-form-with-other-facets',
                 preventDefault: jest.fn(),
             };
+            currentTarget = '#facet-range-form-with-other-facets';
 
             jest.spyOn(urlUtils, 'goToUrl').mockImplementation(() => {});
             jest.spyOn(facetedSearch.priceRangeValidator, 'areAll').mockImplementation(() => true);
         });
 
         it('send `min_price` and `max_price` query params if form is valid', () => {
-            hooks.emit(eventName, event);
+            hooks.emit(eventName, event, currentTarget);
 
             expect(urlUtils.goToUrl).toHaveBeenCalledWith('/?brand[]=item1&brand[]=item2&min_price=0&max_price=50');
         });
@@ -254,25 +255,26 @@ describe('FacetedSearch', () => {
     describe('when sort filter is submitted', () => {
         let event;
         let eventName;
+        let currentTarget;
 
         beforeEach(() => {
             eventName = 'sortBy-submitted';
             event = {
-                currentTarget: '#facet-sort',
                 preventDefault: jest.fn(),
             };
+            currentTarget = '#facet-sort';
 
             jest.spyOn(urlUtils, 'goToUrl').mockImplementation(() => {});
         });
 
         it('should set `sort` query param to the value of selected option', () => {
-            hooks.emit(eventName, event);
+            hooks.emit(eventName, event, currentTarget);
 
             expect(urlUtils.goToUrl).toHaveBeenCalledWith('/?sort=featured');
         });
 
         it('should prevent default event', function() {
-            hooks.emit(eventName, event);
+            hooks.emit(eventName, event, currentTarget);
 
             expect(event.preventDefault).toHaveBeenCalled();
         });
@@ -281,25 +283,26 @@ describe('FacetedSearch', () => {
     describe('when a facet is clicked', () => {
         let event;
         let eventName;
+        let currentTarget;
 
         beforeEach(() => {
             eventName = 'facetedSearch-facet-clicked';
             event = {
-                currentTarget: '[href="?brand=item1"]',
                 preventDefault: jest.fn(),
             };
+            currentTarget = '[href="?brand=item1"]';
 
             jest.spyOn(urlUtils, 'goToUrl').mockImplementation(() => {});
         });
 
         it('should change the URL of window to the URL of facet item', () => {
-            hooks.emit(eventName, event);
+            hooks.emit(eventName, event, currentTarget);
 
             expect(urlUtils.goToUrl).toHaveBeenCalledWith('?brand=item1');
         });
 
         it('should prevent default event', function() {
-            hooks.emit(eventName, event);
+            hooks.emit(eventName, event, currentTarget);
 
             expect(event.preventDefault).toHaveBeenCalled();
         });

diff --git a/assets/js/theme/cart.js b/assets/js/theme/cart.js
@@ -139,8 +139,8 @@ export default class Cart extends PageManager {
             this.bindGiftWrappingForm();
         });
 
-        utils.hooks.on('product-option-change', (event, option) => {
-            const $changedOption = $(option);
+        utils.hooks.on('product-option-change', (event, currentTarget) => {
+            const $changedOption = $(currentTarget);
             const $form = $changedOption.parents('form');
             const $submit = $('input.button', $form);
             const $messageBox = $('.alertMessageBox');

diff --git a/assets/js/theme/catalog.js b/assets/js/theme/catalog.js
@@ -3,9 +3,9 @@ import urlUtils from './common/utils/url-utils';
 import Url from 'url';
 
 export default class CatalogPage extends PageManager {
-    onSortBySubmit(event) {
+    onSortBySubmit(event, currentTarget) {
         const url = Url.parse(window.location.href, true);
-        const queryParams = $(event.currentTarget).serialize().split('=');
+        const queryParams = $(currentTarget).serialize().split('=');
 
         url.query[queryParams[0]] = queryParams[1];
         delete url.query.page;

diff --git a/assets/js/theme/common/faceted-search.js b/assets/js/theme/common/faceted-search.js
@@ -347,8 +347,8 @@ class FacetedSearch {
         this.toggleFacetItems($navList);
     }
 
-    onFacetClick(event) {
-        const $link = $(event.currentTarget);
+    onFacetClick(event, currentTarget) {
+        const $link = $(currentTarget);
         const url = $link.attr('href');
 
         event.preventDefault();
@@ -363,9 +363,9 @@ class FacetedSearch {
         }
     }
 
-    onSortBySubmit(event) {
+    onSortBySubmit(event, currentTarget) {
         const url = Url.parse(window.location.href, true);
-        const queryParams = $(event.currentTarget).serialize().split('=');
+        const queryParams = $(currentTarget).serialize().split('=');
 
         url.query[queryParams[0]] = queryParams[1];
         delete url.query.page;
@@ -379,15 +379,15 @@ class FacetedSearch {
         urlUtils.goToUrl(Url.format({ pathname: url.pathname, search: urlUtils.buildQueryString(urlQueryParams) }));
     }
 
-    onRangeSubmit(event) {
+    onRangeSubmit(event, currentTarget) {
         event.preventDefault();
 
         if (!this.priceRangeValidator.areAll(nod.constants.VALID)) {
             return;
         }
 
         const url = Url.parse(window.location.href, true);
-        let queryParams = decodeURI($(event.currentTarget).serialize()).split('&');
+        let queryParams = decodeURI($(currentTarget).serialize()).split('&');
         queryParams = urlUtils.parseQueryParams(queryParams);
 
         for (const key in queryParams) {

diff --git a/assets/js/theme/global/quick-search.js b/assets/js/theme/global/quick-search.js
@@ -43,8 +43,8 @@ export default function () {
         });
     }, 200);
 
-    utils.hooks.on('search-quick', (event) => {
-        const searchQuery = $(event.currentTarget).val();
+    utils.hooks.on('search-quick', (event, currentTarget) => {
+        const searchQuery = $(currentTarget).val();
 
         // server will only perform search with at least 3 characters
         if (searchQuery.length < 3) {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "author": "BigCommerce",
   "license": "MIT",
   "dependencies": {
-    "@bigcommerce/stencil-utils": "^5.0.3",
+    "@bigcommerce/stencil-utils": "^6.2.0",
     "core-js": "^3.6.5",
     "creditcards": "^3.0.1",
     "easyzoom": "^2.5.3",