Skip to content

Commit 2cf5223

Browse files
mj12albertmj12albert
committed
Add test
1 parent c37f953 commit 2cf5223

File tree

2 files changed

+123
-80
lines changed

2 files changed

+123
-80
lines changed

‎docs/src/app/(private)/experiments/slider/form.tsx

Lines changed: 64 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -14,64 +14,76 @@ export default function ExampleForm() {
1414
const [errors, setErrors] = React.useState({});
1515
const [loading, setLoading] = React.useState(false);
1616

17+
const [results, setResults] = React.useState<number | null>(null);
18+
1719
return (
18-
<Form
19-
className={formStyles.Form}
20-
style={{ maxWidth: '18rem' }}
21-
errors={errors}
22-
onClearErrors={setErrors}
23-
onSubmit={async (event) => {
24-
event.preventDefault();
25-
const formData = new FormData(event.currentTarget);
26-
const formValues = Object.fromEntries(formData as any) as FormValues;
27-
console.log(formValues);
20+
<div style={{ width: '18rem' }}>
21+
<Form
22+
className={formStyles.Form}
23+
style={{ maxWidth: '18rem' }}
24+
errors={errors}
25+
onClearErrors={setErrors}
26+
onSubmit={async (event) => {
27+
event.preventDefault();
28+
const formData = new FormData(event.currentTarget);
29+
const formValues = Object.fromEntries(formData as any) as FormValues;
2830

29-
setLoading(true);
30-
const response = await submitForm(formValues);
31-
const serverErrors = {
32-
priceRange: response.errors?.priceRange,
33-
};
31+
setLoading(true);
32+
const response = await submitForm(formValues);
33+
const serverErrors = {
34+
priceRange: response.errors?.priceRange,
35+
};
3436

35-
setErrors(serverErrors);
36-
setLoading(false);
37-
console.log('response', response);
38-
}}
39-
>
40-
<Field.Root name="priceRange" className={formStyles.Field}>
41-
<Slider.Root
42-
defaultValue={[500, 1200]}
43-
min={100}
44-
max={2000}
45-
step={1}
46-
minStepsBetweenValues={1}
47-
className={styles.Root}
48-
format={{
49-
style: 'currency',
50-
currency: 'EUR',
51-
}}
52-
locale="nl-NL"
53-
style={{ width: '18rem' }}
54-
>
55-
<Field.Label className={styles.Label}>Price range</Field.Label>
56-
<Slider.Value className={styles.Value} />
57-
<Slider.Control className={styles.Control}>
58-
<Slider.Track className={styles.Track}>
59-
<Slider.Indicator className={styles.Indicator} />
60-
<Slider.Thumb className={styles.Thumb} />
61-
<Slider.Thumb className={styles.Thumb} />
62-
</Slider.Track>
63-
</Slider.Control>
64-
</Slider.Root>
65-
<Field.Error className={formStyles.Error} />
66-
</Field.Root>
67-
<button disabled={loading} type="submit" className={formStyles.Button}>
68-
Search
69-
</button>
70-
</Form>
37+
setErrors(serverErrors);
38+
setLoading(false);
39+
if (response?.response?.results) {
40+
setResults(response.response.results);
41+
}
42+
}}
43+
>
44+
<Field.Root name="priceRange" className={formStyles.Field}>
45+
<Slider.Root
46+
defaultValue={[500, 1200]}
47+
min={100}
48+
max={2000}
49+
step={1}
50+
minStepsBetweenValues={1}
51+
className={styles.Root}
52+
format={{
53+
style: 'currency',
54+
currency: 'EUR',
55+
}}
56+
locale="nl-NL"
57+
style={{ width: '18rem' }}
58+
>
59+
<Field.Label className={styles.Label}>Price range</Field.Label>
60+
<Slider.Value className={styles.Value} />
61+
<Slider.Control className={styles.Control}>
62+
<Slider.Track className={styles.Track}>
63+
<Slider.Indicator className={styles.Indicator} />
64+
<Slider.Thumb className={styles.Thumb} />
65+
<Slider.Thumb className={styles.Thumb} />
66+
</Slider.Track>
67+
</Slider.Control>
68+
</Slider.Root>
69+
<Field.Error className={formStyles.Error} />
70+
</Field.Root>
71+
<button disabled={loading} type="submit" className={formStyles.Button}>
72+
Search
73+
</button>
74+
<hr style={{ marginBlock: 24 }} />
75+
{results !== null && <p>{`${results} matching flights`}</p>}
76+
</Form>
77+
</div>
7178
);
7279
}
7380

