chore: add e2e tests for md-slide-toggle (#2161)

* chore: add e2e tests for md-slide-toggle

* Adds some basic e2e tests for the md-slide-toggle component.

Closes #1963.

* Add space key test

e2e/components/slide-toggle/slide-toggle.e2e.ts

@@ -0,0 +1,65 @@
+describe('slide-toggle', () => {
+
+  beforeEach(() => browser.get('slide-toggle'));
+
+  it('should render a slide-toggle', () => {
+    expect(element(by.css('md-slide-toggle')).isPresent()).toBe(true);
+  });
+
+  it('should change the checked state on click', () => {
+    let slideToggleEl = element(by.css('#normal-slide-toggle'));
+    let inputEl = element(by.css('#normal-slide-toggle input'));
+
+    expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked');
+
+    slideToggleEl.click();
+
+    expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked');
+  });
+
+  it('should change the checked state on click', () => {
+    let slideToggleEl = element(by.css('#normal-slide-toggle'));
+    let inputEl = element(by.css('#normal-slide-toggle input'));
+
+    expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked');
+
+    slideToggleEl.click();
+
+    expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked');
+  });
+
+  it('should not change the checked state on click when disabled', () => {
+    let slideToggleEl = element(by.css('#disabled-slide-toggle'));
+    let inputEl = element(by.css('#disabled-slide-toggle input'));
+
+    expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked');
+
+    slideToggleEl.click();
+
+    expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked');
+  });
+
+  it('should move the thumb on state change', () => {
+    let slideToggleEl = element(By.css('#normal-slide-toggle'));
+    let thumbEl = element(by.css('#normal-slide-toggle .md-slide-toggle-thumb-container'));
+
+    let previousX = thumbEl.getLocation().then(pos => pos.x);
+
+    slideToggleEl.click();
+
+    let newX = thumbEl.getLocation().then(pos => pos.x);
+
+    expect(previousX).not.toBe(newX);
+  });
+
+  it('should toggle the slide-toggle on space key', () => {
+    let inputEl = element(by.css('#normal-slide-toggle input'));
+
+    expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked');
+
+    inputEl.sendKeys(protractor.Key.SPACE);
+
+    expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked');
+  });
+
+});

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

@@ -15,6 +15,7 @@ import {ProgressBarE2E} from './progress-bar/progress-bar-e2e';
 import {ProgressCircleE2E} from './progress-circle/progress-circle-e2e';
 import {MaterialModule} from '@angular/material';
 import {E2E_APP_ROUTES} from './e2e-app/routes';
+import {SlideToggleE2E} from './slide-toggle/slide-toggle-e2e';
 
 
 @NgModule({
@@ -38,6 +39,7 @@ import {E2E_APP_ROUTES} from './e2e-app/routes';
     ListE2E,
     ProgressBarE2E,
     ProgressCircleE2E,
+    SlideToggleE2E
   ],
   bootstrap: [E2EApp],
   providers: [

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

@@ -8,6 +8,7 @@
 <a md-list-item [routerLink]="['progress-bar']">Progress bar</a>
 <a md-list-item [routerLink]="['progress-circle']">Progress circle</a>
 <a md-list-item [routerLink]="['radio']">Radios</a>
+<a md-list-item [routerLink]="['slide-toggle']">Slide Toggle</a>
 <a md-list-item [routerLink]="['tabs']">Tabs</a>
 
 <router-outlet></router-outlet>

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

@@ -11,6 +11,7 @@ import {GridListE2E} from '../grid-list/grid-list-e2e';
 import {ListE2E} from '../list/list-e2e';
 import {ProgressBarE2E} from '../progress-bar/progress-bar-e2e';
 import {ProgressCircleE2E} from '../progress-circle/progress-circle-e2e';
+import {SlideToggleE2E} from '../slide-toggle/slide-toggle-e2e';
 
 export const E2E_APP_ROUTES: Routes = [
   {path: '', component: Home},
@@ -25,4 +26,5 @@ export const E2E_APP_ROUTES: Routes = [
   {path: 'list', component: ListE2E},
   {path: 'progress-bar', component: ProgressBarE2E},
   {path: 'progress-circle', component: ProgressCircleE2E},
+  {path: 'slide-toggle', component: SlideToggleE2E}
 ];

src/e2e-app/slide-toggle/slide-toggle-e2e.html

@@ -0,0 +1,2 @@
+<md-slide-toggle id="normal-slide-toggle">Slide Toggle</md-slide-toggle>
+<md-slide-toggle id="disabled-slide-toggle" disabled>Disabled Slide Toggle</md-slide-toggle>

src/e2e-app/slide-toggle/slide-toggle-e2e.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'slide-toggle-e2e',
+  templateUrl: 'slide-toggle-e2e.html',
+})
+export class SlideToggleE2E { }