@eeacms/volto-eea-website-theme 3.12.0 → 3.14.0

package/CHANGELOG.md

@@ -4,6 +4,16 @@ 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).
 
+### [3.14.0](https://github.com/eea/volto-eea-website-theme/compare/3.13.0...3.14.0) - 6 November 2025
+
+#### :hammer_and_wrench: Others
+
+- Bump version from 3.13.0 to 3.14.0 [David Ichim - [`7e37c1d`](https://github.com/eea/volto-eea-website-theme/commit/7e37c1d97ab6037cb72444ace400f8b653334cba)]
+### [3.13.0](https://github.com/eea/volto-eea-website-theme/compare/3.12.0...3.13.0) - 4 November 2025
+
+#### :hammer_and_wrench: Others
+
+- Bump version from 3.12.1 to 3.13.0 [David Ichim - [`c182fea`](https://github.com/eea/volto-eea-website-theme/commit/c182fea83aad1c0b224c37287a5c2935a2e893d0)]
 ### [3.12.0](https://github.com/eea/volto-eea-website-theme/compare/3.11.0...3.12.0) - 4 November 2025
 
 #### :bug: Bug Fixes

package/jest-addon.config.js

@@ -1,10 +1,415 @@
-require('dotenv').config({ path: __dirname + '/.env' })
+/**
+ * Generic Jest configuration for Volto addons
+ *
+ * This configuration automatically:
+ * - Detects the addon name from the config file path
+ * - Configures test coverage to focus on the specific test path
+ * - Handles different ways of specifying test paths:
+ *   - Full paths like src/addons/addon-name/src/components
+ *   - Just filenames like Component.test.jsx
+ *   - Just directory names like components
+ *
+ * Usage:
+ * RAZZLE_JEST_CONFIG=src/addons/addon-name/jest-addon.config.js CI=true yarn test [test-path] --collectCoverage
+ */
+
+require('dotenv').config({ path: __dirname + '/.env' });
+
+const path = require('path');
+const fs = require('fs');
+const fg = require('fast-glob');
+
+// Get the addon name from the current file path
+const pathParts = __filename.split(path.sep);
+const addonsIdx = pathParts.lastIndexOf('addons');
+const addonName =
+  addonsIdx !== -1 && addonsIdx < pathParts.length - 1
+    ? pathParts[addonsIdx + 1]
+    : path.basename(path.dirname(__filename)); // Fallback to folder name
+const addonBasePath = `src/addons/${addonName}/src`;
+
+// --- Performance caches ---
+const fileSearchCache = new Map();
+const dirSearchCache = new Map();
+const dirListingCache = new Map();
+const statCache = new Map();
+const implementationCache = new Map();
+
+/**
+ * Cached fs.statSync wrapper to avoid redundant filesystem calls
+ * @param {string} p
+ * @returns {fs.Stats|null}
+ */
+const getStatSync = (p) => {
+  if (statCache.has(p)) return statCache.get(p);
+  try {
+    const s = fs.statSync(p);
+    statCache.set(p, s);
+    return s;
+  } catch {
+    statCache.set(p, null);
+    return null;
+  }
+};
+
+/**
+ * Find files that match a specific pattern using fast-glob
+ * @param {string} baseDir - The base directory to search in
+ * @param {string} fileName - The name of the file to find
+ * @param {string} [pathPattern=''] - Optional path pattern to filter results
+ * @returns {string[]} - Array of matching file paths
+ */
+const findFilesWithPattern = (baseDir, fileName, pathPattern = '') => {
+  const cacheKey = `${baseDir}|${fileName}|${pathPattern}`;
+  if (fileSearchCache.has(cacheKey)) {
+    return fileSearchCache.get(cacheKey);
+  }
+
+  let files = [];
+  try {
+    const patterns = fileName
+      ? [`${baseDir}/**/${fileName}`]
+      : [`${baseDir}/**/*.{js,jsx,ts,tsx}`];
+
+    files = fg.sync(patterns, { onlyFiles: true });
+
+    if (pathPattern) {
+      files = files.filter((file) => file.includes(pathPattern));
+    }
+  } catch {
+    files = [];
+  }
+
+  fileSearchCache.set(cacheKey, files);
+  return files;
+};
+
+/**
+ * Find directories that match a specific pattern using fast-glob
+ * @param {string} baseDir - The base directory to search in
+ * @param {string} dirName - The name of the directory to find
+ * @param {string} [pathPattern=''] - Optional path pattern to filter results
+ * @returns {string[]} - Array of matching directory paths
+ */
+const findDirsWithPattern = (baseDir, dirName, pathPattern = '') => {
+  const cacheKey = `${baseDir}|${dirName}|${pathPattern}`;
+  if (dirSearchCache.has(cacheKey)) {
+    return dirSearchCache.get(cacheKey);
+  }
+
+  let dirs = [];
+  try {
+    const patterns = dirName
+      ? [`${baseDir}/**/${dirName}`]
+      : [`${baseDir}/**/`];
+
+    dirs = fg.sync(patterns, { onlyDirectories: true });
+
+    if (pathPattern) {
+      dirs = dirs.filter((dir) => dir.includes(pathPattern));
+    }
+  } catch {
+    dirs = [];
+  }
+
+  dirSearchCache.set(cacheKey, dirs);
+  return dirs;
+};
+
+/**
+ * Find files or directories in the addon using fast-glob
+ * @param {string} name - The name to search for
+ * @param {string} type - The type of item to find ('f' for files, 'd' for directories)
+ * @param {string} [additionalOptions=''] - Additional options for flexible path matching
+ * @returns {string|null} - The path of the found item or null if not found
+ */
+const findInAddon = (name, type, additionalOptions = '') => {
+  const isFile = type === 'f';
+  const isDirectory = type === 'd';
+  const isFlexiblePathMatch = additionalOptions.includes('-path');
+
+  let pathPattern = '';
+  if (isFlexiblePathMatch) {
+    const match = additionalOptions.match(/-path "([^"]+)"/);
+    if (match && match[1]) {
+      pathPattern = match[1].replace(/\*/g, '');
+    }
+  }
+
+  try {
+    let results = [];
+    if (isFile) {
+      results = findFilesWithPattern(addonBasePath, name, pathPattern);
+    } else if (isDirectory) {
+      results = findDirsWithPattern(addonBasePath, name, pathPattern);
+    }
+    return results.length > 0 ? results[0] : null;
+  } catch (error) {
+    return null;
+  }
+};
+
+/**
+ * Find the implementation file for a test file
+ * @param {string} testPath - Path to the test file
+ * @returns {string|null} - Path to the implementation file or null if not found
+ */
+const findImplementationFile = (testPath) => {
+  if (implementationCache.has(testPath)) {
+    return implementationCache.get(testPath);
+  }
+
+  if (!fs.existsSync(testPath)) {
+    implementationCache.set(testPath, null);
+    return null;
+  }
+
+  const dirPath = path.dirname(testPath);
+  const fileName = path.basename(testPath);
+
+  // Regex for common test file patterns (e.g., .test.js, .spec.ts)
+  const TEST_OR_SPEC_FILE_REGEX = /\.(test|spec)\.[jt]sx?$/;
+
+  if (!TEST_OR_SPEC_FILE_REGEX.test(fileName)) {
+    implementationCache.set(testPath, null);
+    return null;
+  }
+
+  const baseFileName = path
+    .basename(fileName, path.extname(fileName))
+    .replace(/\.(test|spec)$/, ''); // Remove .test or .spec
+
+  let dirFiles = dirListingCache.get(dirPath);
+  if (!dirFiles) {
+    dirFiles = fs.readdirSync(dirPath);
+    dirListingCache.set(dirPath, dirFiles);
+  }
+
+  const exactMatch = dirFiles.find((file) => {
+    const fileBaseName = path.basename(file, path.extname(file));
+    return (
+      fileBaseName === baseFileName && !TEST_OR_SPEC_FILE_REGEX.test(file) // Ensure it's not another test/spec file
+    );
+  });
+
+  if (exactMatch) {
+    const result = `${dirPath}/${exactMatch}`;
+    implementationCache.set(testPath, result);
+    return result;
+  }
+
+  const similarMatch = dirFiles.find((file) => {
+    if (
+      TEST_OR_SPEC_FILE_REGEX.test(file) ||
+      (getStatSync(`${dirPath}/${file}`)?.isDirectory() ?? false)
+    ) {
+      return false;
+    }
+    const fileBaseName = path.basename(file, path.extname(file));
+    return (
+      fileBaseName.toLowerCase().includes(baseFileName.toLowerCase()) ||
+      baseFileName.toLowerCase().includes(fileBaseName.toLowerCase())
+    );
+  });
+
+  if (similarMatch) {
+    const result = `${dirPath}/${similarMatch}`;
+    implementationCache.set(testPath, result);
+    return result;
+  }
+
+  implementationCache.set(testPath, null);
+  return null;
+};
+
+/**
+ * Get the test path from command line arguments
+ * @returns {string|null} - The resolved test path or null if not found
+ */
+const getTestPath = () => {
+  const args = process.argv;
+  let testPath = null;
+  const TEST_FILE_REGEX = /\.test\.[jt]sx?$/; // Matches .test.js, .test.jsx, .test.ts, .test.tsx
+
+  testPath = args.find(
+    (arg) =>
+      arg.includes(addonName) &&
+      !arg.startsWith('--') &&
+      arg !== 'test' &&
+      arg !== 'node',
+  );
+
+  if (!testPath) {
+    const testIndex = args.findIndex((arg) => arg === 'test');
+    if (testIndex !== -1 && testIndex < args.length - 1) {
+      const nextArg = args[testIndex + 1];
+      if (!nextArg.startsWith('--')) {
+        testPath = nextArg;
+      }
+    }
+  }
+
+  if (!testPath) {
+    testPath = args.find((arg) => TEST_FILE_REGEX.test(arg));
+  }
+
+  if (!testPath) {
+    return null;
+  }
+
+  if (!testPath.includes(path.sep)) {
+    if (TEST_FILE_REGEX.test(testPath)) {
+      const foundTestFile = findInAddon(testPath, 'f');
+      if (foundTestFile) {
+        return foundTestFile;
+      }
+    } else {
+      const foundDir = findInAddon(testPath, 'd');
+      if (foundDir) {
+        return foundDir;
+      }
+      const flexibleDir = findInAddon(testPath, 'd', `-path "*${testPath}*"`);
+      if (flexibleDir) {
+        return flexibleDir;
+      }
+    }
+  } else if (
+    TEST_FILE_REGEX.test(testPath) && // Check if it looks like a test file path
+    !testPath.startsWith('src/addons/')
+  ) {
+    const testFileName = path.basename(testPath);
+    const foundTestFile = findInAddon(testFileName, 'f');
+    if (foundTestFile) {
+      const relativePath = path.dirname(testPath);
+      if (foundTestFile.includes(relativePath)) {
+        return foundTestFile;
+      }
+      const similarFiles = findFilesWithPattern(
+        addonBasePath,
+        testFileName,
+        relativePath,
+      );
+      if (similarFiles && similarFiles.length > 0) {
+        return similarFiles[0];
+      }
+    }
+  }
+
+  if (
+    !path
+      .normalize(testPath)
+      .startsWith(path.join('src', 'addons', addonName, 'src')) &&
+    !path.isAbsolute(testPath) // Use path.isAbsolute for robust check
+  ) {
+    testPath = path.join(addonBasePath, testPath); // Use path.join for OS-agnostic paths
+  }
+
+  if (fs.existsSync(testPath)) {
+    return testPath;
+  }
+
+  const pathWithoutTrailingSlash = testPath.endsWith(path.sep)
+    ? testPath.slice(0, -1)
+    : null;
+  if (pathWithoutTrailingSlash && fs.existsSync(pathWithoutTrailingSlash)) {
+    return pathWithoutTrailingSlash;
+  }
+
+  const pathWithTrailingSlash = !testPath.endsWith(path.sep)
+    ? testPath + path.sep
+    : null;
+  if (pathWithTrailingSlash && fs.existsSync(pathWithTrailingSlash)) {
+    // Generally, return paths without trailing slashes for consistency,
+    // unless it's specifically needed for a directory that only exists with it (rare).
+    return testPath;
+  }
+  return testPath; // Return the original path if no variations exist
+};
+
+/**
+ * Determine collectCoverageFrom patterns based on test path
+ * @returns {string[]} - Array of coverage patterns
+ */
+const getCoveragePatterns = () => {
+  const excludePatterns = [
+    '!src/**/*.d.ts',
+    '!**/*.test.{js,jsx,ts,tsx}',
+    '!**/*.stories.{js,jsx,ts,tsx}',
+    '!**/*.spec.{js,jsx,ts,tsx}',
+  ];
+
+  const defaultPatterns = [
+    `${addonBasePath}/**/*.{js,jsx,ts,tsx}`,
+    ...excludePatterns,
+  ];
+
+  const ANY_SCRIPT_FILE_REGEX = /\.[jt]sx?$/;
+
+  const directoryArg = process.argv.find(
+    (arg) =>
+      !arg.includes(path.sep) &&
+      !arg.startsWith('--') &&
+      arg !== 'test' &&
+      arg !== 'node' &&
+      !ANY_SCRIPT_FILE_REGEX.test(arg) &&
+      ![
+        'yarn',
+        'npm',
+        'npx',
+        'collectCoverage',
+        'CI',
+        'RAZZLE_JEST_CONFIG',
+      ].some(
+        (reserved) =>
+          arg === reserved || arg.startsWith(reserved.split('=')[0] + '='),
+      ) &&
+      process.argv.indexOf(arg) >
+        process.argv.findIndex((item) => item === 'test'),
+  );
+
+  if (directoryArg) {
+    const foundDir = findInAddon(directoryArg, 'd');
+    if (foundDir) {
+      return [`${foundDir}/**/*.{js,jsx,ts,tsx}`, ...excludePatterns];
+    }
+  }
+
+  let testPath = getTestPath();
+
+  if (!testPath) {
+    return defaultPatterns;
+  }
+
+  if (testPath.endsWith(path.sep)) {
+    testPath = testPath.slice(0, -1);
+  }
+
+  const stats = getStatSync(testPath);
+
+  if (stats && stats.isFile()) {
+    const implFile = findImplementationFile(testPath);
+    if (implFile) {
+      return [implFile, '!src/**/*.d.ts'];
+    }
+    const dirPath = path.dirname(testPath);
+    return [`${dirPath}/**/*.{js,jsx,ts,tsx}`, ...excludePatterns];
+  } else if (stats && stats.isDirectory()) {
+    return [`${testPath}/**/*.{js,jsx,ts,tsx}`, ...excludePatterns];
+  }
+
+  return defaultPatterns;
+};
+
+const coverageConfig = getCoveragePatterns();
 
 module.exports = {
   testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s?(x)'],
-  collectCoverageFrom: [
-    'src/addons/**/src/**/*.{js,jsx,ts,tsx}',
-    '!src/**/*.d.ts',
+  collectCoverageFrom: coverageConfig,
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    'schema\\.[jt]s?$',
+    'index\\.[jt]s?$',
+    'config\\.[jt]sx?$',
   ],
   moduleNameMapper: {
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
@@ -45,7 +450,17 @@ module.exports = {
   },
   ...(process.env.JEST_USE_SETUP === 'ON' && {
     setupFilesAfterEnv: [
-      '<rootDir>/node_modules/@eeacms/volto-eea-website-theme/jest.setup.js',
+      fs.existsSync(
+        path.join(
+          __dirname,
+          'node_modules',
+          '@eeacms',
+          addonName,
+          'jest.setup.js',
+        ),
+      )
+        ? `<rootDir>/node_modules/@eeacms/${addonName}/jest.setup.js`
+        : `<rootDir>/src/addons/${addonName}/jest.setup.js`,
     ],
   }),
-}
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-theme",
-  "version": "3.12.0",
+  "version": "3.14.0",
   "description": "@eeacms/volto-eea-website-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -37,6 +37,7 @@
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "dotenv": "^16.3.2",
+    "fast-glob": "^3.1.1",
     "husky": "^8.0.3",
     "jsonwebtoken": "9.0.0",
     "lint-staged": "^14.0.1",

package/src/components/theme/Widgets/NavigationBehaviorWidget.jsx

@@ -8,6 +8,8 @@ import { getNavigation } from '@plone/volto/actions';
 import { defineMessages, useIntl } from 'react-intl';
 import config from '@plone/volto/registry';
 
+import { numbersToMenuItemColumns } from '@eeacms/volto-eea-design-system/ui/Header/utils';
+
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
 
@@ -36,30 +38,6 @@ const defaultRouteSettings = {
   // Don't include empty arrays in default settings
 };
 
-// Helper functions for menuItemColumns conversion (numbers to semantic UI format)
-const numberToColumnString = (num) => {
-  const numbers = [
-    '',
-    'one',
-    'two',
-    'three',
-    'four',
-    'five',
-    'six',
-    'seven',
-    'eight',
-    'nine',
-  ];
-  return numbers[num] ? `${numbers[num]} wide column` : '';
-};
-
-const numbersToMenuItemColumns = (numbers) => {
-  if (!Array.isArray(numbers)) return [];
-  return numbers
-    .map((num) => numberToColumnString(parseInt(num)))
-    .filter((col) => col !== '');
-};
-
 const columnStringToNumber = (colString) => {
   const numbers = {
     one: 1,
@@ -78,7 +56,7 @@ const columnStringToNumber = (colString) => {
   return match ? numbers[match[1]] : null;
 };
 
-const menuItemColumnsToNumbers = (columns) => {
+export const menuItemColumnsToNumbers = (columns) => {
   if (!Array.isArray(columns)) return [];
   return columns
     .map((col) => columnStringToNumber(col))
@@ -420,6 +398,20 @@ const NavigationBehaviorWidget = (props) => {
             portal_type: ______,
             ...settings
           } = route;
+
+          // // Convert menuItemColumns from numbers back to semantic UI format for backend storage
+          if (
+            settings.menuItemColumns !== null &&
+            settings.menuItemColumns &&
+            Array.isArray(settings.menuItemColumns)
+          ) {
+            if (settings.menuItemColumns.length > 0) {
+              settings.menuItemColumns = numbersToMenuItemColumns(
+                settings.menuItemColumns,
+              );
+            }
+          }
+
           newSettings[routeId] = settings;
         });
 

package/src/components/theme/Widgets/NavigationBehaviorWidget.test.jsx

@@ -490,6 +490,120 @@ describe('NavigationBehaviorWidget', () => {
     expect(screen.getByText('Test Route 2')).toBeInTheDocument();
   });
 
+  it('handles menuItemColumns as integers from backend (develop server format)', async () => {
+    const existingSettings = {
+      'http://localhost:3000/test-route-1': {
+        hideChildrenFromNavigation: false,
+        menuItemColumns: [8, 4], // Integer format from develop server
+      },
+    };
+
+    render(
+      <Provider store={store}>
+        <NavigationBehaviorWidget
+          id="test"
+          value={JSON.stringify(existingSettings)}
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    const accordionTitles = screen.getAllByTestId('accordion-title');
+    fireEvent.click(accordionTitles[0]);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('Hide Children From Navigation'),
+      ).toBeInTheDocument();
+    });
+
+    // Verify the widget displays the values correctly (converted to numbers for display)
+    // The widget should handle integer input and display it properly
+  });
+
+  it('handles menuItemColumns as semantic UI strings from backend (production format)', async () => {
+    const existingSettings = {
+      'http://localhost:3000/test-route-1': {
+        hideChildrenFromNavigation: false,
+        menuItemColumns: ['eight wide column', 'four wide column'], // String format from production
+      },
+    };
+
+    render(
+      <Provider store={store}>
+        <NavigationBehaviorWidget
+          id="test"
+          value={JSON.stringify(existingSettings)}
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    const accordionTitles = screen.getAllByTestId('accordion-title');
+    fireEvent.click(accordionTitles[0]);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('Hide Children From Navigation'),
+      ).toBeInTheDocument();
+    });
+
+    // Verify the widget displays the values correctly (converted from strings to numbers for display)
+    // The widget should handle semantic UI string input and convert it to numbers for display
+  });
+
+  it('converts menuItemColumns to semantic UI format when saving', async () => {
+    const existingSettings = {
+      'http://localhost:3000/test-route-1': {
+        hideChildrenFromNavigation: false,
+        menuItemColumns: [2, 3], // Numbers that should be converted to semantic UI format
+      },
+    };
+
+    render(
+      <Provider store={store}>
+        <NavigationBehaviorWidget
+          id="test"
+          value={JSON.stringify(existingSettings)}
+          onChange={mockOnChange}
+        />
+      </Provider>,
+    );
+
+    const accordionTitles = screen.getAllByTestId('accordion-title');
+    fireEvent.click(accordionTitles[0]);
+
+    await waitFor(() => {
+      expect(
+        screen.getByText('Hide Children From Navigation'),
+      ).toBeInTheDocument();
+    });
+
+    // Simulate a change by clicking the checkbox
+    const checkboxes = screen.getAllByRole('checkbox');
+    fireEvent.click(checkboxes[0]);
+
+    await waitFor(() => {
+      expect(mockOnChange).toHaveBeenCalled();
+      const lastCallIndex = mockOnChange.mock.calls.length - 1;
+      const savedValue = JSON.parse(mockOnChange.mock.calls[lastCallIndex][1]);
+
+      // Find the route settings
+      const routeKey = Object.keys(savedValue).find((key) =>
+        key.includes('test-route-1'),
+      );
+      const route1Settings = savedValue[routeKey];
+
+      // Verify menuItemColumns are saved in semantic UI format, not as integers
+      if (route1Settings && route1Settings.menuItemColumns) {
+        route1Settings.menuItemColumns.forEach((col) => {
+          expect(typeof col).toBe('string');
+          expect(col).toMatch(/wide column$/);
+        });
+      }
+    });
+  });
+
   it('displays route paths in accordion titles', () => {
     render(
       <Provider store={store}>