fix: chip badge not geting the initial selecteds (#855) 🚑

Brisanet · Oct 2, 2023 · ff2ad01 · ff2ad01
1 parent 38f7db2
commit ff2ad01
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 4 deletions.
diff --git a/projects/ion/src/lib/chip-group/chip-group.component.spec.ts b/projects/ion/src/lib/chip-group/chip-group.component.spec.ts
@@ -134,10 +134,6 @@ describe('With Dropdown', () => {
     expect(screen.queryAllByText(option)).toHaveLength(1);
   });
 
-  it('should not show badge when dont have item selected', async () => {
-    expect(screen.queryAllByTestId('badge-multiple')).toHaveLength(0);
-  });
-
   it('should not close the dropdown when an option is selected and the chip is multiple', async () => {
     await sut({
       chips: [

diff --git a/projects/ion/src/lib/chip/chip.component.spec.ts b/projects/ion/src/lib/chip/chip.component.spec.ts
@@ -144,6 +144,17 @@ describe('ChipComponent', () => {
     expect(screen.getByTestId('badge-multiple')).toHaveTextContent('1');
   });
 
+  it('should start with badge when an item is already selected', async () => {
+    await sut({
+      label: 'dropdown',
+      options: [
+        { label: 'Option 1', selected: true },
+        { label: 'Option 2', selected: false },
+      ],
+    });
+    expect(screen.queryAllByTestId('badge-multiple')).toHaveLength(1);
+  });
+
   describe('With Dropdown', () => {
     const dropdownEvent = jest.fn();
     beforeEach(async () => {

diff --git a/projects/ion/src/lib/chip/chip.component.ts b/projects/ion/src/lib/chip/chip.component.ts
@@ -157,6 +157,7 @@ export class ChipComponent implements OnInit, AfterViewInit, DoCheck {
 
   ngDoCheck(): void {
     this.updateLabel();
+    this.setBadgeValue(this.getSelectedOptions().length);
   }
 
   getSelectedOptions(): DropdownItem[] {

diff --git a/stories/Chip.stories.ts b/stories/Chip.stories.ts
@@ -90,6 +90,24 @@ WithDropdown.args = {
   multiple: true,
 };
 
+export const WithItemAlreadySelected = Template.bind({});
+WithItemAlreadySelected.args = {
+  label: 'Animais',
+  options: [
+    { label: 'Cat', selected: true },
+    { label: 'Dog' },
+    { label: 'Monkey' },
+    { label: 'Human' },
+    { label: 'Bird' },
+    { label: 'Fish' },
+    { label: 'Goat' },
+    { label: 'Lion' },
+    { label: 'Tiger' },
+  ],
+  icon: 'close',
+  multiple: true,
+};
+
 export const WithDropdownWithSearch = Template.bind({});
 WithDropdownWithSearch.args = {
   label: 'Animais',