Merge branch 'deriv-com:main' into yaswanth/FEQ-1974_Added_test_for_sidenote_component

Author: yaswanth-deriv

src/components/Loader/__test__/Loader.spec.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Loader } from '..';
+
+describe('Loader component', () => {
+  it('renders with default props', () => {
+    const { getByTestId } = render(<Loader />);
+    const loader = getByTestId('dt_derivs-loader');
+    expect(loader).toBeInTheDocument();
+    expect(loader).toHaveClass('derivs-loader');
+    expect(loader).toHaveClass('derivs-loader--fullscreen');
+    const loaderElements = loader.querySelectorAll('.derivs-loader__element');
+    loaderElements.forEach(element => {
+      expect(element).toHaveStyle({ backgroundColor: '#85ACB0' });
+    });
+  });
+
+  it('renders with custom color', () => {
+    const { getByTestId } = render(<Loader color="#FF0000" />);
+    const loader = getByTestId('dt_derivs-loader');
+    const loaderElements = loader.querySelectorAll('.derivs-loader__element');
+    loaderElements.forEach(element => {
+      expect(element).toHaveStyle({ backgroundColor: '#FF0000' });
+    });
+  });
+
+  it('renders without full screen class when isFullScreen is false', () => {
+    const { getByTestId } = render(<Loader isFullScreen={false} />);
+    const loader = getByTestId('dt_derivs-loader');
+    expect(loader).not.toHaveClass('derivs-loader--fullscreen');
+  });
+
+  it('renders with custom className', () => {
+    const { getByTestId } = render(<Loader className="custom-loader" />);
+    const loader = getByTestId('dt_derivs-loader');
+    expect(loader).toHaveClass('custom-loader');
+  });
+});

src/components/Tooltip/__test__/Tooltip.spec.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, fireEvent,waitFor } from '@testing-library/react';
+import { Tooltip } from '..';
+
+describe('Tooltip Component', () => {
+
+  it('displays tooltip message on hover', async () => {
+    const { getByText, getByText: getByTooltipText } = render(
+      <Tooltip message="Tooltip message">Hover me</Tooltip>
+    );
+
+    fireEvent.mouseEnter(getByText('Hover me'));
+    expect(getByTooltipText('Tooltip message')).toBeInTheDocument();
+
+    fireEvent.mouseLeave(getByText('Hover me'));
+    expect(() => getByTooltipText('Tooltip message')).toThrow();
+  });
+
+  it('toggles tooltip message on click', async () => {
+    const { getByText, getByText: getByTooltipText } = render(
+      <Tooltip message="Tooltip message" triggerAction="click">Click me</Tooltip>
+    );
+
+    fireEvent.click(getByText('Click me'));
+    expect(getByTooltipText('Tooltip message')).toBeInTheDocument();
+
+    fireEvent.click(getByText('Click me'));
+    expect(() => getByTooltipText('Tooltip message')).toThrow();
+  });
+
+  it('applies correct variant class', async() => {
+    const { getByText, container } = render(
+      <Tooltip message="Tooltip message" variant="error">Hover me</Tooltip>
+    );
+
+    fireEvent.mouseEnter(getByText('Hover me'));
+    await waitFor(() => {
+      const tooltipContainer = container.querySelector('.deriv-tooltip');
+      expect(tooltipContainer).toHaveClass('deriv-tooltip--error');
+    });
+  });
+
+  it('applies correct position class', async () => {
+    const { getByText, container } = render(
+      <Tooltip message="Tooltip message" position="bottom">Hover me</Tooltip>
+    );
+
+    fireEvent.mouseEnter(getByText('Hover me'));
+    await waitFor(() => {
+      const tooltipContainer = container.querySelector('.deriv-tooltip');
+      expect(tooltipContainer).toHaveClass('deriv-bottom');
+    });
+  });
+
+});