@eeacms/volto-eea-design-system 1.40.1 → 1.40.2

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [1.40.2](https://github.com/eea/volto-eea-design-system/compare/1.40.1...1.40.2) - 8 December 2025
+
+#### :hammer_and_wrench: Others
+
+- fix tests [Teodor - [`4b3db9b`](https://github.com/eea/volto-eea-design-system/commit/4b3db9b63230fcb43626eebddfed78007b24b464)]
+- Add comprehensive tests for megamenu fix utilities [copilot-swe-agent[bot] - [`d4e1af8`](https://github.com/eea/volto-eea-design-system/commit/d4e1af8f3a8da40c64ccc122355ba90e19320288)]
+- Initial plan [copilot-swe-agent[bot] - [`5e90591`](https://github.com/eea/volto-eea-design-system/commit/5e90591503dcff8af4d39298ac2c0e98b94ff2c0)]
 ### [1.40.1](https://github.com/eea/volto-eea-design-system/compare/1.40.0...1.40.1) - 4 December 2025
 
 #### :bug: Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-design-system",
-  "version": "1.40.1",
+  "version": "1.40.2",
   "description": "@eeacms/volto-eea-design-system: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/ui/Header/utils.js

@@ -73,8 +73,21 @@ export const numberToColumnString = (num) => {
 
 export const numbersToMenuItemColumns = (numbers) => {
   // Handle both single number and array of numbers for column dimensions
-  if (!Array.isArray(numbers)) return numberToColumnString(numbers);
+  // Also handle pre-formatted strings (e.g., 'at-a-glance three wide column')
+  if (!Array.isArray(numbers)) {
+    // If it's already a string containing 'wide column', return it as-is
+    if (typeof numbers === 'string' && numbers.includes('wide column')) {
+      return numbers;
+    }
+    return numberToColumnString(numbers);
+  }
   return numbers
-    .map((num) => numberToColumnString(parseInt(num)))
+    .map((num) => {
+      // If array element is already a formatted string, return it as-is
+      if (typeof num === 'string' && num.includes('wide column')) {
+        return num;
+      }
+      return numberToColumnString(parseInt(num));
+    })
     .filter((col) => col !== '');
 };

package/src/ui/Header/utils.test.js

@@ -98,6 +98,75 @@ describe('Header utils', () => {
       expect(result3.bestMatchUrl).toBe(null);
       expect(result3.bestScore).toBe(-1);
     });
+
+    test('handles trailing slashes in URLs correctly', () => {
+      const menuItems = [
+        { url: '/topics/', items: [] },
+        { url: '/topics/climate/', items: [] },
+      ];
+
+      // Active item with trailing slash should match menu item without
+      const result1 = findBestMatchingMenuItem(menuItems, '/topics/');
+      expect(result1.bestMatchUrl).toBe('/topics');
+
+      // Active item without trailing slash should match menu item with
+      const result2 = findBestMatchingMenuItem(menuItems, '/topics/climate');
+      expect(result2.bestMatchUrl).toBe('/topics/climate');
+
+      // Exact match with both having trailing slashes
+      const result3 = findBestMatchingMenuItem(menuItems, '/topics/climate/');
+      expect(result3.bestMatchUrl).toBe('/topics/climate');
+    });
+
+    test('handles multiple trailing slashes', () => {
+      const menuItems = [{ url: '/topics///', items: [] }];
+
+      const result = findBestMatchingMenuItem(menuItems, '/topics');
+      expect(result.bestMatchUrl).toBe('/topics');
+      expect(result.bestScore).toBe('/topics'.length + 1);
+    });
+
+    test('prevents sibling collision with similar URLs', () => {
+      // This is the key test for the megamenu fix
+      const menuItems = [
+        { url: '/topics', items: [] },
+        { url: '/topics-archive', items: [] },
+        { url: '/topics/climate', items: [] },
+      ];
+
+      // Should match /topics/climate (most specific parent), not /topics-archive
+      const result1 = findBestMatchingMenuItem(
+        menuItems,
+        '/topics/climate/overview',
+      );
+      expect(result1.bestMatchUrl).toBe('/topics/climate');
+
+      // Should match /topics-archive exactly, not /topics
+      const result2 = findBestMatchingMenuItem(menuItems, '/topics-archive');
+      expect(result2.bestMatchUrl).toBe('/topics-archive');
+
+      // Should match /topics-archive when on /topics-archive/page (parent-child relationship)
+      const result3 = findBestMatchingMenuItem(
+        menuItems,
+        '/topics-archive/page',
+      );
+      expect(result3.bestMatchUrl).toBe('/topics-archive');
+    });
+
+    test('root path ("/") handling', () => {
+      const menuItems = [
+        { url: '/', items: [] },
+        { url: '/topics', items: [] },
+      ];
+
+      const result1 = findBestMatchingMenuItem(menuItems, '/');
+      expect(result1.bestMatchUrl).toBe('/');
+
+      // Root should not match other paths
+      const result2 = findBestMatchingMenuItem(menuItems, '/topics');
+      expect(result2.bestMatchUrl).toBe('/topics');
+      expect(result2.bestScore).toBe('/topics'.length + 1);
+    });
   });
 
   describe('isMenuItemActive', () => {
@@ -214,5 +283,46 @@ describe('Header utils', () => {
       const result = numbersToMenuItemColumns([0, 10, -1, 100]);
       expect(result).toEqual([]);
     });
+
+    test('handles single number input (non-array)', () => {
+      expect(numbersToMenuItemColumns(3)).toBe('three wide column');
+      expect(numbersToMenuItemColumns(5)).toBe('five wide column');
+      expect(numbersToMenuItemColumns(0)).toBe('');
+      expect(numbersToMenuItemColumns(10)).toBe('');
+    });
+
+    test('handles pre-formatted string input', () => {
+      const result = numbersToMenuItemColumns('at-a-glance three wide column');
+      expect(result).toBe('at-a-glance three wide column');
+    });
+
+    test('handles array with pre-formatted strings', () => {
+      const result = numbersToMenuItemColumns([
+        'custom one wide column',
+        2,
+        'another three wide column',
+      ]);
+      expect(result).toEqual([
+        'custom one wide column',
+        'two wide column',
+        'another three wide column',
+      ]);
+    });
+
+    test('handles mixed array with numbers, strings, and pre-formatted strings', () => {
+      const result = numbersToMenuItemColumns([
+        1,
+        'special four wide column',
+        '3',
+        0,
+        'another five wide column',
+      ]);
+      expect(result).toEqual([
+        'one wide column',
+        'special four wide column',
+        'three wide column',
+        'another five wide column',
+      ]);
+    });
   });
 });