Skip to content

Commit 4c29384

Browse files
git-nandorgit-nandor
committed
feat(many): add tests
1 parent ad15db3 commit 4c29384

File tree

8 files changed

+328
-0
lines changed

8 files changed

+328
-0
lines changed

‎packages/ui-buttons/src/ToggleButton/__tests__/ToggleButton.test.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,4 +197,59 @@ describe('<ToggleButton />', () => {
197197
expect(onClick).toHaveBeenCalledTimes(1)
198198
})
199199
})
200+
201+
describe('margin prop', () => {
202+
it('should apply margin with theme tokens', () => {
203+
const { container } = render(
204+
<div>
205+
<ToggleButton
206+
screenReaderLabel="test1"
207+
renderIcon={icon}
208+
renderTooltipContent="tooltip"
209+
status="unpressed"
210+
margin="medium"
211+
/>
212+
<ToggleButton
213+
screenReaderLabel="test2"
214+
renderIcon={icon}
215+
renderTooltipContent="tooltip"
216+
status="unpressed"
217+
margin="large"
218+
/>
219+
<ToggleButton
220+
screenReaderLabel="test3"
221+
renderIcon={icon}
222+
renderTooltipContent="tooltip"
223+
status="unpressed"
224+
margin="space4"
225+
/>
226+
<ToggleButton
227+
screenReaderLabel="test4"
228+
renderIcon={icon}
229+
renderTooltipContent="tooltip"
230+
status="unpressed"
231+
margin="small medium"
232+
/>
233+
</div>
234+
)
235+
236+
const allButtons = container.querySelectorAll('button')
237+
238+
const buttonMedium = allButtons[0] as HTMLElement
239+
const buttonMediumStyle = window.getComputedStyle(buttonMedium)
240+
const buttonLarge = allButtons[1] as HTMLElement
241+
const buttonLargeStyle = window.getComputedStyle(buttonLarge)
242+
const buttonSpace = allButtons[2] as HTMLElement
243+
const buttonSpaceStyle = window.getComputedStyle(buttonSpace)
244+
const buttonMixed = allButtons[3] as HTMLElement
245+
const buttonMixedStyle = window.getComputedStyle(buttonMixed)
246+
247+
// Note: ToggleButton passes margin to IconButton, which uses View component
248+
// View only accepts theme tokens, not custom CSS values
249+
expect(buttonMediumStyle.margin).toBe('1.5rem')
250+
expect(buttonLargeStyle.margin).toBe('2.25rem')
251+
expect(buttonSpaceStyle.margin).toBe('0.25rem')
252+
expect(buttonMixedStyle.margin).toBe('0.75rem 1.5rem')
253+
})
254+
})
200255
})

‎packages/ui-checkbox/src/Checkbox/__tests__/Checkbox.test.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -245,4 +245,33 @@ describe('<Checkbox />', () => {
245245
expect(axeCheck).toBe(true)
246246
})
247247
})
248+
249+
describe('margin prop', () => {
250+
it('should apply margin with custom CSS value and with tokens', () => {
251+
const { container } = render(
252+
<div>
253+
<Checkbox label="test1" margin="30px" />
254+
<Checkbox label="test2" margin="large" />
255+
<Checkbox label="test3" margin="space4" />
256+
<Checkbox label="test4" margin="small 20px" />
257+
</div>
258+
)
259+
260+
const allCheckboxes = container.querySelectorAll('[data-cid="Checkbox"]')
261+
262+
const checkboxCustom = allCheckboxes[0] as HTMLElement
263+
const checkboxCustomStyle = window.getComputedStyle(checkboxCustom)
264+
const checkboxLarge = allCheckboxes[1] as HTMLElement
265+
const checkboxLargeStyle = window.getComputedStyle(checkboxLarge)
266+
const checkboxSpace = allCheckboxes[2] as HTMLElement
267+
const checkboxSpaceStyle = window.getComputedStyle(checkboxSpace)
268+
const checkboxMixed = allCheckboxes[3] as HTMLElement
269+
const checkboxMixedStyle = window.getComputedStyle(checkboxMixed)
270+
271+
expect(checkboxCustomStyle.margin).toBe('30px')
272+
expect(checkboxLargeStyle.margin).toBe('2.25rem')
273+
expect(checkboxSpaceStyle.margin).toBe('0.25rem')
274+
expect(checkboxMixedStyle.margin).toBe('0.75rem 20px')
275+
})
276+
})
248277
})

