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 { }