diff --git a/src/components/Flowbite/Flowbite.spec.tsx b/src/components/Flowbite/Flowbite.spec.tsx
index d28dd371b..bd05c64ff 100644
--- a/src/components/Flowbite/Flowbite.spec.tsx
+++ b/src/components/Flowbite/Flowbite.spec.tsx
@@ -1,24 +1,11 @@
-// TODO: fix test
-
import { act, render } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
-import { Flowbite, useTheme } from '../../';
+import { useThemeMode } from '~/src/helpers/use-theme-mode';
+import { getTheme } from '~/src/theme-store';
+import { Flowbite } from '../../';
import { mergeDeep } from '../../helpers/merge-deep';
-import type { ThemeContextProps } from './ThemeContext';
describe('Components / Flowbite', () => {
- describe('hook / useTheme', () => {
- it('should return default values', () => {
- render();
-
- const { theme, mode, toggleMode } = context;
-
- expect(theme).toEqual(theme);
- expect(mode).toBeUndefined();
- expect(toggleMode).toBeUndefined();
- });
- });
-
describe('Flowbite', () => {
it('should return default values', () => {
render(
@@ -27,8 +14,8 @@ describe('Components / Flowbite', () => {
,
);
- const { theme, mode, toggleMode } = context;
- expect(theme).toEqual(theme);
+ const { mode, toggleMode } = themeMode;
+
expect(mode).toBe('light');
expect(toggleMode).not.toBeUndefined();
});
@@ -40,7 +27,7 @@ describe('Components / Flowbite', () => {
,
);
- const { theme } = context;
+ const theme = getTheme();
const mergedTheme = mergeDeep(theme, customTheme);
expect(theme).toEqual(mergedTheme);
@@ -53,7 +40,7 @@ describe('Components / Flowbite', () => {
,
);
- const { mode, toggleMode } = context;
+ const { mode, toggleMode } = themeMode;
expect(mode).toBe('light');
expect(documentEl()).not.toHaveClass('dark');
@@ -62,7 +49,7 @@ describe('Components / Flowbite', () => {
if (toggleMode) toggleMode();
});
- const { mode: mode2 } = context;
+ const { mode: mode2 } = themeMode;
expect(mode2).toBe('dark');
expect(documentEl()).toHaveClass('dark');
@@ -75,7 +62,7 @@ describe('Components / Flowbite', () => {
,
);
- const { mode } = context;
+ const { mode } = themeMode;
expect(mode).toBe('dark');
expect(documentEl()).toHaveClass('dark');
@@ -83,9 +70,10 @@ describe('Components / Flowbite', () => {
});
});
-let context: ThemeContextProps;
+let themeMode: ReturnType;
+
const TestComponent = () => {
- context = useTheme();
+ themeMode = useThemeMode();
return null;
};