test(flowbite): adds test cases for the flowbite theme provider and useTheme hook

#443

Author: yurisldk

src/lib/components/Flowbite/Flowbite.spec.tsx

@@ -0,0 +1,103 @@
+import { act, render } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { mergeDeep } from '../../helpers/mergeDeep';
+import defaultTheme from '../../theme/default';
+import { Flowbite, useTheme } from '../Flowbite';
+import { ThemeContextProps } from './ThemeContext';
+
+afterEach(() => {
+  localStorage.removeItem('theme');
+});
+
+describe('Components / Flowbite', () => {
+  describe('hook / useTheme', () => {
+    it('should return default values', () => {
+      render(<TestComponent />);
+
+      const { theme, mode, toggleMode } = context;
+
+      expect(theme).toEqual(defaultTheme);
+      expect(mode).toBeUndefined();
+      expect(toggleMode).toBeUndefined();
+    });
+  });
+
+  describe('Flowbite', () => {
+    it('should return default values', () => {
+      render(
+        <Flowbite>
+          <TestComponent />
+        </Flowbite>,
+      );
+
+      const { theme, mode, toggleMode } = context;
+      expect(theme).toEqual(defaultTheme);
+      expect(mode).toBe('light');
+      expect(toggleMode).not.toBeUndefined();
+    });
+
+    it('should return custom theme', () => {
+      render(
+        <Flowbite theme={{ theme: customTheme }}>
+          <TestComponent />
+        </Flowbite>,
+      );
+
+      const { theme } = context;
+      const mergedTheme = mergeDeep(theme, customTheme);
+
+      expect(theme).toEqual(mergedTheme);
+    });
+
+    it('should return darkmode', () => {
+      render(
+        <Flowbite theme={{ dark: true }}>
+          <TestComponent />
+        </Flowbite>,
+      );
+
+      const { mode } = context;
+
+      expect(mode).toBe('dark');
+      expect(documentEl()).toHaveClass('dark');
+    });
+
+    it('should toggle mode', () => {
+      render(
+        <Flowbite>
+          <TestComponent />
+        </Flowbite>,
+      );
+
+      const { mode, toggleMode } = context;
+
+      expect(mode).toBe('light');
+      expect(documentEl()).not.toHaveClass('dark');
+
+      act(() => {
+        if (toggleMode) toggleMode();
+      });
+
+      const { mode: mode2 } = context;
+
+      expect(mode2).toBe('dark');
+      expect(documentEl()).toHaveClass('dark');
+    });
+  });
+});
+
+let context: ThemeContextProps;
+const TestComponent = () => {
+  context = useTheme();
+  return null;
+};
+
+const customTheme = {
+  avatar: {
+    size: {
+      xxl: 'h-64 w-64',
+    },
+  },
+};
+
+const documentEl = () => document.documentElement;

src/lib/components/Flowbite/ThemeContext.tsx

@@ -7,7 +7,7 @@ import type { FlowbiteTheme } from './FlowbiteTheme';
 
 export type Mode = 'light' | 'dark';
 
-interface ThemeContextProps {
+export interface ThemeContextProps {
   theme: FlowbiteTheme;
   mode?: Mode;
   toggleMode?: () => void | null;