@coveord/plasma-mantine 55.8.0 → 55.8.2

package/src/components/collection/Collection.tsx

@@ -1,18 +1,16 @@
-import {AddSize16Px} from '@coveord/plasma-react-icons';
+import {IconPlus} from '@coveord/plasma-react-icons';
 import {DndContext, DragEndEvent, KeyboardSensor, PointerSensor, useSensor, useSensors} from '@dnd-kit/core';
 import {restrictToParentElement, restrictToVerticalAxis} from '@dnd-kit/modifiers';
 import {SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy} from '@dnd-kit/sortable';
 import {
+    __InputWrapperProps,
     Box,
     BoxProps,
     Factory,
-    Group,
     Input,
     MantineSpacing,
     Stack,
     StylesApiProps,
-    Tooltip,
-    __InputWrapperProps,
     useProps,
     useStyles,
 } from '@mantine/core';
@@ -52,8 +50,9 @@ export interface CollectionProps<T> extends __InputWrapperProps, BoxProps, Style
      * @see {@link https://react-hook-form.com/api/usefieldarray/} for using a collection with ReactHookForm.
      *
      * @param originalItem The original item
+     * @param itemIndex The index of the original item
      */
-    getItemId?: (originalItem: T) => string;
+    getItemId?: (originalItem: T, itemIndex: number) => string;
     /**
      * Unused, has no effect
      */
@@ -134,7 +133,7 @@ export interface CollectionProps<T> extends __InputWrapperProps, BoxProps, Style
     required?: boolean;
 }
 
