@abstraks-dev/ui-library 1.0.1

package/dist/__tests__/Heading.test.js

@@ -0,0 +1,227 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Heading = require("../components/Heading");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+describe('Heading Component', () => {
+  test('renders h1 when level is 1', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+      level: 1
+    }, "Main Title"));
+    const heading = _react2.screen.getByRole('heading', {
+      level: 1
+    });
+    expect(heading).toBeInTheDocument();
+    expect(heading).toHaveTextContent('Main Title');
+    expect(heading.tagName).toBe('H1');
+  });
+  test('renders h2 when level is 2', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+      level: 2
+    }, "Subtitle"));
+    const heading = _react2.screen.getByRole('heading', {
+      level: 2
+    });
+    expect(heading).toBeInTheDocument();
+    expect(heading).toHaveTextContent('Subtitle');
+    expect(heading.tagName).toBe('H2');
+  });
+  test('renders all heading levels correctly', () => {
+    const {
+      rerender
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+      level: 1
+    }, "Test"));
+    for (let level = 1; level <= 6; level++) {
+      rerender(/*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+        level: level
+      }, "Heading ", level));
+      const heading = _react2.screen.getByRole('heading', {
+        level
+      });
+      expect(heading.tagName).toBe(`H${level}`);
+      expect(heading).toHaveTextContent(`Heading ${level}`);
+    }
+  });
+  test('applies correct CSS classes', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+      level: 3
+    }, "Test Heading"));
+    const heading = _react2.screen.getByRole('heading', {
+      level: 3
+    });
+    expect(heading).toHaveClass('h3', 'heading');
+    expect(heading).toHaveAttribute('data-testid', 'heading');
+  });
+  test('applies additional className', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+      level: 1,
+      className: "custom-heading"
+    }, "Custom"));
+    const heading = _react2.screen.getByRole('heading', {
+      level: 1
+    });
+    expect(heading).toHaveClass('h1', 'heading', 'custom-heading');
+  });
+  test('applies custom component name', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+      level: 2,
+      componentName: "title"
+    }, "Title"));
+    const heading = _react2.screen.getByRole('heading', {
+      level: 2
+    });
+    expect(heading).toHaveClass('h2', 'title');
+    expect(heading).toHaveAttribute('data-testid', 'title');
+  });
+  test('passes through additional props', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+      level: 1,
+      id: "main-title",
+      "aria-describedby": "description",
+      "data-custom": "value"
+    }, "Title"));
+    const heading = _react2.screen.getByRole('heading', {
+      level: 1
+    });
+    expect(heading).toHaveAttribute('id', 'main-title');
+    expect(heading).toHaveAttribute('aria-describedby', 'description');
+    expect(heading).toHaveAttribute('data-custom', 'value');
+  });
+  test('renders with complex children', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+      level: 1
+    }, /*#__PURE__*/_react.default.createElement("span", null, "Complex"), " ", /*#__PURE__*/_react.default.createElement("strong", null, "Heading")));
+    const heading = _react2.screen.getByRole('heading', {
+      level: 1
+    });
+    expect(heading).toContainHTML('<span>Complex</span> <strong>Heading</strong>');
+  });
+  test('handles empty children', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+      level: 1
+    }));
+    const heading = _react2.screen.getByRole('heading', {
+      level: 1
+    });
+    expect(heading).toBeInTheDocument();
+    expect(heading).toBeEmptyDOMElement();
+  });
+
+  // New accessibility tests
+  test('requires children prop', () => {
+    // This should show a PropTypes warning in development
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+      level: 1
+    }));
+
+    // In development mode, PropTypes would warn about missing required children
+    // We can't easily test PropTypes warnings in Jest, but the component should still render
+    const heading = _react2.screen.getByRole('heading', {
+      level: 1
+    });
+    expect(heading).toBeInTheDocument();
+    consoleSpy.mockRestore();
+  });
+  test('has proper accessibility attributes', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+      level: 2,
+      id: "accessible-heading"
+    }, "Accessible Title"));
+    const heading = _react2.screen.getByRole('heading', {
+      level: 2
+    });
+    expect(heading).toHaveAttribute('id', 'accessible-heading');
+
+    // Should be focusable for screen readers when needed
+    expect(heading).not.toHaveAttribute('tabindex');
+  });
+  test('supports keyboard navigation when tabIndex is provided', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+      level: 1,
+      tabIndex: "0"
+    }, "Focusable Heading"));
+    const heading = _react2.screen.getByRole('heading', {
+      level: 1
+    });
+    expect(heading).toHaveAttribute('tabindex', '0');
+
+    // Focus the heading
+    heading.focus();
+    expect(heading).toHaveFocus();
+  });
+  test('maintains semantic structure', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+      level: 1
+    }, "Main Title"), /*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+      level: 2
+    }, "Section"), /*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+      level: 3
+    }, "Subsection")));
+    const h1 = _react2.screen.getByRole('heading', {
+      level: 1
+    });
+    const h2 = _react2.screen.getByRole('heading', {
+      level: 2
+    });
+    const h3 = _react2.screen.getByRole('heading', {
+      level: 3
+    });
+    expect(h1).toBeInTheDocument();
+    expect(h2).toBeInTheDocument();
+    expect(h3).toBeInTheDocument();
+
+    // Verify proper heading hierarchy
+    expect(h1.tagName).toBe('H1');
+    expect(h2.tagName).toBe('H2');
+    expect(h3.tagName).toBe('H3');
+  });
+  test('trims className string properly', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+      level: 1,
+      className: ""
+    }, "Clean Classes"));
+    const heading = _react2.screen.getByRole('heading', {
+      level: 1
+    });
+    expect(heading.className).toBe('h1 heading');
+    expect(heading.className).not.toContain('  '); // No double spaces
+  });
+  test('supports ARIA attributes for enhanced accessibility', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+      level: 1,
+      "aria-describedby": "heading-description",
+      "aria-labelledby": "heading-label"
+    }, "ARIA Enhanced Heading"));
+    const heading = _react2.screen.getByRole('heading', {
+      level: 1
+    });
+    expect(heading).toHaveAttribute('aria-describedby', 'heading-description');
+    expect(heading).toHaveAttribute('aria-labelledby', 'heading-label');
+  });
+
+  // Legacy compatibility tests
+  test('maintains backward compatibility with variant prop', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+      variant: 2
+    }, "Legacy Heading"));
+    const heading = _react2.screen.getByRole('heading', {
+      level: 2
+    });
+    expect(heading).toBeInTheDocument();
+    expect(heading).toHaveTextContent('Legacy Heading');
+    expect(heading.tagName).toBe('H2');
+  });
+  test('maintains backward compatibility with additionalClassName prop', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heading.Heading, {
+      variant: 1,
+      additionalClassName: "legacy-class"
+    }, "Legacy Style"));
+    const heading = _react2.screen.getByRole('heading', {
+      level: 1
+    });
+    expect(heading).toHaveClass('h1', 'heading', 'legacy-class');
+  });
+});

package/dist/__tests__/Hero.test.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Hero = require("../components/Hero");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+describe('Hero Component', () => {
+  test('renders hero with default props', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Hero.Hero, null, "Hero Content"));
+    const animation = _react2.screen.getByTestId('animation');
+    const hero = (0, _react2.within)(animation).getByTestId('hero');
+    expect(hero).toBeInTheDocument();
+    expect(hero).toHaveClass('hero-wrapper');
+    expect(_react2.screen.getByText('Hero Content')).toBeInTheDocument();
+  });
+  test('renders with custom component name', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Hero.Hero, {
+      componentName: "custom-hero"
+    }, "Custom Hero"));
+    const animation = _react2.screen.getByTestId('animation');
+    const hero = (0, _react2.within)(animation).getByTestId('hero');
+    expect(hero).toHaveClass('custom-hero-wrapper');
+  });
+  test('renders with additional className', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Hero.Hero, {
+      additionalClassName: "extra-class"
+    }, "Styled Hero"));
+    const animation = _react2.screen.getByTestId('animation');
+    const hero = (0, _react2.within)(animation).getByTestId('hero');
+    expect(hero).toHaveClass('hero-wrapper', 'extra-class');
+  });
+  test('renders with background image', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Hero.Hero, {
+      background: "/path/to/image.jpg"
+    }, "Hero with Background"));
+    const animation = _react2.screen.getByTestId('animation');
+    const hero = (0, _react2.within)(animation).getByTestId('hero');
+    expect(hero).toHaveStyle('background-image: url(/path/to/image.jpg)');
+  });
+  test('renders inner hero container', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Hero.Hero, null, "Inner Content"));
+    const animation = _react2.screen.getByTestId('animation');
+    const hero = (0, _react2.within)(animation).getByTestId('hero');
+    const innerContainer = hero.querySelector('.hero');
+    expect(innerContainer).toBeInTheDocument();
+    expect(innerContainer).toHaveTextContent('Inner Content');
+  });
+  test('renders with complex children', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Hero.Hero, null, /*#__PURE__*/_react.default.createElement("h1", null, "Hero Title"), /*#__PURE__*/_react.default.createElement("p", null, "Hero description"), /*#__PURE__*/_react.default.createElement("button", null, "Call to Action")));
+    expect(_react2.screen.getByText('Hero Title')).toBeInTheDocument();
+    expect(_react2.screen.getByText('Hero description')).toBeInTheDocument();
+    expect(_react2.screen.getByText('Call to Action')).toBeInTheDocument();
+  });
+  test('renders without background image', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Hero.Hero, null, "No Background"));
+    const animation = _react2.screen.getByTestId('animation');
+    const hero = (0, _react2.within)(animation).getByTestId('hero');
+    // Should not have background-image style at all
+    expect(hero.style.backgroundImage).toBe('');
+  });
+  test('combines all props correctly', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Hero.Hero, {
+      componentName: "landing-hero",
+      testId: "landing-hero",
+      additionalClassName: "home-hero large",
+      background: "/hero-bg.png"
+    }, "Landing Page Hero"));
+    const animation = _react2.screen.getByTestId('animation');
+    const hero = (0, _react2.within)(animation).getByTestId('landing-hero');
+    expect(hero).toHaveClass('landing-hero-wrapper', 'home-hero', 'large');
+    expect(hero).toHaveStyle('background-image: url(/hero-bg.png)');
+    expect(_react2.screen.getByText('Landing Page Hero')).toBeInTheDocument();
+  });
+});

