Skip to content

Commit 5733b2b

Browse files
sumesh-GLsumesh-GL
committed
AC-14607: Wishlist count not displayed on homepage/other pages except wishlist page in customer menu
Update changes using mixin instead of updating code js file
1 parent c06d962 commit 5733b2b

File tree

3 files changed

+31
-195
lines changed

3 files changed

+31
-195
lines changed

‎app/code/Magento/Wishlist/view/frontend/web/js/view/wishlist.js‎

Lines changed: 2 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,8 @@
66
define([
77
'uiComponent',
88
'Magento_Customer/js/customer-data',
9-
'underscore',
10-
'jquery'
11-
], function (Component, customerData, _, $) {
9+
'underscore'
10+
], function (Component, customerData, _) {
1211
'use strict';
1312

1413
var wishlistReloaded = false;
@@ -19,7 +18,6 @@ define([
1918
this._super();
2019
this.wishlist = customerData.get('wishlist');
2120
this.company = customerData.get('company');
22-
2321
if (!wishlistReloaded
2422
&& !_.isEmpty(this.wishlist())
2523
// Expired section names are reloaded on page load.
@@ -34,91 +32,6 @@ define([
3432
customerData.reload(['wishlist'], false);
3533
wishlistReloaded = true;
3634
}
37-
38-
// Ensure wishlist data is loaded on initialization
39-
this.ensureWishlistDataLoaded();
40-
41-
// Always try depersonalization for cached pages
42-
this.handleDepersonalization();
43-
},
44-
45-
/**
46-
* Ensure wishlist data is loaded
47-
*/
48-
ensureWishlistDataLoaded: function () {
49-
var self = this;
50-
51-
// Check if wishlist data is empty
52-
if (_.isEmpty(this.wishlist())) {
53-
// Load wishlist data
54-
customerData.reload(['wishlist'], false).done(function (data) {
55-
if (data.wishlist && data.wishlist.counter) {
56-
self.updateWishlistUI();
57-
}
58-
});
59-
} else {
60-
self.updateWishlistUI();
61-
}
62-
},
63-
64-
/**
65-
* Handle depersonalization scenarios
66-
*/
67-
handleDepersonalization: function () {
68-
var self = this,
69-
attempts = [1000, 3000, 5000]; // Try at 1s, 3s, and 5s
70-
71-
function onWishlistReloaded(data) {
72-
if (data.wishlist && data.wishlist.counter) {
73-
self.updateWishlistUI();
74-
}
75-
}
76-
77-
function reloadIfEmpty() {
78-
// Only reload if data is still empty
79-
if (_.isEmpty(self.wishlist())) {
80-
customerData.reload(['wishlist'], false).done(onWishlistReloaded);
81-
} else {
82-
self.updateWishlistUI();
83-
}
84-
}
85-
86-
// Listen for page load events to handle depersonalized pages
87-
$(function () {
88-
attempts.forEach(function (delay) {
89-
setTimeout(reloadIfEmpty, delay);
90-
});
91-
});
92-
},
93-
94-
/**
95-
* Update wishlist UI elements
96-
*/
97-
updateWishlistUI: function () {
98-
var wishlistData = this.wishlist(),
99-
selectors = [
100-
'.wishlist .counter.qty',
101-
'.customer-menu .wishlist .counter',
102-
'[data-bind*="wishlist"] .counter',
103-
'.link.wishlist .counter'
104-
];
105-
106-
if (wishlistData && wishlistData.counter) {
107-
// Try multiple selectors to find wishlist counters
108-
selectors.forEach(function (selector) {
109-
var counters = $(selector);
110-
111-
if (counters.length > 0) {
112-
counters.each(function () {
113-
var $counter = $(this);
114-
115-
if ($counter.text() !== wishlistData.counter) {
116-
$counter.text(wishlistData.counter);
117-
}
118-
});
119-
}
120-
});
121-
}
12235
}
12336
});
12437
});

‎dev/tests/js/jasmine/tests/app/code/Magento/Wishlist/view/frontend/web/js/view/wishlist-mixin.test.js‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,15 @@ define([
4545

4646
// Add the extend method that Magento components typically have
4747
WishlistComponent.extend = function (extensions) {
48-
var ExtendedComponent = function () {};
48+
var ExtendedComponent = function () {},
49+
key,
50+
methodName,
51+
originalMethod;
4952

5053
ExtendedComponent.prototype = Object.create(WishlistComponent.prototype);
5154

5255
// Copy the extensions to the prototype
53-
for (var key in extensions) {
56+
for (key in extensions) {
5457
if (extensions.hasOwnProperty(key)) {
5558
ExtendedComponent.prototype[key] = extensions[key];
5659
}
@@ -60,19 +63,23 @@ define([
6063
ExtendedComponent.extend = WishlistComponent.extend;
6164

6265
// Add _super method for each extended method
63-
for (var methodName in extensions) {
66+
for (methodName in extensions) {
6467
if (!extensions.hasOwnProperty(methodName) || typeof extensions[methodName] !== 'function') {
6568
continue;
6669
}
6770

68-
var originalMethod = WishlistComponent.prototype[methodName];
71+
originalMethod = WishlistComponent.prototype[methodName];
72+
6973
if (!originalMethod) {
7074
continue;
7175
}
7276

73-
ExtendedComponent.prototype['_super'] = function () {
74-
return originalMethod.apply(this, arguments);
75-
};
77+
// Use IIFE to create proper closure for _super method
78+
(function (method) {
79+
ExtendedComponent.prototype['_super'] = function () {
80+
return method.apply(this, arguments);
81+
};
82+
})(originalMethod);
7683
}
7784

7885
return ExtendedComponent;

‎dev/tests/js/jasmine/tests/app/code/Magento/Wishlist/view/frontend/web/js/view/wishlist.test.js‎

Lines changed: 15 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -50,145 +50,61 @@ define([
5050
injector.clean();
5151
injector.remove();
5252
delete window.checkout;
53-
} catch (e) { // eslint-disable-line no-unused-vars
54-
// Ignore cleanup errors
55-
}
53+
} catch (e) {}
5654
}
5755

58-
function loadWishlistComponent() {
56+
async function loadWishlistComponent() {
5957
return new Promise(resolve => {
60-
injector.require(['Magento_Wishlist/js/view/wishlist'], function (WishlistComponent) {
58+
injector.require(['Magento_Wishlist/js/view/wishlist'], async function (WishlistComponent) {
6159
wishlistComponent = new WishlistComponent();
6260
resolve();
6361
});
6462
});
6563
}
6664

67-
beforeEach(function (done) {
65+
beforeEach(async function () {
6866
setupInjector();
69-
loadWishlistComponent().then(function () {
70-
done();
71-
});
67+
await loadWishlistComponent();
7268
});
7369

7470
afterEach(function () {
7571
cleanupInjector();
7672
});
7773

7874
describe('Initialization', function () {
79-
it('should call customerData.get with "wishlist"', function () {
75+
it('should call customerData.get with "wishlist"', async function () {
8076
expect(mockCustomerData.get).toHaveBeenCalledWith('wishlist');
8177
});
8278

83-
it('should call customerData.get with "company"', function () {
79+
it('should call customerData.get with "company"', async function () {
8480
expect(mockCustomerData.get).toHaveBeenCalledWith('company');
8581
});
8682

87-
it('should invalidate wishlist if storeIds do not match', function () {
83+
it('should invalidate wishlist if storeIds do not match', async function () {
8884
window.checkout = { storeId: 2 };
89-
wishlistComponent.initialize();
85+
await wishlistComponent.initialize();
9086
expect(mockCustomerData.invalidate).toHaveBeenCalledWith(['wishlist']);
9187
});
9288

93-
it('should not reload wishlist if storeIds match and company is disabled', function () {
89+
it('should not reload wishlist if storeIds match and company is disabled', async function () {
9490
window.checkout = { storeId: 1 };
9591
mockCompany.is_enabled = false;
96-
wishlistComponent.initialize();
92+
await wishlistComponent.initialize();
9793
expect(mockCustomerData.reload).not.toHaveBeenCalledWith(['wishlist'], false);
9894
});
9995

100-
it('should reload wishlist if storeIds do not match', function () {
96+
it('should reload wishlist if storeIds do not match', async function () {
10197
window.checkout = { storeId: 2 };
102-
wishlistComponent.initialize();
98+
await wishlistComponent.initialize();
10399
expect(mockCustomerData.reload).toHaveBeenCalledWith(['wishlist'], false);
104100
});
105101

106-
it('should reload wishlist if storeIds match and company is enabled', function () {
102+
it('should reload wishlist if storeIds match and company is enabled', async function () {
107103
window.checkout = { storeId: 1 };
108104
mockCompany.is_enabled = true;
109-
wishlistComponent.initialize();
105+
await wishlistComponent.initialize();
110106
expect(mockCustomerData.reload).toHaveBeenCalledWith(['wishlist'], false);
111107
});
112108
});
113-
114-
describe('Core Methods', function () {
115-
it('should have ensureWishlistDataLoaded method', function () {
116-
expect(typeof wishlistComponent.ensureWishlistDataLoaded).toBe('function');
117-
});
118-
119-
it('should have handleDepersonalization method', function () {
120-
expect(typeof wishlistComponent.handleDepersonalization).toBe('function');
121-
});
122-
123-
it('should have updateWishlistUI method', function () {
124-
expect(typeof wishlistComponent.updateWishlistUI).toBe('function');
125-
});
126-
});
127-
128-
describe('Data Handling', function () {
129-
it('should have wishlist data available', function () {
130-
expect(wishlistComponent.wishlist).toBeDefined();
131-
expect(wishlistComponent.wishlist()).toEqual(mockWishlist);
132-
});
133-
134-
it('should have company data available', function () {
135-
expect(wishlistComponent.company).toBeDefined();
136-
expect(wishlistComponent.company()).toEqual(mockCompany);
137-
});
138-
139-
it('should handle empty wishlist data', function () {
140-
mockWishlist.counter = 0;
141-
expect(wishlistComponent.wishlist().counter).toBe(0);
142-
});
143-
});
144-
145-
describe('ensureWishlistDataLoaded', function () {
146-
it('should not call customerData.reload when wishlist has data', function () {
147-
mockWishlist.counter = 3;
148-
wishlistComponent.ensureWishlistDataLoaded();
149-
expect(mockCustomerData.reload).not.toHaveBeenCalled();
150-
});
151-
});
152-
153-
describe('handleDepersonalization', function () {
154-
it('should set up timeout attempts', function () {
155-
spyOn(window, 'setTimeout');
156-
wishlistComponent.handleDepersonalization();
157-
expect(window.setTimeout).toHaveBeenCalledTimes(1);
158-
});
159-
160-
it('should not call customerData.reload when wishlist has data', function () {
161-
// Reset mock and set wishlist to have data
162-
mockCustomerData.reload.calls.reset();
163-
mockWishlist.counter = 3;
164-
spyOn(window, 'setTimeout').and.callFake(function (callback) {
165-
callback();
166-
});
167-
wishlistComponent.handleDepersonalization();
168-
expect(mockCustomerData.reload).not.toHaveBeenCalled();
169-
});
170-
});
171-
172-
describe('updateWishlistUI', function () {
173-
it('should execute without errors when called', function () {
174-
expect(function () {
175-
wishlistComponent.updateWishlistUI();
176-
}).not.toThrow();
177-
});
178-
179-
it('should handle wishlist data with counter', function () {
180-
mockWishlist.counter = '5 items';
181-
expect(function () {
182-
wishlistComponent.updateWishlistUI();
183-
}).not.toThrow();
184-
});
185-
186-
it('should handle wishlist data without counter', function () {
187-
mockWishlist.counter = null;
188-
expect(function () {
189-
wishlistComponent.updateWishlistUI();
190-
}).not.toThrow();
191-
});
192-
});
193109
});
194110
});

0 commit comments

Comments
 (0)