Merge pull request #3 from lastcode802/feature/unit_Testing

Feature/unit testing

README.md

@@ -3,8 +3,10 @@
 </p>
 
 <h1 align="center">lastcode802</h1>
+<p align="center">
   <img src="https://res.cloudinary.com/lastshop802/image/upload/v1667208786/ezgif.com-gif-maker_4_or7eb9.gif" alt="MUI logo">
-
+</p>
+
 # Glasses Virtual Try-on Widget
 
 

package.json

@@ -43,13 +43,24 @@
     "react_build": "react-scripts build",
     "start_publish": "np --yolo --any-branch",
     "build": "tsc --build ./tsconfig.json",
-    "test": "react-scripts test",
+    "test": "react-scripts test --coverage ./src",
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook -s public",
     "predeploy": "npm run build-storybook",
     "deploy-storybook": "gh-pages -d storybook-static"
   },
+  "jest": {
+    "transformIgnorePatterns": [
+      "node_modules/(?!(spacetime)/)",
+      "node_modules/(?!foo/)",
+      "node_modules/(?!bar/)"
+    ],
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "/src/stories/"
+    ]
+  },
   "eslintConfig": {
     "extends": [
       "react-app",

src/components/ControlButton/index.test.tsx

@@ -0,0 +1,74 @@
+import { render, fireEvent } from "@testing-library/react";
+import React from "react";
+import ControlButton, { GlassArBtnProps } from ".";
+
+describe("ThreedView", () => {
+  let props: GlassArBtnProps;
+  beforeEach(() => {
+    props = {
+      backgroundColor: "red",
+      color: "blue",
+      onClick: jest.fn(),
+      className: "test",
+      children: "test",
+    };
+  });
+
+  describe("ThreedView Button Render", () => {
+    it("Add a Button", () => {
+      const { container } = render(<ControlButton {...props} />);
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      expect(container.querySelector(".JeelizVTOWidgetButton")).toBeTruthy();
+    });
+  });
+  describe("ThreedView Button Call", () => {
+    it("Call Button", () => {
+      const { container } = render(<ControlButton {...props} />);
+      // eslint-disable-next-line testing-library/prefer-screen-queries, testing-library/no-container, testing-library/no-node-access
+      const button: any = container.querySelector(".JeelizVTOWidgetButton");
+      fireEvent.click(button);
+      expect(props.onClick).toHaveBeenCalled();
+    });
+  });
+  describe("ThreedView Button Click", () => {
+    it("Click Button", () => {
+      const { container } = render(<ControlButton {...props} />);
+      // eslint-disable-next-line testing-library/prefer-screen-queries, testing-library/no-container, testing-library/no-node-access
+      const button: any = container.querySelector(".JeelizVTOWidgetButton");
+      fireEvent.click(button);
+      expect(props.onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+  describe("ThreedView Button Snap", () => {
+    it("Snap Button", () => {
+      const { container } = render(<ControlButton {...props} />);
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(container.firstChild).toMatchInlineSnapshot(`
+        <button
+          class="JeelizVTOWidgetButton test"
+          style="background-color: red; color: blue;"
+        >
+          test
+        </button>
+      `);
+    });
+    it("Snap Button props change", () => {
+      props.backgroundColor = "black";
+      props.color = "white";
+      props.className = "checkClass";
+      // eslint-disable-next-line testing-library/no-node-access
+      props.children = "model btn";
+
+      const { container } = render(<ControlButton {...props} />);
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(container.firstChild).toMatchInlineSnapshot(`
+        <button
+          class="JeelizVTOWidgetButton checkClass"
+          style="background-color: black; color: white;"
+        >
+          model btn
+        </button>
+      `);
+    });
+  });
+});

src/components/ControlButton/index.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import './index.css';
-interface Props {
+export interface GlassArBtnProps {
     backgroundColor?: string;
     color?: string;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     className?: string;
     children?: React.ReactNode;
 }
 
-const ControlButton: React.FC<Props>  = (props) => {
+const ControlButton: React.FC<GlassArBtnProps>  = (props) => {
     const { onClick, className, children, backgroundColor, color } = props;
   return (
     <button

src/components/GlassArView/index.test.tsx

@@ -0,0 +1,28 @@
+import { render } from "@testing-library/react";
+import React from "react";
+import GlassArView, { GlassArViewProps } from ".";
+
+
+describe("ThreedView", () => {
+    let props: GlassArViewProps;
+    beforeEach(() => {
+      props = {
+        modelname: 'rayban_aviator_or_vertFlash',
+        canvaswidth: 500,
+        canvasheight: 500,
+        buttonFontColor: 'white',
+        buttonBackgroundColor: '#FFE5B4'
+      };
+    });
+
+    describe("ThreedView Button Render", () => {
+      it("Add a Button", () => {
+        const { container } = render(<GlassArView {...props} />);
+        // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+        expect(container.firstChild).toMatchInlineSnapshot()
+
+      });
+    });
+
+  });
+

src/components/GlassArView/index.tsx

@@ -140,7 +140,7 @@ export function GlassArView(this: any, props: GlassArViewProps) {
               </ControlButton>
             </div>
              <div className='JeelizVTOWidgetControls JeelizVTOWidgetChangeModelContainer'>
-             <ControlButton color={buttonFontColor} backgroundColor={buttonBackgroundColor} onClick={SetglassesModel.bind(this, ismodalName)}>Model 1</ControlButton>
+             <ControlButton color={buttonFontColor} backgroundColor={buttonBackgroundColor} onClick={SetglassesModel.bind(this, ismodalName)}>Model </ControlButton>
            </div>
             </>
           )