From 5ce6c7913d9741fbe74f5289ec27a571c16d47ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rombol=C3=A0=20Gianluca?= <rag@ti8m.ch>
Date: Tue, 13 Aug 2019 13:28:17 +0200
Subject: [PATCH 1/2] fix(toggle): accept initial value for state (#120)

---
 .../toggle/toggle/toggle.component.spec.ts    | 100 ++++++++++++++++++
 .../src/lib/toggle/toggle/toggle.component.ts |   8 +-
 2 files changed, 107 insertions(+), 1 deletion(-)

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
index 41cf88048d..28ba98c9b4 100644
--- 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,63 @@ 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>;
+
+  constructor() {}
+
+  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: `
@@ -248,6 +305,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
index 4ef8bac962..bc32a4415c 100644
--- 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,13 @@ 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
+        let defaultOption = this.toggleOptions
+          .toArray()
+          .find(toggle => toggle.value === this.value);
+        if (!defaultOption) {
+          defaultOption = this.toggleOptions.toArray()[0];
+        }
         defaultOption.setToggleChecked(true);
       })
     );

From 53e30273a61553ef34a41059f935e183c2f1797a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rombol=C3=A0=20Gianluca?= <rag@ti8m.ch>
Date: Mon, 2 Sep 2019 17:11:44 +0200
Subject: [PATCH 2/2] fix(toggle): code style changes

---
 .../src/lib/toggle/toggle/toggle.component.spec.ts       | 8 +-------
 .../src/lib/toggle/toggle/toggle.component.ts            | 9 +++------
 2 files changed, 4 insertions(+), 13 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
index 28ba98c9b4..4ec70f2e84 100644
--- 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
@@ -103,8 +103,6 @@ class ToggleReactiveDefaultValueTestComponent implements OnInit {
   modelReactive = 'Option_2';
   @ContentChildren('options') options: QueryList<ToggleOptionComponent>;
 
-  constructor() {}
-
   form = new FormGroup({
     test: new FormControl('Option_2')
   });
@@ -121,9 +119,7 @@ class ToggleReactiveDefaultValueTestComponent implements OnInit {
   ]);
 
   ngOnInit() {
-    this.form.get('test').valueChanges.subscribe(val => {
-      this.modelReactive = val;
-    });
+    this.form.get('test').valueChanges.subscribe(val => (this.modelReactive = val));
   }
 }
 
@@ -192,8 +188,6 @@ class ToggleSimpleCaseTestComponent {
   modelReactive = 'Option_2';
   @ContentChildren('options') options: QueryList<ToggleOptionComponent>;
 
-  constructor() {}
-
   toggleOptions: Observable<any> = of([
     {
       label: 'Einfache Fahrt',
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
index bc32a4415c..6db7bc101a 100644
--- 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
@@ -113,12 +113,9 @@ export class ToggleComponent extends RadioButton
       this._zone.run(() => {
         this._checkNumOfOptions();
         // Before assigning the first tab to defaultOption, I check whether a different value has been specified
-        let defaultOption = this.toggleOptions
-          .toArray()
-          .find(toggle => toggle.value === this.value);
-        if (!defaultOption) {
-          defaultOption = this.toggleOptions.toArray()[0];
-        }
+        const defaultOption =
+          this.toggleOptions.toArray().find(toggle => toggle.value === this.value) ||
+          this.toggleOptions.toArray()[0];
         defaultOption.setToggleChecked(true);
       })
     );