From 1e960e93cb0c1cf7054d5ae8dced5f5c2609e289 Mon Sep 17 00:00:00 2001 From: Justin DuJardin Date: Sun, 3 Jan 2016 16:34:19 -0800 Subject: [PATCH] feat(checkbox): complete behavioral coverage --- ng2-material/components/checkbox/checkbox.ts | 11 +- test/components/checkbox/checkbox_spec.ts | 124 +++++++++++++++++++ 2 files changed, 129 insertions(+), 6 deletions(-) diff --git a/ng2-material/components/checkbox/checkbox.ts b/ng2-material/components/checkbox/checkbox.ts index 15e8e10e..94d2ffc7 100644 --- a/ng2-material/components/checkbox/checkbox.ts +++ b/ng2-material/components/checkbox/checkbox.ts @@ -17,16 +17,15 @@ import {parseTabIndexAttribute} from "../../core/util/util"; '[attr.aria-disabled]': 'disabled', '[tabindex]': 'tabindex', '(keydown)': 'onKeydown($event)', + '(click)': 'toggle($event)' } }) @View({ template: ` -
-
-
-
-
-
`, +
+
+
+
`, directives: [], encapsulation: ViewEncapsulation.None }) diff --git a/test/components/checkbox/checkbox_spec.ts b/test/components/checkbox/checkbox_spec.ts index d227e4aa..263ce213 100644 --- a/test/components/checkbox/checkbox_spec.ts +++ b/test/components/checkbox/checkbox_spec.ts @@ -1,6 +1,130 @@ import {componentSanityCheck} from "../../util"; +import { + AsyncTestCompleter, + TestComponentBuilder, + beforeEach, + beforeEachProviders, + describe, + expect, + inject, + it, +} from 'angular2/testing_internal'; +import {DebugElement} from 'angular2/src/core/debug/debug_element'; +import {Component, View, provide} from 'angular2/core'; +import {UrlResolver} from 'angular2/compiler'; +import {TestUrlResolver} from '../../test_url_resolver'; +import {MATERIAL_PROVIDERS} from '../../../ng2-material/all'; +import {ComponentFixture} from "angular2/testing"; +import {CORE_DIRECTIVES} from "angular2/common"; +import {MdCheckbox} from "ng2-material/components/checkbox/checkbox"; +import {findChildByTag} from "../../util"; +import {DOM} from "angular2/src/platform/dom/dom_adapter"; +import {KeyCodes} from "../../../ng2-material/core/key_codes"; + export function main() { + + interface ICheckboxFixture { + fixture:ComponentFixture; + comp:MdCheckbox; + debug:DebugElement; + } + @Component({selector: 'test-app'}) + @View({ + directives: [CORE_DIRECTIVES, MdCheckbox], + template: `` + }) + class TestComponent { + isChecked: boolean = false; + isDisabled: boolean = false; + } + componentSanityCheck('Checkbox', 'md-checkbox', ``); + + describe('Checkbox', () => { + let builder: TestComponentBuilder; + + function setup(checked: boolean = false, disabled: boolean = false): Promise { + return builder.createAsync(TestComponent).then((fixture: ComponentFixture) => { + let debug = findChildByTag(fixture.debugElement, 'md-checkbox'); + let comp: MdCheckbox = debug.componentInstance; + let testComp = fixture.debugElement.componentInstance; + testComp.isDisabled = disabled; + testComp.isChecked = checked; + fixture.detectChanges(); + return { + fixture: fixture, + comp: comp, + debug: debug + }; + }).catch(console.error.bind(console)); + } + + beforeEachProviders(() => [ + MATERIAL_PROVIDERS, + provide(UrlResolver, {useValue: new TestUrlResolver()}), + ]); + beforeEach(inject([TestComponentBuilder], (tcb) => { + builder = tcb; + })); + + describe('md-checkbox', () => { + it('should initialize unchecked', inject([AsyncTestCompleter], (async) => { + setup().then((api: ICheckboxFixture) => { + expect(api.comp.checked).toBe(false); + api.fixture.destroy(); + async.done(); + }); + })); + it('should set checked from binding', inject([AsyncTestCompleter], (async) => { + setup(true).then((api: ICheckboxFixture) => { + expect(api.comp.checked).toBe(true); + async.done(); + }); + })); + it('should toggle checked value when clicked on', inject([AsyncTestCompleter], (async) => { + setup(true).then((api: ICheckboxFixture) => { + expect(api.comp.checked).toBe(true); + api.debug.nativeElement.click(); + expect(api.comp.checked).toBe(false); + async.done(); + }); + })); + it('should not toggle checked value when disabled and clicked on', inject([AsyncTestCompleter], (async) => { + setup(true, true).then((api: ICheckboxFixture) => { + expect(api.comp.checked).toBe(true); + api.debug.nativeElement.click(); + expect(api.comp.checked).toBe(true); + api.fixture.destroy(); + async.done(); + }); + })); + describe('Keyboard', () => { + it('should toggle when the space key is pressed', inject([AsyncTestCompleter], (async) => { + setup().then((api: ICheckboxFixture) => { + expect(api.comp.checked).toBe(false); + let event = DOM.createEvent('key'); + event.keyCode = KeyCodes.SPACE; + api.debug.triggerEventHandler('keydown', event); + expect(api.comp.checked).toBe(true); + async.done(); + }); + })); + it('should not toggle when any other key is pressed', inject([AsyncTestCompleter], (async) => { + setup().then((api: ICheckboxFixture) => { + expect(api.comp.checked).toBe(false); + let event = DOM.createEvent('key'); + event.keyCode = KeyCodes.DOWN; + api.debug.triggerEventHandler('keydown', event); + expect(api.comp.checked).toBe(false); + async.done(); + }); + })); + + }); + }); + }); + + }