From 3c5bf0caf585dcc66a919311e7051ea5aa36fa61 Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Fri, 22 Mar 2024 13:15:06 +0400 Subject: [PATCH 1/7] test: added test cases for toggle switch component --- .../__test__/ToggleSwitch.spec.tsx | 65 +++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx diff --git a/src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx b/src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx new file mode 100644 index 00000000..5349332e --- /dev/null +++ b/src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx @@ -0,0 +1,65 @@ +import React from 'react'; +import { render, fireEvent } from '@testing-library/react'; +import { ToggleSwitch } from '..'; + +describe('ToggleSwitch Component', () => { + + it('handles onChange event correctly', () => { + const onChange = jest.fn(); + const { getByRole } = render(); + const toggleSwitch = getByRole('checkbox'); + fireEvent.click(toggleSwitch); + expect(onChange).toHaveBeenCalledTimes(1); + }); + + it('displays correct checked state based on value prop', () => { + const onChange = jest.fn(); + const { getByRole, rerender } = render(); + let toggleSwitch = getByRole('checkbox'); + expect(toggleSwitch).not.toBeChecked(); + + rerender(); + toggleSwitch = getByRole('checkbox'); + expect(toggleSwitch).toBeChecked(); + }); + + it('applies wrapperClassName and className correctly', () => { + const onChange = jest.fn(); + const { container } = render( + + ); + const wrapper = container.querySelector('.deriv-toggle-switch.wrapper-class'); + expect(wrapper).toBeInTheDocument(); + const input = wrapper?.querySelector('input'); + expect(input).toHaveClass('custom-class'); + }); + + it('applies wrapperStyle and style correctly', () => { + const onChange = jest.fn(); + const { container } = render( + + ); + const input = container.querySelector('.deriv-toggle-switch input'); + expect(input).toHaveStyle({ fontSize: '16px' }); + const label = input?.parentElement; + expect(label).toHaveStyle({ backgroundColor: 'red' }); + }); + + it('defaults to unchecked when no value prop is provided', () => { + const onChange = jest.fn(); + const { getByRole } = render(); + const toggleSwitch = getByRole('checkbox'); + expect(toggleSwitch).not.toBeChecked(); + }); + +}); From 87aedc68bf24301c56a75a2eccdb369c217a3b12 Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Mon, 25 Mar 2024 10:28:45 +0400 Subject: [PATCH 2/7] test: added new test cases --- .../__test__/ToggleSwitch.spec.tsx | 53 +++++++++++-------- 1 file changed, 32 insertions(+), 21 deletions(-) diff --git a/src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx b/src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx index 5349332e..34e0b0b2 100644 --- 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( + + ); + 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(); - 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(); - let toggleSwitch = getByRole('checkbox'); + let toggleSwitch = getByRole("checkbox"); expect(toggleSwitch).not.toBeChecked(); rerender(); - 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( { 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( ); - 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(); - const toggleSwitch = getByRole('checkbox'); + const toggleSwitch = getByRole("checkbox"); expect(toggleSwitch).not.toBeChecked(); }); From 76dc3728d62c1f0ad2906c3639defc41ae1f43ba Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Tue, 26 Mar 2024 11:36:15 +0400 Subject: [PATCH 3/7] test: added new test case for toggle switch --- .../__test__/ToggleSwitch.spec.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx b/src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx index 34e0b0b2..392b06c3 100644 --- a/src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx +++ b/src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx @@ -1,18 +1,24 @@ import React from "react"; -import { render, fireEvent,screen } from "@testing-library/react"; +import { render, fireEvent } from "@testing-library/react"; import { ToggleSwitch } from ".."; describe("ToggleSwitch Component", () => { - fit("checks if value has been set to false before firing event and true after firing event", () => { - const onChange = jest.fn() - const { getByRole } = render( - + it("checks if value has been set to false before firing event and true after firing event", () => { + let isChecked =false; + const onChange = jest.fn(() => { + isChecked = !isChecked; // Toggle isChecked when onChange is called + console.log(isChecked,"value") + }); + const { getByRole,rerender } = render( + ); const toggleSwitch = getByRole("checkbox"); - screen.debug(); + expect(toggleSwitch).not.toBeChecked(); fireEvent.click(toggleSwitch); + rerender(); expect(onChange).toHaveBeenCalledTimes(1); + expect(toggleSwitch).toBeChecked(); }); it("should render and function properly with default Props", () => { From 72a87ed96f4e61de40601fc9ecb4240869990e5f Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Tue, 26 Mar 2024 11:39:38 +0400 Subject: [PATCH 4/7] test: added new test case for toggle switch --- src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx b/src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx index 392b06c3..e9378964 100644 --- a/src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx +++ b/src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx @@ -7,7 +7,7 @@ describe("ToggleSwitch Component", () => { it("checks if value has been set to false before firing event and true after firing event", () => { let isChecked =false; const onChange = jest.fn(() => { - isChecked = !isChecked; // Toggle isChecked when onChange is called + isChecked = !isChecked; console.log(isChecked,"value") }); const { getByRole,rerender } = render( From 5bd2dbbab576a25d62aa8a07735933c97ecaf661 Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Tue, 26 Mar 2024 11:51:34 +0400 Subject: [PATCH 5/7] test: added new test case for toggle switch --- stories/Badge.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stories/Badge.stories.tsx b/stories/Badge.stories.tsx index 180a9d03..80726526 100644 --- a/stories/Badge.stories.tsx +++ b/stories/Badge.stories.tsx @@ -81,7 +81,7 @@ export const ContainedPurpleRounded: Story = { }; export const ContainedRed: Story = { - name: "Contained (Yellow)", + name: "Contained (Red)", args: { ...meta.args, color: "danger", From 6adf583cac661515d143321b2736ed0af582c767 Mon Sep 17 00:00:00 2001 From: shayan khaleghparast Date: Mon, 1 Apr 2024 11:41:44 +0800 Subject: [PATCH 6/7] refactor: refactored toggleSwitch component --- .../__test__/ToggleSwitch.spec.tsx | 66 +++++++------------ src/components/ToggleSwitch/index.tsx | 62 +++++++++++------ stories/ToggleSwitch.stories.ts | 7 +- 3 files changed, 66 insertions(+), 69 deletions(-) diff --git a/src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx b/src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx index e9378964..249c06ac 100644 --- a/src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx +++ b/src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx @@ -1,51 +1,42 @@ import React from "react"; -import { render, fireEvent } from "@testing-library/react"; +import { render } from "@testing-library/react"; import { ToggleSwitch } from ".."; +import userEvent from "@testing-library/user-event"; describe("ToggleSwitch Component", () => { - - it("checks if value has been set to false before firing event and true after firing event", () => { - let isChecked =false; - const onChange = jest.fn(() => { - isChecked = !isChecked; - console.log(isChecked,"value") - }); - const { getByRole,rerender } = render( - - ); + it("should renders with correct value passed as prop", () => { + const { getByRole, rerender } = render(); const toggleSwitch = getByRole("checkbox"); - expect(toggleSwitch).not.toBeChecked(); - fireEvent.click(toggleSwitch); - rerender(); - expect(onChange).toHaveBeenCalledTimes(1); expect(toggleSwitch).toBeChecked(); + rerender(); + expect(toggleSwitch).not.toBeChecked(); }); - it("should render and function properly with default Props", () => { - const onChange = jest.fn(); - const { getByRole } = render(); + it("should be set to false when no value prop is provided", () => { + const { getByRole } = render(); const toggleSwitch = getByRole("checkbox"); - fireEvent.click(toggleSwitch); - expect(onChange).toHaveBeenCalledTimes(1); + expect(toggleSwitch).not.toBeChecked(); }); - - it("displays correct checked state based on value prop", () => { - const onChange = jest.fn(); - const { getByRole, rerender } = render(); - let toggleSwitch = getByRole("checkbox"); + it("should update the value when user clicks on it", async () => { + const { getByRole } = render(); + const toggleSwitch = getByRole("checkbox"); expect(toggleSwitch).not.toBeChecked(); - - rerender(); - toggleSwitch = getByRole("checkbox"); + await userEvent.click(toggleSwitch); expect(toggleSwitch).toBeChecked(); }); - it("applies wrapperClassName and className correctly", () => { - const onChange = jest.fn(); + it("should call the onChange prop when user clicks on it", async () => { + const mockedOnChange = jest.fn(); + const { getByRole } = render(); + const toggleSwitch = getByRole("checkbox"); + await userEvent.click(toggleSwitch); + expect(mockedOnChange).toHaveBeenCalled(); + }); + + + it("should apply wrapperClassName and className correctly", () => { const { container } = render( @@ -57,11 +48,8 @@ describe("ToggleSwitch Component", () => { }); it("applies wrapperStyle and style correctly", () => { - const onChange = jest.fn(); const { container } = render( @@ -71,12 +59,4 @@ describe("ToggleSwitch Component", () => { const label = input?.parentElement; expect(label).toHaveStyle({ backgroundColor: "red" }); }); - - it("defaults to unchecked when no value prop is provided", () => { - const onChange = jest.fn(); - const { getByRole } = render(); - const toggleSwitch = getByRole("checkbox"); - expect(toggleSwitch).not.toBeChecked(); - }); - }); diff --git a/src/components/ToggleSwitch/index.tsx b/src/components/ToggleSwitch/index.tsx index ebdebe6a..97bba2b9 100644 --- a/src/components/ToggleSwitch/index.tsx +++ b/src/components/ToggleSwitch/index.tsx @@ -1,11 +1,11 @@ -import React, { ChangeEvent, forwardRef } from "react"; +import React, { ChangeEvent, forwardRef, useEffect, useState } from "react"; import clsx from "clsx"; import { Input } from "../Input"; import "./ToggleSwitch.scss"; interface ToggleSwitchProps { - onChange: (event: ChangeEvent) => void; - value: boolean; + onChange?: (event: ChangeEvent) => void; + value?: boolean; wrapperClassName?: React.ComponentProps["wrapperClassName"]; className?: React.ComponentProps["className"]; wrapperStyle?: React.CSSProperties; @@ -14,22 +14,44 @@ interface ToggleSwitchProps { export const ToggleSwitch = forwardRef( ( - { onChange, value, wrapperClassName, className, wrapperStyle, style }, + { + onChange, + value = false, + wrapperClassName, + className, + wrapperStyle, + style, + }, ref, - ) => ( - - ), + ) => { + const [isChecked, setIsChecked] = useState(value); + + useEffect(() => { + if (value !== undefined) { + setIsChecked(value); + } + }, [value]); + + const onClickHandler = (event: ChangeEvent) => { + setIsChecked(!isChecked); + onChange?.(event); + }; + + return ( + + ); + }, ); diff --git a/stories/ToggleSwitch.stories.ts b/stories/ToggleSwitch.stories.ts index 21d402c3..e688a354 100644 --- a/stories/ToggleSwitch.stories.ts +++ b/stories/ToggleSwitch.stories.ts @@ -5,6 +5,7 @@ import { ToggleSwitch } from "../src/components/ToggleSwitch"; const meta = { title: "Components/ToggleSwitch", component: ToggleSwitch, + tags: ["autodocs"], args: { onChange: action("ToggleSwitch changed"), value: false, @@ -22,9 +23,3 @@ export const Default: Story = { }, }; -export const Checked: Story = { - args: { - ...Default.args, - value: true, - }, -}; From d1b829bdcfcb34cf833adfe2a100cbe99e0e9956 Mon Sep 17 00:00:00 2001 From: yaswanth-deriv Date: Mon, 1 Apr 2024 10:06:56 +0400 Subject: [PATCH 7/7] refactor: revert these changes --- stories/Badge.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stories/Badge.stories.tsx b/stories/Badge.stories.tsx index 80726526..180a9d03 100644 --- a/stories/Badge.stories.tsx +++ b/stories/Badge.stories.tsx @@ -81,7 +81,7 @@ export const ContainedPurpleRounded: Story = { }; export const ContainedRed: Story = { - name: "Contained (Red)", + name: "Contained (Yellow)", args: { ...meta.args, color: "danger",