@abstraks-dev/ui-library 1.1.24 → 1.1.28

package/dist/__tests__/Header.test.js

@@ -0,0 +1,198 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Header = require("../components/Header");
+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();
+});
+// Mock useWindowSize hook to control mobile/desktop behavior
+jest.mock('../utils/useWindowSize', () => ({
+  useWindowSize: jest.fn(() => ({
+    width: 1024,
+    height: 768
+  })) // Default to desktop
+}));
+describe('Header Component', () => {
+  const mockProps = {
+    logo: /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "logo"
+    }, "Logo"),
+    navigation: /*#__PURE__*/_react.default.createElement("li", {
+      "data-testid": "nav-item"
+    }, "Navigation Item"),
+    mapMenuItems: /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "mobile-menu-items"
+    }, "Mobile Menu"),
+    isMenuOpen: false,
+    isEllipsesOpen: false,
+    onMenuToggle: jest.fn(),
+    onEllipsesToggle: jest.fn(),
+    ariaLabel: 'Main navigation',
+    menuAriaLabel: 'Navigation menu',
+    userMenuAriaLabel: 'User menu'
+  };
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  test('renders with required props', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Header.Header, mockProps));
+    expect(_react2.screen.getByTestId('logo')).toBeInTheDocument();
+    expect(_react2.screen.getByTestId('nav-item')).toBeInTheDocument();
+  });
+  test('applies correct aria-label', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Header.Header, mockProps));
+    const headerElement = container.querySelector('header');
+    expect(headerElement).toHaveAttribute('aria-label', 'Main navigation');
+  });
+  test('renders hamburger menu button in mobile view', () => {
+    // Mock mobile view
+    const {
+      useWindowSize
+    } = require('../utils/useWindowSize');
+    useWindowSize.mockReturnValue({
+      width: 500,
+      height: 800
+    });
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Header.Header, _extends({}, mockProps, {
+      hasAuth: false
+    })));
+    const menuButton = _react2.screen.getByRole('button', {
+      name: /open navigation menu/i
+    });
+    expect(menuButton).toBeInTheDocument();
+  });
+  test('calls onMenuToggle when hamburger menu is clicked in mobile view', () => {
+    // Mock mobile view
+    const {
+      useWindowSize
+    } = require('../utils/useWindowSize');
+    useWindowSize.mockReturnValue({
+      width: 500,
+      height: 800
+    });
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Header.Header, mockProps));
+    const menuButton = _react2.screen.getByRole('button', {
+      name: /open navigation menu/i
+    });
+    _react2.fireEvent.click(menuButton);
+    expect(mockProps.onMenuToggle).toHaveBeenCalledWith(true);
+  });
+  test('renders avatar when authenticated and avatarSrc provided', () => {
+    // Ensure desktop view
+    const {
+      useWindowSize
+    } = require('../utils/useWindowSize');
+    useWindowSize.mockReturnValue({
+      width: 1024,
+      height: 768
+    });
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Header.Header, _extends({}, mockProps, {
+      hasAuth: true,
+      avatarSrc: "test-avatar.jpg"
+    })));
+    const avatarContainer = _react2.screen.getByRole('button', {
+      name: /open user menu/i
+    });
+    expect(avatarContainer).toBeInTheDocument();
+  });
+  test('renders sign in and sign up links when not authenticated', () => {
+    // Ensure desktop view
+    const {
+      useWindowSize
+    } = require('../utils/useWindowSize');
+    useWindowSize.mockReturnValue({
+      width: 1024,
+      height: 768
+    });
+    const signInLink = /*#__PURE__*/_react.default.createElement("a", {
+      "data-testid": "sign-in"
+    }, "Sign In");
+    const signUpLink = /*#__PURE__*/_react.default.createElement("a", {
+      "data-testid": "sign-up"
+    }, "Sign Up");
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Header.Header, _extends({}, mockProps, {
+      hasAuth: false,
+      signInLink: signInLink,
+      signUpLink: signUpLink
+    })));
+    expect(_react2.screen.getByTestId('sign-in')).toBeInTheDocument();
+    expect(_react2.screen.getByTestId('sign-up')).toBeInTheDocument();
+  });
+  test('renders search component when provided', () => {
+    const searchComponent = /*#__PURE__*/_react.default.createElement("input", {
+      "data-testid": "search",
+      placeholder: "Search",
+      "aria-label": "Search"
+    });
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Header.Header, _extends({}, mockProps, {
+      search: searchComponent
+    })));
+    expect(_react2.screen.getByTestId('search')).toBeInTheDocument();
+  });
+  test('applies custom className', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Header.Header, _extends({}, mockProps, {
+      className: "custom-header"
+    })));
+    const headerElement = container.querySelector('header');
+    expect(headerElement).toHaveClass('custom-header');
+  });
+  test('renders SideMenu component in mobile view when isMenuOpen is true', () => {
+    // Mock mobile view
+    const {
+      useWindowSize
+    } = require('../utils/useWindowSize');
+    useWindowSize.mockReturnValue({
+      width: 500,
+      height: 800
+    });
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Header.Header, _extends({}, mockProps, {
+      isMenuOpen: true
+    })));
+
+    // SideMenu should be rendered and have the active class
+    const sideMenu = _react2.screen.getByTestId('side-menu');
+    expect(sideMenu).toBeInTheDocument();
+    expect(sideMenu).toHaveClass('side-menu--open');
+  });
+  test('forwards ref correctly', () => {
+    const ref = /*#__PURE__*/_react.default.createRef();
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Header.Header, _extends({}, mockProps, {
+      ref: ref
+    })));
+    expect(ref.current).toBeInstanceOf(HTMLElement);
+    expect(ref.current.tagName.toLowerCase()).toBe('header');
+  });
+  test('handles keyboard events', () => {
+    const onKeyDown = jest.fn();
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Header.Header, _extends({}, mockProps, {
+      onKeyDown: onKeyDown
+    })));
+    const headerElement = _react2.screen.getByRole('banner');
+    _react2.fireEvent.keyDown(headerElement, {
+      key: 'Escape'
+    });
+    expect(onKeyDown).toHaveBeenCalled();
+  });
+  test('closes menu on Escape key when menu is open', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Header.Header, _extends({}, mockProps, {
+      isMenuOpen: true
+    })));
+    const headerElement = _react2.screen.getByRole('banner');
+    _react2.fireEvent.keyDown(headerElement, {
+      key: 'Escape'
+    });
+    expect(mockProps.onMenuToggle).toHaveBeenCalledWith(false);
+  });
+});

