@abstraks-dev/ui-library 1.0.1

package/dist/__tests__/Anchor.test.js

@@ -0,0 +1,145 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _Anchor = require("../components/Anchor");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Suppress only JSDOM navigation error in tests
+let originalConsoleError;
+beforeAll(() => {
+  originalConsoleError = console.error;
+  console.error = (...args) => {
+    if (typeof args[0] === 'string' && args[0].includes('Not implemented: navigation (except hash changes)')) {
+      return;
+    }
+    originalConsoleError(...args);
+  };
+});
+afterAll(() => {
+  console.error = originalConsoleError;
+});
+describe('Anchor Component', () => {
+  test('renders anchor with required props', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Anchor.Anchor, {
+      href: "/test"
+    }, "Test Link"));
+    const anchor = _react2.screen.getByRole('link');
+    expect(anchor).toBeInTheDocument();
+    expect(anchor).toHaveTextContent('Test Link');
+    expect(anchor).toHaveAttribute('href', '/test');
+    expect(anchor).toHaveClass('anchor');
+    expect(anchor).toHaveAttribute('data-testid', 'anchor');
+  });
+  test('renders anchor with custom component name', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Anchor.Anchor, {
+      href: "/test",
+      componentName: "custom-anchor"
+    }, "Custom Link"));
+    const anchor = _react2.screen.getByRole('link');
+    expect(anchor).toHaveClass('custom-anchor');
+    expect(anchor).toHaveAttribute('data-testid', 'custom-anchor');
+  });
+  test('renders anchor with additional className', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Anchor.Anchor, {
+      href: "/test",
+      className: "extra-class"
+    }, "Styled Link"));
+    const anchor = _react2.screen.getByRole('link');
+    expect(anchor).toHaveClass('anchor', 'extra-class');
+  });
+  test('maintains backward compatibility with additionalClassName', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Anchor.Anchor, {
+      href: "/test",
+      additionalClassName: "legacy-class"
+    }, "Legacy Styled Link"));
+    const anchor = _react2.screen.getByRole('link');
+    expect(anchor).toHaveClass('anchor', 'legacy-class');
+  });
+  test('forwards ref to the anchor element', () => {
+    const ref = /*#__PURE__*/_react.default.createRef();
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Anchor.Anchor, {
+      href: "/test",
+      ref: ref
+    }, "Ref Link"));
+    expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
+    expect(ref.current).toHaveAttribute('href', '/test');
+  });
+  test('renders anchor with variant', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Anchor.Anchor, {
+      href: "/test",
+      variant: "primary"
+    }, "Primary Link"));
+    const anchor = _react2.screen.getByRole('link');
+    expect(anchor).toHaveClass('anchor', 'primary');
+  });
+  test('renders anchor with target attribute', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Anchor.Anchor, {
+      href: "/test",
+      target: "_blank"
+    }, "External Link"));
+    const anchor = _react2.screen.getByRole('link');
+    expect(anchor).toHaveAttribute('target', '_blank');
+  });
+  test('renders disabled anchor', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Anchor.Anchor, {
+      href: "/test",
+      disabled: true
+    }, "Disabled Link"));
+
+    // Disabled anchors without href don't have link role, so query by test-id
+    const anchor = _react2.screen.getByTestId('anchor');
+    expect(anchor).toHaveAttribute('aria-disabled', 'true');
+    expect(anchor).toHaveAttribute('tabindex', '-1');
+    expect(anchor).not.toHaveAttribute('href');
+  });
+  test('passes through additional props', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Anchor.Anchor, {
+      href: "/test",
+      "data-custom": "test-value",
+      "aria-label": "Custom link"
+    }, "Test Link"));
+    const anchor = _react2.screen.getByRole('link');
+    expect(anchor).toHaveAttribute('data-custom', 'test-value');
+    expect(anchor).toHaveAttribute('aria-label', 'Custom link');
+  });
+  test('renders with complex children', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Anchor.Anchor, {
+      href: "/test"
+    }, /*#__PURE__*/_react.default.createElement("span", null, "Icon"), /*#__PURE__*/_react.default.createElement("span", null, "Text")));
+    const anchor = _react2.screen.getByRole('link');
+    expect(anchor).toContainHTML('<span>Icon</span><span>Text</span>');
+  });
+  test('handles click events', async () => {
+    const handleClick = jest.fn();
+    const user = _userEvent.default.setup();
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Anchor.Anchor, {
+      href: "/test",
+      onClick: handleClick
+    }, "Clickable Link"));
+    const anchor = _react2.screen.getByRole('link');
+    await user.click(anchor);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+  test('adds security attributes for external links', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Anchor.Anchor, {
+      href: "https://example.com",
+      target: "_blank"
+    }, "External Link"));
+    const anchor = _react2.screen.getByRole('link');
+    expect(anchor).toHaveAttribute('target', '_blank');
+    expect(anchor).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+  test('handles disabled state properly', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Anchor.Anchor, {
+      href: "/test",
+      disabled: true
+    }, "Disabled Link"));
+
+    // Disabled anchors without href don't have link role, so query by test-id
+    const anchor = _react2.screen.getByTestId('anchor');
+    expect(anchor).toHaveAttribute('aria-disabled', 'true');
+    expect(anchor).toHaveAttribute('tabindex', '-1');
+    expect(anchor).not.toHaveAttribute('href');
+  });
+});

