Skip to content

Commit 5e485ad

Browse files
one-communityone-community
authored
Merge pull request #3421 from OneCommunityGlobal/Dhrumil---Added-tests-cases-for-ToggleSwitch
Dhrumil-added-test-cases-ToggleSwitch
2 parents 3115104 + 5a059b0 commit 5e485ad

1 file changed

Lines changed: 207 additions & 0 deletions

File tree

‎src/components/UserProfile/UserProfileEdit/__tests__/ToggleSwitch.test.js‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
import React from 'react';
2+
import { render, screen, fireEvent } from '@testing-library/react';
3+
import ToggleSwitch from '../ToggleSwitch/ToggleSwitch';
4+
5+
describe('ToggleSwitch Component', () => {
6+
const mockHandleUserProfile = jest.fn();
7+
8+
beforeEach(() => {
9+
// Clear mock calls between tests
10+
mockHandleUserProfile.mockClear();
11+
});
12+
13+
describe('bluesquares switch type', () => {
14+
test('renders correctly when state is false', () => {
15+
render(
16+
<ToggleSwitch
17+
switchType="bluesquares"
18+
state={false}
19+
handleUserProfile={mockHandleUserProfile}
20+
/>
21+
);
22+
23+
const switchElement = screen.getByTestId('blue-switch');
24+
expect(switchElement).toBeInTheDocument();
25+
expect(switchElement).toBeChecked();
26+
});
27+
28+
test('calls handleUserProfile when toggled', () => {
29+
render(
30+
<ToggleSwitch
31+
switchType="bluesquares"
32+
state={true}
33+
handleUserProfile={mockHandleUserProfile}
34+
/>
35+
);
36+
37+
const switchElement = screen.getByTestId('blue-switch');
38+
fireEvent.click(switchElement);
39+
expect(mockHandleUserProfile).toHaveBeenCalledTimes(1);
40+
});
41+
42+
test('applies custom toggleClass when provided', () => {
43+
const { container } = render(
44+
<ToggleSwitch
45+
switchType="bluesquares"
46+
state={true}
47+
handleUserProfile={mockHandleUserProfile}
48+
toggleClass="custom-toggle"
49+
/>
50+
);
51+
52+
const divElement = container.querySelector('.blueSqare');
53+
expect(divElement).toHaveClass('custom-toggle');
54+
});
55+
56+
test('applies dark mode styling when darkMode is true', () => {
57+
render(
58+
<ToggleSwitch
59+
switchType="bluesquares"
60+
state={true}
61+
handleUserProfile={mockHandleUserProfile}
62+
darkMode={true}
63+
/>
64+
);
65+
66+
const switchElement = screen.getByTestId('blue-switch');
67+
expect(switchElement).toHaveClass('toggleDark');
68+
expect(switchElement).not.toHaveClass('toggle');
69+
});
70+
});
71+
72+
describe('email switch type', () => {
73+
test('renders correctly when state is false', () => {
74+
render(
75+
<ToggleSwitch
76+
switchType="email"
77+
state={false}
78+
handleUserProfile={mockHandleUserProfile}
79+
/>
80+
);
81+
82+
const switchElement = screen.getByTestId('email-switch');
83+
expect(switchElement).toBeInTheDocument();
84+
expect(switchElement).toBeChecked();
85+
});
86+
87+
test('calls handleUserProfile when toggled', () => {
88+
render(
89+
<ToggleSwitch
90+
switchType="email"
91+
state={true}
92+
handleUserProfile={mockHandleUserProfile}
93+
/>
94+
);
95+
96+
const switchElement = screen.getByTestId('email-switch');
97+
fireEvent.click(switchElement);
98+
expect(mockHandleUserProfile).toHaveBeenCalledTimes(1);
99+
});
100+
});
101+
102+
describe('email-subcription switch type', () => {
103+
test('renders correctly when state is false', () => {
104+
render(
105+
<ToggleSwitch
106+
switchType="email-subcription"
107+
state={false}
108+
handleUserProfile={mockHandleUserProfile}
109+
/>
110+
);
111+
112+
const switchElement = screen.getByTestId('email-subcription-switch');
113+
expect(switchElement).toBeInTheDocument();
114+
expect(switchElement).toBeChecked();
115+
});
116+
});
117+
118+
describe('phone switch type', () => {
119+
test('renders correctly when state is true', () => {
120+
render(
121+
<ToggleSwitch
122+
switchType="phone"
123+
state={true}
124+
handleUserProfile={mockHandleUserProfile}
125+
/>
126+
);
127+
128+
const switchElement = screen.getByTestId('phone-switch');
129+
expect(switchElement).toBeInTheDocument();
130+
});
131+
132+
test('renders correctly when state is false', () => {
133+
render(
134+
<ToggleSwitch
135+
switchType="phone"
136+
state={false}
137+
handleUserProfile={mockHandleUserProfile}
138+
/>
139+
);
140+
141+
const switchElement = screen.getByTestId('phone-switch');
142+
expect(switchElement).toBeInTheDocument();
143+
expect(switchElement).toBeChecked();
144+
});
145+
});
146+
147+
describe('visible switch type', () => {
148+
test('renders correctly when state is false', () => {
149+
render(
150+
<ToggleSwitch
151+
switchType="visible"
152+
state={false}
153+
handleUserProfile={mockHandleUserProfile}
154+
/>
155+
);
156+
157+
const switchElement = screen.getByTestId('visibility-switch');
158+
expect(switchElement).toBeInTheDocument();
159+
expect(switchElement).toBeChecked();
160+
});
161+
});
162+
163+
describe('bio switch type', () => {
164+
test('passes font styling props correctly', () => {
165+
const { container } = render(
166+
<ToggleSwitch
167+
switchType="bio"
168+
state="default"
169+
handleUserProfile={mockHandleUserProfile}
170+
fontSize="14px"
171+
fontColor="red"
172+
/>
173+
);
174+
175+
const switchSection = container.querySelector('div.switchSection');
176+
expect(switchSection).toHaveStyle({ fontSize: '14px', color: 'red' });
177+
});
178+
});
179+
180+
describe('active_members switch type', () => {
181+
test('renders correctly when state is false', () => {
182+
render(
183+
<ToggleSwitch
184+
switchType="active_members"
185+
state={false}
186+
handleUserProfile={mockHandleUserProfile}
187+
/>
188+
);
189+
190+
const switchElement = screen.getByTestId('active-switch');
191+
expect(switchElement).toBeInTheDocument();
192+
expect(switchElement).toBeChecked();
193+
});
194+
});
195+
196+
test('renders error message for invalid switch type', () => {
197+
render(
198+
<ToggleSwitch
199+
switchType="invalid"
200+
state={true}
201+
handleUserProfile={mockHandleUserProfile}
202+
/>
203+
);
204+
205+
expect(screen.getByText('ERROR: Toggle Switch.')).toBeInTheDocument();
206+
});
207+
});

0 commit comments

Comments
 (0)