package/dist/__tests__/Heart.test.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Heart = require("../icons/Heart.js");
+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('Heart Icon', () => {
+  test('renders SVG element', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heart.Heart, 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(_Heart.Heart, null));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '24');
+    expect(svg).toHaveAttribute('height', '24');
+    expect(svg).toHaveAttribute('viewBox', '0 -960 960 960');
+    expect(svg).toHaveAttribute('fill', '#adb5bd');
+    expect(svg).toHaveClass('icon');
+    expect(svg).toHaveClass('heart');
+  });
+  test('applies custom dimensions', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heart.Heart, {
+      dimensions: 32
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '32');
+    expect(svg).toHaveAttribute('height', '32');
+  });
+  test('applies custom componentName and additionalClassName', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heart.Heart, {
+      componentName: "custom-heart",
+      additionalClassName: "extra-class"
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveClass('icon');
+    expect(svg).toHaveClass('custom-heart');
+    expect(svg).toHaveClass('extra-class');
+  });
+  test('applies custom fill color', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heart.Heart, {
+      fill: "#ff0000"
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveAttribute('fill', '#ff0000');
+  });
+  test('has correct path data', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heart.Heart, null));
+    const svg = document.querySelector('svg');
+    const path = svg.querySelector('path');
+    expect(path).toHaveAttribute('d', 'm480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z');
+  });
+  test('contains exactly one path element', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Heart.Heart, null));
+    const svg = document.querySelector('svg');
+    const paths = svg.querySelectorAll('path');
+    expect(paths).toHaveLength(1);
+  });
+});

