From ff2ad013dcf884a8cf1521d6374cf9a0c10278d2 Mon Sep 17 00:00:00 2001
From: Allan Oliveira <138060158+allan-chagas-brisa@users.noreply.github.com>
Date: Mon, 2 Oct 2023 15:22:29 -0300
Subject: [PATCH] fix: chip badge not geting the initial selecteds (#855)
 :ambulance:

---
 .../chip-group/chip-group.component.spec.ts    |  4 ----
 .../ion/src/lib/chip/chip.component.spec.ts    | 11 +++++++++++
 projects/ion/src/lib/chip/chip.component.ts    |  1 +
 stories/Chip.stories.ts                        | 18 ++++++++++++++++++
 4 files changed, 30 insertions(+), 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
index 699914af5..5b3761a79 100644
--- 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
index 41563d730..b50a218c7 100644
--- 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
index dc3797d00..12918abd1 100644
--- 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
index 458ecf76a..9f1d6d85b 100644
--- 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',