@abstraks-dev/ui-library 1.0.1

package/dist/__tests__/CheckCircle.test.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _CheckCircle = require("../icons/CheckCircle");
+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('CheckCircle Icon', () => {
+  test('renders with default props', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_CheckCircle.CheckCircle, null));
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveClass('icon', 'check-close');
+    expect(svg).toHaveAttribute('width', '24');
+    expect(svg).toHaveAttribute('height', '24');
+    expect(svg).toHaveAttribute('viewBox', '0 -960 960 960');
+    expect(svg).toHaveAttribute('fill', '#adb5bd');
+  });
+  test('renders with custom component name', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_CheckCircle.CheckCircle, {
+      componentName: "success-icon"
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveClass('icon', 'success-icon');
+  });
+  test('renders with additional className', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_CheckCircle.CheckCircle, {
+      additionalClassName: "large-icon"
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveClass('icon', 'check-close', 'large-icon');
+  });
+  test('renders with custom dimensions', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_CheckCircle.CheckCircle, {
+      dimensions: 48
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '48');
+    expect(svg).toHaveAttribute('height', '48');
+  });
+  test('renders with custom viewBox', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_CheckCircle.CheckCircle, {
+      viewBox: "0 0 24 24"
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('viewBox', '0 0 24 24');
+  });
+  test('renders with custom fill color', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_CheckCircle.CheckCircle, {
+      fill: "#00ff00"
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('fill', '#00ff00');
+  });
+  test('contains path element', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_CheckCircle.CheckCircle, null));
+    const path = container.querySelector('path');
+    expect(path).toBeInTheDocument();
+  });
+  test('combines all props correctly', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_CheckCircle.CheckCircle, {
+      componentName: "check-success",
+      additionalClassName: "animated bounce",
+      dimensions: 32,
+      viewBox: "0 0 32 32",
+      fill: "#28a745"
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveClass('icon', 'check-success', 'animated', 'bounce');
+    expect(svg).toHaveAttribute('width', '32');
+    expect(svg).toHaveAttribute('height', '32');
+    expect(svg).toHaveAttribute('viewBox', '0 0 32 32');
+    expect(svg).toHaveAttribute('fill', '#28a745');
+  });
+});

package/dist/__tests__/Checkbox.test.js

