Skip to content

Commit a7c3eb8

Browse files
petrapazkresimir-coko
petrapaz
authored and
kresimir-coko
committed
3610 - add new tests
1 parent 5da623c commit a7c3eb8

File tree

1 file changed

+94
-38
lines changed

1 file changed

+94
-38
lines changed

‎client/src/components/Switch/Switch.test.tsx‎

Lines changed: 94 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -49,32 +49,55 @@ describe('Switch - Basic Rendering', () => {
4949
});
5050

5151
describe('Switch - Variants', () => {
52-
it('should render default variant with correct dimensions', () => {
52+
it('should render default variant with correct track dimensions', () => {
5353
render(<Switch checked={false} variant="default" />);
5454

5555
const switchElement = screen.getByRole('switch');
56-
expect(switchElement).toHaveClass('h-5 w-9 px-0.5');
56+
expect(switchElement).toHaveClass('h-5');
57+
expect(switchElement).toHaveClass('w-9');
58+
expect(switchElement).toHaveClass('px-0.5');
59+
expect(switchElement).toHaveClass('rounded-full');
60+
expect(switchElement).toHaveClass('border-0');
5761
});
5862

59-
it('should render small variant with correct dimensions', () => {
63+
it('should render default variant with correct thumb sizing via arbitrary variants', () => {
64+
render(<Switch checked={false} variant="default" />);
65+
66+
const switchElement = screen.getByRole('switch');
67+
// Check for arbitrary variant classes that style the thumb
68+
expect(switchElement.className).toMatch(/\[&>span\]:h-4/);
69+
expect(switchElement.className).toMatch(/\[&>span\]:w-4/);
70+
});
71+
72+
it('should render small variant with correct track dimensions', () => {
6073
render(<Switch checked={false} variant="small" />);
6174

6275
const switchElement = screen.getByRole('switch');
63-
expect(switchElement).toHaveClass('h-[14px] w-[26px] px-[1px]');
76+
expect(switchElement).toHaveClass('h-[14px]');
77+
expect(switchElement).toHaveClass('w-[26px]');
78+
expect(switchElement).toHaveClass('px-[1px]');
79+
expect(switchElement).toHaveClass('rounded-[7px]');
80+
expect(switchElement).toHaveClass('border-0');
6481
});
6582

66-
it('should use flex positioning for small variant when checked', () => {
67-
render(<Switch checked={true} variant="small" />);
83+
it('should render small variant with correct thumb sizing via arbitrary variants', () => {
84+
render(<Switch checked={false} variant="small" />);
6885

6986
const switchElement = screen.getByRole('switch');
70-
expect(switchElement).toHaveClass('justify-end');
87+
// Check for arbitrary variant classes for small thumb
88+
expect(switchElement.className).toMatch(/\[&>span\]:h-3/);
89+
expect(switchElement.className).toMatch(/\[&>span\]:w-3/);
7190
});
7291

73-
it('should render box variant with correct dimensions', () => {
92+
it('should render box variant with correct track dimensions', () => {
7493
render(<Switch checked={false} variant="box" />);
7594

7695
const switchElement = screen.getByRole('switch');
77-
expect(switchElement).toHaveClass('h-5 w-9 px-0.5');
96+
expect(switchElement).toHaveClass('h-5');
97+
expect(switchElement).toHaveClass('w-9');
98+
expect(switchElement).toHaveClass('px-0.5');
99+
expect(switchElement).toHaveClass('rounded-full');
100+
expect(switchElement).toHaveClass('border-0');
78101
});
79102

80103
it('should not show description in small variant', () => {
@@ -93,22 +116,33 @@ describe('Switch - Variants', () => {
93116
render(<Switch label="Box variant" variant="box" />);
94117

95118
const wrapper = screen.getByTestId('switch-wrapper');
96-
expect(wrapper).toHaveClass('rounded-lg border border-stroke-neutral-secondary');
97-
expect(wrapper).toHaveClass('w-fit p-3');
119+
expect(wrapper).toHaveClass('rounded-lg');
120+
expect(wrapper).toHaveClass('border');
121+
expect(wrapper).toHaveClass('border-stroke-neutral-secondary');
122+
expect(wrapper).toHaveClass('w-fit');
123+
expect(wrapper).toHaveClass('p-3');
98124
});
99125

100126
it('should apply checked styling to box variant', () => {
101127
render(<Switch checked={true} label="Box variant checked" variant="box" />);
102128

103129
const wrapper = screen.getByTestId('switch-wrapper');
104-
expect(wrapper).toHaveClass('bg-surface-brand-secondary border-stroke-brand-secondary');
130+
expect(wrapper).toHaveClass('bg-surface-brand-secondary');
131+
expect(wrapper).toHaveClass('border-stroke-brand-secondary');
105132
});
106133

107-
it('should render box variant with inner flex container', () => {
108-
const {container} = render(<Switch label="Box variant" variant="box" />);
134+
it('should apply correct border-radius to variants', () => {
135+
const {rerender} = render(<Switch checked={false} variant="default" />);
136+
let switchElement = screen.getByRole('switch');
137+
expect(switchElement).toHaveClass('rounded-full');
109138

110-
const innerDiv = container.querySelector('[data-testid="switch-wrapper"] > div');
111-
expect(innerDiv).toHaveClass('flex items-start gap-2');
139+
rerender(<Switch checked={false} variant="box" />);
140+
switchElement = screen.getByRole('switch');
141+
expect(switchElement).toHaveClass('rounded-full');
142+
143+
rerender(<Switch checked={false} variant="small" />);
144+
switchElement = screen.getByRole('switch');
145+
expect(switchElement).toHaveClass('rounded-[7px]');
112146
});
113147
});
114148

@@ -127,20 +161,22 @@ describe('Switch - Alignment', () => {
127161
expect(contentDiv).not.toHaveClass('flex-row-reverse');
128162
});
129163

130-
it('should render box variant with start alignment using conditional rendering', () => {
164+
it('should render box variant with start alignment', () => {
131165
const {container} = render(<Switch alignment="start" label="Box start" variant="box" />);
132166

133-
const contentDiv = container.querySelector('[data-testid="switch-wrapper"] > div');
134-
expect(contentDiv).not.toHaveClass('flex-row-reverse');
135-
expect(contentDiv).toHaveClass('flex items-start gap-2');
167+
const wrapper = container.querySelector('[data-testid="switch-wrapper"]');
168+
expect(wrapper).toHaveClass('flex');
169+
expect(wrapper).toHaveClass('items-start');
170+
expect(wrapper).toHaveClass('gap-2');
136171
});
137172

138-
it('should render box variant with end alignment using conditional rendering', () => {
173+
it('should render box variant with end alignment', () => {
139174
const {container} = render(<Switch alignment="end" label="Box end" variant="box" />);
140175

141-
const contentDiv = container.querySelector('[data-testid="switch-wrapper"] > div');
142-
expect(contentDiv).not.toHaveClass('flex-row-reverse');
143-
expect(contentDiv).toHaveClass('flex items-start gap-2');
176+
const wrapper = container.querySelector('[data-testid="switch-wrapper"]');
177+
expect(wrapper).toHaveClass('flex');
178+
expect(wrapper).toHaveClass('items-start');
179+
expect(wrapper).toHaveClass('gap-2');
144180
});
145181
});
146182

@@ -149,22 +185,37 @@ describe('Switch - States', () => {
149185
render(<Switch checked={true} />);
150186

151187
const switchElement = screen.getByRole('switch');
152-
expect(switchElement).toHaveClass('bg-surface-brand-primary');
188+
expect(switchElement).toHaveClass('data-[state=checked]:bg-surface-brand-primary');
153189
});
154190

155191
it('should apply unchecked background color', () => {
156192
render(<Switch checked={false} />);
157193

158194
const switchElement = screen.getByRole('switch');
159-
expect(switchElement).toHaveClass('bg-surface-neutral-secondary');
195+
expect(switchElement).toHaveClass('data-[state=unchecked]:bg-surface-neutral-secondary');
196+
});
197+
198+
it('should apply thumb background color via arbitrary variant', () => {
199+
render(<Switch checked={false} />);
200+
201+
const switchElement = screen.getByRole('switch');
202+
expect(switchElement.className).toMatch(/\[&>span\]:bg-surface-neutral-primary/);
203+
});
204+
205+
it('should apply thumb shadow via arbitrary variant', () => {
206+
render(<Switch checked={false} />);
207+
208+
const switchElement = screen.getByRole('switch');
209+
expect(switchElement.className).toMatch(/\[&>span\]:shadow-\[0_0_8px_rgba\(0,0,0,0\.15\)\]/);
160210
});
161211

162212
it('should handle disabled state', () => {
163213
render(<Switch disabled />);
164214

165215
const switchElement = screen.getByRole('switch');
166216
expect(switchElement).toBeDisabled();
167-
expect(switchElement).toHaveClass('disabled:cursor-not-allowed disabled:opacity-50');
217+
expect(switchElement).toHaveClass('disabled:cursor-not-allowed');
218+
expect(switchElement).toHaveClass('disabled:opacity-50');
168219
});
169220
});
170221

@@ -212,6 +263,7 @@ describe('Switch - Focus', () => {
212263
expect(switchElement).toHaveClass('focus-visible:outline-none');
213264
expect(switchElement).toHaveClass('focus-visible:ring-2');
214265
expect(switchElement).toHaveClass('focus-visible:ring-stroke-brand-focus');
266+
expect(switchElement).toHaveClass('focus-visible:ring-offset-0');
215267
});
216268
});
217269

@@ -247,14 +299,6 @@ describe('Switch - TypeScript Type Safety', () => {
247299
render(<Switch label="Small" variant="small" />);
248300
render(<Switch label="Box" variant="box" />);
249301
});
250-
251-
it('should not allow invalid variant values', () => {
252-
// @ts-expect-error - invalid variant value
253-
render(<Switch label="Invalid" variant="invalid-variant" />);
254-
255-
expect(screen.getByText('Invalid')).toBeInTheDocument();
256-
expect(screen.getByRole('switch')).toBeInTheDocument();
257-
});
258302
});
259303

260304
describe('alignment type safety', () => {
@@ -278,6 +322,15 @@ describe('Switch - className prop', () => {
278322
expect(switchElement).toHaveClass('bg-red-500');
279323
expect(switchElement).toHaveClass('rounded-full');
280324
});
325+
326+
it('should merge className with variant-specific classes', () => {
327+
render(<Switch checked={false} className="bg-red-500" variant="small" />);
328+
329+
const switchElement = screen.getByRole('switch');
330+
expect(switchElement).toHaveClass('bg-red-500');
331+
expect(switchElement).toHaveClass('h-[14px]');
332+
expect(switchElement).toHaveClass('rounded-[7px]');
333+
});
281334
});
282335

283336
describe('Switch - Event Handlers', () => {
@@ -345,16 +398,19 @@ describe('Switch - Combined Props', () => {
345398
expect(screen.getByText('Box description')).toBeInTheDocument();
346399
expect(screen.getByRole('switch')).toHaveAttribute('id', 'box-switch');
347400
expect(screen.getByRole('switch')).toHaveAttribute('aria-checked', 'true');
348-
expect(screen.getByTestId('switch-wrapper')).toHaveClass('rounded-lg border');
401+
expect(screen.getByTestId('switch-wrapper')).toHaveClass('rounded-lg');
402+
expect(screen.getByTestId('switch-wrapper')).toHaveClass('border');
349403
expect(screen.getByRole('switch')).toHaveClass('bg-red-500');
350404
});
351405

352406
it('should render small variant with label', () => {
353407
render(<Switch alignment="start" checked={false} label="Small Switch" variant="small" />);
354408

355409
expect(screen.getByText('Small Switch')).toBeInTheDocument();
356-
expect(screen.getByText('Small Switch')).toHaveClass('text-xs leading-4');
357-
expect(screen.getByRole('switch')).toHaveClass('h-[14px] w-[26px]');
410+
expect(screen.getByText('Small Switch')).toHaveClass('text-xs');
411+
expect(screen.getByText('Small Switch')).toHaveClass('leading-4');
412+
expect(screen.getByRole('switch')).toHaveClass('h-[14px]');
413+
expect(screen.getByRole('switch')).toHaveClass('w-[26px]');
358414
});
359415
});
360416

0 commit comments

Comments
 (0)