package/dist/__tests__/Label.test.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Label = require("../components/Label");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Suppress console.error during tests
+let consoleErrorSpy;
+beforeAll(() => {
+  consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+});
+afterAll(() => {
+  consoleErrorSpy.mockRestore();
+});
+describe('Label Component', () => {
+  test('renders basic label with text', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Label.Label, {
+      labelText: "Username"
+    }));
+    const label = _react2.screen.getByText('Username');
+    expect(label).toBeInTheDocument();
+    expect(label.closest('label')).toHaveClass('label');
+  });
+  test('renders label with htmlFor attribute', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Label.Label, {
+      labelText: "Email",
+      labelFor: "email-input"
+    }));
+    const label = _react2.screen.getByText('Email').closest('label');
+    expect(label).toHaveAttribute('for', 'email-input');
+  });
+  test('shows required asterisk when required is true', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Label.Label, {
+      labelText: "Required Field",
+      required: true
+    }));
+    const asterisk = _react2.screen.getByText('*');
+    expect(asterisk).toBeInTheDocument();
+    expect(asterisk).toHaveClass('required');
+  });
+  test('does not show asterisk when required is false', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Label.Label, {
+      labelText: "Optional Field",
+      required: false
+    }));
+    expect(_react2.screen.queryByText('*')).not.toBeInTheDocument();
+  });
+  test('applies additional className', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Label.Label, {
+      labelText: "Test",
+      additionalClassName: "custom-label"
+    }));
+    const label = _react2.screen.getByText('Test').closest('label');
+    expect(label).toHaveClass('label', 'custom-label');
+  });
+  test('applies custom component name', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Label.Label, {
+      labelText: "Test",
+      componentName: "form-label"
+    }));
+    const label = _react2.screen.getByText('Test').closest('label');
+    expect(label).toHaveClass('form-label');
+    // data-test-id is on the wrapper, not the label
+  });
+  test('renders children elements', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Label.Label, {
+      labelText: "Input Label"
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      type: "text"
+    })));
+    const input = _react2.screen.getByRole('textbox');
+    expect(input).toBeInTheDocument();
+  });
+  test('renders complex children with required asterisk', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Label.Label, {
+      labelText: "Complex Field",
+      required: true
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      type: "email",
+      placeholder: "Enter email"
+    }), /*#__PURE__*/_react.default.createElement("span", null, "Helper text")));
+    expect(_react2.screen.getByText('Complex Field')).toBeInTheDocument();
+    expect(_react2.screen.getByText('*')).toBeInTheDocument();
+    expect(_react2.screen.getByRole('textbox')).toBeInTheDocument();
+    expect(_react2.screen.getByText('Helper text')).toBeInTheDocument();
+  });
+  test('passes through additional props', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Label.Label, {
+      labelText: "Test",
+      id: "custom-label",
+      "data-custom": "value"
+    }));
+    const label = _react2.screen.getByText('Test').closest('label');
+    expect(label).toHaveAttribute('id', 'custom-label');
+    expect(label).toHaveAttribute('data-custom', 'value');
+  });
+  test('has correct data-test-id attribute', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Label.Label, {
+      labelText: "Test"
+    }));
+    const label = _react2.screen.getByText('Test').closest('label');
+    // data-test-id is on the wrapper, not the label
+  });
+  test('label text is wrapped in span with correct class', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Label.Label, {
+      labelText: "Wrapped Text"
+    }));
+    const textSpan = _react2.screen.getByText('Wrapped Text');
+    expect(textSpan.tagName).toBe('SPAN');
+    expect(textSpan).toHaveClass('label-text');
+  });
+  test('renders without children', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Label.Label, {
+      labelText: "Standalone Label"
+    }));
+    const label = _react2.screen.getByText('Standalone Label').closest('label');
+    expect(label).toBeInTheDocument();
+
+    // Should only contain the label text span and possibly asterisk
+    const spans = label.querySelectorAll('span');
+    expect(spans).toHaveLength(1); // Only the label-text span
+  });
+});

