test(button): add test for anchor buttons, update basic test

references #8293

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

@@ -0,0 +1,46 @@
+import { NgModule, Component } from '@angular/core';
+import { IonicApp, IonicModule, App } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  btnColor: string;
+  testingColors = ['primary', 'secondary', 'danger', 'dark'];
+  testingColorIndex = 0;
+
+  constructor(app: App) {
+    app.setTitle('Basic Buttons');
+    this.chgColor();
+  }
+
+  chgColor() {
+    this.btnColor = this.testingColors[this.testingColorIndex];
+    console.log('dynamic btnColor', this.btnColor);
+    this.testingColorIndex = (this.testingColorIndex >= this.testingColors.length - 1 ? 0 : this.testingColorIndex + 1);
+  }
+}
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class E2EApp {
+  rootPage = E2EPage;
+}
+
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage
+  ]
+})
+export class AppModule {}

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,52 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Anchor Buttons</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding style="text-align:center" no-bounce>
+
+  <p>
+    <a ion-button>Default</a>
+    <a ion-button class="activated">Default.activated</a>
+  </p>
+
+  <p>
+    <a ion-button color="primary">Primary</a>
+    <a ion-button color="primary" class="activated">Primary.activated</a>
+  </p>
+
+  <p>
+    <a ion-button color="secondary">Secondary</a>
+    <a ion-button color="secondary" class="activated">Secondary.activated</a>
+  </p>
+
+  <p>
+    <a ion-button color="danger">Danger</a>
+    <a ion-button color="danger" class="activated">Danger.activated</a>
+  </p>
+
+  <p>
+    <a ion-button color="light">Light</a>
+    <a ion-button color="light" class="activated">Light.activated</a>
+  </p>
+
+  <p>
+    <a ion-button color="dark">Dark</a>
+    <a ion-button color="dark" class="activated">Dark.activated</a>
+  </p>
+
+  <p>
+    <a ion-button disabled>A Disabled</a>
+    <a ion-button color="secondary" disabled>Secondary Disabled</a>
+  </p>
+
+  <p>
+    <a ion-button [color]="btnColor" (click)="chgColor()">Change Color</a>
+    <a ion-button outline [color]="btnColor" (click)="chgColor()">Change Color</a>
+  </p>
+
+</ion-content>

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

@@ -41,7 +41,7 @@
 
   <p>
     <button ion-button disabled>Button Disabled</button>
-    <a ion-button disabled>A Disabled</a>
+    <button ion-button color="secondary" disabled>Secondary Disabled</button>
   </p>
 
   <p>