-export type CollectionStylesNames = 'root' | 'item' | 'itemDragging' | 'dragHandle';
+export type CollectionStylesNames = 'root' | 'item' | 'items' | 'itemDragging' | 'dragHandle';
 
 export type CollectionFactory = Factory<{
     props: CollectionProps<unknown>;
@@ -148,7 +147,7 @@ const defaultProps: Partial<CollectionProps<unknown>> = {
     addDisabledTooltip: 'There is already an empty item',
     disabled: false,
     readOnly: false,
-    gap: 'xs',
+    gap: 'md',
     required: false,
     getItemId: ({id}: any) => id,
 };
@@ -229,13 +228,13 @@ export const Collection = <T,>(props: CollectionProps<T> & {ref?: ForwardedRef<H
     const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;
     const _header =
         _label || _description ? (
-            <>
+            <Stack gap="xxs" pb="xs">
                 {_label}
                 {_description}
-            </>
+            </Stack>
         ) : null;
 
-    const standardizedItems = value.map((item, index) => ({id: getItemId?.(item) ?? String(index), data: item}));
+    const standardizedItems = value.map((item, index) => ({id: getItemId?.(item, index) ?? String(index), data: item}));
 
     const items = standardizedItems.map((item, index) => (
         <CollectionItem
@@ -253,20 +252,14 @@ export const Collection = <T,>(props: CollectionProps<T> & {ref?: ForwardedRef<H
     const addAllowed = allowAdd?.(value) ?? true;
 
     const _addButton = canEdit ? (
-        <Group>
-            <Tooltip label={addDisabledTooltip} disabled={addAllowed}>
-                <Box>
-                    <Button
-                        variant="subtle"
-                        leftSection={<AddSize16Px height={16} />}
-                        onClick={() => onInsertItem(newItem, value?.length ?? 0)}
-                        disabled={!addAllowed}
-                    >
-                        {addLabel}
-                    </Button>
-                </Box>
-            </Tooltip>
-        </Group>
+        <Button.Quaternary
+            leftSection={<IconPlus size={16} />}
+            onClick={() => onInsertItem(newItem, value?.length ?? 0)}
+            disabled={!addAllowed}
+            disabledTooltip={addDisabledTooltip}
+        >
+            {addLabel}
+        </Button.Quaternary>
     ) : null;
 
     const getIndex = (id: string) => standardizedItems.findIndex((item) => item.id === id);
@@ -291,7 +284,7 @@ export const Collection = <T,>(props: CollectionProps<T> & {ref?: ForwardedRef<H
                 <SortableContext items={standardizedItems} strategy={verticalListSortingStrategy}>
                     <Box ref={ref} {...others} {...getStyles('root')}>
                         {_header}
-                        <Stack gap={gap}>
+                        <Stack gap={gap} {...getStyles('items')}>
                             {items}
                             {_addButton}
                             {_error}

package/src/components/collection/CollectionItem.tsx

@@ -1,9 +1,10 @@
-import {DragAndDropSize24Px, RemoveSize16Px} from '@coveord/plasma-react-icons';
+import {DragAndDropSize24Px, IconTrash} from '@coveord/plasma-react-icons';
 import {useSortable} from '@dnd-kit/sortable';
 import {CSS} from '@dnd-kit/utilities';
-import {ActionIcon, Group, GroupProps} from '@mantine/core';
+import {Group, GroupProps, useProps} from '@mantine/core';
 import {FunctionComponent, PropsWithChildren} from 'react';
 
+import {ActionIcon} from '../action-icon';
 import {useCollectionContext} from './CollectionContext';
 
 interface CollectionItemProps extends CollectionItemSharedProps {
@@ -17,44 +18,88 @@ interface CollectionItemSharedProps extends GroupProps {
     removable?: boolean;
 }
 
+const defaultProps: Partial<CollectionItemSharedProps> = {
+    removable: true,
+    gap: 'sm',
+};
+
 const RemoveButton: FunctionComponent<{
     onClick: React.MouseEventHandler<HTMLButtonElement>;
 }> = ({onClick}) => (
-    <ActionIcon style={{alignSelf: 'center'}} variant="subtle" onClick={onClick} color="action">
-        <RemoveSize16Px height={16} />
-    </ActionIcon>
+    <ActionIcon.Quaternary style={{alignSelf: 'center'}} onClick={onClick}>
+        <IconTrash aria-label="Remove" size={16} />
+    </ActionIcon.Quaternary>
 );
 
 const RemoveButtonPlaceholder = () => <div style={{width: 28}} />;
 
-const StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({
-    onRemove,
-    removable = true,
-    children,
-}) => {
+const StaticCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = (props) => {
+    const {
+        children,
+        removable,
+        onRemove,
+        id,
+
+        // Style props
+        style,
+        className,
+        classNames,
+        styles,
+        ...others
+    } = useProps('CollectionItem', defaultProps, props);
     const ctx = useCollectionContext();
     const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : <RemoveButtonPlaceholder />;
 
     return (
-        <Group {...ctx.getStyles('item')}>
+        <Group
+            data-testid={`item-${id}`}
+            {...ctx.getStyles('item', {style, className, classNames, styles})}
+            {...others}
+        >
             {children}
             {removeButton}
         </Group>
     );
 };
 
-const DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({children}) => {
+const DisabledCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = (props) => {
     const ctx = useCollectionContext();
-    return <Group {...ctx.getStyles('item')}>{children}</Group>;
+    const {
+        children,
+        id,
+
+        // Style props
+        style,
+        className,
+        classNames,
+        styles,
+        ...others
+    } = useProps('CollectionItem', defaultProps, props);
+    return (
+        <Group
+            data-testid={`item-${id}`}
+            {...ctx.getStyles('item', {style, className, classNames, styles})}
+            {...others}
+        >
+            {children}
+        </Group>
+    );
 };
 
-const DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = ({
-    id,
-    onRemove,
-    removable = true,
-    children,
-}) => {
+const DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionItemSharedProps>> = (props) => {
     const ctx = useCollectionContext();
+    const {
+        children,
+        removable,
+        onRemove,
+        id,
+
+        // Style props
+        className,
+        classNames,
+        styles,
+        ...others
+    } = useProps('CollectionItem', defaultProps, props);
     const removeButton = removable && onRemove ? <RemoveButton onClick={onRemove} /> : null;
     const {attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef} = useSortable({
         id,
@@ -62,6 +107,7 @@ const DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionIte
 
     return (
         <Group
+            data-testid={`item-${id}`}
             ref={setNodeRef}
             {...ctx.getStyles('item', {
                 style: transform
@@ -70,8 +116,12 @@ const DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionIte
                           transition,
                       }
                     : undefined,
+                className,
+                classNames,
+                styles,
             })}
             data-isdragging={isDragging}
+            {...others}
         >
             <div ref={setActivatorNodeRef} {...listeners} {...attributes} {...ctx.getStyles('dragHandle')}>
                 <DragAndDropSize24Px height={16} />

package/src/components/collection/__tests__/Collection.spec.tsx

@@ -13,21 +13,73 @@ describe('Collection', () => {
             });
             return (
                 <Collection<string> newItem="" {...form.getInputProps('fruits')}>
-                    {(name) => <span data-testid="item">{name}</span>}
+                    {(name) => <span>{name}</span>}
                 </Collection>
             );
         };
 
         render(<Fixture />);
 
-        const items = screen.getAllByTestId('item');
+        const items = screen.getAllByTestId(/item-/);
+        expect(items).toHaveLength(2);
+        expect(screen.queryByTestId('item-0')).toHaveTextContent('banana');
+        expect(screen.queryByTestId('item-1')).toHaveTextContent('orange');
+        expect(screen.getByTestId('item-0')).toBeInTheDocument();
+        expect(screen.getByTestId('item-1')).toBeInTheDocument();
+    });
+
+    it('renders one item for each initial values in the form with custom id', () => {
+        const getItemId = (item: string) => `id-${item}`;
+
+        const Fixture = () => {
+            const form = useForm({
+                initialValues: {fruits: ['banana', 'orange']},
+                enhanceGetInputProps: (payload) => ({...enhanceWithCollectionProps(payload, 'fruits')}),
+            });
+            return (
+                <Collection<string> getItemId={getItemId} newItem="" {...form.getInputProps('fruits')}>
+                    {(name) => <span>{name}</span>}
+                </Collection>
+            );
+        };
+
+        render(<Fixture />);
+
+        const items = screen.getAllByTestId(/item-/);
+        expect(items).toHaveLength(2);
+        expect(items[0]).toHaveTextContent('banana');
+        expect(items[1]).toHaveTextContent('orange');
+        expect(screen.getByTestId('item-id-orange')).toBeInTheDocument();
+        expect(screen.getByTestId('item-id-banana')).toBeInTheDocument();
+    });
+
+    it('renders one item for each initial values in the form with custom id based on index', () => {
+        const getItemId = (_item: string, index: number) => `index-${index}`;
+
+        const Fixture = () => {
+            const form = useForm({
+                initialValues: {fruits: ['banana', 'orange']},
+                enhanceGetInputProps: (payload) => ({...enhanceWithCollectionProps(payload, 'fruits')}),
+            });
+            return (
+                <Collection<string> getItemId={getItemId} newItem="" {...form.getInputProps('fruits')}>
+                    {(name) => <span>{name}</span>}
+                </Collection>
+            );
+        };
+
+        render(<Fixture />);
+
+        const items = screen.getAllByTestId(/item-/);
         expect(items).toHaveLength(2);
         expect(items[0]).toHaveTextContent('banana');
         expect(items[1]).toHaveTextContent('orange');
+        expect(screen.getByTestId('item-index-0')).toBeInTheDocument();
+        expect(screen.getByTestId('item-index-1')).toBeInTheDocument();
     });
 
     it('removes the item when clicking on its remove button', async () => {
-        const user = userEvent.setup({delay: null});
+        const user = userEvent.setup();
         const Fixture = () => {
             const form = useForm({
                 initialValues: {fruits: ['banana', 'orange']},
@@ -36,7 +88,7 @@ describe('Collection', () => {
             return (
                 <>
                     <Collection newItem="" {...form.getInputProps('fruits')}>
-                        {(name) => <span data-testid="item">{name}</span>}
+                        {(name) => <span>{name}</span>}
                     </Collection>
                     <div data-testid="form-state">{JSON.stringify(form.values)}</div>
                 </>
@@ -44,21 +96,57 @@ describe('Collection', () => {
         };
 
         render(<Fixture />);
-        let items = screen.getAllByTestId('item');
+        let items = screen.getAllByTestId(/item-/);
         expect(items).toHaveLength(2);
 
-        const removeBanana = await within(items[0].parentElement).findByRole('button', {name: /remove/i});
+        const removeBanana = await within(screen.getByTestId('item-0')).findByRole('button', {name: /remove/i});
+        await user.click(removeBanana);
+
+        items = screen.getAllByTestId(/item-/);
+        expect(items).toHaveLength(1);
+        expect(items[0]).toHaveTextContent('orange');
+        expect(screen.queryByTestId('item-1')).not.toBeInTheDocument();
+        expect(screen.getByTestId('form-state')).toHaveTextContent('{"fruits":["orange"]}');
+    });
+
+    it('removes the item when clicking on its remove button with custom id', async () => {
+        const user = userEvent.setup();
+        const getItemId = (item: string) => `id-${item}`;
 
+        const Fixture = () => {
+            const form = useForm({
+                initialValues: {fruits: ['banana', 'orange']},
+                enhanceGetInputProps: (payload) => ({...enhanceWithCollectionProps(payload, 'fruits')}),
+            });
+            return (
+                <>
+                    <Collection getItemId={getItemId} newItem="" {...form.getInputProps('fruits')}>
+                        {(name) => <span>{name}</span>}
+                    </Collection>
+                    <div data-testid="form-state">{JSON.stringify(form.values)}</div>
+                </>
+            );
+        };
+
+        render(<Fixture />);
+        let items = screen.getAllByTestId(/item-/);
+        expect(items).toHaveLength(2);
+
+        const removeBanana = await within(screen.queryByTestId('item-id-banana')).findByRole('button', {
+            name: /remove/i,
+        });
         await user.click(removeBanana);
 
-        items = screen.getAllByTestId('item');
-        expect(screen.getAllByTestId('item')).toHaveLength(1);
+        items = screen.getAllByTestId(/item-/);
+        expect(items).toHaveLength(1);
         expect(items[0]).toHaveTextContent('orange');
+        expect(screen.getByTestId('item-id-orange')).toBeInTheDocument();
+        expect(screen.queryByTestId('item-id-banana')).not.toBeInTheDocument();
         expect(screen.getByTestId('form-state')).toHaveTextContent('{"fruits":["orange"]}');
     });
 
     it('calls the onRemoveItem function when clicking on a remove button', async () => {
-        const user = userEvent.setup({delay: null});
+        const user = userEvent.setup();
         const onRemoveItemSpy = vi.fn();
         const Fixture = () => {
             const form = useForm({
@@ -67,29 +155,27 @@ describe('Collection', () => {
             });
             return (
                 <Collection newItem="" {...form.getInputProps('fruits')} onRemoveItem={onRemoveItemSpy}>
-                    {(name) => <span data-testid="item">{name}</span>}
+                    {(name) => <span>{name}</span>}
                 </Collection>
             );
         };
 
         render(<Fixture />);
-        let items = screen.getAllByTestId('item');
+        const items = screen.getAllByTestId(/item-/);
         expect(items).toHaveLength(2);
-
-        const removeOrange = await within(items[1].parentElement).findByRole('button', {name: /remove/i});
+        const removeOrange = await within(screen.queryByTestId('item-1')).findByRole('button', {name: /remove/i});
         await user.click(removeOrange);
 
         expect(onRemoveItemSpy).toHaveBeenCalledWith(1);
 
-        items = screen.getAllByTestId('item');
-        const removeBanana = await within(items[0].parentElement).findByRole('button', {name: /remove/i});
+        const removeBanana = await within(screen.queryByTestId('item-0')).findByRole('button', {name: /remove/i});
         await user.click(removeBanana);
 
         expect(onRemoveItemSpy).toHaveBeenCalledWith(0);
     });
 
     it('does not render the remove button when disabled', async () => {
-        const user = userEvent.setup({delay: null});
+        const user = userEvent.setup();
         const Fixture = () => {
             const [disabled, setDisabled] = useState(false);
             const form = useForm({
@@ -100,7 +186,7 @@ describe('Collection', () => {
                 <>
                     <button onClick={() => setDisabled(true)}>disable</button>
                     <Collection newItem="" {...form.getInputProps('fruits')} disabled={disabled}>
-                        {(name) => <span data-testid="item">{name}</span>}
+                        {(name) => <span>{name}</span>}
                     </Collection>
                 </>
             );
@@ -113,7 +199,7 @@ describe('Collection', () => {
     });
 
     it('adds a new item when clicking on the add button', async () => {
-        const user = userEvent.setup({delay: null});
+        const user = userEvent.setup();
         const Fixture = () => {
             const form = useForm({
                 initialValues: {fruits: ['banana', 'orange']},
@@ -122,7 +208,7 @@ describe('Collection', () => {
             return (
                 <>
                     <Collection newItem="new" {...form.getInputProps('fruits')}>
-                        {(name) => <span data-testid="item">{name}</span>}
+                        {(name) => <span>{name}</span>}
                     </Collection>
                     <div data-testid="form-state">{JSON.stringify(form.values)}</div>
                 </>
@@ -133,11 +219,43 @@ describe('Collection', () => {
         const addItem = screen.getByRole('button', {name: /add/i});
         await user.click(addItem);
 
-        const items = screen.getAllByTestId('item');
+        const items = screen.getAllByTestId(/item-/);
         expect(items).toHaveLength(3);
         expect(items[0]).toHaveTextContent('banana');
         expect(items[1]).toHaveTextContent('orange');
         expect(items[2]).toHaveTextContent('new');
+        expect(screen.getByTestId('item-2')).toBeInTheDocument();
+        expect(screen.getByTestId('form-state')).toHaveTextContent('{"fruits":["banana","orange","new"]}');
+    });
+
+    it('adds a new item when clicking on the add button with custom id', async () => {
+        const user = userEvent.setup();
+        const getItemId = (item: string) => `id-${item}`;
+        const Fixture = () => {
+            const form = useForm({
+                initialValues: {fruits: ['banana', 'orange']},
+                enhanceGetInputProps: (payload) => ({...enhanceWithCollectionProps(payload, 'fruits')}),
+            });
+            return (
+                <>
+                    <Collection getItemId={getItemId} newItem="new" {...form.getInputProps('fruits')}>
+                        {(name) => <span>{name}</span>}
+                    </Collection>
+                    <div data-testid="form-state">{JSON.stringify(form.values)}</div>
+                </>
+            );
+        };
+
+        render(<Fixture />);
+        const addItem = screen.getByRole('button', {name: /add/i});
+        await user.click(addItem);
+
+        const items = screen.getAllByTestId(/item-/);
+        expect(items).toHaveLength(3);
+        expect(items[0]).toHaveTextContent('banana');
+        expect(items[1]).toHaveTextContent('orange');
+        expect(items[2]).toHaveTextContent('new');
+        expect(screen.getByTestId('item-id-new')).toBeInTheDocument();
         expect(screen.getByTestId('form-state')).toHaveTextContent('{"fruits":["banana","orange","new"]}');
     });
 
@@ -151,7 +269,7 @@ describe('Collection', () => {
             return (
                 <>
                     <Collection newItem="new" {...form.getInputProps('fruits')} allowAdd={allowAdd}>
-                        {(name) => <span data-testid="item">{name}</span>}
+                        {(name) => <span>{name}</span>}
                     </Collection>
                     <div data-testid="form-state">{JSON.stringify(form.values)}</div>
                 </>
@@ -175,8 +293,8 @@ describe('Collection', () => {
                     enhanceGetInputProps: (payload) => ({...enhanceWithCollectionProps(payload, 'fruits')}),
                 });
                 return (
-                    <Collection data-testid="collection" {...form.getInputProps('fruits')} newItem="new" required>
-                        {(name) => <span data-testid="item">{name}</span>}
+                    <Collection {...form.getInputProps('fruits')} newItem="new" required>
+                        {(name) => <span>{name}</span>}
                     </Collection>
                 );
             };
@@ -185,7 +303,7 @@ describe('Collection', () => {
 
             expect(screen.queryByRole('button', {name: /remove/i})).not.toBeInTheDocument();
 
-            const items = screen.getAllByTestId('item');
+            const items = screen.getAllByTestId(/item-/);
             expect(items).toHaveLength(1);
             expect(items[0]).toHaveTextContent('banana');
         });
@@ -197,8 +315,8 @@ describe('Collection', () => {
                     enhanceGetInputProps: (payload) => ({...enhanceWithCollectionProps(payload, 'fruits')}),
                 });
                 return (
-                    <Collection data-testid="collection" {...form.getInputProps('fruits')} newItem="new" required>
-                        {(name) => <span data-testid="item">{name}</span>}
+                    <Collection {...form.getInputProps('fruits')} newItem="new" required>
+                        {(name) => <span>{name}</span>}
                     </Collection>
                 );
             };
@@ -209,22 +327,24 @@ describe('Collection', () => {
             const removeButtons = screen.queryAllByRole('button', {name: /remove/i});
             expect(removeButtons).toHaveLength(2);
 
-            const items = screen.getAllByTestId('item');
+            const items = screen.getAllByTestId(/item-/);
             expect(items).toHaveLength(2);
             expect(items[0]).toHaveTextContent('banana');
             expect(items[1]).toHaveTextContent('orange');
+            expect(screen.getByTestId('item-0')).toBeInTheDocument();
+            expect(screen.getByTestId('item-1')).toBeInTheDocument();
         });
 
         it('not render the remove button after removing an item from a collection containing two items', async () => {
-            const user = userEvent.setup({delay: null});
+            const user = userEvent.setup();
             const Fixture = () => {
                 const form = useForm({
                     initialValues: {fruits: ['banana', 'orange']},
                     enhanceGetInputProps: (payload) => ({...enhanceWithCollectionProps(payload, 'fruits')}),
                 });
                 return (
-                    <Collection data-testid="collection" {...form.getInputProps('fruits')} newItem="new" required>
-                        {(name) => <span data-testid="item">{name}</span>}
+                    <Collection {...form.getInputProps('fruits')} newItem="new" required>
+                        {(name) => <span>{name}</span>}
                     </Collection>
                 );
             };
@@ -236,14 +356,18 @@ describe('Collection', () => {
             const removeButtons = screen.queryAllByRole('button', {name: /remove/i});
             expect(removeButtons).toHaveLength(2);
 
-            const items = screen.getAllByTestId('item');
+            const items = screen.getAllByTestId(/item-/);
             expect(items).toHaveLength(2);
             expect(items[0]).toHaveTextContent('banana');
             expect(items[1]).toHaveTextContent('orange');
+            expect(screen.getByTestId('item-0')).toBeInTheDocument();
+            expect(screen.getByTestId('item-1')).toBeInTheDocument();
 
-            await user.click(removeButtons[1]);
+            const removeOrange = await within(screen.queryByTestId('item-1')).findByRole('button', {name: /remove/i});
+            await user.click(removeOrange);
 
             expect(screen.queryByRole('button', {name: /remove/i})).not.toBeInTheDocument();
+            expect(screen.queryByTestId('item-1')).not.toBeInTheDocument();
         });
     });
 
@@ -257,7 +381,7 @@ describe('Collection', () => {
                 return (
                     <>
                         <Collection newItem="new" {...form.getInputProps('fruits')} draggable>
-                            {(name) => <span data-testid="item">{name}</span>}
+                            {(name) => <span>{name}</span>}
                         </Collection>
                     </>
                 );
@@ -271,21 +395,15 @@ describe('Collection', () => {
 
         describe('when required is true', () => {
             it('not render the remove button after removing an item from a collection containing two items', async () => {
-                const user = userEvent.setup({delay: null});
+                const user = userEvent.setup();
                 const Fixture = () => {
                     const form = useForm({
                         initialValues: {fruits: ['banana', 'orange']},
                         enhanceGetInputProps: (payload) => ({...enhanceWithCollectionProps(payload, 'fruits')}),
                     });
                     return (
-                        <Collection
-                            data-testid="collection"
-                            {...form.getInputProps('fruits')}
-                            newItem="new"
-                            required
-                            draggable
-                        >
-                            {(name) => <span data-testid="item">{name}</span>}
+                        <Collection {...form.getInputProps('fruits')} newItem="new" required draggable>
+                            {(name) => <span>{name}</span>}
                         </Collection>
                     );
                 };
@@ -297,12 +415,15 @@ describe('Collection', () => {
                 const removeButtons = screen.queryAllByRole('button', {name: /remove/i});
                 expect(removeButtons).toHaveLength(2);
 
-                const items = screen.getAllByTestId('item');
+                const items = screen.getAllByTestId(/item-/);
                 expect(items).toHaveLength(2);
                 expect(items[0]).toHaveTextContent('banana');
                 expect(items[1]).toHaveTextContent('orange');
 
-                await user.click(removeButtons[1]);
+                const removeOrange = await within(screen.queryByTestId('item-1')).findByRole('button', {
+                    name: /remove/i,
+                });
+                await user.click(removeOrange);
 
                 expect(screen.queryByRole('button', {name: /remove/i})).not.toBeInTheDocument();
             });