Merge pull request #10831 from WiXSL/selectinput-test

Added `SelectInput` and `SelectArrayInput` disable choices test and story

Author: slax57

packages/ra-ui-materialui/src/input/SelectArrayInput.spec.tsx

@@ -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">
@@ -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 />);

packages/ra-ui-materialui/src/input/SelectArrayInput.stories.tsx

@@ -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

packages/ra-ui-materialui/src/input/SelectInput.spec.tsx

@@ -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">
@@ -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()}>

packages/ra-ui-materialui/src/input/SelectInput.stories.tsx

@@ -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