package/dist/__tests__/Home.test.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Home = require("../icons/Home.js");
+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('Home Icon', () => {
+  test('renders SVG element', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Home.Home, 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(_Home.Home, null));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '24');
+    expect(svg).toHaveAttribute('height', '24');
+    expect(svg).toHaveAttribute('viewBox', '0 -960 960 960');
+    expect(svg).toHaveAttribute('fill', '#adb5bd');
+    expect(svg).toHaveClass('icon');
+    expect(svg).toHaveClass('home');
+  });
+  test('applies custom dimensions', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Home.Home, {
+      dimensions: 32
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '32');
+    expect(svg).toHaveAttribute('height', '32');
+  });
+  test('applies custom componentName and additionalClassName', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Home.Home, {
+      componentName: "custom-home",
+      additionalClassName: "extra-class"
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveClass('icon');
+    expect(svg).toHaveClass('custom-home');
+    expect(svg).toHaveClass('extra-class');
+  });
+  test('applies custom fill color', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Home.Home, {
+      fill: "#ff0000"
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveAttribute('fill', '#ff0000');
+  });
+  test('has correct path data', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Home.Home, null));
+    const svg = document.querySelector('svg');
+    const path = svg.querySelector('path');
+    expect(path).toHaveAttribute('d', 'M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z');
+  });
+  test('contains exactly one path element', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Home.Home, null));
+    const svg = document.querySelector('svg');
+    const paths = svg.querySelectorAll('path');
+    expect(paths).toHaveLength(1);
+  });
+});

package/dist/__tests__/LoadingSpinner.test.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _LoadingSpinner = require("../icons/LoadingSpinner.js");
+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('LoadingSpinner Icon', () => {
+  test('renders SVG element', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LoadingSpinner.LoadingSpinner, 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(_LoadingSpinner.LoadingSpinner, 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');
+    expect(svg).toHaveAttribute('aria-hidden', 'true');
+    expect(svg).toHaveClass('icon');
+    expect(svg).toHaveClass('loading-spinner');
+  });
+  test('applies custom dimensions', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LoadingSpinner.LoadingSpinner, {
+      dimensions: 32
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '32');
+    expect(svg).toHaveAttribute('height', '32');
+  });
+  test('applies custom componentName and additionalClassName', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LoadingSpinner.LoadingSpinner, {
+      componentName: "custom-spinner",
+      additionalClassName: "extra-class"
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveClass('icon');
+    expect(svg).toHaveClass('custom-spinner');
+    expect(svg).toHaveClass('extra-class');
+  });
+  test('renders circle element with correct attributes', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LoadingSpinner.LoadingSpinner, null));
+    const circle = document.querySelector('circle');
+    expect(circle).toBeInTheDocument();
+    expect(circle).toHaveAttribute('cx', '12');
+    expect(circle).toHaveAttribute('cy', '12');
+    expect(circle).toHaveAttribute('r', '10');
+    expect(circle).toHaveAttribute('stroke', 'currentColor');
+    expect(circle).toHaveAttribute('stroke-width', '2');
+    expect(circle).toHaveClass('loading-spinner__circle');
+  });
+  test('renders path element with correct attributes', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LoadingSpinner.LoadingSpinner, null));
+    const path = document.querySelector('path');
+    expect(path).toBeInTheDocument();
+    expect(path).toHaveAttribute('fill', 'currentColor');
+    expect(path).toHaveAttribute('d', 'm15.84 10.2c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8.8-1.8 1.8-1.8 1.8.8 1.8 1.8z');
+    expect(path).toHaveClass('loading-spinner__path');
+  });
+  test('contains circle and path elements', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LoadingSpinner.LoadingSpinner, null));
+    const svg = document.querySelector('svg');
+    const circles = svg.querySelectorAll('circle');
+    const paths = svg.querySelectorAll('path');
+    expect(circles).toHaveLength(1);
+    expect(paths).toHaveLength(1);
+  });
+});

