feat(theme): add tests for alert component (#549)

* feat(theme): add tests for alert component * feat(theme): fix prettier formatting Co-authored-by: Ricardo Lüders <[email protected]>
themesberg · Jan 19, 2023 · a62e84f · a62e84f
1 parent 5f01946
commit a62e84f
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 6 deletions.
diff --git a/src/docs/pages/ThemePage.tsx b/src/docs/pages/ThemePage.tsx
@@ -8,7 +8,7 @@ import { Flowbite } from '../../lib/components';
 import type { CustomFlowbiteTheme } from '../../lib/components/Flowbite/FlowbiteTheme';
 
 const ThemePage: FC = () => {
-  const theme: CustomFlowbiteTheme = { alert: { root: { color: { primary: 'bg-primary' } } } };
+  const theme: CustomFlowbiteTheme = { alert: { root: { color: { info: 'bg-primary' } } } };
 
   return (
     <div className="flex flex-col max-w-4xl gap-8 mx-auto dark:text-white">

diff --git a/src/lib/components/Alert/Alert.spec.tsx b/src/lib/components/Alert/Alert.spec.tsx
@@ -1,9 +1,11 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { FC, useState } from 'react';
-import { HiEye, HiInformationCircle } from 'react-icons/hi';
+import { HiEye, HiHeart, HiInformationCircle } from 'react-icons/hi';
 import { describe, expect, it, vi } from 'vitest';
-import { Alert } from './Alert';
+import { Flowbite } from '../Flowbite';
+
+import { Alert, AlertProps } from './Alert';
 
 describe.concurrent('Components / Alert', () => {
   describe.concurrent('A11y', () => {
@@ -12,6 +14,122 @@ describe.concurrent('Components / Alert', () => {
 
       expect(alert()).toBeInTheDocument();
     });
+
+    describe('Theme', () => {
+      it('should use custom `base` classes', () => {
+        const theme = {
+          alert: {
+            root: {
+              base: 'text-purple-100',
+            },
+          },
+        };
+        render(
+          <Flowbite theme={{ theme }}>
+            <TestAlert />
+          </Flowbite>,
+        );
+
+        expect(alert()).toHaveClass('text-purple-100');
+      });
+
+      it('should use custom `borderAccent` classes', () => {
+        const theme = {
+          alert: {
+            root: {
+              borderAccent: 'border-t-4 border-purple-500',
+            },
+          },
+        };
+        render(
+          <Flowbite theme={{ theme }}>
+            <TestAlert withBorderAccent />
+          </Flowbite>,
+        );
+
+        expect(alert()).toHaveClass('border-t-4 border-purple-500');
+      });
+
+      it('should use custom `wrapper` classes', () => {
+        const theme = {
+          alert: {
+            root: {
+              wrapper: 'flex items-center',
+            },
+          },
+        };
+        render(
+          <Flowbite theme={{ theme }}>
+            <TestAlert />
+          </Flowbite>,
+        );
+
+        expect(wrapper()).toHaveClass('flex items-center');
+      });
+
+      it('should use custom `color` classes', () => {
+        const theme = {
+          alert: {
+            root: {
+              color: {
+                info: 'text-purple-700 bg-purple-100 border-purple-500 dark:bg-purple-200 dark:text-purple-800',
+              },
+            },
+            closeButton: {
+              color: {
+                info: 'text-purple-500 hover:bg-purple-200 dark:text-purple-600 dark:hover:text-purple-300',
+              },
+            },
+          },
+        };
+        render(
+          <Flowbite theme={{ theme }}>
+            <TestAlert />
+          </Flowbite>,
+        );
+
+        expect(alert()).toHaveClass(
+          'text-purple-700 bg-purple-100 border-purple-500 dark:bg-purple-200 dark:text-purple-800',
+        );
+        expect(dismiss()).toHaveClass(
+          'text-purple-500 hover:bg-purple-200 dark:text-purple-600 dark:hover:text-purple-300',
+        );
+      });
+
+      it('should use custom `icon`', () => {
+        const theme = {
+          alert: {
+            root: {
+              icon: 'alert-custom-icon',
+            },
+          },
+        };
+        render(
+          <Flowbite theme={{ theme }}>
+            <TestAlert icon={HiHeart} />
+          </Flowbite>,
+        );
+
+        expect(icon()).toHaveClass('alert-custom-icon');
+      });
+
+      it('should show custom `rounded` class', () => {
+        const theme = {
+          alert: {
+            root: {
+              rounded: 'rounded',
+            },
+          },
+        };
+        render(
+          <Flowbite theme={{ theme }}>
+            <TestAlert />
+          </Flowbite>,
+        );
+
+        expect(alert()).toHaveClass('rounded');
+      });
+    });
   });
 
   describe.concurrent('Keyboard interactions', () => {
@@ -45,11 +163,12 @@ describe.concurrent('Components / Alert', () => {
   });
 });
 
-const TestAlert: FC = () => {
+const TestAlert: FC<AlertProps> = (props: AlertProps) => {
   const [isDismissed, setDismissed] = useState(false);
 
   return (
     <Alert
+      {...props}
       additionalContent={
         <>
           <div className="mt-2 mb-4 text-sm text-blue-700 dark:text-blue-800">
@@ -86,4 +205,8 @@ const TestAlert: FC = () => {
 
 const alert = () => screen.getByRole('alert');
 
+const wrapper = () => screen.getByTestId('flowbite-alert-wrapper');
+
+const icon = () => screen.getByTestId('flowbite-alert-icon');
+
 const dismiss = () => screen.getByLabelText('Dismiss');
diff --git a/src/lib/components/Alert/Alert.tsx b/src/lib/components/Alert/Alert.tsx
@@ -64,8 +64,8 @@ export const Alert: FC<AlertProps> = ({
       )}
       role="alert"
     >
-      <div className={theme.root.wrapper}>
-        {Icon && <Icon className={theme.root.icon} />}
+      <div className={theme.root.wrapper} data-testid="flowbite-alert-wrapper">
+        {Icon && <Icon className={theme.root.icon} data-testid="flowbite-alert-icon" />}
         <div>{children}</div>
         {typeof onDismiss === 'function' && (
           <button