package/dist/__tests__/Loader.test.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Loader = _interopRequireDefault(require("../components/Loader"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Suppress console.error during tests
+let consoleErrorSpy;
+beforeAll(() => {
+  consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+});
+afterAll(() => {
+  consoleErrorSpy.mockRestore();
+});
+describe('Loader Component', () => {
+  test('renders loader with default props', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Loader.default, null));
+    const loader = _react2.screen.getByTestId('ui-loader');
+    expect(loader).toBeInTheDocument();
+    expect(loader).toHaveClass('ui-loader');
+    expect(_react2.screen.getByRole('heading', {
+      level: 3
+    })).toHaveTextContent('Loading...');
+  });
+  test('renders with custom component name', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Loader.default, {
+      componentName: "custom-loader"
+    }));
+    const loader = _react2.screen.getByTestId('custom-loader');
+    expect(loader).toHaveClass('custom-loader');
+  });
+  test('renders with additional className', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Loader.default, {
+      additionalClassName: "centered-loader"
+    }));
+    const loader = _react2.screen.getByTestId('ui-loader');
+    expect(loader).toHaveClass('ui-loader', 'centered-loader');
+  });
+  test('renders with custom header text', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Loader.default, {
+      headerText: "Please wait..."
+    }));
+    expect(_react2.screen.getByRole('heading', {
+      level: 3
+    })).toHaveTextContent('Please wait...');
+    expect(_react2.screen.queryByText('Loading...')).not.toBeInTheDocument();
+  });
+  test('renders with custom title size', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Loader.default, {
+      titleSize: 2
+    }));
+    const heading = _react2.screen.getByRole('heading', {
+      level: 2
+    });
+    expect(heading).toBeInTheDocument();
+    expect(heading).toHaveTextContent('Loading...');
+  });
+  test('renders SVG with correct attributes', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Loader.default, {
+      svgSize: "300px"
+    }));
+    const loader = _react2.screen.getByTestId('ui-loader');
+    const svg = loader.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveAttribute('width', '300px');
+    expect(svg).toHaveAttribute('viewBox', '0 0 100 100');
+    expect(svg.className.baseVal).toContain('svg');
+  });
+  test('renders with custom fill color', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Loader.default, {
+      fill: "#ff0000"
+    }));
+    const loader = _react2.screen.getByTestId('ui-loader');
+    const path = loader.querySelector('path');
+    expect(path).toHaveAttribute('fill', '#ff0000');
+  });
+  test('renders loader wrapper', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Loader.default, null));
+    const loader = _react2.screen.getByTestId('ui-loader');
+    const wrapper = loader.querySelector('.ui-loader__wrapper');
+    expect(wrapper).toBeInTheDocument();
+  });
+  test('combines all props correctly', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Loader.default, {
+      componentName: "page-loader",
+      additionalClassName: "fullscreen overlay",
+      headerText: "Initializing...",
+      titleSize: 1,
+      svgSize: "400px",
+      fill: "#0066cc"
+    }));
+    const loader = _react2.screen.getByTestId('page-loader');
+    expect(loader).toHaveClass('page-loader', 'fullscreen', 'overlay');
+    const heading = _react2.screen.getByRole('heading', {
+      level: 1
+    });
+    expect(heading).toHaveTextContent('Initializing...');
+    const svg = loader.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '400px');
+    const path = loader.querySelector('path');
+    expect(path).toHaveAttribute('fill', '#0066cc');
+  });
+  test('has correct default values', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Loader.default, null));
+    const loader = _react2.screen.getByTestId('ui-loader');
+    const heading = _react2.screen.getByRole('heading', {
+      level: 3
+    });
+    const svg = loader.querySelector('svg');
+    const path = loader.querySelector('path');
+    expect(heading).toHaveTextContent('Loading...');
+    expect(svg).toHaveAttribute('width', '200px');
+    expect(path).toHaveAttribute('fill', '#333');
+  });
+});

