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',