74-
async function submitForm(formValues: FormValues) {
81+
async function submitForm(formValues: FormValues): Promise<{
82+
errors?: Record<string, string>;
83+
response?: {
84+
results: number;
85+
};
86+
}> {
7587
await new Promise((resolve) => {
7688
setTimeout(resolve, 600);
7789
});

‎packages/react/src/slider/root/SliderRoot.test.tsx

Lines changed: 59 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1816,34 +1816,6 @@ describe.skipIf(typeof Touch === 'undefined')('<Slider.Root />', () => {
18161816
});
18171817
});
18181818

1819-
describe.skipIf(isJSDOM)('form handling', () => {
1820-
it('should include the slider value in the form submission', async () => {
1821-
let stringifiedFormData = '';
1822-
1823-
const { getByRole } = await render(
1824-
<form
1825-
onSubmit={(event) => {
1826-
event.preventDefault();
1827-
const formData = new FormData(event.currentTarget);
1828-
stringifiedFormData = new URLSearchParams(formData as any).toString();
1829-
}}
1830-
>
1831-
<Slider.Root name="slider" defaultValue={25}>
1832-
<Slider.Control>
1833-
<Slider.Thumb />
1834-
</Slider.Control>
1835-
</Slider.Root>
1836-
<button type="submit">Submit</button>
1837-
</form>,
1838-
);
1839-
1840-
const submit = getByRole('button');
1841-
fireEvent.click(submit);
1842-
1843-
expect(stringifiedFormData).to.equal('slider=25');
1844-
});
1845-
});
1846-
18471819
describe('Form', () => {
18481820
it('clears errors on change', async () => {
18491821
function App() {
@@ -1875,6 +1847,65 @@ describe.skipIf(typeof Touch === 'undefined')('<Slider.Root />', () => {
18751847
expect(slider).not.to.have.attribute('aria-invalid');
18761848
expect(screen.queryByTestId('error')).to.equal(null);
18771849
});
1850+
1851+
describe.skipIf(isJSDOM)('form submission', () => {
1852+
it('should include the slider value', async () => {
1853+
let stringifiedFormData = '';
1854+
1855+
const { getByRole } = await render(
1856+
<Form
1857+
onSubmit={(event) => {
1858+
event.preventDefault();
1859+
const formData = new FormData(event.currentTarget);
1860+
stringifiedFormData = new URLSearchParams(formData as any).toString();
1861+
}}
1862+
>
1863+
<Field.Root name="slider">
1864+
<Slider.Root defaultValue={25}>
1865+
<Slider.Control>
1866+
<Slider.Thumb />
1867+
</Slider.Control>
1868+
</Slider.Root>
1869+
</Field.Root>
1870+
<button type="submit">Submit</button>
1871+
</Form>,
1872+
);
1873+
1874+
const submit = getByRole('button');
1875+
fireEvent.click(submit);
1876+
1877+
expect(stringifiedFormData).to.equal('slider=25');
1878+
});
1879+
1880+
it('should include range slider value', async () => {
1881+
let formValues;
1882+
1883+
const { getByRole } = await render(
1884+
<Form
1885+
onSubmit={(event) => {
1886+
event.preventDefault();
1887+
const formData = new FormData(event.currentTarget);
1888+
formValues = Object.fromEntries(formData as any);
1889+
}}
1890+
>
1891+
<Field.Root name="slider">
1892+
<Slider.Root defaultValue={[25, 50]}>
1893+
<Slider.Control>
1894+
<Slider.Thumb />
1895+
<Slider.Thumb />
1896+
</Slider.Control>
1897+
</Slider.Root>
1898+
</Field.Root>
1899+
<button type="submit">Submit</button>
1900+
</Form>,
1901+
);
1902+
1903+
const submit = getByRole('button');
1904+
fireEvent.click(submit);
1905+
1906+
expect(formValues).to.deep.equal({ slider: '[25,50]' });
1907+
});
1908+
});
18781909
});
18791910

18801911
describe('Field', () => {

0 commit comments

Comments
 (0)