Merge pull request #824 from dxc-technology/fix-823

Added tests toggle group with default value

Author: Jialecl

projects/dxc-ngx-cdk/src/lib/dxc-toggleGroup/dxc-toggle/dxc-toggle.component.html

@@ -1,5 +1,11 @@
-<div class="toggleContent"  [attr.aria-checked]="selected" [attr.role]="role"
-(click)="onClickHandler()"  (keypress)="onHandleKeyPressHandler($event)" [tabIndex]="tabIndexValue">
+<div
+  class="toggleContent"
+  [attr.aria-checked]="selected"
+  [attr.role]="role"
+  (click)="onClickHandler()"
+  (keypress)="onHandleKeyPressHandler($event)"
+  [tabIndex]="tabIndexValue"
+>
   <ng-content select="dxc-toggle-icon"></ng-content>
   <span class="label" *ngIf="label"> {{ label }} </span>
 </div>

projects/dxc-ngx-cdk/src/lib/dxc-toggleGroup/dxc-toggle/dxc-toggle.component.ts

@@ -25,13 +25,13 @@ export class DxcToggleComponent implements OnInit {
   @Input() value: string;
   @Output() public onClick: EventEmitter<any> = new EventEmitter<any>();
   @Output() public onKeyPress: EventEmitter<any> = new EventEmitter<any>();
-  role: string;
   @HostBinding("class") style;
 
   @HostBinding("class.selected") get valid() {
     return this.selected;
   }
 
+  role: string;
   selected: boolean = false;
   tabIndexValue: number = 0;
 
@@ -45,6 +45,10 @@ export class DxcToggleComponent implements OnInit {
     }
   }
 
+  setRole(role: string) {
+    this.role = role;
+  }
+
   ngOnInit(): void {
     this.style = `${this.getDynamicStyle()}`;
   }

projects/dxc-ngx-cdk/src/lib/dxc-toggleGroup/dxc-toggleGroup.component.spec.ts

@@ -6,6 +6,7 @@ import {
   platformBrowserDynamicTesting,
 } from "@angular/platform-browser-dynamic/testing";
 import { TestBed } from "@angular/core/testing";
+import { waitFor } from "@testing-library/dom";
 
 TestBed.initTestEnvironment(
   BrowserDynamicTestingModule,
@@ -148,4 +149,48 @@ describe("DxcToggleGroup tests", () => {
     fireEvent.click(dxcToggleGroup.getByText("Facebook"));
     expect(changeMock).toHaveBeenCalledTimes(0);
   });
+
+  test("dxc-toggleGroup with default value", async () => {
+    const changeMock = jest.fn();
+    const dxcToggleGroup = await render(
+      `<dxc-togglegroup defaultValue="3">,
+          <dxc-toggle label="Facebook" value="1"></dxc-toggle>
+          <dxc-toggle label="Twitter" value="2"></dxc-toggle>
+          <dxc-toggle label="Linkedin" value="3"></dxc-toggle>
+        </dxc-togglegroup>`,
+      {
+        componentProperties: {
+          changeMock,
+        },
+        imports: [DxcToggleGroupModule],
+        excludeComponentDeclaration: true,
+      }
+    );
+    const radios = dxcToggleGroup.getAllByRole("radio");
+    expect(radios[0].getAttribute("aria-checked")).toBe("false");
+    expect(radios[1].getAttribute("aria-checked")).toBe("false");
+    expect(radios[2].getAttribute("aria-checked")).toBe("true");
+  });
+
+  test("dxc-toggleGroup multiple with default value", async () => {
+    const changeMock = jest.fn();
+    const dxcToggleGroup = await render(
+      `<dxc-togglegroup [multiple]="true" [defaultValue]="['2','3']">,
+          <dxc-toggle label="Facebook" value="1"></dxc-toggle>
+          <dxc-toggle label="Twitter" value="2"></dxc-toggle>
+          <dxc-toggle label="Linkedin" value="3"></dxc-toggle>
+        </dxc-togglegroup>`,
+      {
+        componentProperties: {
+          changeMock,
+        },
+        imports: [DxcToggleGroupModule],
+        excludeComponentDeclaration: true,
+      }
+    );
+    const radios = dxcToggleGroup.getAllByRole("switch");
+    expect(radios[0].getAttribute("aria-checked")).toBe("false");
+    expect(radios[1].getAttribute("aria-checked")).toBe("true");
+    expect(radios[2].getAttribute("aria-checked")).toBe("true");
+  });
 });

projects/dxc-ngx-cdk/src/lib/dxc-toggleGroup/dxc-toggleGroup.component.ts

@@ -148,11 +148,9 @@ export class DxcToggleGroupComponent implements OnInit {
           }
         });
 
-        setTimeout(() => {
-          item.tabIndexValue = this.disabled ? -1 : this.tabIndexValue;
-          item.role = this.multiple ? "switch" : "radio";
-          this.setToggleSelected(item);
-        });
+        item.tabIndexValue = this.disabled ? -1 : this.tabIndexValue;
+        item.setRole(this.multiple ? "switch" : "radio");
+        this.setToggleSelected(item);
       });
     }
   }

projects/dxc-ngx-cdk/src/lib/dxc-toggleGroup/dxc-toggleGroup.types.ts

@@ -22,6 +22,7 @@ export interface ToggleGroupProperties {
   disabled?: boolean;
   tabIndexValue?: number;
   margin?: Space | Spacing;
+  defaultValue?: string | string[];
 }
 
 export interface ToggleProperties {