fixup! fixup! fixup! Feat(web-react): Introduce Uncontrollable Toast

packages/web-react/src/components/Toast/__tests__/UncontrolledToast.test.tsx

@@ -0,0 +1,126 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+import React from 'react';
+import UncontrolledToast from '../UncontrolledToast';
+import { UncontrolledToastContext, UncontrolledToastProvider } from '../UncontrolledToastContext';
+
+describe('UncontrolledToast', () => {
+  it('should not render', () => {
+    const dom = render(
+      <UncontrolledToastProvider>
+        <UncontrolledToast />
+      </UncontrolledToastProvider>,
+    );
+
+    const element = dom.container.querySelector('.ToastBar') as HTMLElement;
+
+    expect(element).not.toBeInTheDocument();
+  });
+
+  it('should render opened toast', () => {
+    const contextValue = {
+      id: 'test-id',
+      message: 'Toast message',
+      isOpen: true,
+      autoClose: false,
+      iconName: undefined,
+      color: undefined,
+      close: jest.fn(),
+      showToast: jest.fn(),
+    };
+
+    const dom = render(
+      <UncontrolledToastContext.Provider value={contextValue}>
+        <UncontrolledToast />
+      </UncontrolledToastContext.Provider>,
+    );
+
+    const elementToast = dom.container.querySelector('.Toast') as HTMLElement;
+    const elementToastBar = dom.container.querySelector('.ToastBar') as HTMLElement;
+
+    expect(elementToast).toBeInTheDocument();
+    expect(elementToastBar).toBeInTheDocument();
+    expect(elementToastBar).toHaveClass('is-open ToastBar--inverted');
+    expect(elementToastBar.querySelector('.ToastBar .ToastBar__content svg')).not.toBeInTheDocument();
+  });
+
+  it('should render opened toast with params', () => {
+    const contextValue = {
+      close: jest.fn(),
+      iconName: 'icon',
+      isOpen: true,
+      message: 'Toast message',
+      autoClose: false,
+      color: undefined,
+      id: 'test-id',
+      showToast: jest.fn(),
+    };
+
+    const dom = render(
+      <UncontrolledToastContext.Provider value={contextValue}>
+        <UncontrolledToast alignmentX="right" alignmentY="top" isDismissible hasIcon closeLabel="Close test" />
+      </UncontrolledToastContext.Provider>,
+    );
+
+    const elementToast = dom.container.querySelector('.Toast') as HTMLElement;
+    const elementToastBar = dom.container.querySelector('.ToastBar') as HTMLElement;
+
+    expect(elementToast).toBeInTheDocument();
+    expect(elementToastBar).toBeInTheDocument();
+    expect(elementToast).toHaveClass('Toast--right Toast--top');
+    expect(elementToastBar).toHaveClass('ToastBar ToastBar--inverted ToastBar--dismissible is-open');
+    expect(elementToastBar.querySelector('.ToastBar__content svg')).toBeInTheDocument();
+    expect(elementToastBar.querySelector('button')).toHaveTextContent('Close test');
+  });
+
+  it('should close toast when close button is clicked', () => {
+    const contextValue = {
+      close: jest.fn(),
+      iconName: 'icon',
+      isOpen: true,
+      message: 'Toast message',
+      autoClose: false,
+      color: undefined,
+      id: 'test-id',
+      showToast: jest.fn(),
+    };
+
+    const dom = render(
+      <UncontrolledToastContext.Provider value={contextValue}>
+        <UncontrolledToast isDismissible />
+      </UncontrolledToastContext.Provider>,
+    );
+
+    const elementToastBar = dom.container.querySelector('.ToastBar') as HTMLElement;
+    const elementButton = elementToastBar.querySelector('button') as HTMLButtonElement;
+
+    elementButton.click();
+
+    expect(contextValue.close).toHaveBeenCalled();
+  });
+
+  it('should autoClose after timeout', () => {
+    jest.useFakeTimers();
+
+    const contextValue = {
+      close: jest.fn(),
+      iconName: 'icon',
+      isOpen: true,
+      message: 'Toast message',
+      autoClose: true,
+      color: undefined,
+      id: 'test-id',
+      showToast: jest.fn(),
+    };
+
+    render(
+      <UncontrolledToastContext.Provider value={contextValue}>
+        <UncontrolledToast />
+      </UncontrolledToastContext.Provider>,
+    );
+
+    jest.advanceTimersByTime(5000);
+
+    expect(contextValue.close).toHaveBeenCalled();
+  });
+});

packages/web-react/src/components/Toast/__tests__/useUncontrolledToast.test.ts

@@ -0,0 +1,44 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { useContext } from 'react';
+import { useUncontrolledToast } from '../useUncontrolledToast';
+
+// Mock useContext to provide a context value for testing
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useContext: jest.fn(),
+}));
+
+describe('useUncontrolledToast', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should throw an error when used outside UncontrolledToastProvider', () => {
+    // Mock useContext to return undefined, simulating the hook being used outside UncontrolledToastProvider
+    (useContext as jest.Mock).mockReturnValue(undefined);
+
+    const { result } = renderHook(() => useUncontrolledToast());
+
+    expect(result.error).toEqual(new Error('useUncontrolledToast has to be used within <UncontrolledToastProvider>'));
+  });
+
+  it('should return currentUncontrolledToastContext when used within UncontrolledToastProvider', () => {
+    const contextValue = {
+      autoClose: false,
+      color: undefined,
+      iconName: undefined,
+      id: '',
+      isOpen: false,
+      message: null,
+      close: () => {},
+      showToast: () => {},
+    };
+
+    // Mock useContext to return contextValue, simulating the hook being used within UncontrolledToastProvider
+    (useContext as jest.Mock).mockReturnValue(contextValue);
+
+    const { result } = renderHook(() => useUncontrolledToast());
+
+    expect(result.current).toEqual(contextValue);
+  });
+});