refactor: config close on select (#834)

Brisanet · Sep 22, 2023 · 2f727c0 · 2f727c0
1 parent 302b63c
commit 2f727c0
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/projects/ion/src/lib/core/types/sidebar.ts b/projects/ion/src/lib/core/types/sidebar.ts
@@ -12,4 +12,5 @@ export interface IonSidebarProps {
   logo: string;
   logoAction?: () => void;
   items: (Item & { options?: [Item, ...Item[]] })[];
+  closeOnSelect?: boolean;
 }
diff --git a/projects/ion/src/lib/sidebar/sidebar.component.ts b/projects/ion/src/lib/sidebar/sidebar.component.ts
@@ -11,6 +11,7 @@ export class IonSidebarComponent {
   @Input() logo!: string;
   @Input() logoAction?: () => void;
   @Input() items: IonSidebarProps['items'] = [];
+  @Input() closeOnSelect = false;
 
   public closed = true;
 
@@ -41,17 +42,16 @@ export class IonSidebarComponent {
 
   public itemSelected(itemIndex: number): void {
     selectItemByIndex(this.items, itemIndex);
-    this.toggleSidebarVisibility();
+    this.closeOnSelect ? this.toggleSidebarVisibility() : false;
   }
 
   public itemOnGroupSelected(groupIndex: number): void {
     unselectAllItems(this.items, groupIndex);
-    this.toggleSidebarVisibility();
+    this.closeOnSelect ? this.toggleSidebarVisibility() : false;
   }
 
   public groupSelected(groupIndex: number): void {
     unselectAllItems(this.items);
     callItemAction(this.items, groupIndex);
-    this.toggleSidebarVisibility();
   }
 }
diff --git a/projects/ion/src/lib/sidebar/sidebar.spec.ts b/projects/ion/src/lib/sidebar/sidebar.spec.ts
@@ -21,6 +21,8 @@ const getByTestId = (key: keyof typeof components): HTMLElement => {
 
 const logo: IonSidebarProps['logo'] = 'logo.svg';
 
+const closeOnSelectConfig: IonSidebarProps['closeOnSelect'] = false;
+
 const actionMock = jest.fn();
 
 const items: IonSidebarProps['items'] = [
@@ -54,7 +56,7 @@ const items: IonSidebarProps['items'] = [
 ];
 
 const sut = async (
-  props: IonSidebarProps = { logo: '', items: [] }
+  props: IonSidebarProps = { logo: '', items: [], closeOnSelect: false }
 ): Promise<void> => {
   await render(IonSidebarComponent, {
     componentProperties: { ...props },
@@ -209,13 +211,6 @@ describe('Sidebar', () => {
         userEvent.click(groupName);
         expect(actionMock).toHaveBeenCalledTimes(1);
       });
-      describe('Selecting option', () => {
-        it('should close sidebar when options is selected', () => {
-          userEvent.click(item1);
-          expect(item1).toHaveClass(selectedItemClass);
-          expect(getByTestId('sidebar')).not.toHaveClass('ion-sidebar--opened');
-        });
-      });
     });
   });
   describe('Clicking outside it', () => {
@@ -276,4 +271,19 @@ describe('Sidebar', () => {
       expect(actionMock).not.toHaveBeenCalled();
     });
   });
+  describe('Close on select config', () => {
+    it('should close sidebar when options is selected', async () => {
+      await sut({ items: items, logo, closeOnSelect: closeOnSelectConfig });
+
+      const item1 = screen.getByRole('button', {
+        name: items[0].title,
+      });
+      const selectedItemClass = 'ion-sidebar-item--selected';
+
+      userEvent.click(item1);
+      expect(item1).toHaveClass(selectedItemClass);
+
+      expect(getByTestId('sidebar')).not.toHaveClass('ion-sidebar--opened');
+    });
+  });
 });
diff --git a/stories/Sidebar.stories.ts b/stories/Sidebar.stories.ts
@@ -25,6 +25,7 @@ const Template: Story<IonSidebarComponent> = (args: IonSidebarComponent) => ({
 export const Default = Template.bind({});
 Default.args = {
   logo: require('./assets/sidebar-logo.svg'),
+  closeOnSelect: false,
   items: [
     {
       title: 'Fila de atendimento',