test: adds test cases for various components (#354)

* test(BottomNavigation): adds test cases for BottomNavigation component

* test(Breadcrumbs): adds test cases for Breadcrumbs component

* test(ButtonGroup): adds test cases for ButtonGroup component

* test(Card): adds test cases for Card component

* test(Carousel): adds test cases for Carousel component

* test(ChatBubble): adds test cases for ChatBubble component

* test(Collapse): adds test cases for Collapse component

* test(Countdown): adds test cases for Countdown component

* test(Divider): adds test cases for Divider component

* test(Drawer): adds test cases for Drawer component

* test(Dropdown): adds test cases for Dropdown component

* test(FileInput): adds test cases for FileInput component

* test(Form): adds test cases for Form component

* test(Hero): adds test cases for Hero component

* test(Indicator): adds test cases for Indicator component

* test(InputGroup): adds test cases for InputGroup component

* test(Kbd): adds test cases for Kbd component

* test(Link): adds test cases for Link component

* test(Mask): adds test cases for Mask component

* test(Menu): adds test cases for Menu component

* test(NavBar): adds test cases for NavBar component

* test(Pagination): adds test cases for Pagination component

* test(PhoneMockup): adds test cases for PhoneMockup component

* test(Progress): adds test cases for Progress component

* test(RadialProgress): adds test cases for RadialProgress component

* test(Stack): adds test cases for Stack component

* test(Stats): adds test cases for Stats component

* test(Steps): adds test cases for Steps component

* test(Swap): adds test cases for Swap component

* test(Table): adds test cases for Table component

* test(Theme): adds test cases for Theme component

* test(Toast): adds test cases for Toast component

* test(Tooltip): adds test cases for Tooltip component

* test(WindowMockup): adds test cases for WindowMockup component

Author: Jack-2077

src/Theme/Theme.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react'
+import Theme from './'
+
+describe('Theme', () => {
+  it('Should render children elements', () => {
+    render(
+      <Theme>
+        <div>Child component</div>
+      </Theme>
+    )
+
+    const childComponent = screen.getByText('Child component')
+    expect(childComponent).toBeInTheDocument()
+  })
+
+  it('Should render with default theme if no dataTheme prop is provided', () => {
+    render(<Theme data-testid="theme-div" />)
+
+    const renderedDiv = screen.getByTestId('theme-div')
+    expect(renderedDiv).toHaveAttribute('data-theme', 'light')
+  })
+
+  it('Should use closest ancestor theme if no dataTheme prop is provided', () => {
+    render(
+      <div data-theme="ancestor-theme" data-testid="ancestor-div">
+        <Theme />
+      </div>
+    )
+
+    const renderedDiv = screen.getByTestId('ancestor-div')
+    expect(renderedDiv).toHaveAttribute('data-theme', 'ancestor-theme')
+  })
+
+  it('Should pass down data-theme prop to the rendered div', () => {
+    render(<Theme dataTheme="dark" data-testid="theme-div" />)
+
+    const renderedDiv = screen.getByTestId('theme-div')
+    expect(renderedDiv).toHaveAttribute('data-theme', 'dark')
+  })
+
+  it('Should update theme when dataTheme prop changes', () => {
+    render(<Theme dataTheme="light" data-testid="theme-div-1" />)
+
+    let renderedDiv = screen.getByTestId('theme-div-1')
+    expect(renderedDiv).toHaveAttribute('data-theme', 'light')
+
+    render(<Theme dataTheme="dark" data-testid="theme-div-2" />)
+
+    renderedDiv = screen.getByTestId('theme-div-2')
+    expect(renderedDiv).toHaveAttribute('data-theme', 'dark')
+  })
+})

src/Toast/Toast.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react'
+import Toast from './'
+
+describe('Toast', () => {
+  it('Should render children elements', () => {
+    render(
+      <Toast>
+        <div>Child component</div>
+      </Toast>
+    )
+
+    const childComponent = screen.getByText('Child component')
+    expect(childComponent).toBeInTheDocument()
+  })
+
+  it('Should render with default horizontal and vertical options', () => {
+    render(<Toast data-testid="toast-div" />)
+
+    const renderedDiv = screen.getByTestId('toast-div')
+    expect(renderedDiv).toHaveClass('toast-end')
+    expect(renderedDiv).toHaveClass('toast-bottom')
+  })
+
+  it('Should render with custom horizontal and vertical options', () => {
+    render(<Toast horizontal="start" vertical="top" data-testid="toast-div" />)
+
+    const renderedDiv = screen.getByTestId('toast-div')
+    expect(renderedDiv).toHaveClass('toast-start')
+    expect(renderedDiv).toHaveClass('toast-top')
+  })
+
+  it('Should apply additional class names', () => {
+    render(<Toast className="custom-toast" data-testid="toast-div" />)
+
+    const renderedDiv = screen.getByTestId('toast-div')
+    expect(renderedDiv).toHaveClass('custom-toast')
+  })
+})

src/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,46 @@
+import { render, screen } from '@testing-library/react'
+import Tooltip from './'
+
+describe('Tooltip', () => {
+  it('Should render with message and children', () => {
+    render(
+      <Tooltip message="Tooltip message">
+        <button>Hover me</button>
+      </Tooltip>
+    )
+
+    const tooltipButton = screen.getByText('Hover me')
+    expect(tooltipButton).toBeInTheDocument()
+
+    const tooltipDiv = screen.getByRole('tooltip')
+    expect(tooltipDiv).toHaveAttribute('data-tip', 'Tooltip message')
+  })
+
+  it('Should render with default styles and position', () => {
+    render(<Tooltip message="Tooltip message" />)
+
+    const tooltipDiv = screen.getByRole('tooltip')
+    expect(tooltipDiv).toHaveClass('tooltip')
+    expect(tooltipDiv).not.toHaveClass('tooltip-open')
+    expect(tooltipDiv).not.toHaveClass('tooltip-primary')
+    expect(tooltipDiv).not.toHaveClass('tooltip-top')
+  })
+
+  it('Should render with custom styles and position', () => {
+    render(
+      <Tooltip message="Tooltip message" open color="primary" position="top" />
+    )
+
+    const tooltipDiv = screen.getByRole('tooltip')
+    expect(tooltipDiv).toHaveClass('tooltip-open')
+    expect(tooltipDiv).toHaveClass('tooltip-primary')
+    expect(tooltipDiv).toHaveClass('tooltip-top')
+  })
+
+  it('Should apply additional class names', () => {
+    render(<Tooltip message="Tooltip message" className="custom-class" />)
+
+    const tooltipDiv = screen.getByRole('tooltip')
+    expect(tooltipDiv).toHaveClass('custom-class')
+  })
+})

src/WindowMockup/WindowMockup.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react'
+import WindowMockup from './'
+
+describe('WindowMockup', () => {
+  it('Should render WindowMockup', () => {
+    render(<WindowMockup />)
+    const windowMockup = screen.getByLabelText('Window mockup')
+    expect(windowMockup).toBeInTheDocument()
+    expect(windowMockup).toHaveClass('mockup-window')
+  })
+
+  it('Should render with frameColor and backgroundColor', () => {
+    render(
+      <WindowMockup frameColor="primary" backgroundColor="accent">
+        Content
+      </WindowMockup>
+    )
+    const windowMockup = screen.getByLabelText('Window mockup')
+    expect(windowMockup).toBeInTheDocument()
+    expect(windowMockup).toHaveClass(
+      'mockup-window',
+      'border-primary',
+      'bg-primary'
+    )
+  })
+
+  it('Should render with border and borderColor', () => {
+    render(
+      <WindowMockup border borderColor="error">
+        Content
+      </WindowMockup>
+    )
+    const windowMockup = screen.getByLabelText('Window mockup')
+    expect(windowMockup).toBeInTheDocument()
+    expect(windowMockup).toHaveClass('mockup-window', 'border', 'border-error')
+  })
+
+  it('Should apply additional class names', () => {
+    render(<WindowMockup className="custom-class">Content</WindowMockup>)
+    const windowMockup = screen.getByLabelText('Window mockup')
+    expect(windowMockup).toBeInTheDocument()
+    expect(windowMockup).toHaveClass('mockup-window', 'custom-class')
+  })
+
+  it('Should render with data-theme attribute', () => {
+    render(<WindowMockup dataTheme="dark">Content</WindowMockup>)
+    const windowMockup = screen.getByLabelText('Window mockup')
+    expect(windowMockup).toBeInTheDocument()
+    expect(windowMockup).toHaveAttribute('data-theme', 'dark')
+  })
+})