Skip to content

Commit 4fc6630

Browse files
LFDanLuLFDanLu
committed
adding tests
1 parent 2dfdb41 commit 4fc6630

11 files changed

+284
-11
lines changed

‎eslint.config.mjs

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -445,6 +445,29 @@ export default [{
445445
"jsdoc/require-jsdoc": OFF,
446446
"jsdoc/require-description": OFF,
447447
},
448+
}, {
449+
files: [
450+
"packages/**/*.ts",
451+
"packages/**/*.tsx"
452+
],
453+
454+
rules: {
455+
"@typescript-eslint/explicit-module-boundary-types": ERROR,
456+
},
457+
}, {
458+
files: [
459+
"**/dev/**",
460+
"**/test/**",
461+
"**/stories/**",
462+
"**/docs/**",
463+
"**/chromatic/**",
464+
"**/chromatic-fc/**",
465+
"**/__tests__/**"
466+
],
467+
468+
rules: {
469+
"@typescript-eslint/explicit-module-boundary-types": OFF,
470+
},
448471
}, {
449472
files: [
450473
"packages/@react-aria/focus/src/**/*.ts",
@@ -481,4 +504,4 @@ export default [{
481504
rules: {
482505
"react/react-in-jsx-scope": OFF,
483506
},
484-
}];
507+
}];

‎packages/@react-spectrum/s2/stories/ColorField.stories.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,11 @@ const meta: Meta<typeof ColorField> = {
3232
label: {control: {type: 'text'}},
3333
description: {control: {type: 'text'}},
3434
errorMessage: {control: {type: 'text'}},
35-
contextualHelp: {table: {disable: true}}
35+
contextualHelp: {table: {disable: true}},
36+
placeholder: {control: {type: 'text'}}
37+
},
38+
args: {
39+
placeholder: '######'
3640
},
3741
title: 'ColorField'
3842
};
@@ -43,8 +47,7 @@ type Story = StoryObj<typeof ColorField>;
4347
export const Example: Story = {
4448
render: (args) => <ColorField {...args} />,
4549
args: {
46-
label: 'Color',
47-
placeholder: '######'
50+
label: 'Color'
4851
}
4952
};
5053

‎packages/@react-spectrum/s2/stories/ComboBox.stories.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,11 @@ const meta: Meta<typeof ComboBox<any>> = {
3232
description: {control: {type: 'text'}},
3333
errorMessage: {control: {type: 'text'}},
3434
children: {table: {disable: true}},
35-
contextualHelp: {table: {disable: true}}
35+
contextualHelp: {table: {disable: true}},
36+
placeholder: {control: {type: 'text'}}
37+
},
38+
args: {
39+
// placeholder: 'Select a value'
3640
},
3741
title: 'ComboBox'
3842
};
@@ -42,8 +46,8 @@ type Story = StoryObj<typeof ComboBox<any>>;
4246

4347
export const Example: Story = {
4448
render: (args: ComboBoxProps<any>) => (
45-
<ComboBox {...args}>
46-
<ComboBoxItem>Chocolate</ComboBoxItem>
49+
<ComboBox selectedKey="1">
50+
<ComboBoxItem id="1">Chocolate</ComboBoxItem>
4751
<ComboBoxItem>Mint</ComboBoxItem>
4852
<ComboBoxItem>Strawberry</ComboBoxItem>
4953
<ComboBoxItem>Vanilla</ComboBoxItem>

‎packages/@react-spectrum/s2/stories/NumberField.stories.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,11 @@ const meta: Meta<typeof NumberField> = {
3333
label: {control: {type: 'text'}},
3434
description: {control: {type: 'text'}},
3535
errorMessage: {control: {type: 'text'}},
36-
contextualHelp: {table: {disable: true}}
36+
contextualHelp: {table: {disable: true}},
37+
placeholder: {control: {type: 'text'}}
38+
},
39+
args: {
40+
placeholder: 'How many items?'
3741
},
3842
tags: ['autodocs'],
3943
title: 'NumberField'
@@ -102,4 +106,3 @@ export const ContextualHelpExample: Story = {
102106
label: 'Quantity'
103107
}
104108
};
105-

‎packages/@react-spectrum/s2/stories/SearchField.stories.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,11 @@ const meta: Meta<typeof SearchField> = {
3434
label: {control: {type: 'text'}},
3535
description: {control: {type: 'text'}},
3636
errorMessage: {control: {type: 'text'}},
37-
contextualHelp: {table: {disable: true}}
37+
contextualHelp: {table: {disable: true}},
38+
placeholder: {control: {type: 'text'}}
39+
},
40+
args: {
41+
placeholder: 'Enter your search here'
3842
},
3943
title: 'SearchField'
4044
};