@@ -0,0 +1,161 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _Checkbox = require("../components/Checkbox");
+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('Checkbox Component', () => {
+  test('renders checkbox with label', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+      labelText: "Accept terms",
+      name: "terms"
+    }));
+    const checkbox = _react2.screen.getByRole('checkbox');
+    const label = _react2.screen.getByText('Accept terms');
+    expect(checkbox).toBeInTheDocument();
+    expect(label).toBeInTheDocument();
+    expect(checkbox).not.toBeChecked();
+  });
+  test('renders checkbox without label when noLabel is true', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+      noLabel: true,
+      name: "test"
+    }));
+    const checkbox = _react2.screen.getByRole('checkbox');
+    expect(checkbox).toBeInTheDocument();
+
+    // Should not render label component
+    expect(_react2.screen.queryByText('label')).not.toBeInTheDocument();
+  });
+  test('shows required asterisk when required is true', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+      labelText: "Required Field",
+      required: true,
+      name: "required"
+    }));
+    const asterisk = _react2.screen.getByText('*');
+    expect(asterisk).toBeInTheDocument();
+  });
+  test('toggles checked state when clicked', async () => {
+    const user = _userEvent.default.setup();
+    function Wrapper() {
+      const [checked, setChecked] = _react.default.useState(false);
+      return /*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+        labelText: "Toggle me",
+        name: "toggle",
+        checked: checked,
+        onChange: () => setChecked(c => !c)
+      });
+    }
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(Wrapper, null));
+    const checkbox = _react2.screen.getByRole('checkbox');
+
+    // Initially unchecked
+    expect(checkbox).not.toBeChecked();
+
+    // Click to check
+    await user.click(checkbox);
+    expect(checkbox).toBeChecked();
+
+    // Click to uncheck
+    await user.click(checkbox);
+    expect(checkbox).not.toBeChecked();
+  });
+  test('applies correct CSS classes', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+      labelText: "Test",
+      name: "test"
+    }));
+    const wrapper = _react2.screen.getByTestId('checkbox-wrapper');
+    const checkbox = _react2.screen.getByRole('checkbox');
+    expect(wrapper).toHaveClass('checkbox-wrapper');
+    expect(checkbox).toHaveClass('checkbox');
+  });
+  test('applies additional className to wrapper', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+      labelText: "Test",
+      name: "test",
+      additionalClassName: "custom-checkbox"
+    }));
+    const wrapper = _react2.screen.getByTestId('checkbox-wrapper');
+    expect(wrapper).toHaveClass('checkbox-wrapper', 'custom-checkbox');
+  });
+  test('applies custom component name', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+      labelText: "Test",
+      name: "test",
+      componentName: "custom-check"
+    }));
+    const wrapper = _react2.screen.getByTestId('custom-check-wrapper');
+    const checkbox = _react2.screen.getByRole('checkbox');
+    expect(wrapper).toHaveClass('custom-check-wrapper');
+    expect(checkbox).toHaveClass('custom-check');
+  });
+  test('sets correct name attribute', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+      labelText: "Test",
+      name: "test-name"
+    }));
+    const checkbox = _react2.screen.getByRole('checkbox');
+    expect(checkbox).toHaveAttribute('name', 'test-name');
+  });
+  test('handles disabled state', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+      labelText: "Disabled",
+      name: "disabled",
+      disabled: true
+    }));
+    const checkbox = _react2.screen.getByRole('checkbox');
+    expect(checkbox).toBeDisabled();
+  });
+  test('disabled checkbox cannot be toggled', async () => {
+    const user = _userEvent.default.setup();
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+      labelText: "Disabled",
+      name: "disabled",
+      disabled: true
+    }));
+    const checkbox = _react2.screen.getByRole('checkbox');
+    await user.click(checkbox);
+    expect(checkbox).not.toBeChecked();
+  });
+  test('passes through additional props to input', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+      labelText: "Test",
+      name: "test",
+      id: "custom-id",
+      "data-custom": "value"
+    }));
+    const checkbox = _react2.screen.getByRole('checkbox');
+    expect(checkbox).toHaveAttribute('id', 'custom-id');
+    expect(checkbox).toHaveAttribute('data-custom', 'value');
+  });
+  test('label is associated with checkbox via htmlFor and id', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+      labelText: "Associated Label",
+      name: "associated"
+    }));
+    const checkbox = _react2.screen.getByRole('checkbox');
+    const label = document.querySelector('label');
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveAttribute('for', checkbox.id);
+    expect(checkbox).toHaveAttribute('name', 'associated');
+  });
+  test('has correct data-test-id', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Checkbox.Checkbox, {
+      labelText: "Test",
+      name: "test"
+    }));
+    const wrapper = _react2.screen.getByTestId('checkbox-wrapper');
+    expect(wrapper).toHaveAttribute('data-testid', 'checkbox-wrapper');
+  });
+});

package/dist/__tests__/ChevronDown.test.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _ChevronDown = require("../icons/ChevronDown");
+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('ChevronDown Icon', () => {
+  test('renders SVG element', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ChevronDown.ChevronDown, 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(_ChevronDown.ChevronDown, 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(_ChevronDown.ChevronDown, {
+      size: 32
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '32');
+    expect(svg).toHaveAttribute('height', '32');
+  });
+  test('applies custom className', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ChevronDown.ChevronDown, {
+      className: "custom-icon"
+    }));
+    const svg = document.querySelector('svg');
+    expect(svg).toHaveClass('custom-icon');
+  });
+  test('applies custom color to stroke', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ChevronDown.ChevronDown, {
+      color: "#ff0000"
+    }));
+    const svg = document.querySelector('svg');
+    const path = svg.querySelector('path');
+    expect(path).toHaveAttribute('stroke', '#ff0000');
+  });
+  test('uses currentColor as default stroke', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ChevronDown.ChevronDown, null));
+    const svg = document.querySelector('svg');
+    const path = svg.querySelector('path');
+    expect(path).toHaveAttribute('stroke', 'currentColor');
+  });
+  test('has correct stroke properties', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ChevronDown.ChevronDown, null));
+    const svg = document.querySelector('svg');
+    const path = svg.querySelector('path');
+    expect(path).toHaveAttribute('stroke-width', '2');
+    expect(path).toHaveAttribute('stroke-linecap', 'round');
+    expect(path).toHaveAttribute('stroke-linejoin', 'round');
+  });
+  test('has correct path data', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_ChevronDown.ChevronDown, null));
+    const svg = document.querySelector('svg');
+    const path = svg.querySelector('path');
+    expect(path).toHaveAttribute('d', 'M6 9L12 15L18 9');
+  });
+});

package/dist/__tests__/Close.test.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Close = require("../icons/Close");
+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('Close Icon', () => {
+  test('renders with default props', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Close.Close, null));
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveClass('icon', 'close');
+    expect(svg).toHaveAttribute('width', '24');
+    expect(svg).toHaveAttribute('height', '24');
+    expect(svg).toHaveAttribute('viewBox', '0 -960 960 960');
+    expect(svg).toHaveAttribute('fill', '#adb5bd');
+  });
+  test('renders with custom component name', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Close.Close, {
+      componentName: "close-modal"
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveClass('icon', 'close-modal');
+  });
+  test('renders with additional className', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Close.Close, {
+      additionalClassName: "modal-close"
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveClass('icon', 'close', 'modal-close');
+  });
+  test('renders with custom dimensions', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Close.Close, {
+      dimensions: 16
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '16');
+    expect(svg).toHaveAttribute('height', '16');
+  });
+  test('renders with custom viewBox', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Close.Close, {
+      viewBox: "0 0 16 16"
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('viewBox', '0 0 16 16');
+  });
+  test('renders with custom fill color', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Close.Close, {
+      fill: "#ff0000"
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('fill', '#ff0000');
+  });
+  test('contains path element', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Close.Close, null));
+    const path = container.querySelector('path');
+    expect(path).toBeInTheDocument();
+  });
+  test('combines all props correctly', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Close.Close, {
+      componentName: "dialog-close",
+      additionalClassName: "hover-red clickable",
+      dimensions: 20,
+      viewBox: "0 0 20 20",
+      fill: "#333333"
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveClass('icon', 'dialog-close', 'hover-red', 'clickable');
+    expect(svg).toHaveAttribute('width', '20');
+    expect(svg).toHaveAttribute('height', '20');
+    expect(svg).toHaveAttribute('viewBox', '0 0 20 20');
+    expect(svg).toHaveAttribute('fill', '#333333');
+  });
+});

package/dist/__tests__/EditSquare.test.js

@@ -0,0 +1,99 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _EditSquare = require("../icons/EditSquare");
+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('EditSquare', () => {
+  test('renders edit square icon with default props', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_EditSquare.EditSquare, null));
+    const svg = container.querySelector('svg');
+    expect(svg).toBeInTheDocument();
+    expect(svg).toHaveClass('icon', 'edit-square');
+    expect(svg).toHaveAttribute('width', '24');
+    expect(svg).toHaveAttribute('height', '24');
+    expect(svg).toHaveAttribute('viewBox', '0 -960 960 960');
+    expect(svg).toHaveAttribute('fill', '#adb5bd');
+  });
+  test('renders with custom component name', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_EditSquare.EditSquare, {
+      componentName: "pencil-icon"
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveClass('icon', 'pencil-icon');
+  });
+  test('renders with additional className', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_EditSquare.EditSquare, {
+      additionalClassName: "small hover-orange"
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveClass('icon', 'edit-square', 'small', 'hover-orange');
+  });
+  test('renders with custom dimensions', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_EditSquare.EditSquare, {
+      dimensions: 18
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '18');
+    expect(svg).toHaveAttribute('height', '18');
+  });
+  test('renders with custom viewBox', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_EditSquare.EditSquare, {
+      viewBox: "0 0 512 512"
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('viewBox', '0 0 512 512');
+  });
+  test('renders with custom fill color', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_EditSquare.EditSquare, {
+      fill: "#6c757d"
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('fill', '#6c757d');
+  });
+  test('contains path element', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_EditSquare.EditSquare, null));
+    const path = container.querySelector('path');
+    expect(path).toBeInTheDocument();
+    expect(path).toHaveAttribute('d');
+  });
+  test('combines all props correctly', () => {
+    const {
+      container
+    } = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_EditSquare.EditSquare, {
+      componentName: "modify-icon",
+      additionalClassName: "cursor-pointer blue-on-hover",
+      dimensions: 20,
+      viewBox: "0 0 64 64",
+      fill: "#ffc107"
+    }));
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveClass('icon', 'modify-icon', 'cursor-pointer', 'blue-on-hover');
+    expect(svg).toHaveAttribute('width', '20');
+    expect(svg).toHaveAttribute('height', '20');
+    expect(svg).toHaveAttribute('viewBox', '0 0 64 64');
+    expect(svg).toHaveAttribute('fill', '#ffc107');
+  });
+});

package/dist/__tests__/Error.test.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Error = require("../components/Error");
+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('Error Component', () => {
+  test('renders error with children text', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Error.Error, null, "This is an error message"));
+    const error = _react2.screen.getByTestId('error');
+    expect(error).toBeInTheDocument();
+    expect(error).toHaveTextContent('This is an error message');
+    expect(error.tagName).toBe('DIV');
+  });
+  test('renders with default component name', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Error.Error, null, "Error text"));
+    const error = _react2.screen.getByTestId('error');
+    expect(error).toHaveClass('error');
+  });
+  test('renders with custom component name', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Error.Error, {
+      componentName: "validation-error"
+    }, "Error text"));
+    const error = _react2.screen.getByTestId('validation-error');
+    expect(error).toHaveClass('validation-error');
+  });
+  test('renders with additional className', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Error.Error, {
+      additionalClassName: "red-text"
+    }, "Error text"));
+    const error = _react2.screen.getByTestId('error');
+    expect(error).toHaveClass('error', 'red-text');
+  });
+  test('handles empty children', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Error.Error, null));
+    const error = _react2.screen.getByTestId('error');
+    expect(error).toBeInTheDocument();
+    // The error container always contains icon and text spans, so check the text span is empty
+    const textSpan = error.querySelector('.error__text');
+    expect(textSpan).toBeInTheDocument();
+    expect(textSpan).toBeEmptyDOMElement();
+  });
+  test('renders with multiple class names', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Error.Error, {
+      componentName: "field-error",
+      additionalClassName: "bold italic"
+    }, "Field validation failed"));
+    const error = _react2.screen.getByTestId('field-error');
+    expect(error).toHaveClass('field-error', 'bold', 'italic');
+    expect(error).toHaveTextContent('Field validation failed');
+  });
+  test('handles long error messages', () => {
+    const longMessage = 'This is a very long error message that should be displayed properly even when it contains multiple sentences and detailed information about what went wrong.';
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Error.Error, null, longMessage));
+    const error = _react2.screen.getByTestId('error');
+    expect(error).toHaveTextContent(longMessage);
+  });
+  test('renders undefined additionalClassName gracefully', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Error.Error, {
+      additionalClassName: undefined
+    }, "Error text"));
+    const error = _react2.screen.getByTestId('error');
+    expect(error).toBeInTheDocument();
+    expect(error).toHaveTextContent('Error text');
+  });
+});

package/dist/__tests__/Footer.test.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+require("@testing-library/jest-dom");
+var _Footer = _interopRequireDefault(require("../components/Footer"));
+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('Footer', () => {
+  it('renders with default props', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
+      navigation: /*#__PURE__*/_react.default.createElement("li", null, "NavItem")
+    }));
+    expect(_react2.screen.getByRole('contentinfo')).toBeInTheDocument();
+    expect(_react2.screen.getByText('NavItem')).toBeInTheDocument();
+  });
+  it('renders mobile navigation when width < 768', () => {
+    // Mock useWindowSize to return mobile width
+    jest.spyOn(require('../utils/useWindowSize'), 'useWindowSize').mockReturnValue({
+      width: 500
+    });
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
+      navigation: /*#__PURE__*/_react.default.createElement("li", null, "MobileNav")
+    }));
+    expect(_react2.screen.getByLabelText('Mobile footer navigation')).toBeInTheDocument();
+    expect(_react2.screen.getByText('MobileNav')).toBeInTheDocument();
+  });
+  it('renders desktop navigation when width >= 768', () => {
+    jest.spyOn(require('../utils/useWindowSize'), 'useWindowSize').mockReturnValue({
+      width: 1024
+    });
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
+      navigation: /*#__PURE__*/_react.default.createElement("li", null, "DesktopNav")
+    }));
+    expect(_react2.screen.getByLabelText('Desktop footer navigation')).toBeInTheDocument();
+    expect(_react2.screen.getByText('DesktopNav')).toBeInTheDocument();
+  });
+  it('renders auth menu when hasAuth is true (mobile)', () => {
+    jest.spyOn(require('../utils/useWindowSize'), 'useWindowSize').mockReturnValue({
+      width: 500
+    });
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
+      hasAuth: true,
+      navigation: null
+    }));
+    expect(_react2.screen.getByLabelText('User navigation')).toBeInTheDocument();
+    expect(_react2.screen.getByText('Home')).toBeInTheDocument();
+    expect(_react2.screen.getByText('Search')).toBeInTheDocument();
+    expect(_react2.screen.getByText('Add')).toBeInTheDocument();
+    expect(_react2.screen.getByText('Profile')).toBeInTheDocument();
+  });
+  it('applies custom aria-label', () => {
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_Footer.default, {
+      navigation: /*#__PURE__*/_react.default.createElement("li", null, "Nav"),
+      "aria-label": "Custom Footer"
+    }));
+    expect(_react2.screen.getByRole('contentinfo')).toHaveAttribute('aria-label', 'Custom Footer');
+  });
+});