diff --git a/e2e/components/slide-toggle/slide-toggle.e2e.ts b/e2e/components/slide-toggle/slide-toggle.e2e.ts
new file mode 100644
index 000000000000..c818c632826e
--- /dev/null
+++ b/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');
+ });
+
+});
diff --git a/src/e2e-app/e2e-app-module.ts b/src/e2e-app/e2e-app-module.ts
index 685c59cdac89..262a08474d7e 100644
--- a/src/e2e-app/e2e-app-module.ts
+++ b/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: [
diff --git a/src/e2e-app/e2e-app/e2e-app.html b/src/e2e-app/e2e-app/e2e-app.html
index c8e4c60cee48..6345cffd70f6 100644
--- a/src/e2e-app/e2e-app/e2e-app.html
+++ b/src/e2e-app/e2e-app/e2e-app.html
@@ -8,6 +8,7 @@
Progress bar
Progress circle
Radios
+Slide Toggle
Tabs
diff --git a/src/e2e-app/e2e-app/routes.ts b/src/e2e-app/e2e-app/routes.ts
index 9f1733524efe..9fb5cc5e1009 100644
--- a/src/e2e-app/e2e-app/routes.ts
+++ b/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}
];
diff --git a/src/e2e-app/slide-toggle/slide-toggle-e2e.html b/src/e2e-app/slide-toggle/slide-toggle-e2e.html
new file mode 100644
index 000000000000..13ce7328669d
--- /dev/null
+++ b/src/e2e-app/slide-toggle/slide-toggle-e2e.html
@@ -0,0 +1,2 @@
+Slide Toggle
+Disabled Slide Toggle
\ No newline at end of file
diff --git a/src/e2e-app/slide-toggle/slide-toggle-e2e.ts b/src/e2e-app/slide-toggle/slide-toggle-e2e.ts
new file mode 100644
index 000000000000..7ef7b5d60406
--- /dev/null
+++ b/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 { }