dhre-component-lib 0.0.1 → 0.0.3

package/jest.config.ts

@@ -6,5 +6,5 @@ module.exports = {
     moduleNameMapper: {
       '\\.(css|less|sass|scss)$': '<rootDir>/src/__mocks__/styleMock.js', // Mock CSS files
     },
-  };
+    };
   

package/package.json

@@ -1,21 +1,25 @@
 {
   "name": "dhre-component-lib",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "private": false,
   "scripts": {
     "test": "jest",
-    "rollup": "rollup -c"
+    "rollup": "rollup -c",
+    "test:coverage": "jest --coverage"
   },
   "author": "",
   "license": "ISC",
   "description": "",
   "devDependencies": {
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.4",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
     "@types/jest": "^29.5.12",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.5",
     "@types/testing-library__jest-dom": "^6.0.0",
     "jest": "^29.7.0",
     "jest-dom": "^4.0.0",
@@ -25,7 +29,7 @@
     "rollup": "^4.18.1",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "ts-jest": "^29.2.4",
+    "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
     "typescript": "^5.5.3"
   },
@@ -34,7 +38,6 @@
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
-    "@testing-library/react": "^16.0.0",
     "tslib": "^2.6.3"
   },
   "peerDependencies": {

package/src/components/Avatar/Avatar.test.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Avatar, { AvatarProps } from './Avatar';
+
+describe('Avatar Component', () => {
+  const defaultProps: AvatarProps = {
+    src: 'test-image.jpg',
+    alt: 'Test Avatar',
+    imgClassName: 'avatar-class',
+  };
+
+  it('renders the image with the provided src and alt attributes', () => {
+    render(<Avatar {...defaultProps} />);
+    
+    const imgElement = screen.getByAltText(defaultProps.alt);
+    
+    expect(imgElement).toHaveAttribute('src', defaultProps.src);
+    expect(imgElement).toHaveAttribute('alt', defaultProps.alt);
+  });
+
+  it('applies the correct className to the image', () => {
+    render(<Avatar {...defaultProps} />);
+    
+    const imgElement = screen.getByAltText(defaultProps.alt);
+    
+    expect(imgElement).toHaveClass(defaultProps.imgClassName);
+  });
+
+  it('handles the onClick event correctly', () => {
+    const handleClick = jest.fn();
+    render(<Avatar {...defaultProps} handleClick={handleClick} />);
+    
+    const imgElement = screen.getByAltText(defaultProps.alt);
+    fireEvent.click(imgElement);
+    
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not crash without handleClick prop', () => {
+    render(<Avatar {...defaultProps} />);
+    
+    const imgElement = screen.getByAltText(defaultProps.alt);
+    expect(() => fireEvent.click(imgElement)).not.toThrow();
+  });
+
+  it('matches snapshot for default rendering', () => {
+    const { container } = render(<Avatar {...defaultProps} />);
+    
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Avatar Component matches snapshot for default rendering 1`] = `
+<img
+  alt="Test Avatar"
+  class="avatar-class"
+  src="test-image.jpg"
+/>
+`;

package/src/components/Badge/Badge.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Badge, { BadgeProps } from './Badge';
+
+describe('Badge Component', () => {
+  const defaultProps: BadgeProps = {
+    content: 'Test Badge',
+    badgeClassName: 'badge-class',
+  };
+
+  it('renders the badge with the provided content', () => {
+    render(<Badge {...defaultProps} />);
+    
+    const badgeElement = screen.getByText(defaultProps.content as string);
+    
+    expect(badgeElement).toBeInTheDocument();
+  });
+
+  it('applies the correct className to the badge', () => {
+    render(<Badge {...defaultProps} />);
+    
+    const badgeElement = screen.getByText(defaultProps.content as string);
+    
+    expect(badgeElement).toHaveClass(defaultProps.badgeClassName);
+  });
+
+  it('handles the onClick event correctly', () => {
+    const handleClick = jest.fn();
+    render(<Badge {...defaultProps} handleClick={handleClick} />);
+    
+    const badgeElement = screen.getByText(defaultProps.content as string);
+    fireEvent.click(badgeElement);
+    
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not crash without handleClick prop', () => {
+    render(<Badge {...defaultProps} />);
+    
+    const badgeElement = screen.getByText(defaultProps.content as string);
+    expect(() => fireEvent.click(badgeElement)).not.toThrow();
+  });
+
+  it('renders correctly with numeric content', () => {
+    const numericProps: BadgeProps = {
+      ...defaultProps,
+      content: 99,
+    };
+    render(<Badge {...numericProps} />);
+    
+    const badgeElement = screen.getByText(numericProps.content.toString());
+    
+    expect(badgeElement).toBeInTheDocument();
+    expect(badgeElement).toHaveTextContent('99');
+  });
+
+  it('matches snapshot for default rendering', () => {
+    const { container } = render(<Badge {...defaultProps} />);
+    
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

package/src/components/Badge/__snapshots__/Badge.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Badge Component matches snapshot for default rendering 1`] = `
+<span
+  class="badge-class"
+>
+  Test Badge
+</span>
+`;

package/src/components/BreadCrumb/BreadCrumb.test.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Breadcrumb from './BreadCrumb';
+
+describe('Breadcrumb', () => {
+  it('should render with given props', () => {
+    const items = [
+      { label: 'Home', handleClick: () => {} },
+      { label: 'Library' },
+      { label: 'Data' },
+    ];
+
+    render(
+      <Breadcrumb
+        items={items}
+        breadcrumbClassName="breadcrumb-class"
+        itemClassName="item-class"
+        separator=">"
+        separatorClassName="separator-class"
+      />
+    );
+
+    // Check if breadcrumb container is rendered
+    const breadcrumb = screen.getByRole('navigation');
+    expect(breadcrumb).toBeInTheDocument();
+    expect(breadcrumb).toHaveClass('breadcrumb-class');
+
+    // Check if breadcrumb items are rendered
+    items.forEach((item) => {
+      const itemElement = screen.getByText(item.label);
+      expect(itemElement).toBeInTheDocument();
+      expect(itemElement).toHaveClass('item-class');
+    });
+
+    // Check if separators are rendered
+    const separators = screen.getAllByText('>');
+    expect(separators.length).toBe(items.length - 1);
+    separators.forEach(separator => expect(separator).toHaveClass('separator-class'));
+  });
+
+  it('should call handleClick when a breadcrumb item is clicked', () => {
+    const handleClick = jest.fn();
+    const items = [
+      { label: 'Home', handleClick },
+      { label: 'Library' },
+    ];
+
+    render(
+      <Breadcrumb
+        items={items}
+        breadcrumbClassName="breadcrumb-class"
+        itemClassName="item-class"
+        separator=">"
+        separatorClassName="separator-class"
+      />
+    );
+
+    const homeItem = screen.getByText('Home');
+    fireEvent.click(homeItem);
+
+    expect(handleClick).toHaveBeenCalled();
+  });
+
+  it('should render without separators if none are provided', () => {
+    const items = [
+      { label: 'Home' },
+      { label: 'Library' },
+    ];
+
+    render(
+      <Breadcrumb
+        items={items}
+        breadcrumbClassName="breadcrumb-class"
+        itemClassName="item-class"
+        separator=""  // Pass an empty string for separator
+      />
+    );
+
+    // Check if breadcrumb items are rendered
+    items.forEach((item) => {
+      const itemElement = screen.getByText(item.label);
+      expect(itemElement).toBeInTheDocument();
+    });
+
+    // Check that no separators are present by querying with the separator class name
+    const separators = screen.queryAllByRole('presentation');
+    expect(separators.length).toBe(0);
+  });
+});

package/src/components/BreadCrumb/index.ts

@@ -0,0 +1 @@
+export { default } from "./BreadCrumb";

package/src/components/Button/Button.test.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Button, { ButtonProps } from './Button';
+
+describe('Button Component', () => {
+  let handleClick: jest.Mock;
+
+  beforeEach(() => {
+    handleClick = jest.fn(); // Initialize the mock function before each test
+  });
+
+  const renderButton = (props: Partial<ButtonProps> = {}) => {
+    const defaultProps: ButtonProps = {
+      label: 'Click Me',
+      labelClassName: 'button-class',
+      handleClick, // Use the mocked handleClick function here
+      ...props, // Allow overriding props for specific tests
+    };
+
+    return render(<Button {...defaultProps} />);
+  };
+
+  it('renders the button with the correct label', () => {
+    renderButton();
+    
+    const buttonElement = screen.getByText('Click Me');
+    
+    expect(buttonElement).toBeInTheDocument();
+    expect(buttonElement.tagName).toBe('BUTTON');
+  });
+
+  it('applies the correct className to the button', () => {
+    renderButton();
+    
+    const buttonElement = screen.getByText('Click Me');
+    
+    expect(buttonElement).toHaveClass('button-class');
+  });
+
+  it('calls the handleClick function when the button is clicked', () => {
+    renderButton();
+    
+    const buttonElement = screen.getByText('Click Me');
+    
+    fireEvent.click(buttonElement);
+    
+    expect(handleClick).toHaveBeenCalledTimes(1); // Ensure the mock function is called once
+  });
+
+  it('renders correctly without crashing', () => {
+    const { container } = renderButton();
+    
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('does not call handleClick when the button is not clicked', () => {
+    renderButton();
+    
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+});

package/src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button Component renders correctly without crashing 1`] = `
+<button
+  class="button-class"
+>
+  Click Me
+</button>
+`;

package/src/components/Checkbox/Checkbox.test.tsx

@@ -1,61 +1,89 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import Checkbox from "./Checkbox";
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import CustomCheckbox from './Checkbox';
 
-describe("Checkbox Component", () => {
-  it("should render without crashing", () => {
-    const { getByTestId } = render(
-      <Checkbox data-testid="checkbox-rendered" />
-    );
-    expect(getByTestId("checkbox-rendered")).toBeInTheDocument();
-  });
-
-  it("should render with default props", () => {
-    const { getByRole } = render(<Checkbox />);
-    const checkboxElement = getByRole("checkbox");
+interface CustomCheckboxProps {
+  label?: string;
+  checked?: boolean;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  className?: string;
+  checkboxClassName?: string;
+  labelClassName?: string;
+}
 
-    expect(checkboxElement).not.toBeChecked();
+describe('CustomCheckbox Component', () => {
+  let handleChange: jest.Mock;
 
-    expect(checkboxElement).toHaveAttribute("type", "checkbox");
-    expect(checkboxElement).not.toBeDisabled();
+  // Function to generate default props for each test
+  const getDefaultProps = (): CustomCheckboxProps => ({
+    label: 'Accept Terms',
+    checked: false,
+    onChange: handleChange,
+    className: 'custom-container',
+    checkboxClassName: 'custom-checkbox',
+    labelClassName: 'custom-label',
   });
 
-  it("should render with the checked prop", () => {
-    const { getByRole } = render(<Checkbox checked={true} />);
-    const checkboxElement = getByRole("checkbox");
-
-    expect(checkboxElement).toBeChecked();
+  beforeEach(() => {
+    handleChange = jest.fn();  // Reset the mock function before each test
   });
 
-  it("should handle the onChange event", () => {
-    const handleChange = jest.fn();
-    const { getByRole } = render(<Checkbox onChange={handleChange} />);
-    const checkboxElement = getByRole("checkbox");
-
-    fireEvent.click(checkboxElement);
-
-    expect(handleChange).toHaveBeenCalledTimes(1);
-    expect(handleChange).toHaveBeenCalledWith(expect.any(Object), true);
+  it('renders the checkbox with a label', () => {
+    render(<CustomCheckbox {...getDefaultProps()} />);
+    
+    const checkboxElement = screen.getByRole('checkbox');
+    const labelElement = screen.getByText('Accept Terms');
+    
+    expect(checkboxElement).toBeInTheDocument();
+    expect(labelElement).toBeInTheDocument();
   });
 
-  it("should render with the specified color", () => {
-    const { getByRole } = render(<Checkbox color="secondary" />);
-    const checkboxElement = getByRole("checkbox");
+  it('applies the correct className to the checkbox container', () => {
+    render(<CustomCheckbox {...getDefaultProps()} />);
+    
+    const container = screen.getByRole('checkbox').parentElement;
+    
+    expect(container).toHaveClass('custom-container');
+  });
 
-    expect(checkboxElement).toBeInTheDocument();
+  it('applies the correct className to the checkbox', () => {
+    render(<CustomCheckbox {...getDefaultProps()} />);
+    
+    const checkboxElement = screen.getByRole('checkbox');
+    
+    expect(checkboxElement).toHaveClass('custom-checkbox');
   });
 
-  it("should render with the specified size", () => {
-    const { getByRole } = render(<Checkbox size="small" />);
-    const checkboxElement = getByRole("checkbox");
+  it('applies the correct className to the label', () => {
+    render(<CustomCheckbox {...getDefaultProps()} />);
+    
+    const labelElement = screen.getByText('Accept Terms');
+    
+    expect(labelElement).toHaveClass('custom-label');
+  });
 
-    expect(checkboxElement).toBeInTheDocument();
+  it('checks the checkbox based on the checked prop', () => {
+    render(<CustomCheckbox {...getDefaultProps()} checked={true} />);
+    
+    const checkboxElement = screen.getByRole('checkbox');
+    
+    expect(checkboxElement).toBeChecked();
   });
 
-  it("should render as disabled when the disabled prop is true", () => {
-    const { getByRole } = render(<Checkbox disabled />);
-    const checkboxElement = getByRole("checkbox");
+  it('calls the onChange function when the checkbox state changes', () => {
+    render(<CustomCheckbox {...getDefaultProps()} checked={false} />);
+    
+    const checkboxElement = screen.getByRole('checkbox');
+    
+    fireEvent.click(checkboxElement);  // Toggle the checkbox
+    
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
 
-    expect(checkboxElement).toBeDisabled();
+  it('renders correctly without crashing', () => {
+    const { container } = render(<CustomCheckbox {...getDefaultProps()} />);
+    
+    expect(container.firstChild).toMatchSnapshot();
   });
 });

package/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CustomCheckbox Component renders correctly without crashing 1`] = `
+<div
+  class="custom-container"
+>
+  <input
+    class="custom-checkbox"
+    type="checkbox"
+  />
+  <label
+    class="custom-label"
+  >
+    Accept Terms
+  </label>
+</div>
+`;

package/src/components/{Circular_Progress → CircularProgress}/CircularProgress.tsx

@@ -34,4 +34,4 @@ const CircularProgress: React.FC<CircularProgressProps> = ({
   );
 };
 
-export default CircularProgress;
+export default CircularProgress;

package/src/components/Divider/Divider.test.tsx

@@ -1,19 +1,44 @@
 import React from "react";
 import { render } from "@testing-library/react";
-import Divider from "./Divider";
+import CustomDivider from "./Divider";
+import { DIVIDER_ORIENTATION } from "../Enum";
 
-describe("Divider Component", () => {
-  it("should render without crashing", () => {
-    const { getByTestId } = render(<Divider data-testid="divider-rendered" />);
-    expect(getByTestId("divider-rendered")).toBeInTheDocument();
+describe("CustomDivider Component", () => {
+  it("renders without crashing", () => {
+    const { container } = render(<CustomDivider />);
+    expect(container.firstChild).toBeTruthy();
   });
 
-  it("should render with default props", () => {
-    const { container } = render(<Divider />);
-    const dividerElement = container.querySelector(".MuiDivider-root");
+  it("applies the correct default orientation class", () => {
+    const { container } = render(<CustomDivider />);
+    expect(container.firstChild).toHaveClass(DIVIDER_ORIENTATION.Horizontal);
+  });
+
+  it("applies a custom orientation class", () => {
+    const { container } = render(
+      <CustomDivider orientation={DIVIDER_ORIENTATION.Vertical} />
+    );
+    expect(container.firstChild).toHaveClass(DIVIDER_ORIENTATION.Vertical);
+  });
 
-    expect(dividerElement).not.toHaveClass("MuiDivider-vertical");
+  it("applies the passed className to the outer div", () => {
+    const { container } = render(
+      <CustomDivider className="custom-class" />
+    );
+    expect(container.firstChild).toHaveClass("custom-class");
+  });
+
+  it("applies the passed dividerClassName to the inner div", () => {
+    const { container } = render(
+      <CustomDivider dividerClassName="inner-class" />
+    );
+    expect(container.firstChild?.firstChild).toHaveClass("inner-class");
+  });
 
-    expect(dividerElement).toHaveClass("MuiDivider-fullWidth");
+  it("passes additional props to the outer div", () => {
+    const { container } = render(
+      <CustomDivider data-testid="custom-divider" />
+    );
+    expect(container.firstChild).toHaveAttribute("data-testid", "custom-divider");
   });
 });