test(radio): add e2e test for radio button (#1582)

Author: tinayuangao

e2e/components/radio/radio.e2e.ts

@@ -0,0 +1,51 @@
+describe('radio', function () {
+
+  describe('disabling behavior', function () {
+    beforeEach(function() {
+      browser.get('/radio');
+    });
+
+    it('should be checked when clicked', function () {
+      element(by.id('water')).click();
+      element(by.id('water')).getAttribute('class').then((value: string) => {
+        expect(value).toContain('md-radio-checked');
+      });
+      element(by.css('input[id=water-input]')).getAttribute('checked').then((value: string) => {
+        expect(value).toBeTruthy();
+      });
+      element(by.css('input[id=leaf-input]')).getAttribute('checked').then((value: string) => {
+        expect(value).toBeFalsy();
+      });
+
+      element(by.id('leaf')).click();
+      element(by.id('leaf')).getAttribute('class').then((value: string) => {
+        expect(value).toContain('md-radio-checked');
+      });
+      element(by.css('input[id=leaf-input]')).getAttribute('checked').then((value: string) => {
+        expect(value).toBeTruthy();
+      });
+      element(by.css('input[id=water-input]')).getAttribute('checked').then((value: string) => {
+        expect(value).toBeFalsy();
+      });
+    });
+
+    it('should be disabled when disable the radio group', function () {
+      element(by.id('toggle-disable')).click();
+      element(by.id('water')).click();
+      element(by.id('water')).getAttribute('class').then((value: string) => {
+        expect(value).toContain('md-radio-disabled');
+      });
+        element(by.css('input[id=water-input]')).getAttribute('disabled').then((value: string) => {
+        expect(value).toBeTruthy();
+      });
+
+      element(by.id('leaf')).click();
+      element(by.id('leaf')).getAttribute('class').then((value: string) => {
+        expect(value).toContain('md-radio-disabled');
+      });
+      element(by.css('input[id=leaf-input]')).getAttribute('disabled').then((value: string) => {
+        expect(value).toBeTruthy();
+      });
+    });
+  });
+});

src/e2e-app/e2e-app-module.ts

@@ -5,6 +5,7 @@ import {E2EApp, Home} from './e2e-app/e2e-app';
 import {IconE2E} from './icon/icon-e2e';
 import {ButtonE2E} from './button/button-e2e';
 import {MenuE2E} from './menu/menu-e2e';
+import {SimpleRadioButtons} from './radio/radio-e2e';
 import {BasicTabs} from './tabs/tabs-e2e';
 import {MaterialModule} from '@angular/material';
 import {E2E_APP_ROUTES} from './e2e-app/routes';
@@ -22,6 +23,7 @@ import {E2E_APP_ROUTES} from './e2e-app/routes';
     ButtonE2E,
     MenuE2E,
     BasicTabs,
+    SimpleRadioButtons,
     Home,
   ],
   bootstrap: [E2EApp],

src/e2e-app/e2e-app/e2e-app.html

@@ -1,6 +1,7 @@
 <a md-list-item [routerLink]="['button']">Button</a>
 <a md-list-item [routerLink]="['icon']">Icon</a>
 <a md-list-item [routerLink]="['menu']">Menu</a>
+<a md-list-item [routerLink]="['radio']">Radios</a>
 <a md-list-item [routerLink]="['tabs']">Tabs</a>
 
 <router-outlet></router-outlet>

src/e2e-app/e2e-app/routes.ts

@@ -4,11 +4,13 @@ import {ButtonE2E} from '../button/button-e2e';
 import {BasicTabs} from '../tabs/tabs-e2e';
 import {IconE2E} from '../icon/icon-e2e';
 import {MenuE2E} from '../menu/menu-e2e';
+import {SimpleRadioButtons} from '../radio/radio-e2e';
 
 export const E2E_APP_ROUTES: Routes = [
   {path: '', component: Home},
   {path: 'button', component: ButtonE2E},
   {path: 'menu', component: MenuE2E},
   {path: 'icon', component: IconE2E},
+  {path: 'radio', component: SimpleRadioButtons},
   {path: 'tabs', component: BasicTabs}
 ];

src/e2e-app/radio/radio-e2e.html

@@ -0,0 +1,10 @@
+<section>
+  <md-radio-group [disabled]="isGroupDisabled"
+                  [(value)]="groupValue"
+                  id="test-group">
+    <md-radio-button value="fire" id="fire">Charmander</md-radio-button>
+    <md-radio-button value="water" id="water">Squirtle</md-radio-button>
+    <md-radio-button value="leaf" id="leaf">Bulbasaur</md-radio-button>
+  </md-radio-group>
+  <button (click)="isGroupDisabled=!isGroupDisabled" id="toggle-disable">Disable/enable group</button>
+</section>

src/e2e-app/radio/radio-e2e.ts

@@ -0,0 +1,10 @@
+import {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'radio-e2e',
+  templateUrl: 'radio-e2e.html',
+})
+export class SimpleRadioButtons {
+  isGroupDisabled: boolean = false;
+}