ACP2E-3286: Related products SelectAll/Unselect All Issue

Author: Adiglo70550

app/code/Magento/Catalog/view/frontend/web/js/related-products.js

@@ -47,14 +47,15 @@ define([
          * @return {Boolean} - Prevent default event action and event propagation.
          */
         _selectAllRelated: function (e) {
-            var innerHTML = this.options.relatedProductsCheckFlag ?
-                this.options.selectAllMessage : this.options.unselectAllMessage;
+            var self = this,
+                innerHTML = this.options.relatedProductsCheckFlag ?
+                    this.options.selectAllMessage : this.options.unselectAllMessage;
 
             $(e.target).html(innerHTML);
-            $(this.options.relatedCheckbox + ':visible').attr(
-                'checked',
-                this.options.relatedProductsCheckFlag = !this.options.relatedProductsCheckFlag
-            );
+
+            this.options.relatedProductsCheckFlag = !this.options.relatedProductsCheckFlag;
+            $(this.options.relatedCheckbox + ':visible').each(function () {
+                $(this).prop('checked', self.options.relatedProductsCheckFlag); });
             this._addRelatedToProduct();
 
             return false;

dev/tests/js/jasmine/tests/app/code/Magento/Catalog/frontend/js/related-products.test.js

@@ -0,0 +1,67 @@
+/**
+ * Copyright 2024 Adobe
+ * All Rights Reserved.
+ */
+define([
+    'jquery',
+    'Magento_Catalog/js/related-products',
+    'jquery-ui-modules/widget'
+], function ($) {
+    'use strict';
+
+    describe('Related Products Widget', function () {
+        var widgetElement,
+            selectAllLinkSelector = '[data-role="select-all"]',
+            relatedCheckboxSelector = '.related-checkbox';
+
+        beforeEach(function () {
+            // Create elements and initialize widget manually
+            widgetElement = $('<div>')
+                .append('<a href="#" data-role="select-all">select all</a>')
+                .append('<input type="checkbox" class="related-checkbox" value="1">')
+                .append('<input type="checkbox" class="related-checkbox" value="2">')
+                .append('<input type="hidden" id="related-products-field">')
+                .appendTo('body');
+
+            // Initialize the widget
+            widgetElement.relatedProducts();
+        });
+
+        afterEach(function () {
+            widgetElement.remove();
+        });
+
+        it('should select all related products when "Select All" is clicked', function () {
+            $(selectAllLinkSelector).trigger('click');
+
+            // Verify all checkboxes are checked
+            expect($(relatedCheckboxSelector + ':checked').length).toBe(2);
+        });
+
+        it('should unselect all related products when "Unselect All" is clicked', function () {
+            $(selectAllLinkSelector).trigger('click');
+            $(selectAllLinkSelector).trigger('click');
+
+            // Verify all checkboxes are unchecked
+            expect($(relatedCheckboxSelector + ':checked').length).toBe(0);
+        });
+
+        it('should select all except manually selected product when "Select All" is clicked after manual selection',
+            function () {
+            $(relatedCheckboxSelector).first().prop('checked', true).trigger('click');
+            $(selectAllLinkSelector).trigger('click');
+
+            // Verify all products are selected, including the manually selected one
+            expect($(relatedCheckboxSelector + ':checked').length).toBe(2);
+        });
+
+        it('should unselect all products when "Unselect All" is clicked after manual selection', function () {
+            $(relatedCheckboxSelector).first().prop('checked', true).trigger('click');
+            $(selectAllLinkSelector).trigger('click');
+            $(selectAllLinkSelector).trigger('click');
+
+            // Verify all checkboxes are unchecked
+            expect($(relatedCheckboxSelector + ':checked').length).toBe(0);
+        });
+    });
+});