Adding UTs for Button Filled (#124)

* Adding UTs for Button Filled

Signed-off-by: Sayan Mondal <[email protected]>

* Updated Unit Test Approach

Signed-off-by: Sayan Mondal <[email protected]>

* Removing redundant initialization

Signed-off-by: Sayan Mondal <[email protected]>

Author: S-ayanide

Diff for: package.json

@@ -89,6 +89,7 @@
     "@storybook/addons": "^6.3.0",
     "@storybook/react": "^6.3.0",
     "@storybook/theming": "^6.3.0",
+    "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^10.0.2",
     "@types/d3-array": "^2.3.0",
     "@types/jest": "^26.0.24",

Diff for: src/core/Button/ButtonFilled/__tests__/ButtonFilled.test.tsx

@@ -1,16 +1,36 @@
-import { render } from "@testing-library/react";
+import "@testing-library/jest-dom/extend-expect";
+import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 import { LitmusThemeProvider } from "../../../../theme";
 import { ButtonFilled } from "../ButtonFilled";
 
-describe("Button Filled Component", () => {
-  it("Renders", () => {
-    const { getByText } = render(
+let component: HTMLElement;
+let mockCallBack = jest.fn();
+
+beforeEach(() => {
+  render(
+    <LitmusThemeProvider>
       <LitmusThemeProvider>
-        <ButtonFilled onClick={() => {}}>Button Filled</ButtonFilled>
+        <ButtonFilled onClick={mockCallBack}>Button Filled</ButtonFilled>
       </LitmusThemeProvider>
-    );
+    </LitmusThemeProvider>
+  );
+
+  // Get Button Filled component
+  component = screen.getByText("Button Filled");
+});
+
+test("Renders", () => {
+  expect(component).toBeTruthy();
+});
+
+test("should be clickable", () => {
+  // Clicking once
+  fireEvent.click(component);
+  expect(mockCallBack.mock.calls.length).toEqual(1);
 
-    expect(getByText("Button Filled")).toBeTruthy();
-  });
+  // Clicking twice
+  fireEvent.click(component);
+  fireEvent.click(component);
+  expect(mockCallBack.mock.calls.length).toEqual(3); // Total three clicks registered on DOM
 });