From d4d22dfa9b68d23513d6d9d6b5618d3e558122a5 Mon Sep 17 00:00:00 2001
From: Jyotsna Mehta <53934353+j24m@users.noreply.github.com>
Date: Thu, 5 Oct 2023 10:42:03 +0530
Subject: [PATCH] feat/fix: Button component with tests and a few minor fixes
 (#22)

* feat/fix: Button component with tests and a few minor fixes

* Refactor : Improved tests and removed commented code

* Refactor : test case

* Refactor : default props, test

* Refactor : added disabled prop to button component

---------

Co-authored-by: Sunny Sahsi <sahsisunny@gmail.com>
---
 __tests__/components/Button.test.tsx | 38 ++++++++++++++++++++++++++++
 public/assets/icons/add.tsx          |  2 +-
 public/assets/icons/copy.tsx         |  6 ++---
 src/components/Button/index.tsx      | 24 ++++++++++++++++++
 src/components/Navbar/Navbar.tsx     |  2 +-
 src/pages/dashboard/index.js         | 18 +++++++------
 src/pages/login/index.js             |  7 ++---
 7 files changed, 81 insertions(+), 16 deletions(-)
 create mode 100644 __tests__/components/Button.test.tsx
 create mode 100644 src/components/Button/index.tsx

diff --git a/__tests__/components/Button.test.tsx b/__tests__/components/Button.test.tsx
new file mode 100644
index 0000000..87a4e91
--- /dev/null
+++ b/__tests__/components/Button.test.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Button } from '@/components/Button';
+Button;
+
+describe('Button', () => {
+    it('should render Button', () => {
+        const handleOnClickMock = jest.fn();
+        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}
+            >
+                Generate
+            </Button>
+        );
+        const buttonElement = getByRole('button');
+        expect(buttonElement).toHaveAttribute('type', 'button');
+        expect(buttonElement).toHaveTextContent('Generate');
+    });
+
+    test('should render button with the type submit', () => {
+        const handleOnClickMock = jest.fn();
+        const { getByRole } = render(
+            <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}
+            >
+                Log in
+            </Button>
+        );
+
+        const buttonElement = getByRole('button');
+        expect(buttonElement).toHaveAttribute('type', 'submit');
+    });
+});
diff --git a/public/assets/icons/add.tsx b/public/assets/icons/add.tsx
index 69044fa..4f831de 100644
--- a/public/assets/icons/add.tsx
+++ b/public/assets/icons/add.tsx
@@ -1,7 +1,7 @@
 const AddIcon = () => (
     <svg width="30px" height="30px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
         <title>Create new</title>
-        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
             <g id="Icon-Set-Filled" transform="translate(-466.000000, -1089.000000)" fill="#000000">
                 <path
                     d="M488,1106 L483,1106 L483,1111 C483,1111.55 482.553,1112 482,1112 C481.447,1112 481,1111.55 481,1111 L481,1106 L476,1106 C475.447,1106 475,1105.55 475,1105 C475,1104.45 475.447,1104 476,1104 L481,1104 L481,1099 C481,1098.45 481.447,1098 482,1098 C482.553,1098 483,1098.45 483,1099 L483,1104 L488,1104 C488.553,1104 489,1104.45 489,1105 C489,1105.55 488.553,1106 488,1106 L488,1106 Z M482,1089 C473.163,1089 466,1096.16 466,1105 C466,1113.84 473.163,1121 482,1121 C490.837,1121 498,1113.84 498,1105 C498,1096.16 490.837,1089 482,1089 L482,1089 Z"
diff --git a/public/assets/icons/copy.tsx b/public/assets/icons/copy.tsx
index 276fd82..1730ef3 100644
--- a/public/assets/icons/copy.tsx
+++ b/public/assets/icons/copy.tsx
@@ -1,10 +1,10 @@
 const CopyIcon = () => (
     <svg width="30px" height="30px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
         <title>Copy</title>
-        <g clip-path="url(#a)">
+        <g clipPath="url(#a)">
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M8 5h7.795c1.115 0 1.519.116 1.926.334.407.218.727.538.945.945.218.407.334.811.334 1.926V16a1 1 0 1 0 2 0V8.128c0-1.783-.186-2.43-.534-3.082a3.635 3.635 0 0 0-1.512-1.512C18.302 3.186 17.655 3 15.872 3H8a1 1 0 0 0 0 2zm7.721 2.334C15.314 7.116 14.91 7 13.795 7h-7.59c-1.115 0-1.519.116-1.926.334a2.272 2.272 0 0 0-.945.945C3.116 8.686 3 9.09 3 10.205v7.59c0 1.114.116 1.519.334 1.926.218.407.538.727.945.945.407.218.811.334 1.926.334h7.59c1.114 0 1.519-.116 1.926-.334.407-.218.727-.538.945-.945.218-.407.334-.811.334-1.926v-7.59c0-1.115-.116-1.519-.334-1.926a2.272 2.272 0 0 0-.945-.945z"
                 fill="#000000"
             />
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
new file mode 100644
index 0000000..b152099
--- /dev/null
+++ b/src/components/Button/index.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+interface ButtonProps {
+    type?: 'button' | 'submit' | 'reset';
+    className: string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    children: React.ReactNode;
+    disabled?: boolean;
+}
+
+const Button: React.FC<ButtonProps> = ({ type, className, onClick, children, disabled }) => {
+    return (
+        <button type={type} className={className} onClick={onClick} disabled={disabled}>
+            {children}
+        </button>
+    );
+};
+
+Button.defaultProps = {
+    type: 'button',
+    className: 'w-full bg-gray-200 hover:bg-gray-300 ',
+};
+
+export { Button };
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
index 2052a2f..6fdf7b5 100644
--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -18,7 +18,7 @@ const Navbar: React.FC = () => {
                     URL Shortener
                 </a>
 
-                <ul className={'lg:flex space-x-4 '}>
+                <ul className={'lg:flex space-x-4'}>
                     <li className="relative group">
                         <button onClick={toggleDropdown} className="text-white focus:outline-none">
                             <div className="flex items-center space-x-2">
diff --git a/src/pages/dashboard/index.js b/src/pages/dashboard/index.js
index 7e52711..6f8952d 100644
--- a/src/pages/dashboard/index.js
+++ b/src/pages/dashboard/index.js
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import CopyIcon from '../../../public/assets/icons/copy';
 import AddIcon from '../../../public/assets/icons/add';
 import ReloadIcon from '../../../public/assets/icons/reload';
+import { Button } from '@/components/Button/index';
 
 const Dashboard = () => {
     const [url, getUrl] = useState('');
@@ -25,7 +26,8 @@ const Dashboard = () => {
                         getUrl(e.target.value);
                     }}
                 />
-                <button
+
+                <Button
                     className="w-full md:w-auto bg-gray-200 md:rounded-r-2xl px-4 md:px-8 py-4 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
                     onClick={() => {
                         const randomString = generateRandomString();
@@ -33,7 +35,7 @@ const Dashboard = () => {
                     }}
                 >
                     Generate
-                </button>
+                </Button>
             </div>
             <div className="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-1 m-4 w-[98%]">
                 <input
@@ -44,7 +46,7 @@ const Dashboard = () => {
                     value={shortUrl}
                 />
                 <div className="flex flex-row justify-center items-center space-x-1">
-                    <button
+                    <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={() => {
                             const randomString = generateRandomString();
@@ -52,23 +54,23 @@ const Dashboard = () => {
                         }}
                     >
                         <ReloadIcon />
-                    </button>
-                    <button
+                    </Button>
+                    <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={() => {
                             setUrl('');
                         }}
                     >
                         <AddIcon />
-                    </button>
-                    <button
+                    </Button>
+                    <Button
                         className="w-full md:w-auto bg-gray-200 md:rounded-r-2xl px-4 md:px-8 py-3 hover:bg-gray-300 mt-2 md:mt-0 md:rounded-none"
                         onClick={() => {
                             navigator.clipboard.writeText(shortUrl);
                         }}
                     >
                         <CopyIcon />
-                    </button>
+                    </Button>
                 </div>
             </div>
         </div>
diff --git a/src/pages/login/index.js b/src/pages/login/index.js
index 1a5457a..b3ac08b 100644
--- a/src/pages/login/index.js
+++ b/src/pages/login/index.js
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Button } from '@/components/Button/index';
 
 const LoginPage = () => {
     const [isValid, setIsValid] = useState(null);
@@ -80,12 +81,12 @@ const LoginPage = () => {
                                 Forgot password?
                             </a>
                         </div>
-                        <button
+                        <Button
                             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 "
+                            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
-                        </button>
+                        </Button>
                         <p className="text-sm font-light text-gray-500 dark:text-gray-400">
                             Don’t have an account yet?{' '}
                             <a href="#" className="font-medium text-primary-600 hover:underline dark:text-primary-500">