package/dist/__tests__/ArrowRight.test.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _ArrowRight = require("../icons/ArrowRight");
+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('ArrowRight Icon', () => {
+  test('renders SVG element', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ArrowRight.ArrowRight, null));
+    const svg = document.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg.tagName).toBe('svg');
+  });
+  test('has correct default props', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ArrowRight.ArrowRight, null));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '24');
+    expect(svg).toHaveAttribute('height', '24');
+    expect(svg).toHaveAttribute('viewBox', '0 0 24 24');
+    expect(svg).toHaveAttribute('fill', 'none');
+  });
+  test('applies custom size', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ArrowRight.ArrowRight, {
+      size: 48
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '48');
+    expect(svg).toHaveAttribute('height', '48');
+  });
+  test('applies custom className', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ArrowRight.ArrowRight, {
+      className: "arrow-icon"
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveClass('arrow-icon');
+  });
+  test('applies custom color to stroke', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ArrowRight.ArrowRight, {
+      color: "blue"
+    }));
+    const svg = document.querySelector('svg');
+    const paths = svg.querySelectorAll('path');
+    paths.forEach(path => {
+      expect(path).toHaveAttribute('stroke', 'blue');
+    });
+  });
+  test('uses currentColor as default stroke', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ArrowRight.ArrowRight, null));
+    const svg = document.querySelector('svg');
+    const paths = svg.querySelectorAll('path');
+    paths.forEach(path => {
+      expect(path).toHaveAttribute('stroke', 'currentColor');
+    });
+  });
+  test('has correct stroke properties', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ArrowRight.ArrowRight, null));
+    const svg = document.querySelector('svg');
+    const paths = svg.querySelectorAll('path');
+    paths.forEach(path => {
+      expect(path).toHaveAttribute('stroke-width', '2');
+      expect(path).toHaveAttribute('stroke-linecap', 'round');
+      expect(path).toHaveAttribute('stroke-linejoin', 'round');
+    });
+  });
+  test('has correct path data for arrow line', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ArrowRight.ArrowRight, null));
+    const svg = document.querySelector('svg');
+    const paths = svg.querySelectorAll('path');
+    expect(paths[0]).toHaveAttribute('d', 'M5 12H19');
+  });
+  test('has correct path data for arrow head', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ArrowRight.ArrowRight, null));
+    const svg = document.querySelector('svg');
+    const paths = svg.querySelectorAll('path');
+    expect(paths[1]).toHaveAttribute('d', 'M12 5L19 12L12 19');
+  });
+  test('contains exactly two path elements', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ArrowRight.ArrowRight, null));
+    const svg = document.querySelector('svg');
+    const paths = svg.querySelectorAll('path');
+    expect(paths).toHaveLength(2);
+  });
+});