package/dist/__tests__/MenuHover.test.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _MenuHover = require("../components/MenuHover");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+// Suppress console.error during tests
+let consoleErrorSpy;
+beforeAll(() => {
+  consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+});
+afterAll(() => {
+  consoleErrorSpy.mockRestore();
+});
+// Stateful test wrapper for MenuHover
+function StatefulMenuHover(props) {
+  const [isOpen, setIsOpen] = _react.default.useState(false);
+  return /*#__PURE__*/_react.default.createElement(_MenuHover.MenuHover, _extends({}, props, {
+    isOpen: isOpen,
+    onToggle: setIsOpen
+  }));
+}
+describe('MenuHover Component', () => {
+  const mockOpenChildren = /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "open-content"
+  }, "Menu is open");
+  const mockClosedChildren = /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "closed-content"
+  }, "Menu is closed");
+  test('renders closed children by default', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(StatefulMenuHover, {
+      isOpenChildren: mockOpenChildren,
+      isClosedChildren: mockClosedChildren
+    }));
+    const menuContainer = _react2.screen.getByTestId('menu-hover');
+    expect(menuContainer).toBeInTheDocument();
+    expect(_react2.screen.getByTestId('closed-content')).toBeInTheDocument();
+    expect(_react2.screen.queryByTestId('open-content')).not.toBeInTheDocument();
+  });
+  test('toggles between open and closed states when clicked', async () => {
+    const user = _userEvent.default.setup();
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(StatefulMenuHover, {
+      isOpenChildren: mockOpenChildren,
+      isClosedChildren: mockClosedChildren
+    }));
+    const menuContainer = _react2.screen.getByTestId('menu-hover');
+
+    // Initially closed
+    expect(menuContainer).toBeInTheDocument();
+    expect(_react2.screen.getByTestId('closed-content')).toBeInTheDocument();
+    expect(_react2.screen.queryByTestId('open-content')).not.toBeInTheDocument();
+
+    // Click to open
+    await user.click(menuContainer);
+    expect(menuContainer).toBeInTheDocument();
+    expect(_react2.screen.getByTestId('open-content')).toBeInTheDocument();
+    expect(_react2.screen.queryByTestId('closed-content')).not.toBeInTheDocument();
+
+    // Click to close
+    await user.click(menuContainer);
+    expect(menuContainer).toBeInTheDocument();
+    expect(_react2.screen.getByTestId('closed-content')).toBeInTheDocument();
+    expect(_react2.screen.queryByTestId('open-content')).not.toBeInTheDocument();
+  });
+  test('applies correct CSS classes when closed', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(StatefulMenuHover, {
+      isOpenChildren: mockOpenChildren,
+      isClosedChildren: mockClosedChildren
+    }));
+    const menuContainer = _react2.screen.getByTestId('menu-hover');
+    expect(menuContainer).toHaveClass('menu-hover');
+    expect(menuContainer).not.toHaveClass('open');
+  });
+  test('applies correct CSS classes when open', async () => {
+    const user = _userEvent.default.setup();
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(StatefulMenuHover, {
+      isOpenChildren: mockOpenChildren,
+      isClosedChildren: mockClosedChildren
+    }));
+    const menuContainer = _react2.screen.getByTestId('menu-hover');
+    await user.click(menuContainer);
+    expect(menuContainer).toHaveClass('menu-hover', 'open');
+  });
+  test('applies additional className', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_MenuHover.MenuHover, {
+      isOpenChildren: mockOpenChildren,
+      isClosedChildren: mockClosedChildren,
+      additionalClassName: "custom-menu"
+    }));
+    const menuContainer = _react2.screen.getByTestId('menu-hover');
+    expect(menuContainer).toHaveClass('menu-hover', 'custom-menu');
+  });
+  test('applies custom component name', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(StatefulMenuHover, {
+      isOpenChildren: mockOpenChildren,
+      isClosedChildren: mockClosedChildren,
+      componentName: "dropdown-menu"
+    }));
+    const menuContainer = _react2.screen.getByTestId('dropdown-menu');
+    expect(menuContainer).toHaveClass('dropdown-menu');
+    expect(menuContainer).toHaveAttribute('data-testid', 'dropdown-menu');
+  });
+  test('applies both custom component name and additional className', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(StatefulMenuHover, {
+      isOpenChildren: mockOpenChildren,
+      isClosedChildren: mockClosedChildren,
+      componentName: "dropdown",
+      additionalClassName: "extra-styles"
+    }));
+    const menuContainer = _react2.screen.getByTestId('dropdown');
+    expect(menuContainer).toHaveClass('dropdown', 'extra-styles');
+  });
+  test('has correct data-test-id attribute', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(StatefulMenuHover, {
+      isOpenChildren: mockOpenChildren,
+      isClosedChildren: mockClosedChildren
+    }));
+    const menuContainer = _react2.screen.getByTestId('menu-hover');
+    expect(menuContainer).toHaveAttribute('data-testid', 'menu-hover');
+  });
+  test('renders complex children correctly', () => {
+    const complexOpenChildren = /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "complex-open"
+    }, /*#__PURE__*/_react.default.createElement("h2", null, "Open Menu"), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "Item 1"), /*#__PURE__*/_react.default.createElement("li", null, "Item 2")));
+    const complexClosedChildren = /*#__PURE__*/_react.default.createElement("button", {
+      "data-testid": "complex-closed"
+    }, "Menu Button");
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_MenuHover.MenuHover, {
+      isOpenChildren: complexOpenChildren,
+      isClosedChildren: complexClosedChildren
+    }));
+    expect(_react2.screen.getByTestId('complex-closed')).toBeInTheDocument();
+    expect(_react2.screen.getByText('Menu Button')).toBeInTheDocument();
+  });
+});