Refactor : default props, test

Real-Dev-Squad · Oct 4, 2023 · 3d3fe84 · 3d3fe84
1 parent eee65d8
commit 3d3fe84
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 10 deletions.
diff --git a/__tests__/components/Button.test.tsx b/__tests__/components/Button.test.tsx
@@ -4,18 +4,20 @@ import { Button } from '@/components/Button';
 Button;
 
 describe('Button', () => {
-    it('should render', () => {
+    it('should render Button', () => {
         const handleOnClickMock = jest.fn();
-        const { container } = render(
+        const { getByRole } = render(
             <Button
                 type="button"
                 className="w-full md:w-auto bg-gray-200 px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
                 onClick={handleOnClickMock}
-                children="generate"
-            />
+            >
+                Generate
+            </Button>
         );
-        expect(container).toMatchSnapshot();
-        expect(container).toHaveTextContent('generate');
+        const buttonElement = getByRole('button');
+        expect(buttonElement).toHaveAttribute('type', 'button');
+        expect(buttonElement).toHaveTextContent('Generate');
     });
 
     test('should render button with the type submit', () => {
@@ -25,8 +27,9 @@ describe('Button', () => {
                 type="submit"
                 className="w-full md:w-auto bg-gray-200 px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
                 onClick={handleOnClickMock}
-                children="Log in"
-            ></Button>
+            >
+                Log in
+            </Button>
         );
 
         const buttonElement = getByRole('button');

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -4,7 +4,7 @@ interface ButtonProps {
     type?: 'button' | 'submit' | 'reset';
     className: string;
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    children: string;
+    children: React.ReactNode;
 }
 
 const Button: React.FC<ButtonProps> = ({ type, className, onClick, children }) => {
@@ -15,4 +15,9 @@ const Button: React.FC<ButtonProps> = ({ type, className, onClick, children }) =
     );
 };
 
+Button.defaultProps = {
+    type: 'button',
+    className: 'w-full bg-gray-200 hover:bg-gray-300 ',
+};
+
 export { Button };
diff --git a/src/pages/login/index.js b/src/pages/login/index.js
@@ -85,7 +85,7 @@ const LoginPage = () => {
                             type="submit"
                             className="w-full bg-gray-200 hover:bg-gray-300 text-dark focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
                         >
-                            Log in{' '}
+                            Log in
                         </Button>
                         <p className="text-sm font-light text-gray-500 dark:text-gray-400">
                             Don’t have an account yet?{' '}