package/dist/__tests__/Avatar.test.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Avatar = _interopRequireDefault(require("../components/Avatar"));
+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('Avatar Component', () => {
+  test('renders avatar with default props', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Avatar.default, null));
+    const avatar = _react2.screen.getByTestId('avatar');
+    expect(avatar).toBeInTheDocument();
+    expect(avatar).toHaveClass('avatar');
+  });
+  test('renders with custom component name', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Avatar.default, {
+      componentName: "user-avatar"
+    }));
+    const avatar = _react2.screen.getByTestId('user-avatar');
+    expect(avatar).toHaveClass('user-avatar');
+  });
+  test('renders with additional className', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Avatar.default, {
+      additionalClassName: "large-avatar"
+    }));
+    const avatar = _react2.screen.getByTestId('avatar');
+    expect(avatar).toHaveClass('avatar', 'large-avatar');
+  });
+  test('renders with image source', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Avatar.default, {
+      source: "/path/to/avatar.jpg"
+    }));
+    const avatar = _react2.screen.getByTestId('avatar');
+    const imageDiv = avatar.querySelector('.image');
+    expect(imageDiv).toHaveStyle('background-image: url(/path/to/avatar.jpg)');
+  });
+  test('renders with custom dimensions', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Avatar.default, {
+      dimensions: "100px"
+    }));
+    const avatar = _react2.screen.getByTestId('avatar');
+    const imageDiv = avatar.querySelector('.image');
+    expect(imageDiv).toHaveStyle({
+      width: '100px',
+      height: '100px'
+    });
+  });
+  test('renders with hover element when hasHoverEffect is true', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Avatar.default, {
+      hasHoverEffect: true,
+      dimensions: "50px"
+    }));
+    const avatar = _react2.screen.getByTestId('avatar');
+    const hoverDiv = avatar.querySelector('.hover');
+    expect(hoverDiv).toBeInTheDocument();
+    expect(hoverDiv).toHaveStyle({
+      width: '50px',
+      height: '50px'
+    });
+  });
+  test('does not render hover element when hasHoverEffect is false', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Avatar.default, {
+      hasHoverEffect: false
+    }));
+    const avatar = _react2.screen.getByTestId('avatar');
+    const hoverDiv = avatar.querySelector('.hover');
+    expect(hoverDiv).not.toBeInTheDocument();
+  });
+  test('image has correct styling properties', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Avatar.default, {
+      source: "/test.jpg",
+      dimensions: "75px"
+    }));
+    const avatar = _react2.screen.getByTestId('avatar');
+    const imageDiv = avatar.querySelector('.image');
+    expect(imageDiv).toHaveStyle({
+      borderRadius: '50%',
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'center center',
+      backgroundSize: 'cover',
+      width: '75px',
+      height: '75px'
+    });
+  });
+  test('renders without image source', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Avatar.default, {
+      dimensions: "40px"
+    }));
+    const avatar = _react2.screen.getByTestId('avatar');
+    const imageDiv = avatar.querySelector('.image');
+    expect(imageDiv).toHaveStyle('background-image: url()');
+  });
+  test('combines all props correctly', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Avatar.default, {
+      componentName: "profile-pic",
+      additionalClassName: "rounded-border",
+      source: "/profile.png",
+      dimensions: "120px",
+      hasHoverEffect: true
+    }));
+    const avatar = _react2.screen.getByTestId('profile-pic');
+    expect(avatar).toHaveClass('profile-pic', 'rounded-border');
+    const imageDiv = avatar.querySelector('.image');
+    expect(imageDiv).toHaveStyle({
+      backgroundImage: 'url(/profile.png)',
+      width: '120px',
+      height: '120px'
+    });
+    const hoverDiv = avatar.querySelector('.hover');
+    expect(hoverDiv).toBeInTheDocument();
+    expect(hoverDiv).toHaveStyle({
+      width: '120px',
+      height: '120px'
+    });
+  });
+});

package/dist/__tests__/Button.test.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _Button = require("../components/Button");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+describe('Button Component', () => {
+  test('renders button with default props', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.Button, null, "Click me"));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent('Click me');
+    expect(button).toHaveClass('button', 'button--primary', 'button--md');
+    expect(button).toHaveAttribute('data-testid', 'button');
+  });
+  test('renders button with custom className', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.Button, {
+      additionalClassName: "custom-class"
+    }, "Test"));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toHaveClass('button', 'button--primary', 'button--md', 'custom-class');
+  });
+  test('renders button with different variants', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.Button, {
+      variant: "secondary"
+    }, "Secondary Button"));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toHaveClass('button', 'button--secondary', 'button--md');
+  });
+  test('renders button with custom component name', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.Button, {
+      componentName: "custom-button"
+    }, "Custom"));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toHaveClass('custom-button');
+    expect(button).toHaveAttribute('data-testid', 'custom-button');
+  });
+  test('renders disabled button', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.Button, {
+      disabled: true
+    }, "Disabled Button"));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute('disabled');
+  });
+  test('handles click events', async () => {
+    const handleClick = jest.fn();
+    const user = _userEvent.default.setup();
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.Button, {
+      onClick: handleClick
+    }, "Clickable"));
+    const button = _react2.screen.getByRole('button');
+    await user.click(button);
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+  test('does not trigger click when disabled', async () => {
+    const handleClick = jest.fn();
+    const user = _userEvent.default.setup();
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.Button, {
+      onClick: handleClick,
+      disabled: true
+    }, "Disabled"));
+    const button = _react2.screen.getByRole('button');
+    await user.click(button);
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+  test('passes through additional props', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.Button, {
+      "data-custom": "test-value",
+      "aria-label": "Custom button"
+    }, "Test"));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toHaveAttribute('data-custom', 'test-value');
+    expect(button).toHaveAttribute('aria-label', 'Custom button');
+  });
+  test('renders with complex children', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Button.Button, null, /*#__PURE__*/_react.default.createElement("span", null, "Icon"), /*#__PURE__*/_react.default.createElement("span", null, "Text")));
+    const button = _react2.screen.getByRole('button');
+    expect(button).toContainHTML('<span>Icon</span><span>Text</span>');
+  });
+});

