add stories and tests

Author: slax57

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

@@ -1452,6 +1452,50 @@ describe('<AutocompleteInput />', () => {
             expect(input.value).not.toBe('Create x');
             expect(input.value).toBe('x');
         }, 10000);
+
+        it('should include an option with the custom createLabel when the input is empty and optionText is a string', async () => {
+            render(<CreateLabel optionText="full_name" />);
+            const input = (await screen.findByLabelText(
+                'Author'
+            )) as HTMLInputElement;
+            input.focus();
+            fireEvent.change(input, {
+                target: { value: '' },
+            });
+            const customCreateLabel = screen.queryByText(
+                'Start typing to create a new item'
+            );
+            expect(customCreateLabel).not.toBeNull();
+            expect(
+                (customCreateLabel as HTMLElement).getAttribute('aria-disabled')
+            ).toEqual('true');
+            expect(screen.queryByText(/Create/)).toBeNull();
+        });
+
+        it('should include an option with the custom createLabel when the input is empty and optionText is a function', async () => {
+            render(
+                <CreateLabel
+                    optionText={choice =>
+                        `${choice.first_name} ${choice.last_name}`
+                    }
+                />
+            );
+            const input = (await screen.findByLabelText(
+                'Author'
+            )) as HTMLInputElement;
+            input.focus();
+            fireEvent.change(input, {
+                target: { value: '' },
+            });
+            const customCreateLabel = screen.queryByText(
+                'Start typing to create a new item'
+            );
+            expect(customCreateLabel).not.toBeNull();
+            expect(
+                (customCreateLabel as HTMLElement).getAttribute('aria-disabled')
+            ).toEqual('true');
+            expect(screen.queryByText(/Create/)).toBeNull();
+        });
     });
     describe('create', () => {
         it('should allow the creation of a new choice', async () => {

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

@@ -258,12 +258,48 @@ export const OptionTextElement = () => (
     </Wrapper>
 );
 
-const choicesForCreationSupport = [
-    { id: 1, name: 'Leo Tolstoy' },
-    { id: 2, name: 'Victor Hugo' },
-    { id: 3, name: 'William Shakespeare' },
-    { id: 4, name: 'Charles Baudelaire' },
-    { id: 5, name: 'Marcel Proust' },
+const choicesForCreationSupport: Partial<{
+    id: number;
+    name: string;
+    full_name: string;
+    first_name: string;
+    last_name: string;
+}>[] = [
+    {
+        id: 1,
+        name: 'Leo Tolstoy',
+        full_name: 'Leo Tolstoy',
+        first_name: 'Leo',
+        last_name: 'Tolstoy',
+    },
+    {
+        id: 2,
+        name: 'Victor Hugo',
+        full_name: 'Victor Hugo',
+        first_name: 'Victor',
+        last_name: 'Hugo',
+    },
+    {
+        id: 3,
+        name: 'William Shakespeare',
+        full_name: 'William Shakespeare',
+        first_name: 'William',
+        last_name: 'Shakespeare',
+    },
+    {
+        id: 4,
+        name: 'Charles Baudelaire',
+        full_name: 'Charles Baudelaire',
+        first_name: 'Charles',
+        last_name: 'Baudelaire',
+    },
+    {
+        id: 5,
+        name: 'Marcel Proust',
+        full_name: 'Marcel Proust',
+        first_name: 'Marcel',
+        last_name: 'Proust',
+    },
 ];
 
 const OnCreateInput = () => {
@@ -450,7 +486,7 @@ export const CreateDialog = () => (
     </Wrapper>
 );
 
-const CreateLabelInput = () => {
+const CreateLabelInput = ({ optionText }) => {
     const [choices, setChoices] = useState(choicesForCreationSupport);
     return (
         <AutocompleteInput
@@ -459,25 +495,53 @@ const CreateLabelInput = () => {
             onCreate={async filter => {
                 if (!filter) return;
 
-                const newOption = {
+                const newOption: Partial<{
+                    id: number;
+                    name: string;
+                    full_name: string;
+                    first_name: string;
+                    last_name: string;
+                }> = {
                     id: choices.length + 1,
-                    name: filter,
                 };
+                if (optionText == null) {
+                    newOption.name = filter;
+                } else if (typeof optionText === 'string') {
+                    newOption[optionText] = filter;
+                } else {
+                    newOption.first_name = filter;
+                    newOption.last_name = filter;
+                }
                 setChoices(options => [...options, newOption]);
                 // Wait until next tick to give some time for React to update the state
                 await new Promise(resolve => setTimeout(resolve));
                 return newOption;
             }}
             createLabel="Start typing to create a new item"
+            optionText={optionText}
         />
     );
 };
 
-export const CreateLabel = () => (
+export const CreateLabel = ({ optionText }: any) => (
     <Wrapper>
-        <CreateLabelInput />
+        <CreateLabelInput optionText={optionText} />
     </Wrapper>
 );
+CreateLabel.args = {
+    optionText: undefined,
+};
+CreateLabel.argTypes = {
+    optionText: {
+        options: ['default', 'string', 'function'],
+        mapping: {
+            default: undefined,
+            string: 'full_name',
+            function: choice => `${choice.first_name} ${choice.last_name}`,
+        },
+        control: { type: 'inline-radio' },
+    },
+};
 
 const CreateItemLabelInput = () => {
     const [choices, setChoices] = useState(choicesForCreationSupport);

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

@@ -697,6 +697,46 @@ describe('<SelectInput />', () => {
             });
             promptSpy.mockRestore();
         });
+
+        it('should support using a custom createLabel with optionText being a string', async () => {
+            const promptSpy = jest.spyOn(window, 'prompt');
+            promptSpy.mockImplementation(jest.fn(() => 'New Category'));
+            render(<CreateLabel optionText="full_name" />);
+            const input = (await screen.findByLabelText(
+                'Category'
+            )) as HTMLInputElement;
+            fireEvent.mouseDown(input);
+            // Expect the custom create label to be displayed
+            fireEvent.click(await screen.findByText('Create a new category'));
+            // Expect a prompt to have opened
+            await waitFor(() => {
+                expect(promptSpy).toHaveBeenCalled();
+            });
+            promptSpy.mockRestore();
+        });
+
+        it('should support using a custom createLabel with optionText being a function', async () => {
+            const promptSpy = jest.spyOn(window, 'prompt');
+            promptSpy.mockImplementation(jest.fn(() => 'New Category'));
+            render(
+                <CreateLabel
+                    optionText={choice =>
+                        `${choice.full_name} (${choice.language})`
+                    }
+                />
+            );
+            const input = (await screen.findByLabelText(
+                'Category'
+            )) as HTMLInputElement;
+            fireEvent.mouseDown(input);
+            // Expect the custom create label to be displayed
+            fireEvent.click(await screen.findByText('Create a new category'));
+            // Expect a prompt to have opened
+            await waitFor(() => {
+                expect(promptSpy).toHaveBeenCalled();
+            });
+            promptSpy.mockRestore();
+        });
     });
 
     it('should support creation of a new choice through the create element', async () => {

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

@@ -321,31 +321,68 @@ export const OnCreate = () => {
     );
 };
 
-export const CreateLabel = () => {
-    const categories = [
-        { name: 'Tech', id: 'tech' },
-        { name: 'Lifestyle', id: 'lifestyle' },
+export const CreateLabel = ({ optionText }: any) => {
+    const categories: Partial<{
+        id: string;
+        name: string;
+        full_name: string;
+        language: string;
+    }>[] = [
+        { id: 'tech', name: 'Tech', full_name: 'Tech', language: 'en' },
+        {
+            id: 'lifestyle',
+            name: 'Lifestyle',
+            full_name: 'Lifestyle',
+            language: 'en',
+        },
     ];
     return (
         <Wrapper name="category">
             <SelectInput
                 onCreate={() => {
                     const newCategoryName = prompt('Enter a new category');
                     if (!newCategoryName) return;
-                    const newCategory = {
+                    const newCategory: Partial<{
+                        id: string;
+                        name: string;
+                        full_name: string;
+                        language: string;
+                    }> = {
                         id: newCategoryName.toLowerCase(),
-                        name: newCategoryName,
                     };
+                    if (optionText == null) {
+                        newCategory.name = newCategoryName;
+                    } else if (typeof optionText === 'string') {
+                        newCategory[optionText] = newCategoryName;
+                    } else {
+                        newCategory.full_name = newCategoryName;
+                        newCategory.language = 'fr';
+                    }
                     categories.push(newCategory);
                     return newCategory;
                 }}
                 source="category"
                 choices={categories}
                 createLabel="Create a new category"
+                optionText={optionText}
             />
         </Wrapper>
     );
 };
+CreateLabel.args = {
+    optionText: undefined,
+};
+CreateLabel.argTypes = {
+    optionText: {
+        options: ['default', 'string', 'function'],
+        mapping: {
+            default: undefined,
+            string: 'full_name',
+            function: choice => `${choice.full_name} (${choice.language})`,
+        },
+        control: { type: 'inline-radio' },
+    },
+};
 
 const i18nProvider = polyglotI18nProvider(() => englishMessages);