Skip to content

[Storybook] Add SelectInput and SelectArrayInput disable choices test and story #10831

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
slax57 merged 5 commits into from
Jul 10, 2025
Merged

[Storybook] Add SelectInput and SelectArrayInput disable choices test and story #10831

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
27f440c
Add test
WiXSL Jul 7, 2025
69bd805
Add story
WiXSL Jul 7, 2025
8644e32
improve story
WiXSL Jul 7, 2025
2cd797b
Add test and story for SelectArrayInput
WiXSL Jul 7, 2025
3b70e49
removed unused import
WiXSL Jul 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 32 additions & 1 deletion packages/ra-ui-materialui/src/input/SelectArrayInput.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,7 +228,7 @@ describe('<SelectArrayInput />', () => {
expect(screen.queryByText('Programming')).not.toBeNull();
});

it('should render disable choices marked so', () => {
it('should render disable choices marked as so', () => {
render(
<AdminContext dataProvider={testDataProvider()}>
<ResourceContextProvider value="posts">
Expand All @@ -254,6 +254,37 @@ describe('<SelectArrayInput />', () => {
expect(option2.getAttribute('aria-disabled')).toEqual('true');
});

it('should render disabled choices marked as so by disableValue prop', () => {
render(
<AdminContext dataProvider={testDataProvider()}>
<ResourceContextProvider value="posts">
<SimpleForm onSubmit={jest.fn()}>
<SelectArrayInput
{...defaultProps}
choices={[
{ id: 'ang', name: 'Angular' },
{
id: 'rea',
name: 'React',
not_available: true,
},
]}
disableValue="not_available"
/>
</SimpleForm>
</ResourceContextProvider>
</AdminContext>
);
fireEvent.mouseDown(
screen.getByLabelText('resources.posts.fields.categories')
);
const option1 = screen.getByText('Angular');
expect(option1.getAttribute('aria-disabled')).toBeNull();

const option2 = screen.getByText('React');
expect(option2.getAttribute('aria-disabled')).toEqual('true');
});

describe('translateChoice', () => {
it('should translate the choices by default', async () => {
render(<TranslateChoice />);
Expand Down
14 changes: 14 additions & 0 deletions packages/ra-ui-materialui/src/input/SelectArrayInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,20 @@ export const Disabled = () => (
</AdminContext>
);

export const DisabledChoice = () => (
<Wrapper>
<SelectArrayInput
source="roles"
choices={[
{ id: 'admin', name: 'Admin' },
{ id: 'u001', name: 'Editor' },
{ id: 'u002', name: 'Moderator', disabled: true },
{ id: 'u003', name: 'Reviewer' },
]}
/>
</Wrapper>
);

export const ReadOnly = () => (
<AdminContext i18nProvider={i18nProvider}>
<Create
Expand Down
35 changes: 34 additions & 1 deletion packages/ra-ui-materialui/src/input/SelectInput.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ describe('<SelectInput />', () => {
).toEqual('rea');
});

it('should render disabled choices marked so', () => {
it('should render disabled choices marked as so', () => {
render(
<AdminContext dataProvider={testDataProvider()}>
<ResourceContextProvider value="posts">
Expand Down Expand Up @@ -111,6 +111,39 @@ describe('<SelectInput />', () => {
).toEqual('true');
});

it('should render disabled choices marked as so by disableValue prop', () => {
render(
<AdminContext dataProvider={testDataProvider()}>
<ResourceContextProvider value="posts">
<SimpleForm onSubmit={jest.fn()}>
<SelectInput
{...defaultProps}
choices={[
{ id: 'ang', name: 'Angular' },
{
id: 'rea',
name: 'React',
not_available: true,
},
]}
disableValue="not_available"
/>
</SimpleForm>
</ResourceContextProvider>
</AdminContext>
);
fireEvent.mouseDown(
screen.getByLabelText('resources.posts.fields.language')
);

expect(
screen.getByText('Angular').getAttribute('aria-disabled')
).toBeNull();
expect(
screen.getByText('React').getAttribute('aria-disabled')
).toEqual('true');
});

it('should include an empty option by default', () => {
render(
<AdminContext dataProvider={testDataProvider()}>
Expand Down
13 changes: 13 additions & 0 deletions packages/ra-ui-materialui/src/input/SelectInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,19 @@ export const Disabled = () => (
</Wrapper>
);

export const DisabledChoice = () => (
<Wrapper>
<SelectInput
source="city"
choices={[
{ id: 'P', name: 'Paris' },
{ id: 'L', name: 'London' },
{ id: 'N', name: 'New York', disabled: true },
]}
/>
</Wrapper>
);

export const Variant = ({ hideLabel }) => (
<Wrapper>
<SelectInput
Expand Down
Loading