feat: implements badge on tab component

src/components/tab/tab.test.tsx

@@ -11,11 +11,18 @@ const defaultTab: TabProps = {
   handleClick: clickEvent,
 };
 
-function sut(props: TabProps = defaultTab): HTMLElement {
+function sut(props: TabProps = defaultTab) {
   render(<IonTab {...props} />);
-  return screen.getByRole('button', { name: props.label });
 }
 
+const getTab = () => {
+  return screen.getByTestId('ion-tab');
+};
+
+const getBadge = () => {
+  return screen.getByTestId('ion-badge');
+};
+
 describe('Tab', () => {
   describe('Default', () => {
     it('should render the Tab component', () => {
@@ -25,28 +32,31 @@ describe('Tab', () => {
     });
 
     it('should execute user event when the Tab is clicked', async () => {
-      await userEvent.click(sut({ ...defaultTab }));
+      sut();
+      await userEvent.click(getTab());
       expect(clickEvent).toHaveBeenCalled();
     });
 
     it('should be contain the "selected-true" class when clicked without handleClick prop', async () => {
-      const myTab = sut({ ...defaultTab, handleClick: undefined });
+      sut({ ...defaultTab, handleClick: undefined });
+      const myTab = getTab();
       await userEvent.click(myTab);
       expect(myTab.className).toContain('selected-true');
     });
 
     it('should be disabled', () => {
-      expect(sut({ ...defaultTab, disabled: true })).toHaveAttribute(
-        'disabled'
-      );
+      sut({ ...defaultTab, disabled: true });
+      expect(getTab()).toHaveAttribute('disabled');
     });
 
-    it('should render tab without disabled by default', async () => {
-      expect(sut({ ...defaultTab })).toBeEnabled();
+    it('should render tab enabled by default', async () => {
+      sut();
+      expect(getTab()).toBeEnabled();
     });
 
     it('should not call handeClick event when tab is disabled', async () => {
-      await userEvent.click(sut({ ...defaultTab, disabled: true }));
+      sut({ ...defaultTab, disabled: true });
+      await userEvent.click(getTab());
       expect(clickEvent).toBeCalledTimes(0);
     });
 
@@ -58,7 +68,8 @@ describe('Tab', () => {
   describe('Custom Props', () => {
     const tabSizes: Array<TabProps['size']> = ['sm', 'md', 'lg'];
     it.each(tabSizes)('should render Tab with %s size', (size) => {
-      const { className } = sut({ ...defaultTab, size: size });
+      sut({ ...defaultTab, size: size });
+      const { className } = getTab();
       expect(className).toContain(`size-${size}`);
     });
 
@@ -69,7 +80,8 @@ describe('Tab', () => {
       'right',
     ];
     it.each(tabDirections)('should render Tab with %s border', (direction) => {
-      const { className } = sut({ ...defaultTab, direction: direction });
+      sut({ ...defaultTab, direction: direction });
+      const { className } = getTab();
       expect(className).toContain(`direction-${direction}`);
     });
   });
@@ -99,4 +111,28 @@ describe('Tab', () => {
       );
     });
   });
+
+  describe('With Badge', () => {
+    it('should render badge', async () => {
+      sut({ ...defaultTab, badge: { label: 2 } });
+      expect(getBadge()).toBeInTheDocument();
+    });
+
+    it('should not render badge when is not informed', async () => {
+      sut();
+      expect(screen.queryByTestId('ion-badge')).toBeNull();
+    });
+
+    it('should render badge with string label', async () => {
+      const label = 'Skywalker';
+      sut({ ...defaultTab, badge: { label: label } });
+      expect(getBadge().textContent).toBe(label);
+    });
+
+    it('should render 99+ when value is bigger than 100', async () => {
+      const label = 190;
+      sut({ ...defaultTab, badge: { label: label } });
+      expect(getBadge().textContent).toBe('99+');
+    });
+  });
 });

src/components/tab/tab.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { SizeType } from '../../core/types/size';
+import IonBadge, { BadgeProps } from '../badge/badge';
 import IonIcon from '../icons/icons';
 import { iconType } from '../icons/svgs/icons';
 import { TabStyles } from './styles';
@@ -15,6 +16,7 @@ export type TabProps = {
   selected?: boolean;
   disabled?: boolean;
   icon?: iconType;
+  badge?: BadgeProps;
   handleClick?: () => void;
 } & StitchesTabProps;
 
@@ -26,6 +28,7 @@ const IonTab = ({
   selected = false,
   disabled = false,
   handleClick,
+  badge,
 }: TabProps) => {
   const [selectedState, setSelectedState] = useState<boolean>(selected);
 
@@ -58,10 +61,12 @@ const IonTab = ({
         onClick={handleClick}
         selected={selectedState}
         disabled={disabled}
+        data-testid="ion-tab"
       >
         <div>
           {icon && <IonIcon type={icon} size={iconSize[`${size}`]} />}
           <span>{label}</span>
+          {badge && <IonBadge label={badge.label} type={badge.type} />}
         </div>
       </TabStyles>
     </>

src/stories/tab/tab.stories.tsx

@@ -69,8 +69,21 @@ Selected.args = {
   selected: true,
 };
 
-export const Icon = Template.bind({});
-Icon.args = {
+export const WithIcon = Template.bind({});
+WithIcon.args = {
   label: 'Icon',
   icon: 'pencil',
 };
+
+export const WithBadge = Template.bind({});
+WithBadge.args = {
+  label: 'Badge',
+  badge: { label: 10 },
+};
+
+export const IconAndBadge = Template.bind({});
+IconAndBadge.args = {
+  label: 'Badge',
+  icon: 'pencil',
+  badge: { label: 10 },
+};