‎packages/ui-checkbox/src/CheckboxGroup/__tests__/CheckboxGroup.test.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -233,4 +233,45 @@ describe('<CheckboxGroup />', () => {
233233
expect(group).not.toHaveAttribute('aria-invalid')
234234
})
235235
})
236+
237+
describe('margin prop', () => {
238+
it('should apply margin with custom CSS value and with tokens', () => {
239+
const { container } = render(
240+
<div>
241+
<CheckboxGroup name="group1" description="Group 1" margin="30px">
242+
<Checkbox label="Option 1" value="1" />
243+
</CheckboxGroup>
244+
<CheckboxGroup name="group2" description="Group 2" margin="large">
245+
<Checkbox label="Option 1" value="1" />
246+
</CheckboxGroup>
247+
<CheckboxGroup name="group3" description="Group 3" margin="small">
248+
<Checkbox label="Option 1" value="1" />
249+
</CheckboxGroup>
250+
<CheckboxGroup
251+
name="group4"
252+
description="Group 4"
253+
margin="small 20px"
254+
>
255+
<Checkbox label="Option 1" value="1" />
256+
</CheckboxGroup>
257+
</div>
258+
)
259+
260+
const allFieldsets = container.querySelectorAll('fieldset')
261+
262+
const fieldsetCustom = allFieldsets[0] as HTMLElement
263+
const fieldsetCustomStyle = window.getComputedStyle(fieldsetCustom)
264+
const fieldsetLarge = allFieldsets[1] as HTMLElement
265+
const fieldsetLargeStyle = window.getComputedStyle(fieldsetLarge)
266+
const fieldsetSmall = allFieldsets[2] as HTMLElement
267+
const fieldsetSmallStyle = window.getComputedStyle(fieldsetSmall)
268+
const fieldsetMixed = allFieldsets[3] as HTMLElement
269+
const fieldsetMixedStyle = window.getComputedStyle(fieldsetMixed)
270+
271+
expect(fieldsetCustomStyle.margin).toBe('30px')
272+
expect(fieldsetLargeStyle.margin).toBe('2.25rem')
273+
expect(fieldsetSmallStyle.margin).toBe('0.75rem')
274+
expect(fieldsetMixedStyle.margin).toBe('0.75rem 20px')
275+
})
276+
})
236277
})

‎packages/ui-form-field/src/FormFieldGroup/__tests__/FormFieldGroup.test.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,4 +177,41 @@ describe('<FormFieldGroup />', () => {
177177

178178
expect(axeCheck).toBe(true)
179179
})
180+
181+
describe('margin prop', () => {
182+
it('should apply margin with custom CSS value and with tokens', () => {
183+
const { container } = render(
184+
<div>
185+
<FormFieldGroup description="Group 1" margin="30px">
186+
<input />
187+
</FormFieldGroup>
188+
<FormFieldGroup description="Group 2" margin="large">
189+
<input />
190+
</FormFieldGroup>
191+
<FormFieldGroup description="Group 3" margin="space4">
192+
<input />
193+
</FormFieldGroup>
194+
<FormFieldGroup description="Group 4" margin="small 20px">
195+
<input />
196+
</FormFieldGroup>
197+
</div>
198+
)
199+
200+
const allFieldsets = container.querySelectorAll('fieldset')
201+
202+
const fieldsetCustom = allFieldsets[0] as HTMLElement
203+
const fieldsetCustomStyle = window.getComputedStyle(fieldsetCustom)
204+
const fieldsetLarge = allFieldsets[1] as HTMLElement
205+
const fieldsetLargeStyle = window.getComputedStyle(fieldsetLarge)
206+
const fieldsetSpace = allFieldsets[2] as HTMLElement
207+
const fieldsetSpaceStyle = window.getComputedStyle(fieldsetSpace)
208+
const fieldsetMixed = allFieldsets[3] as HTMLElement
209+
const fieldsetMixedStyle = window.getComputedStyle(fieldsetMixed)
210+
211+
expect(fieldsetCustomStyle.margin).toBe('30px')
212+
expect(fieldsetLargeStyle.margin).toBe('2.25rem')
213+
expect(fieldsetSpaceStyle.margin).toBe('0.25rem')
214+
expect(fieldsetMixedStyle.margin).toBe('0.75rem 20px')
215+
})
216+
})
180217
})

