feat: add undefined or null state to middle option on triple toggle #…

…1058
Brisanet · Mar 26, 2024 · cd76ef6 · cd76ef6
1 parent 459bcce
commit cd76ef6
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/projects/ion/src/lib/core/types/triple-toggle.ts b/projects/ion/src/lib/core/types/triple-toggle.ts
@@ -27,4 +27,5 @@ export interface TripleToggleProps {
   options?: TripleToggleOptions;
   onlyShowIcon?: boolean;
   ionClick?: EventEmitter<SafeAny>;
+  middleValue?: SafeAny;
 }
diff --git a/projects/ion/src/lib/triple-toggle/triple-toggle.component.spec.ts b/projects/ion/src/lib/triple-toggle/triple-toggle.component.spec.ts
@@ -120,6 +120,18 @@ describe('IonTripleToggleComponent', () => {
       expect(screen.getByTestId(firstOptionId)).toHaveClass(selectedOption);
     });
 
+    it.only('should show the selected option when started with it', async () => {
+      await sut({
+        ionClick: {
+          emit: clickEvent,
+        } as SafeAny,
+        middleValue: null,
+      });
+      const element = screen.getByTestId(middleOptionId);
+      fireEvent.click(element);
+      expect(clickEvent).toHaveBeenCalledWith(null);
+    });
+
     it('should show selected middle option when none option are selected initially', async () => {
       await sut({
         options: [

diff --git a/projects/ion/src/lib/triple-toggle/triple-toggle.component.ts b/projects/ion/src/lib/triple-toggle/triple-toggle.component.ts
@@ -29,6 +29,8 @@ export class IonTripleToggleComponent implements OnInit, OnChanges {
   @Input() size: Size = 'md';
   @Input() options: TripleToggleOptions;
   @Input() onlyShowIcon = false;
+  @Input() middleValue = undefined;
+
   @Output() ionClick = new EventEmitter();
 
   public optionsToRender: TripleToggleOptionsToRender;
@@ -39,7 +41,7 @@ export class IonTripleToggleComponent implements OnInit, OnChanges {
     label: 'Sim',
   };
   private DEFAULT_MIDDLE_OPTION: TripleToggleOption = {
-    value: undefined,
+    value: this.middleValue,
     label: '-',
     selected: true,
   };