test(button): add test for dynamic outline buttons

references #8845 references #9031

src/components/button/test/dynamic/app-module.ts

@@ -17,6 +17,14 @@ export class E2EPage {
   myColor2: string;
   multiColor: Array<string>;
   showIf: boolean = true;
+  liked: boolean = false;
+  value: string;
+
+   public buttons = [
+    {selected: false, value: 'primary', text: 'Primary'},
+    {selected: false, value: 'secondary', text: 'Secondary'},
+    {selected: false, value: 'dark', text: 'Dark'}
+  ];
 
   constructor() {
     this.reset();
@@ -49,6 +57,18 @@ export class E2EPage {
   toggle() {
     this.isClicked = !this.isClicked;
   }
+
+  reportLike(liked: boolean): void {
+    this.liked = liked;
+  }
+
+  setValue(value: any) {
+    if (this.value !== value){
+      this.buttons.forEach((btn: any) => btn.selected = (value === btn.value));
+      this.value = value;
+    }
+  }
+
 }
 
 @Component({

src/components/button/test/dynamic/e2e.ts

@@ -2,3 +2,7 @@
 it('should unify buttons', function() {
   element(by.css('.e2eButtonDynamicUnify')).click();
 });
+
+it('should toggle buttons', function() {
+  element(by.css('.e2eButtonToggle')).click();
+});

src/components/button/test/dynamic/main.html

@@ -22,9 +22,19 @@
   <button ion-button block [color]="myColor1" [round]="isCustom">Custom #1</button>
   <button ion-button block [color]="myColor2" [outline]="isOutline" [round]="isCustom">Custom #2 (Outline)</button>
   <hr/>
+  <button ion-button block color="secondary" [outline]="!liked" (click)="reportLike(true)" class="e2eButtonToggle">Secondary (Toggle)</button>
+  <button ion-button block color="danger" [outline]="liked !== false" (click)="reportLike(false)">Danger (Toggle)</button>
+  <hr/>
   <button ion-button block outline color="danger" (click)="showIf = !showIf">Toggle Header</button>
   <hr/>
   <button ion-button block outline color="danger" (click)="unify()" class="e2eButtonDynamicUnify">Unify all buttons</button>
   <button ion-button block clear color="danger" (click)="reset()">Reset all buttons</button>
+  <button ion-button small *ngFor="let button of buttons"
+          [outline]="!button.selected && button.value !== value"
+          [color]="(button.selected || button.value === value) ? button.value : 'secondary'"
+          (click)="setValue(button.value)">
+    <ion-icon *ngIf="button.icon" name="{{button.icon}}"></ion-icon>
+    {{button.text}}
+  </button>
 
 </ion-content>