chore: update tests

src/core/components/tabs/tabsList/tabsList.test.tsx

@@ -1,39 +1,29 @@
 import { render, screen } from '@testing-library/react';
-import { Tabs, type ITabsListProps } from '../../tabs';
+import { Tabs } from '../../tabs';
+import type { ReactNode } from 'react';
 
 describe('<Tabs.List /> component', () => {
-    const createSingleTabTestComponent = (props?: Partial<ITabsListProps>) => {
-        const completeProps: ITabsListProps = { ...props };
-        return (
-            <Tabs.Root>
-                <Tabs.List {...completeProps}>
-                    <Tabs.Trigger label="Tab 1" value="1" />
-                </Tabs.List>
-            </Tabs.Root>
-        );
-    };
-    const createMultiTabsTestComponent = (props?: Partial<ITabsListProps>) => {
-        const completeProps: ITabsListProps = { ...props };
-        return (
-            <Tabs.Root>
-                <Tabs.List {...completeProps}>
+    const createTestComponent = (children: ReactNode) => (
+        <Tabs.Root>
+            <Tabs.List>{children}</Tabs.List>
+        </Tabs.Root>
+    );
+
+    it('should render multiple tab triggers without crashing', () => {
+        render(
+            createTestComponent(
+                <>
                     <Tabs.Trigger label="Tab 1" value="1" />
                     <Tabs.Trigger label="Tab 2" value="2" />
-                </Tabs.List>
-            </Tabs.Root>
+                </>,
+            ),
         );
-    };
-
-    it('should render multiple tab triggers without crashing', () => {
-        render(createMultiTabsTestComponent());
-
         expect(screen.getByText('Tab 1')).toBeInTheDocument();
         expect(screen.getByText('Tab 2')).toBeInTheDocument();
     });
 
     it('should render null when only a single tab trigger is present', () => {
-        render(createSingleTabTestComponent());
-
+        render(createTestComponent(<Tabs.Trigger label="Tab 1" value="1" />));
         expect(screen.queryByText('Tab 1')).not.toBeInTheDocument();
     });
 });

src/core/components/tabs/tabsTrigger/tabsTrigger.test.tsx

@@ -1,57 +1,41 @@
 import { render, screen } from '@testing-library/react';
 import { IconType } from '../../icon';
 import { Tabs, type ITabsTriggerProps } from '../../tabs';
+import { TabsList as RadixTabsList, Tabs as RadixTabsRoot } from '@radix-ui/react-tabs';
 
 describe('<Tabs.Trigger /> component', () => {
-    const createTestComponent = (tabs: ITabsTriggerProps[]) => (
-        <Tabs.Root defaultValue="1">
-            <Tabs.List>
-                {tabs.map((props, index) => (
-                    <Tabs.Trigger key={index} {...props} />
-                ))}
-            </Tabs.List>
-        </Tabs.Root>
-    );
-
-    it('renders a tab', () => {
-        render(
-            createTestComponent([
-                { label: 'Tab 1', value: '1' },
-                { label: 'Tab 2', value: '2' },
-            ]),
+    const createTestComponent = (props?: Partial<ITabsTriggerProps>) => {
+        const completeProps: ITabsTriggerProps = {
+            label: 'Tab 1',
+            value: '1',
+            ...props,
+        };
+
+        return (
+            <RadixTabsRoot>
+                <RadixTabsList>
+                    <Tabs.Trigger {...completeProps} />
+                </RadixTabsList>
+            </RadixTabsRoot>
         );
+    };
 
+    it('renders a tab', () => {
+        render(createTestComponent());
         const tab = screen.getByRole('tab', { name: 'Tab 1' });
         expect(tab).toBeInTheDocument();
         expect(tab.getAttribute('disabled')).toBeNull();
     });
 
     it('renders the icon when iconRight is provided', () => {
         const iconRight = IconType.BLOCKCHAIN_BLOCK;
-        render(
-            createTestComponent([
-                { label: 'Tab 1', value: '1', iconRight },
-                { label: 'Tab 2', value: '2' },
-            ]),
-        );
-
+        render(createTestComponent({ iconRight }));
         expect(screen.getByTestId(iconRight)).toBeInTheDocument();
     });
 
     it('disables the tab when the disabled property is set to true', () => {
-        render(
-            createTestComponent([
-                { label: 'Tab 1', value: '1', disabled: true },
-                { label: 'Tab 2', value: '2' },
-            ]),
-        );
-
+        render(createTestComponent({ disabled: true }));
         const tab = screen.getByRole('tab', { name: 'Tab 1' });
         expect(tab.getAttribute('disabled')).toEqual('');
     });
-
-    it('does not render the Tabs.List or Tabs.Trigger in a single tab setup', () => {
-        render(createTestComponent([{ label: 'Tab 1', value: '1' }]));
-        expect(screen.queryByRole('tab')).not.toBeInTheDocument();
-    });
 });