package/dist/__tests__/LogOut.test.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _LogOut = require("../icons/LogOut.js");
+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('LogOut Icon', () => {
+  test('renders SVG element', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LogOut.LogOut, 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(_LogOut.LogOut, null));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '24');
+    expect(svg).toHaveAttribute('height', '24');
+    expect(svg).toHaveAttribute('viewBox', '0 -960 960 960');
+    expect(svg).toHaveAttribute('fill', '#adb5bd');
+    expect(svg).toHaveClass('icon');
+    expect(svg).toHaveClass('log-out');
+  });
+  test('applies custom dimensions', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LogOut.LogOut, {
+      dimensions: 32
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '32');
+    expect(svg).toHaveAttribute('height', '32');
+  });
+  test('applies custom componentName and additionalClassName', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LogOut.LogOut, {
+      componentName: "custom-logout",
+      additionalClassName: "extra-class"
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveClass('icon');
+    expect(svg).toHaveClass('custom-logout');
+    expect(svg).toHaveClass('extra-class');
+  });
+  test('applies custom fill color', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LogOut.LogOut, {
+      fill: "#ff0000"
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveAttribute('fill', '#ff0000');
+  });
+  test('has correct path data', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LogOut.LogOut, null));
+    const svg = document.querySelector('svg');
+    const path = svg.querySelector('path');
+    expect(path).toHaveAttribute('d', 'M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h280v80H200Zm440-160-55-58 102-102H360v-80h327L585-622l55-58 200 200-200 200Z');
+  });
+  test('contains exactly one path element', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_LogOut.LogOut, null));
+    const svg = document.querySelector('svg');
+    const paths = svg.querySelectorAll('path');
+    expect(paths).toHaveLength(1);
+  });
+});

package/dist/__tests__/Magnify.test.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Magnify = require("../icons/Magnify.js");
+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('Magnify Icon', () => {
+  test('renders SVG element', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Magnify.Magnify, 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(_Magnify.Magnify, null));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '24');
+    expect(svg).toHaveAttribute('height', '24');
+    expect(svg).toHaveAttribute('viewBox', '0 -960 960 960');
+    expect(svg).toHaveAttribute('fill', '#adb5bd');
+    expect(svg).toHaveClass('icon');
+    expect(svg).toHaveClass('magnify');
+  });
+  test('applies custom dimensions', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Magnify.Magnify, {
+      dimensions: 32
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '32');
+    expect(svg).toHaveAttribute('height', '32');
+  });
+  test('applies custom componentName and additionalClassName', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Magnify.Magnify, {
+      componentName: "custom-magnify",
+      additionalClassName: "extra-class"
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveClass('icon');
+    expect(svg).toHaveClass('custom-magnify');
+    expect(svg).toHaveClass('extra-class');
+  });
+  test('applies custom fill color', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Magnify.Magnify, {
+      fill: "#ff0000"
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveAttribute('fill', '#ff0000');
+  });
+  test('has correct path data', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Magnify.Magnify, null));
+    const svg = document.querySelector('svg');
+    const path = svg.querySelector('path');
+    expect(path).toHaveAttribute('d', 'M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z');
+  });
+  test('contains exactly one path element', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Magnify.Magnify, null));
+    const svg = document.querySelector('svg');
+    const paths = svg.querySelectorAll('path');
+    expect(paths).toHaveLength(1);
+  });
+});

package/dist/__tests__/News.test.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _News = require("../icons/News");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+describe('News Icon', () => {
+  test('renders with default props', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_News.News, null));
+    const svg = document.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg.tagName).toBe('svg');
+  });
+  test('applies correct default dimensions', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_News.News, null));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '24');
+    expect(svg).toHaveAttribute('height', '24');
+  });
+  test('applies custom dimensions', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_News.News, {
+      dimensions: 32
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '32');
+    expect(svg).toHaveAttribute('height', '32');
+  });
+  test('applies correct CSS classes', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_News.News, null));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveClass('icon', 'news');
+  });
+  test('applies additional className', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_News.News, {
+      additionalClassName: "custom-class"
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveClass('icon', 'news', 'custom-class');
+  });
+  test('applies custom fill color', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_News.News, {
+      fill: "#ff0000"
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveAttribute('fill', '#ff0000');
+  });
+  test('contains correct path data', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_News.News, null));
+    const path = container.querySelector('path');
+    expect(path).toHaveAttribute('d', 'M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h440l200 200v440q0 33-23.5 56.5T760-120H200Zm0-80h560v-400H600v-160H200v560Zm80-80h400v-80H280v80Zm0-320h200v-80H280v80Zm0 160h400v-80H280v80Zm-80-320v160-160 560-560Z');
+  });
+  test('contains single path element', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_News.News, null));
+    const paths = container.querySelectorAll('path');
+    expect(paths).toHaveLength(1);
+  });
+});