Fix tests

marmelab · Jul 4, 2022 · 9479f2d · 9479f2d
1 parent 6566fc3
commit 9479f2d
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 1 deletion.
diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx
@@ -431,6 +431,35 @@ describe('<AutocompleteInput />', () => {
         ).not.toBeNull();
     });
 
+    it('should allow customized rendering of option items', () => {
+        const OptionItem = props => {
+            const record = useRecordContext();
+            return <div {...props} aria-label={record && record.name} />;
+        };
+
+        render(
+            <AdminContext dataProvider={testDataProvider()}>
+                <SimpleForm onSubmit={jest.fn()} defaultValues={{ role: 2 }}>
+                    <AutocompleteInput
+                        {...defaultProps}
+                        optionText={<OptionItem />}
+                        matchSuggestion={() => true}
+                        inputText={record => record?.name}
+                        choices={[
+                            { id: 1, name: 'bar' },
+                            { id: 2, name: 'foo' },
+                        ]}
+                    />
+                </SimpleForm>
+            </AdminContext>
+        );
+
+        const input = screen.getByLabelText('resources.users.fields.role');
+        fireEvent.focus(input);
+
+        expect(screen.queryByLabelText('bar')).not.toBeNull();
+    });
+
     it('should reset filter when input value changed', async () => {
         const setFilter = jest.fn();
         const { rerender } = render(

diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Admin } from 'react-admin';
+import { Admin, AdminContext } from 'react-admin';
 import { Resource, required, useCreate, useRecordContext } from 'ra-core';
 import { createMemoryHistory } from 'history';
 import {
@@ -420,6 +420,36 @@ export const InsideReferenceInputWithCreationSupport = () => (
     </Admin>
 );
 
+const OptionItem = props => {
+    const record = useRecordContext();
+    return (
+        <div {...props} aria-label={record && record.name}>
+            {`from optionText: ${record && record.name}`}
+        </div>
+    );
+};
+
+export const CustomizedItemRendering = () => {
+    return (
+        <AdminContext dataProvider={dataProviderWithAuthors}>
+            <SimpleForm onSubmit={() => {}} defaultValues={{ role: 2 }}>
+                <AutocompleteInput
+                    fullWidth
+                    source="role"
+                    resource="users"
+                    optionText={<OptionItem />}
+                    inputText={record => `from inputText ${record?.name}`}
+                    matchSuggestion={() => true}
+                    choices={[
+                        { id: 1, name: 'bar' },
+                        { id: 2, name: 'foo' },
+                    ]}
+                />
+            </SimpleForm>
+        </AdminContext>
+    );
+};
+
 const DalmatianEdit = () => {
     const dalmatians: any[] = [];
     for (let index = 0; index < 1100; index++) {