[VuLe] Pull request for Mana do

package.json

@@ -12,7 +12,10 @@
     "cross-env": "^7.0.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-icons": "^4.3.1",
     "react-scripts": "4.0.3",
+    "react-toastify": "^9.0.1",
+    "sass": "^1.51.0",
     "shortid": "^2.2.15",
     "typescript": "4.5.3"
   },
@@ -39,6 +42,10 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/dom": "^8.11.1",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "12.1.2",
+    "@testing-library/user-event": "^13.5.0",
     "@types/shortid": "^0.0.29"
   }
 }

src/App.scss

@@ -0,0 +1,17 @@
+.App {
+  text-align: center;
+  display: flex;
+  justify-content: center;
+}
+
+input {
+  border: none;
+  outline: none;
+  padding: 0 12px;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}
+
+input:focus {
+  box-shadow: 1px 0 9px rgba(0, 0, 0, 0.25);
+}

src/App.tsx

@@ -1,8 +1,7 @@
-import React from 'react';
-
-import ToDoPage from './ToDoPage';
-
-import './App.css';
+import { ToDoPage } from "containers";
+import React from "react";
+import "react-toastify/dist/ReactToastify.css";
+import "./App.scss";
 
 function App() {
   return (

src/components/button/Button.tsx

@@ -0,0 +1,35 @@
+import React, {
+  ButtonHTMLAttributes,
+  FC,
+  memo,
+  MouseEventHandler,
+} from "react";
+import "./styles.scss";
+
+export interface IButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string;
+  disabled?: boolean;
+  onClick: MouseEventHandler<HTMLButtonElement> | undefined;
+}
+
+const Button: FC<IButtonProps> = ({
+  className,
+  children,
+  disabled,
+  onClick,
+  ...props
+}) => {
+  return (
+    <button
+      className={`btn-todo ${className ? className : ""}`}
+      onClick={onClick}
+      disabled={disabled}
+      data-testid="button"
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default memo(Button);

src/components/button/__test__/Button.test.tsx

@@ -0,0 +1,55 @@
+import { render, RenderResult } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+import { getElementByTestId } from "utils/testUtils";
+import Button, { IButtonProps } from "../Button";
+
+const onClickAction = jest.fn();
+
+const renderComponent = ({ ...props }: IButtonProps): RenderResult => {
+  return render(<Button {...props} />);
+};
+
+describe("<Button /> rendering", () => {
+  it("should match snapshot", () => {
+    const wrapper = renderComponent({
+      onClick: onClickAction,
+    });
+    expect(wrapper.container).toMatchSnapshot();
+  });
+
+  it("should render correcly", () => {
+    renderComponent({
+      onClick: onClickAction,
+    });
+    const element = getElementByTestId("button");
+    expect(element).toBeInTheDocument();
+  });
+
+  it("should render a button with the default class", () => {
+    renderComponent({
+      onClick: onClickAction,
+    });
+    const element = getElementByTestId("button");
+    expect(element).toHaveClass("btn-todo");
+  });
+});
+
+describe("<Button /> interacting", () => {
+  it("should render a button clickable", () => {
+    renderComponent({
+      onClick: onClickAction,
+    });
+    const element = getElementByTestId("button");
+    expect(element).not.toBeDisabled();
+  });
+
+  it("should handle onClick when clicked", () => {
+    renderComponent({
+      onClick: onClickAction,
+    });
+    const element = getElementByTestId("button");
+    userEvent.click(element);
+    expect(onClickAction).toHaveBeenCalled();
+  });
+});

src/components/button/__test__/__snapshots__/Button.test.tsx.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Button /> rendering should match snapshot 1`] = `
+<div>
+  <button
+    class="btn-todo "
+    data-testid="button"
+  />
+</div>
+`;

src/components/button/index.ts

@@ -0,0 +1 @@
+export { default as Button } from "./Button";