‎packages/ui-radio-input/src/RadioInput/__tests__/RadioInput.test.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -302,4 +302,40 @@ describe('<RadioInput />', () => {
302302
expect(axeCheck).toBe(true)
303303
})
304304
})
305+
306+
describe('margin prop', () => {
307+
it('should apply margin with custom CSS value and with tokens', () => {
308+
const { container } = render(
309+
<div>
310+
<RadioInput label="test1" value="val1" name="test" margin="30px" />
311+
<RadioInput label="test2" value="val2" name="test" margin="large" />
312+
<RadioInput label="test3" value="val3" name="test" margin="space4" />
313+
<RadioInput
314+
label="test4"
315+
value="val4"
316+
name="test"
317+
margin="small 20px"
318+
/>
319+
</div>
320+
)
321+
322+
const allRadioInputs = container.querySelectorAll(
323+
'[data-cid="RadioInput"]'
324+
)
325+
326+
const radioInputCustom = allRadioInputs[0] as HTMLElement
327+
const radioInputCustomStyle = window.getComputedStyle(radioInputCustom)
328+
const radioInputLarge = allRadioInputs[1] as HTMLElement
329+
const radioInputLargeStyle = window.getComputedStyle(radioInputLarge)
330+
const radioInputSpace = allRadioInputs[2] as HTMLElement
331+
const radioInputSpaceStyle = window.getComputedStyle(radioInputSpace)
332+
const radioInputMixed = allRadioInputs[3] as HTMLElement
333+
const radioInputMixedStyle = window.getComputedStyle(radioInputMixed)
334+
335+
expect(radioInputCustomStyle.margin).toBe('30px')
336+
expect(radioInputLargeStyle.margin).toBe('2.25rem')
337+
expect(radioInputSpaceStyle.margin).toBe('0.25rem')
338+
expect(radioInputMixedStyle.margin).toBe('0.75rem 20px')
339+
})
340+
})
305341
})

‎packages/ui-radio-input/src/RadioInputGroup/__tests__/RadioInputGroup.test.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,4 +230,45 @@ describe('<RadioInputGroup />', () => {
230230
expect(group).toHaveAttribute('aria-invalid', 'true')
231231
expect(group).toHaveAttribute('aria-errormessage', expect.anything())
232232
})
233+
234+
describe('margin prop', () => {
235+
it('should apply margin with custom CSS value and with tokens', () => {
236+
const { container } = render(
237+
<div>
238+
<RadioInputGroup name="group1" description="Group 1" margin="30px">
239+
<RadioInput label="Option 1" value="1" />
240+
</RadioInputGroup>
241+
<RadioInputGroup name="group2" description="Group 2" margin="large">
242+
<RadioInput label="Option 1" value="1" />
243+
</RadioInputGroup>
244+
<RadioInputGroup name="group3" description="Group 3" margin="space4">
245+
<RadioInput label="Option 1" value="1" />
246+
</RadioInputGroup>
247+
<RadioInputGroup
248+
name="group4"
249+
description="Group 4"
250+
margin="small 20px"
251+
>
252+
<RadioInput label="Option 1" value="1" />
253+
</RadioInputGroup>
254+
</div>
255+
)
256+
257+
const allFieldsets = container.querySelectorAll('fieldset')
258+
259+
const fieldsetCustom = allFieldsets[0] as HTMLElement
260+
const fieldsetCustomStyle = window.getComputedStyle(fieldsetCustom)
261+
const fieldsetLarge = allFieldsets[1] as HTMLElement
262+
const fieldsetLargeStyle = window.getComputedStyle(fieldsetLarge)
263+
const fieldsetSpace = allFieldsets[2] as HTMLElement
264+
const fieldsetSpaceStyle = window.getComputedStyle(fieldsetSpace)
265+
const fieldsetMixed = allFieldsets[3] as HTMLElement
266+
const fieldsetMixedStyle = window.getComputedStyle(fieldsetMixed)
267+
268+
expect(fieldsetCustomStyle.margin).toBe('30px')
269+
expect(fieldsetLargeStyle.margin).toBe('2.25rem')
270+
expect(fieldsetSpaceStyle.margin).toBe('0.25rem')
271+
expect(fieldsetMixedStyle.margin).toBe('0.75rem 20px')
272+
})
273+
})
233274
})

