test: added new test cases

deriv-com · Mar 25, 2024 · 87aedc6 · 87aedc6
1 parent c5902d3
commit 87aedc6
Showing 1 changed file with 32 additions and 21 deletions.
diff --git a/src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx b/src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx
@@ -1,29 +1,40 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { ToggleSwitch } from '..';
+import React from "react";
+import { render, fireEvent,screen } from "@testing-library/react";
+import { ToggleSwitch } from "..";
 
-describe('ToggleSwitch Component', () => {
+describe("ToggleSwitch Component", () => {
 
-    it('handles onChange event correctly', () => {
+    fit("checks if value has been set to false before firing event and true after firing event", () => {
+        const onChange = jest.fn()
+        const { getByRole } = render(
+            <ToggleSwitch onChange={onChange} value={false}/>
+        );
+        const toggleSwitch = getByRole("checkbox");
+        screen.debug();
+        fireEvent.click(toggleSwitch);
+        expect(onChange).toHaveBeenCalledTimes(1);
+    });
+
+    it("should render and function properly with default Props", () => {
         const onChange = jest.fn();
         const { getByRole } = render(<ToggleSwitch onChange={onChange} value={false} />);
-        const toggleSwitch = getByRole('checkbox');
+        const toggleSwitch = getByRole("checkbox");
         fireEvent.click(toggleSwitch);
         expect(onChange).toHaveBeenCalledTimes(1);
     });
 
-    it('displays correct checked state based on value prop', () => {
+    it("displays correct checked state based on value prop", () => {
         const onChange = jest.fn();
         const { getByRole, rerender } = render(<ToggleSwitch onChange={onChange} value={false} />);
-        let toggleSwitch = getByRole('checkbox');
+        let toggleSwitch = getByRole("checkbox");
         expect(toggleSwitch).not.toBeChecked();
 
         rerender(<ToggleSwitch onChange={onChange} value={true} />);
-        toggleSwitch = getByRole('checkbox');
+        toggleSwitch = getByRole("checkbox");
         expect(toggleSwitch).toBeChecked();
     });
 
-    it('applies wrapperClassName and className correctly', () => {
+    it("applies wrapperClassName and className correctly", () => {
         const onChange = jest.fn();
         const { container } = render(
             <ToggleSwitch
@@ -33,32 +44,32 @@ describe('ToggleSwitch Component', () => {
                 className="custom-class"
             />
         );
-        const wrapper = container.querySelector('.deriv-toggle-switch.wrapper-class');
+        const wrapper = container.querySelector(".deriv-toggle-switch.wrapper-class");
         expect(wrapper).toBeInTheDocument();
-        const input = wrapper?.querySelector('input');
-        expect(input).toHaveClass('custom-class');
+        const input = wrapper?.querySelector("input");
+        expect(input).toHaveClass("custom-class");
     });
 
-    it('applies wrapperStyle and style correctly', () => {
+    it("applies wrapperStyle and style correctly", () => {
         const onChange = jest.fn();
         const { container } = render(
             <ToggleSwitch
                 onChange={onChange}
                 value={false}
-                wrapperStyle={{ backgroundColor: 'red' }}
-                style={{ fontSize: '16px' }}
+                wrapperStyle={{ backgroundColor: "red" }}
+                style={{ fontSize: "16px" }}
             />
         );
-        const input = container.querySelector('.deriv-toggle-switch input');
-        expect(input).toHaveStyle({ fontSize: '16px' });
+        const input = container.querySelector(".deriv-toggle-switch input");
+        expect(input).toHaveStyle({ fontSize: "16px" });
         const label = input?.parentElement;
-        expect(label).toHaveStyle({ backgroundColor: 'red' });
+        expect(label).toHaveStyle({ backgroundColor: "red" });
     });
 
-    it('defaults to unchecked when no value prop is provided', () => {
+    it("defaults to unchecked when no value prop is provided", () => {
         const onChange = jest.fn();
         const { getByRole } = render(<ToggleSwitch onChange={onChange} value={false} />);
-        const toggleSwitch = getByRole('checkbox');
+        const toggleSwitch = getByRole("checkbox");
         expect(toggleSwitch).not.toBeChecked();
     });