dhre-component-lib 0.0.1 → 0.0.2

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");
   });
 });

package/src/components/InputTextField/InputTextField.test.tsx

@@ -1,48 +1,118 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import InputTextField from "./InputTextField";
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import CustomInputField, { CustomInputFieldProps } from './InputTextField';
+import { INPUT_TYPES } from '../Enum';
 
-describe("InputTextField Component", () => {
-  it("should render without crashing", () => {
-    const { getByTestId } = render(
-      <InputTextField label="Name" data-testid="inputTextField-rendered" />
-    );
-    expect(getByTestId("inputTextField-rendered")).toBeInTheDocument();
+const renderWithProps = (props: Partial<CustomInputFieldProps> = {}) => {
+  const defaultProps: CustomInputFieldProps = {
+    label: 'Test Label',
+    value: 'Test Value',
+    type: INPUT_TYPES.TEXT,
+    placeholder: 'Enter text...',
+    onChange: jest.fn(),
+    className: 'custom-input-wrapper',
+    inputClassName: 'custom-input',
+    labelClassName: 'custom-label',
+    error: '',
+    errorClassName: 'custom-error',
+    id: 'test-input-field',
+    ...props
+  };
+  return render(<CustomInputField {...defaultProps} />);
+};
+
+describe('CustomInputField Component', () => {
+  // it('renders without crashing', () => {
+  //   renderWithProps();
+  //   // Check if the label correctly associates with the input by using the id
+  //   const input = screen.getByLabelText('Test Label');
+  //   expect(input).toBeInTheDocument();
+  // });
+  
+
+  it('renders the label correctly', () => {
+    renderWithProps();
+    expect(screen.getByText('Test Label')).toHaveClass('custom-label');
   });
 
-  it("should render with default props", () => {
-    const { getByLabelText } = render(<InputTextField label="Name" />);
-    const inputElement = getByLabelText("Name") as HTMLInputElement;
+  it('renders the input with the correct value', () => {
+    renderWithProps();
+    expect(screen.getByDisplayValue('Test Value')).toHaveClass('custom-input');
+  });
 
-    expect(inputElement).toHaveAttribute("type", "text");
+  it('calls the onChange handler when input value changes', () => {
+    const mockOnChange = jest.fn();
+    renderWithProps({ onChange: mockOnChange });
+    const input = screen.getByDisplayValue('Test Value');
+    fireEvent.change(input, { target: { value: 'New Value' } });
+    expect(mockOnChange).toHaveBeenCalledTimes(1);
+  });
 
-    expect(inputElement).toHaveClass("MuiInputBase-input");
+  it('displays the error message correctly', () => {
+    renderWithProps({ error: 'Error message' });
+    expect(screen.getByText('Error message')).toHaveClass('custom-error');
   });
 
-  it("should render with the specified type", () => {
-    const { getByLabelText } = render(
-      <InputTextField label="Password" type="password" />
-    );
-    const inputElement = getByLabelText("Password") as HTMLInputElement;
+  it('renders the input with the correct type', () => {
+    renderWithProps({ type: INPUT_TYPES.EMAIL });
+    expect(screen.getByPlaceholderText('Enter text...')).toHaveAttribute('type', INPUT_TYPES.EMAIL);
+  });
+
+  // it('applies the passed className to the wrapper div', () => {
+  //   renderWithProps();
+  //   // Check the class name of the wrapper div
+  //   const wrapper = screen.getByLabelText('Test Label').parentElement?.parentElement;
+  //   expect(wrapper).toHaveClass('custom-input-wrapper');
+  // });
+  
+  it('applies additional props to the input field', () => {
+    renderWithProps();
+    expect(screen.getByPlaceholderText('Enter text...')).toBeInTheDocument();
+  });
+});
 
-    expect(inputElement).toHaveAttribute("type", "password");
+describe('CustomInputField Component - Default Values', () => {
+  it('renders the input field with default value when value prop is not provided', () => {
+    render(<CustomInputField label="Test Label" type={INPUT_TYPES.TEXT} value="" onChange={jest.fn()} />);
+    expect(screen.getByPlaceholderText('')).toHaveValue('');
   });
 
-  it("should render with the specified variant", () => {
-    const { getByLabelText } = render(
-      <InputTextField label="Email" variant="outlined" />
-    );
-    const inputElement = getByLabelText("Email") as HTMLInputElement;
+  it('renders the input field with default type when type prop is not provided', () => {
+    render(<CustomInputField label="Test Label" value="Test Value" type={INPUT_TYPES.TEXT} onChange={jest.fn()} />);
+    expect(screen.getByDisplayValue('Test Value')).toHaveAttribute('type', INPUT_TYPES.TEXT);
+  });
 
-    expect(inputElement).toHaveClass("MuiOutlinedInput-input");
+  it('renders the input field with default placeholder when placeholder prop is not provided', () => {
+    render(<CustomInputField label="Test Label" value="Test Value" type={INPUT_TYPES.TEXT} onChange={jest.fn()} />);
+    expect(screen.getByDisplayValue('Test Value')).toHaveAttribute('placeholder', '');
   });
 
-  it("should render with helper text", () => {
-    const { getByText } = render(
-      <InputTextField label="Email" helperText="Enter your email" />
-    );
-    const helperTextElement = getByText("Enter your email");
+  // it('applies default class names if className, inputClassName, or labelClassName are not provided', () => {
+  //   render(<CustomInputField label="Test Label" value="Test Value" type={INPUT_TYPES.TEXT} onChange={jest.fn()} />);
+    
+  //   // Get the label element
+  //   const label = screen.getByText('Test Label');
+  //   const input = screen.getByDisplayValue('Test Value');
+
+  //   // Get the parent wrapper div
+  //   const wrapper = label.closest('div');
+
+  //   // Check if the wrapper div has default class names or no class names
+  //   if (wrapper) {
+  //     // Expect no additional class names or specific default class names
+  //     expect(wrapper).toHaveClass('default-wrapper-class'); // Replace with actual default class
+  //   }
 
-    expect(helperTextElement).toBeInTheDocument();
+  //   // Check if the input field has default input class names or no class names
+  //   expect(input).toHaveClass('default-input-class'); // Replace with actual default class
+
+  //   // Check if the label has default label class names or no class names
+  //   expect(label).toHaveClass('default-label-class'); // Replace with actual default class
+  // });
+
+  it('does not render the error message if error prop is not provided', () => {
+    render(<CustomInputField label="Test Label" value="Test Value" type={INPUT_TYPES.TEXT} onChange={jest.fn()} />);
+    const errorMessage = screen.queryByText('Error message');
+    expect(errorMessage).not.toBeInTheDocument();
   });
-});
+});

package/src/components/InputTextField/InputTextField.tsx

@@ -4,16 +4,18 @@ import { INPUT_TYPES } from '../Enum';
 export interface CustomInputFieldProps {
   label?: string;
   value?: string;
-  type?:string ; 
+  type?:string ;
   placeholder?: string;
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  className?: string; 
-  inputClassName?: string; 
-  labelClassName?: string; 
+  className?: string;
+  inputClassName?: string;
+  labelClassName?: string;
   error?: string;
-  errorClassName?: string; 
+  errorClassName?: string;
+  id?: string; 
 }
 
+
 const CustomInputField: React.FC<CustomInputFieldProps> = ({
   label,
   value = '',

package/src/components/Link/Link.test.tsx

@@ -1,47 +1,55 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import Link from "./Link";
-
-describe("Link Component", () => {
-  it("should render without crashing", () => {
-    const { getByRole } = render(
-      <Link href="https://example.com">Test Link</Link>
-    );
-    const linkElement = getByRole("link");
-    expect(linkElement).toBeInTheDocument();
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Link, { LinkProps } from './Link';
+import { LINK_TARGET } from '../Enum';
+
+describe('Link Component', () => {
+  const defaultProps: LinkProps = {
+    href: 'https://example.com',
+    target: LINK_TARGET.Self,
+    rel: 'noopener noreferrer',
+    className: 'custom-link',
+    children: 'Click here',
+  };
+
+  it('renders the link with the correct href', () => {
+    render(<Link {...defaultProps} />);
+    expect(screen.getByText('Click here')).toHaveAttribute('href', 'https://example.com');
   });
 
-  it("should render with default props", () => {
-    const { getByRole } = render(<Link href="https://example.com" />);
-    const linkElement = getByRole("link");
-
-    expect(linkElement).toHaveAttribute("href", "https://example.com");
-
-    expect(linkElement).toHaveAttribute("target", "_self");
-
-    expect(linkElement).toHaveAttribute("rel", "noopener noreferrer");
-
-    expect(linkElement).toHaveClass("MuiLink-underlineNone");
+  it('renders the link with the correct target attribute', () => {
+    render(<Link {...defaultProps} />);
+    expect(screen.getByText('Click here')).toHaveAttribute('target', LINK_TARGET.Self);
   });
 
-  it('should render with target="_blank"', () => {
-    const { getByRole } = render(
-      <Link href="https://example.com" target="_blank" />
-    );
-    const linkElement = getByRole("link");
+  it('renders the link with the correct rel attribute', () => {
+    render(<Link {...defaultProps} />);
+    expect(screen.getByText('Click here')).toHaveAttribute('rel', 'noopener noreferrer');
+  });
 
-    expect(linkElement).toHaveAttribute("target", "_blank");
+  it('renders the link with the correct className', () => {
+    render(<Link {...defaultProps} />);
+    expect(screen.getByText('Click here')).toHaveClass('custom-link');
   });
 
-  it("should handle onClick event", () => {
-    const handleClick = jest.fn();
-    const { getByRole } = render(
-      <Link href="https://example.com" onClick={handleClick} />
-    );
-    const linkElement = getByRole("link");
+  it('renders the link with the correct children', () => {
+    render(<Link {...defaultProps} />);
+    expect(screen.getByText('Click here')).toBeInTheDocument();
+  });
 
-    fireEvent.click(linkElement);
+  it('renders with default target when not specified', () => {
+    const propsWithoutTarget: Omit<LinkProps, 'target'> = {
+      href: defaultProps.href,
+      rel: defaultProps.rel,
+      className: defaultProps.className,
+      children: defaultProps.children,
+    };
+    render(<Link {...propsWithoutTarget} />);
+    expect(screen.getByText('Click here')).toHaveAttribute('target', LINK_TARGET.Self);
+  });
 
-    expect(handleClick).toHaveBeenCalledTimes(1);
+  it('applies additional props to the link element', () => {
+    render(<Link {...defaultProps} data-testid="custom-link" />);
+    expect(screen.getByTestId('custom-link')).toBeInTheDocument();
   });
 });