‎packages/@react-spectrum/s2/stories/TextField.stories.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,10 @@ const meta: Meta<typeof TextField> = {
2929
description: {control: {type: 'text'}},
3030
errorMessage: {control: {type: 'text'}},
3131
contextualHelp: {table: {disable: true}},
32-
placeholder: {control: {type: 'text', defaultValue: 'Enter a name'}}
32+
placeholder: {control: {type: 'text'}}
33+
},
34+
args: {
35+
placeholder: 'Enter your name'
3336
},
3437
title: 'TextField'
3538
};

‎packages/@react-spectrum/s2/test/ColorField.test.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/*
2+
* Copyright 2025 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import {ColorField} from '../src';
14+
import {pointerMap, render} from '@react-spectrum/test-utils-internal';
15+
import React from 'react';
16+
import userEvent from '@testing-library/user-event';
17+
18+
describe('ColorField', () => {
19+
let user;
20+
beforeAll(() => {
21+
user = userEvent.setup({delay: null, pointerMap});
22+
});
23+
24+
it('should warn if the ColorField renders/blurs without a placeholder', async () => {
25+
let spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
26+
let {getByRole, rerender} = render(
27+
<ColorField label="Color" />
28+
);
29+
30+
expect(spy).toHaveBeenCalledWith('Your ColorField is empty and not focused but doesn\'t have a placeholder. Please add one.');
31+
spy.mockClear();
32+
33+
await user.tab();
34+
await user.tab();
35+
expect(spy).toHaveBeenCalledWith('Your ColorField is empty and not focused but doesn\'t have a placeholder. Please add one.');
36+
spy.mockClear();
37+
38+
let input = getByRole('textbox');
39+
await user.click(input);
40+
await user.keyboard('AAAAAA');
41+
await user.tab();
42+
expect(spy).not.toHaveBeenCalled();
43+
44+
rerender(<ColorField label="Color" placeholder="test" />);
45+
expect(spy).not.toHaveBeenCalled();
46+
47+
rerender(<ColorField label="Color" autoFocus />);
48+
expect(spy).not.toHaveBeenCalled();
49+
});
50+
});

‎packages/@react-spectrum/s2/test/Combobox.test.tsx

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import userEvent from '@testing-library/user-event';
2121
describe('Combobox', () => {
2222
let user;
2323
let testUtilUser = new User();
24+
let warnSpy;
2425
function DynamicCombobox(props) {
2526
let {items, loadingState, onLoadMore, ...otherProps} = props;
2627
return (
@@ -40,6 +41,7 @@ describe('Combobox', () => {
4041
jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 100);
4142
jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 100);
4243
jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 50);
44+
warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
4345
user = userEvent.setup({delay: null, pointerMap});
4446
});
4547

@@ -209,4 +211,31 @@ describe('Combobox', () => {
209211
expect(tree.getAllByText('Contents')[1]).toBeVisible();
210212
warn.mockRestore();
211213
});
214+
215+
it('should warn if the Combobox renders/blurs without a placeholder', async () => {
216+
warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
217+
let items = [{name: 'Chocolate'}, {name: 'Mint'}, {name: 'Chocolate Chip'}];
218+
let {rerender} = render(
219+
<DynamicCombobox items={items} />
220+
);
221+
222+
expect(warnSpy).toHaveBeenCalledWith('Your ComboBox is empty and not focused but doesn\'t have a placeholder. Please add one.');
223+
warnSpy.mockClear();
224+
225+
await user.tab();
226+
await user.tab();
227+
expect(warnSpy).toHaveBeenCalledWith('Your ComboBox is empty and not focused but doesn\'t have a placeholder. Please add one.');
228+
warnSpy.mockClear();
229+
230+
rerender(<DynamicCombobox items={items} placeholder="test" />);
231+
expect(warnSpy).not.toHaveBeenCalled();
232+
233+
rerender(<DynamicCombobox items={items} autoFocus />);
234+
expect(warnSpy).not.toHaveBeenCalled();
235+
236+
render(
237+
<DynamicCombobox selectedKey="Chocolate" items={items} />
238+
);
239+
expect(warnSpy).not.toHaveBeenCalled();
240+
});
212241
});

‎packages/@react-spectrum/s2/test/NumberField.test.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/*
2+
* Copyright 2025 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import {NumberField} from '../src';
14+
import {pointerMap, render} from '@react-spectrum/test-utils-internal';
15+
import React from 'react';
16+
import userEvent from '@testing-library/user-event';
17+
18+
describe('NumberField', () => {
19+
let user;
20+
beforeAll(() => {
21+
user = userEvent.setup({delay: null, pointerMap});
22+
});
23+
24+
it('should warn if the NumberField renders/blurs without a placeholder', async () => {
25+
let spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
26+
let {getByRole, rerender} = render(
27+
<NumberField label="Quantity" />
28+
);
29+
30+
expect(spy).toHaveBeenCalledWith('Your NumberField is empty and not focused but doesn\'t have a placeholder. Please add one.');
31+
spy.mockClear();
32+
33+
await user.tab();
34+
await user.tab();
35+
expect(spy).toHaveBeenCalledWith('Your NumberField is empty and not focused but doesn\'t have a placeholder. Please add one.');
36+
spy.mockClear();
37+
38+
let input = getByRole('textbox');
39+
await user.click(input);
40+
await user.keyboard('1');
41+
await user.tab();
42+
expect(spy).not.toHaveBeenCalled();
43+
44+
rerender(<NumberField label="Quantity" placeholder="test" />);
45+
expect(spy).not.toHaveBeenCalled();
46+
47+
rerender(<NumberField label="Quantity" autoFocus />);
48+
expect(spy).not.toHaveBeenCalled();
49+
});
50+
});

‎packages/@react-spectrum/s2/test/SearchField.test.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,31 @@ describe('SearchField', () => {
4141
await user.keyboard('Foo');
4242
expect(group).not.toHaveAttribute('data-focus-visible');
4343
});
44+
45+
it('should warn if the SearchField renders/blurs without a placeholder', async () => {
46+
let spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
47+
let {getByRole, rerender} = render(
48+
<SearchField label="Search" />
49+
);
50+
51+
expect(spy).toHaveBeenCalledWith('Your SearchField is empty and not focused but doesn\'t have a placeholder. Please add one.');
52+
spy.mockClear();
53+
54+
await user.tab();
55+
await user.tab();
56+
expect(spy).toHaveBeenCalledWith('Your SearchField is empty and not focused but doesn\'t have a placeholder. Please add one.');
57+
spy.mockClear();
58+
59+
let input = getByRole('searchbox');
60+
await user.click(input);
61+
await user.keyboard('Foo');
62+
await user.tab();
63+
expect(spy).not.toHaveBeenCalled();
64+
65+
rerender(<SearchField label="Search" placeholder="test" />);
66+
expect(spy).not.toHaveBeenCalled();
67+
68+
rerender(<SearchField label="Search" autoFocus />);
69+
expect(spy).not.toHaveBeenCalled();
70+
});
4471
});

0 commit comments

Comments
 (0)