package/dist/__tests__/Card.test.js

@@ -0,0 +1,198 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _Card = _interopRequireDefault(require("../components/Card"));
+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();
+});
+describe('Card', () => {
+  const defaultProps = {
+    bodyCopy: 'This is the card body content.',
+    title: 'Card Title'
+  };
+  test('renders card with required props', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Card.default, defaultProps));
+    const card = _react2.screen.getByTestId('card');
+    expect(card).toBeInTheDocument();
+    expect(card).toHaveClass('card');
+    expect(_react2.screen.getByText('This is the card body content.')).toBeInTheDocument();
+    expect(_react2.screen.getByText('Card Title')).toBeInTheDocument();
+  });
+  test('renders with custom component name', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Card.default, _extends({}, defaultProps, {
+      componentName: "custom-card"
+    })));
+    const card = _react2.screen.getByTestId('custom-card');
+    expect(card).toHaveClass('custom-card');
+  });
+  test('renders with additional className', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Card.default, _extends({}, defaultProps, {
+      className: "featured-card"
+    })));
+    const card = _react2.screen.getByTestId('card');
+    expect(card).toHaveClass('card', 'featured-card');
+  });
+  test('maintains backward compatibility with additionalClassName', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Card.default, _extends({}, defaultProps, {
+      additionalClassName: "legacy-card"
+    })));
+    const card = _react2.screen.getByTestId('card');
+    expect(card).toHaveClass('card', 'legacy-card');
+  });
+  test('forwards ref to the card element', () => {
+    const ref = /*#__PURE__*/_react.default.createRef();
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Card.default, _extends({}, defaultProps, {
+      ref: ref
+    })));
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    expect(ref.current).toHaveClass('card');
+  });
+  test('renders with avatar when avatarSrc provided', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Card.default, _extends({}, defaultProps, {
+      avatarSrc: "/path/to/avatar.jpg"
+    })));
+    const avatar = _react2.screen.getByTestId('avatar');
+    expect(avatar).toBeInTheDocument();
+    // Avatar component now uses img element rather than background-image
+    const avatarImages = avatar.querySelectorAll('[role="img"]');
+    expect(avatarImages.length).toBeGreaterThan(0);
+    // Find the image with the correct style or src
+    const found = Array.from(avatarImages).find(img => img.style.backgroundImage.includes('/path/to/avatar.jpg') || img.getAttribute('src') === '/path/to/avatar.jpg');
+    expect(found).toBeDefined();
+  });
+  test('toggles ellipses menu when clicked', async () => {
+    const user = _userEvent.default.setup();
+    const onEllipsesToggle = jest.fn();
+    const ellipsesList = [/*#__PURE__*/_react.default.createElement("li", {
+      key: "1"
+    }, "Menu Item")];
+    const {
+      rerender
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Card.default, _extends({}, defaultProps, {
+      avatarSrc: "/path/to/avatar.jpg",
+      ellipsesList: ellipsesList,
+      isEllipsesOpen: false,
+      onEllipsesToggle: onEllipsesToggle
+    })));
+    const card = _react2.screen.getByTestId('card');
+    const ellipsesButton = card.querySelector('.ellipses-trigger');
+
+    // Initially closed
+    expect(card).not.toHaveClass('open');
+    expect(_react2.screen.queryByText('Menu Item')).not.toBeInTheDocument();
+
+    // Click to open
+    await user.click(ellipsesButton);
+    expect(onEllipsesToggle).toHaveBeenCalledTimes(1);
+
+    // Re-render with open state to test display
+    rerender(/*#__PURE__*/_react.default.createElement(_Card.default, _extends({}, defaultProps, {
+      avatarSrc: "/path/to/avatar.jpg",
+      ellipsesList: ellipsesList,
+      isEllipsesOpen: true,
+      onEllipsesToggle: onEllipsesToggle
+    })));
+    expect(card).toHaveClass('open');
+    expect(_react2.screen.getByText('Menu Item')).toBeInTheDocument();
+  });
+  test('renders with subtitle when provided', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Card.default, _extends({}, defaultProps, {
+      subTitle: "Card subtitle"
+    })));
+    expect(_react2.screen.getByText('Card subtitle')).toBeInTheDocument();
+  });
+  test('renders with full image when provided', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Card.default, _extends({}, defaultProps, {
+      fullImage: "/path/to/image.jpg"
+    })));
+    const image = _react2.screen.getByRole('img');
+    expect(image).toHaveAttribute('src', '/path/to/image.jpg');
+    expect(image).toHaveAttribute('alt', 'Card Title image');
+  });
+  test('renders custom image component over fullImage when both provided', () => {
+    const customImage = /*#__PURE__*/_react.default.createElement("img", {
+      src: "/custom.jpg",
+      alt: "Custom",
+      "data-testid": "custom-image"
+    });
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Card.default, _extends({}, defaultProps, {
+      fullImage: "/path/to/image.jpg",
+      imgComponent: customImage
+    })));
+    expect(_react2.screen.getByRole('img', {
+      name: 'Custom'
+    })).toBeInTheDocument();
+    expect(_react2.screen.queryByRole('img', {
+      name: 'Card Title'
+    })).not.toBeInTheDocument();
+  });
+  test('renders with custom title size', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Card.default, _extends({}, defaultProps, {
+      titleSize: 1
+    })));
+    const heading = _react2.screen.getByRole('heading', {
+      level: 1
+    });
+    expect(heading).toHaveTextContent('Card Title');
+  });
+  test('applies margin-top style to heading when avatar is present', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Card.default, _extends({}, defaultProps, {
+      avatarSrc: "/avatar.jpg"
+    })));
+    const heading = _react2.screen.getByTestId('card-title');
+    expect(heading).toHaveStyle('margin-top: 0px');
+  });
+  test('renders without avatar section when no avatarSrc', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Card.default, defaultProps));
+    const card = _react2.screen.getByTestId('card');
+    const head = card.querySelector('.head');
+    expect(head).not.toBeInTheDocument();
+  });
+  test('combines all props correctly', () => {
+    const ellipsesList = [/*#__PURE__*/_react.default.createElement("li", {
+      key: "1"
+    }, "Settings")];
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Card.default, {
+      componentName: "feature-card",
+      className: "highlighted premium",
+      bodyCopy: "Premium card content with advanced features.",
+      title: "Premium Feature",
+      subTitle: "Exclusive benefits",
+      titleSize: 2,
+      avatarSrc: "/premium-avatar.jpg",
+      ellipsesList: ellipsesList,
+      fullImage: "/premium-bg.jpg"
+    }));
+    const card = _react2.screen.getByTestId('feature-card');
+    expect(card).toHaveClass('feature-card', 'highlighted', 'premium');
+    expect(_react2.screen.getByText('Premium Feature')).toBeInTheDocument();
+    expect(_react2.screen.getByText('Exclusive benefits')).toBeInTheDocument();
+    expect(_react2.screen.getByText('Premium card content with advanced features.')).toBeInTheDocument();
+    expect(_react2.screen.getByTestId('avatar')).toBeInTheDocument();
+    // Use more specific selector for the card image to avoid multiple matches
+    const cardImage = _react2.screen.getByAltText('Premium Feature image');
+    expect(cardImage).toHaveAttribute('src', '/premium-bg.jpg');
+  });
+  test('handles accessibility props correctly', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Card.default, _extends({}, defaultProps, {
+      "aria-label": "User profile card",
+      "aria-describedby": "card-description",
+      role: "article",
+      tabIndex: 0
+    })));
+    const card = _react2.screen.getByTestId('card');
+    expect(card).toHaveAttribute('aria-label', 'User profile card');
+    expect(card).toHaveAttribute('aria-describedby', 'card-description');
+    expect(card).toHaveAttribute('role', 'article');
+    expect(card).toHaveAttribute('tabIndex', '0');
+  });
+});