diff --git a/test/components/button/button_spec.ts b/test/components/button/button_spec.ts index 060b71b9..face88b4 100644 --- a/test/components/button/button_spec.ts +++ b/test/components/button/button_spec.ts @@ -21,16 +21,22 @@ import {MdButton, MdAnchor} from '../../../ng2-material/components/button/button import {TestUrlResolver} from '../../test_url_resolver'; import {findChildByTag} from '../../util'; +import {DOM} from "angular2/src/platform/dom/dom_adapter"; +import {ComponentFixture} from "angular2/testing"; +import {MATERIAL_PROVIDERS} from "../../../ng2-material/all"; +import {Ink} from "../../../ng2-material/core/util/ink"; export function main() { + const defaultTemplate = ``; + /** Test component that contains an MdButton. */ @Component({selector: 'test-app'}) @View({ directives: [MdButton], - template: `` + template: defaultTemplate }) - class TestApp { + class TestComponent { clickCount: number = 0; isDisabled: boolean = false; @@ -40,21 +46,30 @@ export function main() { } describe('MdButton', () => { + let builder: TestComponentBuilder; + function setup(template: string = defaultTemplate): Promise { + return builder + .overrideTemplate(TestComponent, template) + .createAsync(TestComponent) + .then((fixture: ComponentFixture) => { + fixture.detectChanges(); + return fixture; + }).catch(console.error.bind(console)); + } + beforeEachProviders(() => [ - // Need a custom URL resolver for ng-material template files in order for them to work - // with both JS and Dart output. - provide(UrlResolver, {useValue: new TestUrlResolver()}) + MATERIAL_PROVIDERS, + provide(UrlResolver, {useValue: new TestUrlResolver()}), ]); - beforeEach(inject([TestComponentBuilder], (tcb) => { builder = tcb; })); describe('button[md-button]', () => { it('should handle a click on the button', inject([AsyncTestCompleter], (async) => { - builder.createAsync(TestApp).then(fixture => { + setup().then((fixture: ComponentFixture) => { let testComponent = fixture.debugElement.componentInstance; let buttonDebugElement = findChildByTag(fixture.debugElement, 'button'); @@ -65,8 +80,51 @@ export function main() { }); }), 10000); + + it('should ink ripple when clicked', inject([AsyncTestCompleter], (async) => { + setup().then((fixture: ComponentFixture) => { + let button: DebugElement = fixture.debugElement.componentViewChildren[0]; + + let save = Ink.rippleEvent; + let fired = false; + Ink.rippleEvent = () => { + fired = true; + return Promise.resolve(); + }; + + let event = DOM.createEvent('mouse'); + button.triggerEventHandler('mousedown', event); + + + expect(fired).toBe(true); + Ink.rippleEvent = save; + + async.done(); + }); + })); + + it('should not ink ripple with md-no-ink attribute', inject([AsyncTestCompleter], (async) => { + let template = ``; + setup(template).then((fixture: ComponentFixture) => { + let button: DebugElement = fixture.debugElement.componentViewChildren[0]; + let save = Ink.rippleEvent; + let fired = false; + Ink.rippleEvent = () => { + fired = true; + return Promise.resolve(); + }; + + let event = DOM.createEvent('mouse'); + button.triggerEventHandler('mousedown', event); + + expect(fired).toBe(false); + Ink.rippleEvent = save; + async.done(); + }); + })); + it('should disable the button', inject([AsyncTestCompleter], (async) => { - builder.createAsync(TestApp).then(fixture => { + setup().then((fixture: ComponentFixture) => { let testAppComponent = fixture.debugElement.componentInstance; let buttonDebugElement = findChildByTag(fixture.debugElement, 'button'); let buttonElement = buttonDebugElement.nativeElement; @@ -90,15 +148,15 @@ export function main() { }); describe('a[md-button]', () => { - const anchorTemplate = `Go`; + const anchorTemplate = `Go`; beforeEach(() => { builder = builder.overrideView( - TestApp, new ViewMetadata({template: anchorTemplate, directives: [MdAnchor]})); + TestComponent, new ViewMetadata({template: anchorTemplate, directives: [MdAnchor]})); }); it('should remove disabled anchors from tab order', inject([AsyncTestCompleter], (async) => { - builder.createAsync(TestApp).then(fixture => { + builder.createAsync(TestComponent).then((fixture: ComponentFixture) => { let testAppComponent = fixture.debugElement.componentInstance; let anchorDebugElement = findChildByTag(fixture.debugElement, 'a'); let anchorElement = anchorDebugElement.nativeElement; @@ -115,13 +173,33 @@ export function main() { async.done(); }); - - it('should preventDefault for disabled anchor clicks', - inject([AsyncTestCompleter], (async) => { - // No clear way to test this; see https://github.com/angular/angular/issues/3782 - async.done(); - })); }), 10000); + + it('should not preventDefault on enabled anchor clicks', inject([AsyncTestCompleter], (async) => { + builder.createAsync(TestComponent).then((fixture: ComponentFixture) => { + let anchor: DebugElement = fixture.debugElement.componentViewChildren[0]; + let event = DOM.createEvent('mouse'); + let triggered = false; + event.preventDefault = () => triggered = true; + anchor.triggerEventHandler('click', event); + expect(triggered).toBe(false); + async.done(); + }); + })); + it('should preventDefault for disabled anchor clicks', inject([AsyncTestCompleter], (async) => { + builder.createAsync(TestComponent).then((fixture: ComponentFixture) => { + let anchor: DebugElement = fixture.debugElement.componentViewChildren[0]; + let anchorComp: MdAnchor = anchor.componentInstance; + let event = DOM.createEvent('mouse'); + let triggered = false; + event.preventDefault = () => triggered = true; + anchorComp.disabled = true; + anchor.triggerEventHandler('click', event); + expect(triggered).toBe(true); + fixture.destroy(); + async.done(); + }); + })); }); }); }