‎packages/ui-range-input/src/RangeInput/__tests__/RangeInput.test.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -231,4 +231,59 @@ describe('<RangeInput />', () => {
231231
expect(output).toHaveTextContent('40%')
232232
})
233233
})
234+
235+
describe('margin prop', () => {
236+
it('should apply margin with custom CSS value and with tokens', () => {
237+
const { container } = render(
238+
<div>
239+
<RangeInput
240+
label="Range 1"
241+
name="range1"
242+
min={0}
243+
max={100}
244+
margin="30px"
245+
/>
246+
<RangeInput
247+
label="Range 2"
248+
name="range2"
249+
min={0}
250+
max={100}
251+
margin="large"
252+
/>
253+
<RangeInput
254+
label="Range 3"
255+
name="range3"
256+
min={0}
257+
max={100}
258+
margin="space4"
259+
/>
260+
<RangeInput
261+
label="Range 4"
262+
name="range4"
263+
min={0}
264+
max={100}
265+
margin="small 20px"
266+
/>
267+
</div>
268+
)
269+
270+
const allRangeInputs = container.querySelectorAll(
271+
'[data-cid="RangeInput"]'
272+
)
273+
274+
const rangeInputCustom = allRangeInputs[0] as HTMLElement
275+
const rangeInputCustomStyle = window.getComputedStyle(rangeInputCustom)
276+
const rangeInputLarge = allRangeInputs[1] as HTMLElement
277+
const rangeInputLargeStyle = window.getComputedStyle(rangeInputLarge)
278+
const rangeInputSpace = allRangeInputs[2] as HTMLElement
279+
const rangeInputSpaceStyle = window.getComputedStyle(rangeInputSpace)
280+
const rangeInputMixed = allRangeInputs[3] as HTMLElement
281+
const rangeInputMixedStyle = window.getComputedStyle(rangeInputMixed)
282+
283+
expect(rangeInputCustomStyle.margin).toBe('30px')
284+
expect(rangeInputLargeStyle.margin).toBe('2.25rem')
285+
expect(rangeInputSpaceStyle.margin).toBe('0.25rem')
286+
expect(rangeInputMixedStyle.margin).toBe('0.75rem 20px')
287+
})
288+
})
234289
})

‎packages/ui-text/src/Text/__tests__/Text.test.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,38 @@ describe('<Text />', () => {
4949

5050
expect(text?.tagName).toBe('LI')
5151
})
52+
53+
describe('margin prop', () => {
54+
it('should apply margin with custom CSS value and with tokens', () => {
55+
const { getByTestId } = render(
56+
<div>
57+
<Text margin="30px" data-testid="text-custom">
58+
test1
59+
</Text>
60+
<Text margin="large" data-testid="text-large">
61+
test2
62+
</Text>
63+
<Text margin="space4" data-testid="text-space">
64+
test3
65+
</Text>
66+
<Text margin="small 20px" data-testid="text-mixed">
67+
test4
68+
</Text>
69+
</div>
70+
)
71+
const textCustom = getByTestId('text-custom')
72+
const textCustomStyle = window.getComputedStyle(textCustom)
73+
const textLarge = getByTestId('text-large')
74+
const textLargeStyle = window.getComputedStyle(textLarge)
75+
const textSpace = getByTestId('text-space')
76+
const textSpaceStyle = window.getComputedStyle(textSpace)
77+
const textMixed = getByTestId('text-mixed')
78+
const textMixedStyle = window.getComputedStyle(textMixed)
79+
80+
expect(textCustomStyle.margin).toBe('30px')
81+
expect(textLargeStyle.margin).toBe('2.25rem')
82+
expect(textSpaceStyle.margin).toBe('0.25rem')
83+
expect(textMixedStyle.margin).toBe('0.75rem 20px')
84+
})
85+
})
5286
})

0 commit comments

Comments
 (0)