fix(toggle): accept initial value for state (#130)

Closes #120
sbb-design-systems · Sep 3, 2019 · 1851c94 · 1851c94
1 parent bcf2471
commit 1851c94
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 3 deletions.
diff --git a/projects/sbb-esta/angular-public/src/lib/toggle/toggle/toggle.component.spec.ts b/projects/sbb-esta/angular-public/src/lib/toggle/toggle/toggle.component.spec.ts
@@ -70,6 +70,59 @@ class ToggleReactiveTestComponent implements OnInit {
   }
 }
 
+@Component({
+  selector: 'sbb-toggle-test-reactive',
+  template: `
+    <form [formGroup]="form" novalidate>
+      <sbb-toggle aria-labelledby="group_label_2" formControlName="test">
+        <sbb-toggle-option
+          #options
+          *ngFor="let option of toggleOptions | async; let i = index"
+          [infoText]="i === 0 ? 'info text' : undefined"
+          [label]="option.label"
+          [value]="option.value"
+        >
+          <ng-container *ngIf="i === 0">
+            <sbb-icon-arrow-right *sbbToggleOptionIcon></sbb-icon-arrow-right>
+          </ng-container>
+          <ng-container *ngIf="i === 1">
+            <sbb-icon-arrows-right-left *sbbToggleOptionIcon></sbb-icon-arrows-right-left>
+          </ng-container>
+          <sbb-field mode="long" *ngIf="i === 1">
+            <sbb-label for="name1">Select date</sbb-label>
+            <sbb-datepicker>
+              <input sbbDateInput type="text" />
+            </sbb-datepicker>
+          </sbb-field>
+        </sbb-toggle-option>
+      </sbb-toggle>
+    </form>
+  `
+})
+class ToggleReactiveDefaultValueTestComponent implements OnInit {
+  modelReactive = 'Option_2';
+  @ContentChildren('options') options: QueryList<ToggleOptionComponent>;
+
+  form = new FormGroup({
+    test: new FormControl('Option_2')
+  });
+
+  toggleOptions: Observable<any> = of([
+    {
+      label: 'Einfache Fahrt',
+      value: 'Option_1'
+    },
+    {
+      label: 'Hin- und Rückfahrt',
+      value: 'Option_2'
+    }
+  ]);
+
+  ngOnInit() {
+    this.form.get('test').valueChanges.subscribe(val => (this.modelReactive = val));
+  }
+}
+
 @Component({
   selector: 'sbb-toggle-test-template-driven',
   template: `
@@ -135,8 +188,6 @@ class ToggleSimpleCaseTestComponent {
   modelReactive = 'Option_2';
   @ContentChildren('options') options: QueryList<ToggleOptionComponent>;
 
-  constructor() {}
-
   toggleOptions: Observable<any> = of([
     {
       label: 'Einfache Fahrt',
@@ -248,6 +299,49 @@ describe('ToggleComponent case reactive using mock component', () => {
   });
 });
 
+describe('ToggleComponent case reactive with default value using mock component', () => {
+  let componentTest: ToggleReactiveDefaultValueTestComponent;
+  let fixtureTest: ComponentFixture<ToggleReactiveDefaultValueTestComponent>;
+
+  configureTestSuite(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        ToggleModule,
+        CommonModule,
+        IconCollectionModule,
+        DatepickerModule,
+        FieldModule,
+        ReactiveFormsModule
+      ],
+      declarations: [ToggleReactiveDefaultValueTestComponent]
+    });
+  });
+
+  beforeEach(() => {
+    fixtureTest = TestBed.createComponent(ToggleReactiveDefaultValueTestComponent);
+    componentTest = fixtureTest.componentInstance;
+    fixtureTest.detectChanges();
+  });
+
+  it('component test is created', () => {
+    expect(componentTest).toBeTruthy();
+  });
+
+  it('it verifies that second toggle button is checked', () => {
+    fixtureTest.detectChanges();
+
+    const toggleOptionReferenceValue = fixtureTest.debugElement.queryAll(
+      By.css('.sbb-toggle-option-button-inner > input')
+    );
+
+    const toggleOption2ValueElement = toggleOptionReferenceValue[1].nativeElement;
+    console.log(toggleOption2ValueElement);
+
+    expect(toggleOption2ValueElement.attributes.getNamedItem('aria-checked').value).toBe('true');
+    expect(toggleOption2ValueElement.value).toBe('Option_2');
+  });
+});
+
 describe('ToggleComponent case template driven using mock component', () => {
   let componentTest: ToggleTemplateDrivenTestComponent;
   let fixtureTest: ComponentFixture<ToggleTemplateDrivenTestComponent>;

diff --git a/projects/sbb-esta/angular-public/src/lib/toggle/toggle/toggle.component.ts b/projects/sbb-esta/angular-public/src/lib/toggle/toggle/toggle.component.ts
@@ -112,7 +112,10 @@ export class ToggleComponent extends RadioButton
     this._zone.onStable.pipe(first()).subscribe(() =>
       this._zone.run(() => {
         this._checkNumOfOptions();
-        const defaultOption = this.toggleOptions.toArray()[0];
+        // Before assigning the first tab to defaultOption, I check whether a different value has been specified
+        const defaultOption =
+          this.toggleOptions.toArray().find(toggle => toggle.value === this.value) ||
+          this.toggleOptions.toArray()[0];
         defaultOption.setToggleChecked(true);
       })
     );