diff --git a/package.json b/package.json index 18fc6dc82f06..c95e6de949d9 100644 --- a/package.json +++ b/package.json @@ -28,23 +28,23 @@ "node": ">= 4.2.1 < 5" }, "dependencies": { - "@angular/common": "2.0.0-rc.3", - "@angular/compiler": "2.0.0-rc.3", - "@angular/core": "2.0.0-rc.3", - "@angular/http": "2.0.0-rc.3", - "@angular/platform-browser": "2.0.0-rc.3", - "@angular/platform-browser-dynamic": "2.0.0-rc.3", + "@angular/common": "2.0.0-rc.4", + "@angular/compiler": "2.0.0-rc.4", + "@angular/core": "2.0.0-rc.4", + "@angular/http": "2.0.0-rc.4", + "@angular/platform-browser": "2.0.0-rc.4", + "@angular/platform-browser-dynamic": "2.0.0-rc.4", "@angular/router": "v3.0.0-alpha.8", "@angular/forms": "^0.1.0", "core-js": "^2.4.0", "hammerjs": "^2.0.8", "rxjs": "5.0.0-beta.6", - "systemjs": "0.19.26", + "systemjs": "0.19.31", "zone.js": "0.6.12" }, "devDependencies": { "add-stream": "^1.0.0", - "angular-cli": "^1.0.0-beta.6", + "angular-cli": "^1.0.0-beta.9", "broccoli-autoprefixer": "^4.1.0", "broccoli-funnel": "^1.0.1", "broccoli-merge-trees": "^1.1.1", @@ -56,24 +56,24 @@ "glob": "^6.0.4", "jasmine-core": "^2.4.1", "js-yaml": "^3.5.2", - "karma": "^0.13.15", - "karma-browserstack-launcher": "^0.1.7", - "karma-chrome-launcher": "^0.2.3", - "karma-firefox-launcher": "^0.1.7", - "karma-jasmine": "^0.3.8", - "karma-sauce-launcher": "^0.2.14", - "madge": "^0.5.3", + "karma": "^1.1.1", + "karma-browserstack-launcher": "^1.0.1", + "karma-chrome-launcher": "^1.0.1", + "karma-firefox-launcher": "^1.0.0", + "karma-jasmine": "^1.0.2", + "karma-sauce-launcher": "^1.0.0", + "madge": "^0.6.0", "node-sass": "^3.4.2", "protractor": "^3.3.0", "protractor-accessibility-plugin": "0.1.1", "sass": "^0.5.0", "strip-ansi": "^3.0.0", - "stylelint": "^6.5.1", + "stylelint": "^6.9.0", "symlink-or-copy": "^1.0.1", "ts-node": "^0.7.3", - "tslint": "^3.5.0", - "typescript": "^1.9.0-dev", - "typings": "^1.0.4", + "tslint": "^3.13.0", + "typescript": "^2.0.0", + "typings": "^1.3.1", "which": "^1.2.4" } } diff --git a/scripts/ci/build-and-test.sh b/scripts/ci/build-and-test.sh index c5d2a8574cf8..63bf34127a6d 100755 --- a/scripts/ci/build-and-test.sh +++ b/scripts/ci/build-and-test.sh @@ -1,5 +1,5 @@ #!/usr/bin/env bash -set -e +set -ex echo "======= Starting build-and-test.sh ========================================" @@ -22,8 +22,20 @@ if is_lint; then elif is_circular_deps_check; then npm run check-circular-deps elif is_e2e; then + # Start up the e2e app. This will take some time. + echo "Starting e2e app" MD_APP=e2e ng serve & - sleep 20 + sleep 1 + + # Wait until the dist/ directory is created, indicating that the e2e app is ready. + # Use the presence of `button.js` to determine whether the compiled output is ready to be served. + echo "Waiting for e2e app to start" + while [ ! -f ./dist/components/button/button.js ]; do + sleep 2 + done + + # Run the e2e tests on the served e2e app. + echo "Starting e2e tests" ng e2e else karma start test/karma.conf.js --single-run --no-auto-watch --reporters='dots' diff --git a/src/components/button-toggle/button-toggle.spec.ts b/src/components/button-toggle/button-toggle.spec.ts index f6fef696b3d7..ed133252dfe1 100644 --- a/src/components/button-toggle/button-toggle.spec.ts +++ b/src/components/button-toggle/button-toggle.spec.ts @@ -1,8 +1,5 @@ import { - it, - describe, - beforeEach, - beforeEachProviders, + addProviders, inject, async, fakeAsync, @@ -10,7 +7,7 @@ import { } from '@angular/core/testing'; import {NgControl, disableDeprecatedForms, provideForms} from '@angular/forms'; import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing'; -import {Component, DebugElement, provide} from '@angular/core'; +import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; import { MD_BUTTON_TOGGLE_DIRECTIVES, @@ -28,14 +25,16 @@ describe('MdButtonToggle', () => { let builder: TestComponentBuilder; let dispatcher: MdUniqueSelectionDispatcher; - beforeEachProviders(() => [ - disableDeprecatedForms(), - provideForms(), - provide(MdUniqueSelectionDispatcher, {useFactory: () => { - dispatcher = new MdUniqueSelectionDispatcher(); - return dispatcher; - }}) - ]); + beforeEach(() => { + addProviders([ + disableDeprecatedForms(), + provideForms(), + {provide: MdUniqueSelectionDispatcher, useFactory: () => { + dispatcher = new MdUniqueSelectionDispatcher(); + return dispatcher; + }} + ]); + }); beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { builder = tcb; diff --git a/src/components/button-toggle/button-toggle.ts b/src/components/button-toggle/button-toggle.ts index aecdfe98605d..aeaf7e9795cd 100644 --- a/src/components/button-toggle/button-toggle.ts +++ b/src/components/button-toggle/button-toggle.ts @@ -8,12 +8,10 @@ import { OnInit, Optional, Output, - Provider, QueryList, ViewEncapsulation, forwardRef } from '@angular/core'; -// TODO(iveysaur): Update to @angular/forms when we have rc.2 import { NG_VALUE_ACCESSOR, ControlValueAccessor, @@ -32,11 +30,11 @@ export type ToggleType = 'checkbox' | 'radio'; * Provider Expression that allows md-button-toggle-group to register as a ControlValueAccessor. * This allows it to support [(ngModel)]. */ -export const MD_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR = new Provider( - NG_VALUE_ACCESSOR, { - useExisting: forwardRef(() => MdButtonToggleGroup), - multi: true - }); +export const MD_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR: any = { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => MdButtonToggleGroup), + multi: true +}; var _uniqueIdCounter = 0; diff --git a/src/components/button/button.spec.ts b/src/components/button/button.spec.ts index 534fe93a458b..6c69dc744a84 100644 --- a/src/components/button/button.spec.ts +++ b/src/components/button/button.spec.ts @@ -1,4 +1,4 @@ -import {it, describe, expect, beforeEach, inject} from '@angular/core/testing'; +import {inject} from '@angular/core/testing'; import {TestComponentBuilder} from '@angular/compiler/testing'; import {Component} from '@angular/core'; import {By} from '@angular/platform-browser'; diff --git a/src/components/checkbox/checkbox.spec.ts b/src/components/checkbox/checkbox.spec.ts index 85b3507b0db7..86c29f5e1649 100644 --- a/src/components/checkbox/checkbox.spec.ts +++ b/src/components/checkbox/checkbox.spec.ts @@ -1,7 +1,5 @@ import { - it, - beforeEach, - beforeEachProviders, + addProviders, inject, async, fakeAsync, @@ -19,7 +17,6 @@ import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing' import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; import {MdCheckbox, MdCheckboxChange} from './checkbox'; -import {PromiseCompleter} from '@angular2-material/core/async/promise-completer'; @@ -29,10 +26,12 @@ describe('MdCheckbox', () => { let builder: TestComponentBuilder; let fixture: ComponentFixture; - beforeEachProviders(() => [ - disableDeprecatedForms(), - provideForms(), - ]); + beforeEach(() => { + addProviders([ + disableDeprecatedForms(), + provideForms(), + ]); + }); beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { builder = tcb; @@ -215,21 +214,14 @@ describe('MdCheckbox', () => { expect(testComponent.onCheckboxClick).toHaveBeenCalledTimes(1); }); - it('should emit a change event when the `checked` value changes', () => { - // TODO(jelbourn): this *should* work with async(), but fixture.whenStable currently doesn't - // know to look at pending macro tasks. - // See https://github.com/angular/angular/issues/8389 - // As a short-term solution, use a promise (which jasmine knows how to understand). - let promiseCompleter = new PromiseCompleter(); - checkboxInstance.change.subscribe(() => { - promiseCompleter.resolve(); - }); - + it('should emit a change event when the `checked` value changes', async(() => { testComponent.isChecked = true; fixture.detectChanges(); - return promiseCompleter.promise; - }); + fixture.whenStable().then(() => { + expect(fixture.componentInstance.changeCount).toBe(1); + }); + })); describe('state transition css classes', () => { it('should transition unchecked -> checked -> unchecked', () => { @@ -509,6 +501,7 @@ class SingleCheckbox { parentElementClicked: boolean = false; parentElementKeyedUp: boolean = false; lastKeydownEvent: Event = null; + changeCount: number = 0; onCheckboxClick(event: Event) {} } diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index cc1be007b9aa..c1e12c4fb5c3 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -5,7 +5,6 @@ import { EventEmitter, Input, Output, - Provider, Renderer, ViewEncapsulation, forwardRef, @@ -22,11 +21,11 @@ let nextId = 0; * Provider Expression that allows md-checkbox to register as a ControlValueAccessor. This allows it * to support [(ngModel)]. */ -export const MD_CHECKBOX_CONTROL_VALUE_ACCESSOR = new Provider( - NG_VALUE_ACCESSOR, { - useExisting: forwardRef(() => MdCheckbox), - multi: true - }); +export const MD_CHECKBOX_CONTROL_VALUE_ACCESSOR: any = { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => MdCheckbox), + multi: true +}; /** * Represents the different states that require custom transitions between them. diff --git a/src/components/grid-list/grid-list.spec.ts b/src/components/grid-list/grid-list.spec.ts index 481369193388..2b7e05ff1115 100644 --- a/src/components/grid-list/grid-list.spec.ts +++ b/src/components/grid-list/grid-list.spec.ts @@ -1,14 +1,6 @@ -import { - it, - describe, - expect, - beforeEach, - inject, - fakeAsync, - tick -} from '@angular/core/testing'; -import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing'; -import {Component} from '@angular/core'; +import {inject, async} from '@angular/core/testing'; +import {TestComponentBuilder} from '@angular/compiler/testing'; +import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; import {MD_GRID_LIST_DIRECTIVES, MdGridList} from './grid-list'; @@ -21,148 +13,137 @@ describe('MdGridList', () => { builder = tcb; })); - it('should throw error if cols is not defined', () => { + it('should throw error if cols is not defined', async(() => { var template = ``; - return builder.overrideTemplate(TestGridList, template) - .createAsync(TestGridList).then((fixture: ComponentFixture) => { + builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => { expect(() => { fixture.detectChanges(); }).toThrowError(/must pass in number of columns/); }); - }); + })); - it('should throw error if rowHeight ratio is invalid', () => { - var template = ` - - `; - return builder.overrideTemplate(TestGridList, template) - .createAsync(TestGridList).then((fixture: ComponentFixture) => { - expect(() => { - fixture.detectChanges(); - }).toThrowError(/invalid ratio given for row-height/); - }); - }); - - it('should throw error if tile colspan is wider than total cols', () => { + it('should throw error if rowHeight ratio is invalid', async(() => { + var template = ``; + + builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => { + expect(() => { + fixture.detectChanges(); + }).toThrowError(/invalid ratio given for row-height/); + }); + })); + + it('should throw error if tile colspan is wider than total cols', async(() => { var template = ` - - `; - return builder.overrideTemplate(TestGridList, template) - .createAsync(TestGridList).then((fixture: ComponentFixture) => { - expect(() => { - fixture.detectChanges(); - }).toThrowError(/tile with colspan 5 is wider than grid/); - }); - }); - - it('should default to 1:1 row height if undefined ', () => { + `; + + builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => { + expect(() => { + fixture.detectChanges(); + }).toThrowError(/tile with colspan 5 is wider than grid/); + }); + })); + + it('should default to 1:1 row height if undefined ', async(() => { var template = `
-
- `; + `; - return builder.overrideTemplate(TestGridList, template) - .createAsync(TestGridList).then((fixture: ComponentFixture) => { - fixture.detectChanges(); - let tile = fixture.debugElement.query(By.directive(MdGridTile)); + builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => { + fixture.detectChanges(); + let tile = fixture.debugElement.query(By.directive(MdGridTile)); - // in ratio mode, heights are set using the padding-top property - expect(getProp(tile, 'padding-top')).toBe('200px'); - }); - }); + // in ratio mode, heights are set using the padding-top property + expect(getProp(tile, 'padding-top')).toBe('200px'); + }); + })); - it('should use a ratio row height if passed in', () => { + it('should use a ratio row height if passed in', async(() => { var template = `
-
- `; + `; - return builder.overrideTemplate(TestGridList, template) - .createAsync(TestGridList).then((fixture: ComponentFixture) => { - fixture.componentInstance.height = '4:1'; - fixture.detectChanges(); + builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => { + fixture.componentInstance.height = '4:1'; + fixture.detectChanges(); - let tile = fixture.debugElement.query(By.directive(MdGridTile)); - expect(getProp(tile, 'padding-top')).toBe('100px'); + let tile = fixture.debugElement.query(By.directive(MdGridTile)); + expect(getProp(tile, 'padding-top')).toBe('100px'); - fixture.componentInstance.height = '2:1'; - fixture.detectChanges(); + fixture.componentInstance.height = '2:1'; + fixture.detectChanges(); - expect(getProp(tile, 'padding-top')).toBe('200px'); - }); - }); + expect(getProp(tile, 'padding-top')).toBe('200px'); + }); + })); - it('should divide row height evenly in "fit" mode', () => { + it('should divide row height evenly in "fit" mode', async(() => { var template = ` - - `; + `; - return builder.overrideTemplate(TestGridList, template) - .createAsync(TestGridList).then((fixture: ComponentFixture) => { - fixture.componentInstance.height = 300; - fixture.detectChanges(); - let tile = fixture.debugElement.query(By.directive(MdGridTile)); + builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => { + fixture.componentInstance.height = 300; + fixture.detectChanges(); + let tile = fixture.debugElement.query(By.directive(MdGridTile)); - // 149.5 * 2 = 299px + 1px gutter = 300px - expect(getProp(tile, 'height')).toBe('149.5px'); + // 149.5 * 2 = 299px + 1px gutter = 300px + expect(getProp(tile, 'height')).toBe('149.5px'); - fixture.componentInstance.height = 200; - fixture.detectChanges(); + fixture.componentInstance.height = 200; + fixture.detectChanges(); - // 99.5 * 2 = 199px + 1px gutter = 200px - expect(getProp(tile, 'height')).toBe('99.5px'); - }); - }); + // 99.5 * 2 = 199px + 1px gutter = 200px + expect(getProp(tile, 'height')).toBe('99.5px'); + }); + })); - it('should use the fixed row height if passed in', () => { + it('should use the fixed row height if passed in', async(() => { var template = ` - - `; + `; - return builder.overrideTemplate(TestGridList, template) - .createAsync(TestGridList).then((fixture: ComponentFixture) => { - fixture.componentInstance.height = '100px'; - fixture.detectChanges(); + builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => { + fixture.componentInstance.height = '100px'; + fixture.detectChanges(); - let tile = fixture.debugElement.query(By.directive(MdGridTile)); - expect(getProp(tile, 'height')).toBe('100px'); + let tile = fixture.debugElement.query(By.directive(MdGridTile)); + expect(getProp(tile, 'height')).toBe('100px'); - fixture.componentInstance.height = '200px'; - fixture.detectChanges(); + fixture.componentInstance.height = '200px'; + fixture.detectChanges(); - expect(getProp(tile, 'height')).toBe('200px'); - }); - }); + expect(getProp(tile, 'height')).toBe('200px'); + }); + })); - it('should default to pixels if row height units are missing', () => { + it('should default to pixels if row height units are missing', async(() => { var template = ` - - `; + `; - return builder.overrideTemplate(TestGridList, template) - .createAsync(TestGridList).then((fixture: ComponentFixture) => { - fixture.detectChanges(); - let tile = fixture.debugElement.query(By.directive(MdGridTile)); - expect(getProp(tile, 'height')).toBe('100px'); - }); - }); + builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => { + fixture.detectChanges(); + + fixture.whenStable().then(() => { + let tile = fixture.debugElement.query(By.directive(MdGridTile)); + expect(getProp(tile, 'height')).toBe('100px'); + }); + }); + })); - it('should default gutter size to 1px', () => { + it('should default gutter size to 1px', async(() => { var template = `
@@ -170,28 +151,25 @@ describe('MdGridList', () => { -
- `; + `; - return builder.overrideTemplate(TestGridList, template) - .createAsync(TestGridList).then((fixture: ComponentFixture) => { - fixture.detectChanges(); - fakeAsync(() => { - tick(); - let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile')); - - // check horizontal gutter - expect(getProp(tiles[0], 'width')).toBe('99.5px'); - expect(getProp(tiles[1], 'left')).toBe('100.5px'); - - // check vertical gutter - expect(getProp(tiles[0], 'height')).toBe('100px'); - expect(getProp(tiles[2], 'top')).toBe('101px'); - }); - }); - }); - - it('should set the gutter size if passed', () => { + builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile')); + + // check horizontal gutter + expect(getProp(tiles[0], 'width')).toBe('99.5px'); + expect(getComputedLeft(tiles[1])).toBe(100.5); + + // check vertical gutter + expect(getProp(tiles[0], 'height')).toBe('100px'); + expect(getProp(tiles[2], 'top')).toBe('101px'); + }); + }); + })); + + it('should set the gutter size if passed', async(() => { var template = `
@@ -199,28 +177,25 @@ describe('MdGridList', () => { -
- `; + `; - return builder.overrideTemplate(TestGridList, template) - .createAsync(TestGridList).then((fixture: ComponentFixture) => { - fixture.detectChanges(); - fakeAsync(() => { - tick(); - let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile')); - - // check horizontal gutter - expect(getProp(tiles[0], 'width')).toBe('99px'); - expect(getProp(tiles[1], 'left')).toBe('101px'); - - // check vertical gutter - expect(getProp(tiles[0], 'height')).toBe('100px'); - expect(getProp(tiles[2], 'top')).toBe('102px'); - }); - }); - }); - - it('should use pixels if gutter units are missing', () => { + builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile')); + + // check horizontal gutter + expect(getProp(tiles[0], 'width')).toBe('99px'); + expect(getComputedLeft(tiles[1])).toBe(101); + + // check vertical gutter + expect(getProp(tiles[0], 'height')).toBe('100px'); + expect(getProp(tiles[2], 'top')).toBe('102px'); + }); + }); + })); + + it('should use pixels if gutter units are missing', async(() => { var template = `
@@ -228,28 +203,25 @@ describe('MdGridList', () => { -
- `; + `; - return builder.overrideTemplate(TestGridList, template) - .createAsync(TestGridList).then((fixture: ComponentFixture) => { - fixture.detectChanges(); - fakeAsync(() => { - tick(); - let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile')); - - // check horizontal gutter - expect(getProp(tiles[0], 'width')).toBe('99px'); - expect(getProp(tiles[1], 'left')).toBe('101px'); - - // check vertical gutter - expect(getProp(tiles[0], 'height')).toBe('100px'); - expect(getProp(tiles[2], 'top')).toBe('102px'); - }); - }); - }); - - it('should set the correct list height in ratio mode', () => { + builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => { + fixture.detectChanges(); + fixture.whenStable().then(() => { + let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile')); + + // check horizontal gutter + expect(getProp(tiles[0], 'width')).toBe('99px'); + expect(getComputedLeft(tiles[1])).toBe(101); + + // check vertical gutter + expect(getProp(tiles[0], 'height')).toBe('100px'); + expect(getProp(tiles[2], 'top')).toBe('102px'); + }); + }); + })); + + it('should set the correct list height in ratio mode', async(() => { var template = `
@@ -259,75 +231,68 @@ describe('MdGridList', () => {
`; - return builder.overrideTemplate(TestGridList, template) - .createAsync(TestGridList).then((fixture: ComponentFixture) => { - fixture.detectChanges(); - let list = fixture.debugElement.query(By.directive(MdGridList)); - expect(getProp(list, 'padding-bottom')).toBe('201px'); - }); - }); + builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => { + fixture.detectChanges(); + let list = fixture.debugElement.query(By.directive(MdGridList)); + expect(getProp(list, 'padding-bottom')).toBe('201px'); + }); + })); - it('should set the correct list height in fixed mode', () => { + it('should set the correct list height in fixed mode', async(() => { var template = ` - - `; + `; - return builder.overrideTemplate(TestGridList, template) - .createAsync(TestGridList).then((fixture: ComponentFixture) => { - fixture.detectChanges(); - let list = fixture.debugElement.query(By.directive(MdGridList)); - expect(getProp(list, 'height')).toBe('201px'); - }); - }); + builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => { + fixture.detectChanges(); + let list = fixture.debugElement.query(By.directive(MdGridList)); + expect(getProp(list, 'height')).toBe('201px'); + }); + })); - it('should allow adjustment of tile colspan', () => { + it('should allow adjustment of tile colspan', async(() => { var template = `
-
- `; + `; - return builder.overrideTemplate(TestGridList, template) - .createAsync(TestGridList).then((fixture: ComponentFixture) => { - fixture.componentInstance.colspan = 2; - fixture.detectChanges(); + builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => { + fixture.componentInstance.colspan = 2; + fixture.detectChanges(); - let tile = fixture.debugElement.query(By.directive(MdGridTile)); - expect(getProp(tile, 'width')).toBe('199.5px'); + let tile = fixture.debugElement.query(By.directive(MdGridTile)); + expect(getProp(tile, 'width')).toBe('199.5px'); - fixture.componentInstance.colspan = 3; - fixture.detectChanges(); - expect(getProp(tile, 'width')).toBe('299.75px'); - }); - }); + fixture.componentInstance.colspan = 3; + fixture.detectChanges(); + expect(getProp(tile, 'width')).toBe('299.75px'); + }); + })); - it('should allow adjustment of tile rowspan', () => { + it('should allow adjustment of tile rowspan', async(() => { var template = ` - - `; + `; - return builder.overrideTemplate(TestGridList, template) - .createAsync(TestGridList).then((fixture: ComponentFixture) => { - fixture.componentInstance.rowspan = 2; - fixture.detectChanges(); + builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => { + fixture.componentInstance.rowspan = 2; + fixture.detectChanges(); - let tile = fixture.debugElement.query(By.directive(MdGridTile)); - expect(getProp(tile, 'height')).toBe('201px'); + let tile = fixture.debugElement.query(By.directive(MdGridTile)); + expect(getProp(tile, 'height')).toBe('201px'); - fixture.componentInstance.rowspan = 3; - fixture.detectChanges(); - expect(getProp(tile, 'height')).toBe('302px'); - }); - }); + fixture.componentInstance.rowspan = 3; + fixture.detectChanges(); + expect(getProp(tile, 'height')).toBe('302px'); + }); + })); - it('should lay out tiles correctly for a complex layout', () => { + it('should lay out tiles correctly for a complex layout', async(() => { var template = `
@@ -336,46 +301,44 @@ describe('MdGridList', () => { {{tile.text}} -
- `; + `; + + builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => { + fixture.componentInstance.tiles = [ + {cols: 3, rows: 1}, + {cols: 1, rows: 2}, + {cols: 1, rows: 1}, + {cols: 2, rows: 1} + ]; + + fixture.detectChanges(); + fixture.whenStable().then(() => { + let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile')); + + expect(getProp(tiles[0], 'width')).toBe('299.75px'); + expect(getProp(tiles[0], 'height')).toBe('100px'); + expect(getComputedLeft(tiles[0])).toBe(0); + expect(getProp(tiles[0], 'top')).toBe('0px'); + + expect(getProp(tiles[1], 'width')).toBe('99.25px'); + expect(getProp(tiles[1], 'height')).toBe('201px'); + expect(getComputedLeft(tiles[1])).toBe(300.75); + expect(getProp(tiles[1], 'top')).toBe('0px'); + + expect(getProp(tiles[2], 'width')).toBe('99.25px'); + expect(getProp(tiles[2], 'height')).toBe('100px'); + expect(getComputedLeft(tiles[2])).toBe(0); + expect(getProp(tiles[2], 'top')).toBe('101px'); + + expect(getProp(tiles[3], 'width')).toBe('199.5px'); + expect(getProp(tiles[3], 'height')).toBe('100px'); + expect(getComputedLeft(tiles[3])).toBe(100.25); + expect(getProp(tiles[3], 'top')).toBe('101px'); + }); + }); + })); - return builder.overrideTemplate(TestGridList, template) - .createAsync(TestGridList).then((fixture: ComponentFixture) => { - fixture.componentInstance.tiles = [ - {cols: 3, rows: 1}, - {cols: 1, rows: 2}, - {cols: 1, rows: 1}, - {cols: 2, rows: 1} - ]; - fixture.detectChanges(); - fakeAsync(() => { - tick(); - let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile')); - - expect(getProp(tiles[0], 'width')).toBe('299.75px'); - expect(getProp(tiles[0], 'height')).toBe('100px'); - expect(getProp(tiles[0], 'left')).toBe('0px'); - expect(getProp(tiles[0], 'top')).toBe('0px'); - - expect(getProp(tiles[1], 'width')).toBe('99.25px'); - expect(getProp(tiles[1], 'height')).toBe('201px'); - expect(getProp(tiles[1], 'left')).toBe('300.75px'); - expect(getProp(tiles[1], 'top')).toBe('0px'); - - expect(getProp(tiles[2], 'width')).toBe('99.25px'); - expect(getProp(tiles[2], 'height')).toBe('100px'); - expect(getProp(tiles[2], 'left')).toBe('0px'); - expect(getProp(tiles[2], 'top')).toBe('101px'); - - expect(getProp(tiles[3], 'width')).toBe('199.5px'); - expect(getProp(tiles[3], 'height')).toBe('100px'); - expect(getProp(tiles[3], 'left')).toBe('100.25px'); - expect(getProp(tiles[3], 'top')).toBe('101px'); - }); - }); - }); - - it('should add not add any classes to footers without lines', () => { + it('should add not add any classes to footers without lines', async(() => { var template = ` @@ -383,19 +346,17 @@ describe('MdGridList', () => { I'm a footer! - - `; + `; - return builder.overrideTemplate(TestGridList, template) - .createAsync(TestGridList).then((fixture: ComponentFixture) => { - fixture.detectChanges(); + builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => { + fixture.detectChanges(); - let footer = fixture.debugElement.query(By.directive(MdGridTileText)); - expect(footer.nativeElement.classList.contains('md-2-line')).toBe(false); - }); - }); + let footer = fixture.debugElement.query(By.directive(MdGridTileText)); + expect(footer.nativeElement.classList.contains('md-2-line')).toBe(false); + }); + })); - it('should add class to footers with two lines', () => { + it('should add class to footers with two lines', async(() => { var template = ` @@ -404,17 +365,15 @@ describe('MdGridList', () => { Second line - - `; + `; - return builder.overrideTemplate(TestGridList, template) - .createAsync(TestGridList).then((fixture: ComponentFixture) => { - fixture.detectChanges(); + builder.overrideTemplate(TestGridList, template).createAsync(TestGridList).then(fixture => { + fixture.detectChanges(); - let footer = fixture.debugElement.query(By.directive(MdGridTileText)); - expect(footer.nativeElement.classList.contains('md-2-line')).toBe(true); - }); - }); + let footer = fixture.debugElement.query(By.directive(MdGridTileText)); + expect(footer.nativeElement.classList.contains('md-2-line')).toBe(true); + }); + })); }); @@ -430,6 +389,18 @@ class TestGridList { rowspan: number; } -function getProp(el: any, prop: string): string { +function getProp(el: DebugElement, prop: string): string { return getComputedStyle(el.nativeElement).getPropertyValue(prop); } + +/** Gets the `left` position of an element. */ +function getComputedLeft(element: DebugElement): number { + // While the other properties in this test use `getComputedStyle`, we use `getBoundingClientRect` + // for left because iOS Safari doesn't support using `getComputedStyle` to get the calculated + // `left` balue when using CSS `calc`. We subtract the `left` of the document body because + // browsers, by default, add a margin to the body (typically 8px). + let elementRect = element.nativeElement.getBoundingClientRect(); + let bodyRect = document.body.getBoundingClientRect(); + + return elementRect.left - bodyRect.left; +} diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts index 0041d4aa1d6b..ae549796b278 100644 --- a/src/components/icon/icon.spec.ts +++ b/src/components/icon/icon.spec.ts @@ -1,15 +1,8 @@ -import { - it, - describe, - expect, - beforeEach, - beforeEachProviders, - inject, -} from '@angular/core/testing'; +import {addProviders, inject, async} from '@angular/core/testing'; import {TestComponentBuilder} from '@angular/compiler/testing'; import {HTTP_PROVIDERS, XHRBackend} from '@angular/http'; import {MockBackend} from '@angular/http/testing'; -import {provide, Component} from '@angular/core'; +import {Component} from '@angular/core'; import {MdIcon} from './icon'; import {MdIconRegistry} from './icon-registry'; import {getFakeSvgHttpResponse} from './fake-svgs'; @@ -42,12 +35,15 @@ const verifyPathChildElement = (element: Element, attributeValue: string) => { describe('MdIcon', () => { - beforeEachProviders(() => [ - MdIconRegistry, - HTTP_PROVIDERS, - MockBackend, - provide(XHRBackend, {useExisting: MockBackend}), - ]); + beforeEach(() => { + addProviders([ + MdIconRegistry, + HTTP_PROVIDERS, + MockBackend, + {provide: XHRBackend, useExisting: MockBackend}, + ]); + }); + let builder: TestComponentBuilder; let mdIconRegistry: MdIconRegistry; @@ -69,33 +65,31 @@ describe('MdIcon', () => { })); describe('Ligature icons', () => { - it('should add material-icons class by default', (done: () => void) => { - return builder.createAsync(MdIconLigatureTestApp).then(fixture => { + it('should add material-icons class by default', async(() => { + builder.createAsync(MdIconLigatureTestApp).then(fixture => { const testComponent = fixture.debugElement.componentInstance; const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon'); testComponent.iconName = 'home'; fixture.detectChanges(); expect(sortedClassNames(mdIconElement)).toEqual(['material-icons']); - done(); }); - }); + })); - it('should use alternate icon font if set', (done: () => void) => { + it('should use alternate icon font if set', async(() => { mdIconRegistry.setDefaultFontSetClass('myfont'); - return builder.createAsync(MdIconLigatureTestApp).then(fixture => { + builder.createAsync(MdIconLigatureTestApp).then(fixture => { const testComponent = fixture.debugElement.componentInstance; const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon'); testComponent.iconName = 'home'; fixture.detectChanges(); expect(sortedClassNames(mdIconElement)).toEqual(['myfont']); - done(); }); - }); + })); }); describe('Icons from URLs', () => { - it('should fetch SVG icon from URL and inline the content', (done: () => void) => { - return builder.createAsync(MdIconFromSvgUrlTestApp).then(fixture => { + it('should fetch SVG icon from URL and inline the content', async(() => { + builder.createAsync(MdIconFromSvgUrlTestApp).then(fixture => { const testComponent = fixture.debugElement.componentInstance; const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon'); let svgElement: any; @@ -123,15 +117,13 @@ describe('MdIcon', () => { svgElement = verifyAndGetSingleSvgChild(mdIconElement); verifyPathChildElement(svgElement, 'meow'); expect(httpRequestUrls).toEqual(['cat.svg', 'dog.svg']); - - done(); }); - }); + })); - it('should register icon URLs by name', (done: () => void) => { + it('should register icon URLs by name', async(() => { mdIconRegistry.addSvgIcon('fluffy', 'cat.svg'); mdIconRegistry.addSvgIcon('fido', 'dog.svg'); - return builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => { + builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => { const testComponent = fixture.debugElement.componentInstance; const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon'); let svgElement: SVGElement; @@ -157,14 +149,12 @@ describe('MdIcon', () => { svgElement = verifyAndGetSingleSvgChild(mdIconElement); verifyPathChildElement(svgElement, 'woof'); expect(httpRequestUrls).toEqual(['dog.svg', 'cat.svg']); - - done(); }); - }); + })); - it('should extract icon from SVG icon set', (done: () => void) => { + it('should extract icon from SVG icon set', async(() => { mdIconRegistry.addSvgIconSetInNamespace('farm', 'farm-set-1.svg'); - return builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => { + builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => { const testComponent = fixture.debugElement.componentInstance; const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon'); let svgElement: any; @@ -194,16 +184,14 @@ describe('MdIcon', () => { expect(svgChild.getAttribute('id')).toBe('cow'); verifyPathChildElement(svgChild, 'moo'); expect(mdIconElement.getAttribute('aria-label')).toBe('cow'); - - done(); }); - }); + })); - it('should allow multiple icon sets in a namespace', (done: () => void) => { + it('should allow multiple icon sets in a namespace', async(() => { mdIconRegistry.addSvgIconSetInNamespace('farm', 'farm-set-1.svg'); mdIconRegistry.addSvgIconSetInNamespace('farm', 'farm-set-2.svg'); mdIconRegistry.addSvgIconSetInNamespace('arrows', 'arrow-set.svg'); - return builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => { + builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => { const testComponent = fixture.debugElement.componentInstance; const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon'); let svgElement: any; @@ -239,14 +227,12 @@ describe('MdIcon', () => { verifyPathChildElement(svgChild, 'moo moo'); expect(mdIconElement.getAttribute('aria-label')).toBe('cow'); expect(httpRequestUrls.sort()).toEqual(['farm-set-1.svg', 'farm-set-2.svg']); - - done(); }); - }); + })); - it('should not wrap elements in icon sets in another svg tag', (done: () => void) => { + it('should not wrap elements in icon sets in another svg tag', async(() => { mdIconRegistry.addSvgIconSet('arrow-set.svg'); - return builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => { + builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => { const testComponent = fixture.debugElement.componentInstance; const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon'); let svgElement: any; @@ -258,13 +244,11 @@ describe('MdIcon', () => { svgElement = verifyAndGetSingleSvgChild(mdIconElement); verifyPathChildElement(svgElement, 'left'); expect(mdIconElement.getAttribute('aria-label')).toBe('left-arrow'); - - done(); }); - }); + })); - it('should return unmodified copies of icons from URLs', (done: () => void) => { - return builder.createAsync(MdIconFromSvgUrlTestApp).then(fixture => { + it('should return unmodified copies of icons from URLs', async(() => { + builder.createAsync(MdIconFromSvgUrlTestApp).then(fixture => { const testComponent = fixture.debugElement.componentInstance; const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon'); let svgElement: any; @@ -288,14 +272,12 @@ describe('MdIcon', () => { svgElement = verifyAndGetSingleSvgChild(mdIconElement); verifyPathChildElement(svgElement, 'meow'); expect(svgElement.getAttribute('viewBox')).toBeFalsy(); - - done(); }); - }); + })); - it('should return unmodified copies of icons from icon sets', (done: () => void) => { + it('should return unmodified copies of icons from icon sets', async(() => { mdIconRegistry.addSvgIconSet('arrow-set.svg'); - return builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => { + builder.createAsync(MdIconFromSvgNameTestApp).then(fixture => { const testComponent = fixture.debugElement.componentInstance; const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon'); let svgElement: any; @@ -319,17 +301,15 @@ describe('MdIcon', () => { svgElement = verifyAndGetSingleSvgChild(mdIconElement); verifyPathChildElement(svgElement, 'left'); expect(svgElement.getAttribute('viewBox')).toBeFalsy(); - - done(); }); - }); + })); }); describe('custom fonts', () => { - it('should apply CSS classes for custom font and icon', (done: () => void) => { + it('should apply CSS classes for custom font and icon', async(() => { mdIconRegistry.registerFontClassAlias('f1', 'font1'); mdIconRegistry.registerFontClassAlias('f2'); - return builder.createAsync(MdIconCustomFontCssTestApp).then(fixture => { + builder.createAsync(MdIconCustomFontCssTestApp).then(fixture => { const testComponent = fixture.debugElement.componentInstance; const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon'); testComponent.fontSet = 'f1'; @@ -349,15 +329,13 @@ describe('MdIcon', () => { fixture.detectChanges(); expect(sortedClassNames(mdIconElement)).toEqual(['f3', 'tent']); expect(mdIconElement.getAttribute('aria-label')).toBe('tent'); - - done(); }); - }); + })); }); describe('aria label', () => { - it('should set aria label from text content if not specified', (done: () => void) => { - return builder.createAsync(MdIconLigatureTestApp).then(fixture => { + it('should set aria label from text content if not specified', async(() => { + builder.createAsync(MdIconLigatureTestApp).then(fixture => { const testComponent = fixture.debugElement.componentInstance; const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon'); @@ -369,13 +347,11 @@ describe('MdIcon', () => { testComponent.iconName = 'hand'; fixture.detectChanges(); expect(mdIconElement.getAttribute('aria-label')).toBe('hand'); - - done(); }); - }); + })); - it('should use alt tag if aria label is not specified', (done: () => void) => { - return builder.createAsync(MdIconLigatureWithAriaBindingTestApp).then(fixture => { + it('should use alt tag if aria label is not specified', async(() => { + builder.createAsync(MdIconLigatureWithAriaBindingTestApp).then(fixture => { const testComponent = fixture.debugElement.componentInstance; const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon'); testComponent.iconName = 'home'; @@ -386,25 +362,22 @@ describe('MdIcon', () => { testComponent.ariaLabel = 'house'; fixture.detectChanges(); expect(mdIconElement.getAttribute('aria-label')).toBe('house'); - - done(); }); - }); + })); - it('should use provided aria label rather than icon name', (done: () => void) => { - return builder.createAsync(MdIconLigatureWithAriaBindingTestApp).then(fixture => { + it('should use provided aria label rather than icon name', async(() => { + builder.createAsync(MdIconLigatureWithAriaBindingTestApp).then(fixture => { const testComponent = fixture.debugElement.componentInstance; const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon'); testComponent.iconName = 'home'; testComponent.ariaLabel = 'house'; fixture.detectChanges(); expect(mdIconElement.getAttribute('aria-label')).toBe('house'); - done(); }); - }); + })); - it('should use provided aria label rather than font icon', (done: () => void) => { - return builder.createAsync(MdIconCustomFontCssTestApp).then(fixture => { + it('should use provided aria label rather than font icon', async(() => { + builder.createAsync(MdIconCustomFontCssTestApp).then(fixture => { const testComponent = fixture.debugElement.componentInstance; const mdIconElement = fixture.debugElement.nativeElement.querySelector('md-icon'); testComponent.fontSet = 'f1'; @@ -412,9 +385,8 @@ describe('MdIcon', () => { testComponent.ariaLabel = 'home'; fixture.detectChanges(); expect(mdIconElement.getAttribute('aria-label')).toBe('home'); - done(); }); - }); + })); }); }); diff --git a/src/components/icon/package.json b/src/components/icon/package.json index cd4767e54b53..74d8fd32cff9 100644 --- a/src/components/icon/package.json +++ b/src/components/icon/package.json @@ -21,7 +21,7 @@ }, "homepage": "https://github.com/angular/material2#readme", "peerDependencies": { - "@angular/http": "2.0.0-rc.3", + "@angular/http": "2.0.0-rc.4", "@angular2-material/core": "2.0.0-alpha.6" } } diff --git a/src/components/input/input.spec.ts b/src/components/input/input.spec.ts index f7cd43fd9b5d..d8a0538c959f 100644 --- a/src/components/input/input.spec.ts +++ b/src/components/input/input.spec.ts @@ -1,12 +1,7 @@ import { - describe, - it, - expect, - beforeEach, - beforeEachProviders, - fakeAsync, + addProviders, + async, inject, - tick, } from '@angular/core/testing'; import {TestComponentBuilder} from '@angular/compiler/testing'; import {Component} from '@angular/core'; @@ -21,67 +16,63 @@ import { describe('MdInput', function () { var builder: TestComponentBuilder; - beforeEachProviders(() => [ - disableDeprecatedForms(), - provideForms(), - ]); + beforeEach(() => { + addProviders([ + disableDeprecatedForms(), + provideForms(), + ]); + }); beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) { builder = tcb; })); - it('creates a native

{{item.name}}

{{item.description}}

- - `; - return builder.overrideTemplate(TestList, template) - .createAsync(TestList).then((fixture) => { - fixture.detectChanges(); - let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item')); - expect(listItems[0].nativeElement.className).toBe('md-2-line'); - expect(listItems[1].nativeElement.className).toBe('md-2-line'); - done(); - }); - }); + `; + + return builder.overrideTemplate(TestList, template).createAsync(TestList).then(fixture => { + fixture.detectChanges(); + let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item')); + expect(listItems[0].nativeElement.className).toBe('md-2-line'); + expect(listItems[1].nativeElement.className).toBe('md-2-line'); + }); + })); - it('should apply md-3-line class to lists with three lines', (done: () => void) => { + it('should apply md-3-line class to lists with three lines', async(() => { var template = ` @@ -88,19 +77,17 @@ describe('MdList', () => {

{{item.description}}

Some other text

 - - `; - return builder.overrideTemplate(TestList, template) - .createAsync(TestList).then((fixture) => { + `; + + return builder.overrideTemplate(TestList, template).createAsync(TestList).then(fixture => { fixture.detectChanges(); let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item')); expect(listItems[0].nativeElement.className).toBe('md-3-line'); expect(listItems[1].nativeElement.className).toBe('md-3-line'); - done(); }); - }); + })); - it('should apply md-list-avatar class to list items with avatars', (done: () => void) => { + it('should apply md-list-avatar class to list items with avatars', async(() => { var template = ` @@ -110,37 +97,33 @@ describe('MdList', () => { Pepper - - `; - return builder.overrideTemplate(TestList, template) - .createAsync(TestList).then((fixture) => { - fixture.detectChanges(); - let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item')); - expect(listItems[0].nativeElement.className).toBe('md-list-avatar'); - expect(listItems[1].nativeElement.className).toBe(''); - done(); - }); - }); + `; + + return builder.overrideTemplate(TestList, template).createAsync(TestList).then(fixture => { + fixture.detectChanges(); + let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item')); + expect(listItems[0].nativeElement.className).toBe('md-list-avatar'); + expect(listItems[1].nativeElement.className).toBe(''); + }); + })); - it('should not clear custom classes provided by user', (done: () => void) => { + it('should not clear custom classes provided by user', async(() => { var template = `

{{item.name}}

{{item.description}}

 - - `; - return builder.overrideTemplate(TestList, template) - .createAsync(TestList).then((fixture) => { - fixture.detectChanges(); - let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item')); - expect(listItems[0].nativeElement.classList.contains('test-class')).toBe(true); - done(); - }); - }); + `; + + return builder.overrideTemplate(TestList, template).createAsync(TestList).then(fixture => { + fixture.detectChanges(); + let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item')); + expect(listItems[0].nativeElement.classList.contains('test-class')).toBe(true); + }); + })); - it('should update classes if number of lines change', (done: () => void) => { + it('should update classes if number of lines change', async(() => { var template = ` @@ -148,42 +131,38 @@ describe('MdList', () => {

{{item.description}}

Some other text

 - - `; - return builder.overrideTemplate(TestList, template) - .createAsync(TestList).then((fixture) => { - fixture.debugElement.componentInstance.showThirdLine = false; - fixture.detectChanges(); - let listItem = fixture.debugElement.children[0].query(By.css('md-list-item')); - expect(listItem.nativeElement.className).toBe('md-2-line'); - - fixture.debugElement.componentInstance.showThirdLine = true; - fixture.detectChanges(); - setTimeout(() => { - expect(listItem.nativeElement.className).toBe('md-3-line'); - done(); - }); + `; + + return builder.overrideTemplate(TestList, template).createAsync(TestList).then(fixture => { + fixture.debugElement.componentInstance.showThirdLine = false; + fixture.detectChanges(); + let listItem = fixture.debugElement.children[0].query(By.css('md-list-item')); + expect(listItem.nativeElement.className).toBe('md-2-line'); + + fixture.debugElement.componentInstance.showThirdLine = true; + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(listItem.nativeElement.className).toBe('md-3-line'); }); - }); + }); + })); - it('should add aria roles properly', (done: () => void) => { + it('should add aria roles properly', async(() => { var template = ` {{item.name}} - - `; - return builder.overrideTemplate(TestList, template) - .createAsync(TestList).then((fixture) => { - fixture.detectChanges(); - let list = fixture.debugElement.children[0]; - let listItem = fixture.debugElement.children[0].query(By.css('md-list-item')); - expect(list.nativeElement.getAttribute('role')).toBe('list'); - expect(listItem.nativeElement.getAttribute('role')).toBe('listitem'); - done(); - }); - }); + `; + + return builder.overrideTemplate(TestList, template).createAsync(TestList).then(fixture => { + fixture.detectChanges(); + let list = fixture.debugElement.children[0]; + let listItem = fixture.debugElement.children[0].query(By.css('md-list-item')); + expect(list.nativeElement.getAttribute('role')).toBe('list'); + expect(listItem.nativeElement.getAttribute('role')).toBe('listitem'); + }); + })); }); diff --git a/src/components/menu/menu.spec.ts b/src/components/menu/menu.spec.ts index 080d7124eebe..f51c2e0723a3 100644 --- a/src/components/menu/menu.spec.ts +++ b/src/components/menu/menu.spec.ts @@ -1,10 +1,4 @@ -import { - it, - describe, - expect, - beforeEach, - inject, -} from '@angular/core/testing'; +import {inject} from '@angular/core/testing'; import {TestComponentBuilder} from '@angular/compiler/testing'; import {Component} from '@angular/core'; diff --git a/src/components/progress-bar/progress-bar.spec.ts b/src/components/progress-bar/progress-bar.spec.ts index 0ecc0baeb084..e8359d12f5e2 100644 --- a/src/components/progress-bar/progress-bar.spec.ts +++ b/src/components/progress-bar/progress-bar.spec.ts @@ -1,4 +1,4 @@ -import {beforeEach, describe, expect, inject, it} from '@angular/core/testing'; +import {inject} from '@angular/core/testing'; import {TestComponentBuilder} from '@angular/compiler/testing'; import {Component} from '@angular/core'; import {By} from '@angular/platform-browser'; diff --git a/src/components/progress-circle/progress-circle.spec.ts b/src/components/progress-circle/progress-circle.spec.ts index 7a9aaf02da91..8c29945df165 100644 --- a/src/components/progress-circle/progress-circle.spec.ts +++ b/src/components/progress-circle/progress-circle.spec.ts @@ -1,10 +1,4 @@ -import { - it, - describe, - expect, - beforeEach, - inject, -} from '@angular/core/testing'; +import {inject} from '@angular/core/testing'; import {TestComponentBuilder} from '@angular/compiler/testing'; import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; diff --git a/src/components/radio/radio.spec.ts b/src/components/radio/radio.spec.ts index f2664efba3d2..c3f5885d012f 100644 --- a/src/components/radio/radio.spec.ts +++ b/src/components/radio/radio.spec.ts @@ -1,8 +1,5 @@ import { - it, - describe, - beforeEach, - beforeEachProviders, + addProviders, inject, async, fakeAsync, @@ -10,7 +7,7 @@ import { } from '@angular/core/testing'; import {FORM_DIRECTIVES, NgControl, disableDeprecatedForms, provideForms} from '@angular/forms'; import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing'; -import {Component, DebugElement, provide} from '@angular/core'; +import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; import {MD_RADIO_DIRECTIVES, MdRadioGroup, MdRadioButton, MdRadioChange} from './radio'; import { @@ -22,14 +19,16 @@ describe('MdRadio', () => { let builder: TestComponentBuilder; let dispatcher: MdUniqueSelectionDispatcher; - beforeEachProviders(() => [ - disableDeprecatedForms(), - provideForms(), - provide(MdUniqueSelectionDispatcher, {useFactory: () => { - dispatcher = new MdUniqueSelectionDispatcher(); - return dispatcher; - }}) - ]); + beforeEach(() => { + addProviders([ + disableDeprecatedForms(), + provideForms(), + {provide: MdUniqueSelectionDispatcher, useFactory: () => { + dispatcher = new MdUniqueSelectionDispatcher(); + return dispatcher; + }}, + ]); + }); beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { builder = tcb; diff --git a/src/components/radio/radio.ts b/src/components/radio/radio.ts index ca955a84b632..03544b24f7b3 100644 --- a/src/components/radio/radio.ts +++ b/src/components/radio/radio.ts @@ -9,10 +9,9 @@ import { OnInit, Optional, Output, - Provider, QueryList, ViewEncapsulation, - forwardRef + forwardRef, } from '@angular/core'; import { NG_VALUE_ACCESSOR, @@ -34,11 +33,11 @@ export { * Provider Expression that allows md-radio-group to register as a ControlValueAccessor. This * allows it to support [(ngModel)] and ngControl. */ -export const MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR = new Provider( - NG_VALUE_ACCESSOR, { - useExisting: forwardRef(() => MdRadioGroup), - multi: true - }); +export const MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR: any = { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => MdRadioGroup), + multi: true +}; // TODO(mtlin): // Ink ripple is currently placeholder. diff --git a/src/components/sidenav/sidenav.spec.ts b/src/components/sidenav/sidenav.spec.ts index da94a1f24dea..6c2f52c38cdf 100644 --- a/src/components/sidenav/sidenav.spec.ts +++ b/src/components/sidenav/sidenav.spec.ts @@ -1,18 +1,13 @@ import { - it, - describe, - expect, - beforeEach, fakeAsync, + async, inject, - injectAsync, tick } from '@angular/core/testing'; import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing'; import {XHR} from '@angular/compiler'; import { Component, - Type, ViewMetadata } from '@angular/core'; @@ -20,22 +15,17 @@ import {By} from '@angular/platform-browser'; import {MdSidenav, MdSidenavLayout, MD_SIDENAV_DIRECTIVES} from './sidenav'; -function fakeAsyncAdaptor(fn: () => void) { - return inject([], fakeAsync(fn)); -} - - /** * Create a ComponentFixture from the builder. This takes a template and a style for sidenav. */ -function createFixture(appType: Type, builder: TestComponentBuilder, +function createFixture(appType: any, builder: TestComponentBuilder, template: string, style: string): ComponentFixture { let fixture: ComponentFixture = null; // Remove the styles (which remove the animations/transitions). builder .overrideView(MdSidenavLayout, new ViewMetadata({ template: template, - styles: [style], + styles: [style || ''], directives: [MdSidenav], })) .createAsync(appType).then((f: ComponentFixture) => { @@ -61,6 +51,12 @@ describe('MdSidenav', () => { let template: string; let style: string; let builder: TestComponentBuilder; + let xhr: XHR; + + beforeEach(inject([TestComponentBuilder, XHR], (tcb: TestComponentBuilder, x: XHR) => { + builder = tcb; + xhr = x; + })); /** * We need to get the template and styles for the sidenav in an Async test. @@ -69,23 +65,17 @@ describe('MdSidenav', () => { * We do some style verification so styles have to match. * But we remove the transitions so we only set the regular `sidenav.css` styling. */ - beforeEach(injectAsync([TestComponentBuilder, XHR], (tcb: TestComponentBuilder, xhr: XHR) => { - builder = tcb; - - return Promise.all([ - xhr.get('./components/sidenav/sidenav.html').then((t) => { - template = t; - }), - xhr.get('./components/sidenav/sidenav.css').then((css) => { - style = css; - }) - ]).catch((err: any) => { - console.error(err); + beforeEach(async(() => { + xhr.get('./components/sidenav/sidenav.html').then(t => { + template = t; + }); + xhr.get('./components/sidenav/sidenav.css').then(css => { + style = css; }); })); describe('methods', () => { - it('should be able to open and close', fakeAsyncAdaptor(() => { + it('should be able to open and close', fakeAsync(() => { let fixture = createFixture(BasicTestApp, builder, template, style); let testComponent: BasicTestApp = fixture.debugElement.componentInstance; @@ -134,7 +124,7 @@ describe('MdSidenav', () => { expect(getComputedStyle(sidenavBackdropElement.nativeElement).visibility).toEqual('hidden'); })); - it('open/close() return a promise that resolves after animation end', fakeAsyncAdaptor(() => { + it('open/close() return a promise that resolves after animation end', fakeAsync(() => { let fixture = createFixture(BasicTestApp, builder, template, style); let sidenav: MdSidenav = fixture.debugElement .query(By.directive(MdSidenav)).componentInstance; @@ -161,7 +151,7 @@ describe('MdSidenav', () => { })); - it('open/close() twice returns the same promise', fakeAsyncAdaptor(() => { + it('open/close() twice returns the same promise', fakeAsync(() => { let fixture = createFixture(BasicTestApp, builder, template, style); let sidenav: MdSidenav = fixture.debugElement .query(By.directive(MdSidenav)).componentInstance; @@ -176,7 +166,7 @@ describe('MdSidenav', () => { tick(); })); - it('open() then close() cancel animations when called too fast', fakeAsyncAdaptor(() => { + it('open() then close() cancel animations when called too fast', fakeAsync(() => { let fixture = createFixture(BasicTestApp, builder, template, style); let sidenav: MdSidenav = fixture.debugElement .query(By.directive(MdSidenav)).componentInstance; @@ -205,7 +195,7 @@ describe('MdSidenav', () => { tick(); })); - it('close() then open() cancel animations when called too fast', fakeAsyncAdaptor(() => { + it('close() then open() cancel animations when called too fast', fakeAsync(() => { let fixture = createFixture(BasicTestApp, builder, template, style); let sidenav: MdSidenav = fixture.debugElement .query(By.directive(MdSidenav)).componentInstance; @@ -239,7 +229,7 @@ describe('MdSidenav', () => { tick(); })); - it('does not throw when created without a sidenav', fakeAsyncAdaptor(() => { + it('does not throw when created without a sidenav', fakeAsync(() => { expect(() => { let fixture = createFixture(SidenavLayoutNoSidenavTestApp, builder, template, style); fixture.detectChanges(); @@ -247,7 +237,7 @@ describe('MdSidenav', () => { }).not.toThrow(); })); - it('does throw when created with two sidenav on the same side', fakeAsyncAdaptor(() => { + it('does throw when created with two sidenav on the same side', fakeAsync(() => { expect(() => { let fixture = createFixture(SidenavLayoutTwoSidenavTestApp, builder, template, style); fixture.detectChanges(); @@ -258,7 +248,7 @@ describe('MdSidenav', () => { describe('attributes', () => { - it('should correctly parse opened="false"', fakeAsyncAdaptor(() => { + it('should correctly parse opened="false"', fakeAsync(() => { let newBuilder = builder.overrideTemplate(BasicTestApp, ` @@ -275,7 +265,7 @@ describe('MdSidenav', () => { expect(sidenavEl.classList).not.toContain('md-sidenav-opened'); })); - it('should correctly parse opened="true"', fakeAsyncAdaptor(() => { + it('should correctly parse opened="true"', fakeAsync(() => { let newBuilder = builder.overrideTemplate(BasicTestApp, ` diff --git a/src/components/slide-toggle/slide-toggle.spec.ts b/src/components/slide-toggle/slide-toggle.spec.ts index 305be953ed70..c07ce2411fae 100644 --- a/src/components/slide-toggle/slide-toggle.spec.ts +++ b/src/components/slide-toggle/slide-toggle.spec.ts @@ -1,9 +1,5 @@ import { - it, - describe, - expect, - beforeEach, - beforeEachProviders, + addProviders, inject, async } from '@angular/core/testing'; @@ -16,10 +12,12 @@ import {NgControl, disableDeprecatedForms, provideForms} from '@angular/forms'; describe('MdSlideToggle', () => { let builder: TestComponentBuilder; - beforeEachProviders(() => [ - disableDeprecatedForms(), - provideForms(), - ]); + beforeEach(() => { + addProviders([ + disableDeprecatedForms(), + provideForms(), + ]); + }); beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { builder = tcb; diff --git a/src/components/tabs/tab-group.spec.ts b/src/components/tabs/tab-group.spec.ts index 8d3adea0d823..ad5963909b7c 100644 --- a/src/components/tabs/tab-group.spec.ts +++ b/src/components/tabs/tab-group.spec.ts @@ -1,9 +1,5 @@ import { - it, - expect, - beforeEach, inject, - describe, async, fakeAsync, tick @@ -16,13 +12,14 @@ import {Observable} from 'rxjs/Observable'; describe('MdTabGroup', () => { let builder: TestComponentBuilder; - let fixture: ComponentFixture; beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { builder = tcb; })); describe('basic behavior', () => { + let fixture: ComponentFixture; + beforeEach(async(() => { builder.createAsync(SimpleTabsTestApp).then(f => { fixture = f; @@ -30,23 +27,23 @@ describe('MdTabGroup', () => { })); it('should default to the first tab', () => { - checkSelectedIndex(1); + checkSelectedIndex(1, fixture); }); it('should change selected index on click', () => { let component = fixture.debugElement.componentInstance; component.selectedIndex = 0; - checkSelectedIndex(0); + checkSelectedIndex(0, fixture); // select the second tab let tabLabel = fixture.debugElement.queryAll(By.css('.md-tab-label'))[1]; tabLabel.nativeElement.click(); - checkSelectedIndex(1); + checkSelectedIndex(1, fixture); // select the third tab tabLabel = fixture.debugElement.queryAll(By.css('.md-tab-label'))[2]; tabLabel.nativeElement.click(); - checkSelectedIndex(2); + checkSelectedIndex(2, fixture); }); it('should support two-way binding for selectedIndex', async(() => { @@ -128,11 +125,11 @@ describe('MdTabGroup', () => { spyOn(component, 'handleSelection').and.callThrough(); - checkSelectedIndex(1); + checkSelectedIndex(1, fixture); tabComponent.selectedIndex = 2; - checkSelectedIndex(2); + checkSelectedIndex(2, fixture); tick(); expect(component.handleSelection).toHaveBeenCalledTimes(1); @@ -141,6 +138,8 @@ describe('MdTabGroup', () => { }); describe('async tabs', () => { + let fixture: ComponentFixture; + beforeEach(async(() => { builder.createAsync(AsyncTabsTestApp).then(f => fixture = f); })); @@ -164,7 +163,7 @@ describe('MdTabGroup', () => { * Checks that the `selectedIndex` has been updated; checks that the label and body have the * `md-active` class */ - function checkSelectedIndex(index: number) { + function checkSelectedIndex(index: number, fixture: ComponentFixture) { fixture.detectChanges(); let tabComponent: MdTabGroup = fixture.debugElement diff --git a/src/components/toolbar/toolbar.spec.ts b/src/components/toolbar/toolbar.spec.ts index e08c1ea9bba8..dee312708060 100644 --- a/src/components/toolbar/toolbar.spec.ts +++ b/src/components/toolbar/toolbar.spec.ts @@ -1,11 +1,5 @@ import {Component} from '@angular/core'; -import { - it, - describe, - expect, - beforeEach, - inject, -} from '@angular/core/testing'; +import {inject} from '@angular/core/testing'; import {TestComponentBuilder} from '@angular/compiler/testing'; import {By} from '@angular/platform-browser'; import {MdToolbar} from './toolbar'; diff --git a/src/core/a11y/live-announcer.spec.ts b/src/core/a11y/live-announcer.spec.ts index ce16d8b18133..6fa6f9a7738a 100644 --- a/src/core/a11y/live-announcer.spec.ts +++ b/src/core/a11y/live-announcer.spec.ts @@ -1,17 +1,13 @@ import { - it, - describe, - expect, - beforeEach, inject, fakeAsync, flushMicrotasks, tick, - beforeEachProviders, + addProviders, getTestInjector } from '@angular/core/testing'; import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing'; -import {Component, provide} from '@angular/core'; +import {Component} from '@angular/core'; import {By} from '@angular/platform-browser'; import {MdLiveAnnouncer, LIVE_ANNOUNCER_ELEMENT_TOKEN} from './live-announcer'; @@ -20,7 +16,11 @@ describe('MdLiveAnnouncer', () => { let builder: TestComponentBuilder; let liveEl: Element; - beforeEachProviders(() => [MdLiveAnnouncer]); + beforeEach(() => { + addProviders([ + MdLiveAnnouncer, + ]); + }); beforeEach(inject([TestComponentBuilder, MdLiveAnnouncer], (tcb: TestComponentBuilder, _live: MdLiveAnnouncer) => { @@ -98,7 +98,7 @@ describe('MdLiveAnnouncer', () => { getTestInjector().reset(); getTestInjector().addProviders([ - provide(LIVE_ANNOUNCER_ELEMENT_TOKEN, {useValue: customLiveEl}), + {provide: LIVE_ANNOUNCER_ELEMENT_TOKEN, useValue: customLiveEl}, MdLiveAnnouncer ]); diff --git a/src/core/overlay/overlay-directives.spec.ts b/src/core/overlay/overlay-directives.spec.ts index 24d541cf3225..f146609297f1 100644 --- a/src/core/overlay/overlay-directives.spec.ts +++ b/src/core/overlay/overlay-directives.spec.ts @@ -1,16 +1,12 @@ import { - it, - describe, - expect, - beforeEach, inject, async, fakeAsync, flushMicrotasks, - beforeEachProviders + addProviders, } from '@angular/core/testing'; import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing'; -import {Component, provide, ViewChild} from '@angular/core'; +import {Component, ViewChild} from '@angular/core'; import {ConnectedOverlayDirective, OverlayOrigin} from './overlay-directives'; import {OVERLAY_CONTAINER_TOKEN, Overlay} from './overlay'; import {ViewportRuler} from './position/viewport-ruler'; @@ -23,15 +19,17 @@ describe('Overlay directives', () => { let overlayContainerElement: HTMLElement; let fixture: ComponentFixture; - beforeEachProviders(() => [ - Overlay, - OverlayPositionBuilder, - ViewportRuler, - provide(OVERLAY_CONTAINER_TOKEN, {useFactory: () => { - overlayContainerElement = document.createElement('div'); - return overlayContainerElement; - }}) - ]); + beforeEach(() => { + addProviders([ + Overlay, + OverlayPositionBuilder, + ViewportRuler, + {provide: OVERLAY_CONTAINER_TOKEN, useFactory: () => { + overlayContainerElement = document.createElement('div'); + return overlayContainerElement; + }}, + ]); + }); beforeEach(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { builder = tcb; diff --git a/src/core/overlay/overlay.spec.ts b/src/core/overlay/overlay.spec.ts index f4138f2cb852..6f744e4bb003 100644 --- a/src/core/overlay/overlay.spec.ts +++ b/src/core/overlay/overlay.spec.ts @@ -1,18 +1,14 @@ import { - it, - describe, - expect, - beforeEach, inject, fakeAsync, flushMicrotasks, - beforeEachProviders, + addProviders, } from '@angular/core/testing'; import {TestComponentBuilder} from '@angular/compiler/testing'; import { Component, ViewChild, - provide, ViewContainerRef, + ViewContainerRef, } from '@angular/core'; import {TemplatePortalDirective} from '../portal/portal-directives'; import {TemplatePortal, ComponentPortal} from '../portal/portal'; @@ -31,17 +27,17 @@ describe('Overlay', () => { let templatePortal: TemplatePortal; let overlayContainerElement: HTMLElement; - beforeEachProviders(() => [ - Overlay, - OverlayPositionBuilder, - ViewportRuler, - provide(OVERLAY_CONTAINER_TOKEN, { - useFactory: () => { + beforeEach(() => { + addProviders([ + Overlay, + OverlayPositionBuilder, + ViewportRuler, + {provide: OVERLAY_CONTAINER_TOKEN, useFactory: () => { overlayContainerElement = document.createElement('div'); return overlayContainerElement; - } - }) - ]); + }} + ]); + }); let deps = [TestComponentBuilder, Overlay]; beforeEach(inject(deps, fakeAsync((tcb: TestComponentBuilder, o: Overlay) => { diff --git a/src/core/overlay/position/connected-position-strategy.spec.ts b/src/core/overlay/position/connected-position-strategy.spec.ts index 62d3d17e75f4..e5a47c22fb99 100644 --- a/src/core/overlay/position/connected-position-strategy.spec.ts +++ b/src/core/overlay/position/connected-position-strategy.spec.ts @@ -1,4 +1,3 @@ -import {it, describe, expect, beforeEach} from '@angular/core/testing'; import {ElementRef} from '@angular/core'; import {ConnectedPositionStrategy} from './connected-position-strategy'; import {ViewportRuler} from './viewport-ruler'; diff --git a/src/core/overlay/position/global-position-strategy.spec.ts b/src/core/overlay/position/global-position-strategy.spec.ts index 8ed2d8255e60..2f7f0924dffe 100644 --- a/src/core/overlay/position/global-position-strategy.spec.ts +++ b/src/core/overlay/position/global-position-strategy.spec.ts @@ -1,8 +1,4 @@ import { - it, - describe, - expect, - beforeEach, inject, fakeAsync, flushMicrotasks, diff --git a/src/core/overlay/position/viewport-ruler.spec.ts b/src/core/overlay/position/viewport-ruler.spec.ts index f9ac8d9bce19..36d2874efe13 100644 --- a/src/core/overlay/position/viewport-ruler.spec.ts +++ b/src/core/overlay/position/viewport-ruler.spec.ts @@ -1,4 +1,3 @@ -import {it, describe, expect, beforeEach} from '@angular/core/testing'; import {ViewportRuler} from './viewport-ruler'; diff --git a/src/core/package.json b/src/core/package.json index fbacfd49494e..29d36eed34e7 100644 --- a/src/core/package.json +++ b/src/core/package.json @@ -20,7 +20,7 @@ }, "homepage": "https://github.com/angular/material2#readme", "peerDependencies": { - "@angular/core": "^2.0.0-rc.3", - "@angular/common": "^2.0.0-rc.3" + "@angular/core": "^2.0.0-rc.4", + "@angular/common": "^2.0.0-rc.4" } } diff --git a/src/core/portal/portal.spec.ts b/src/core/portal/portal.spec.ts index 106e6c02ed50..839e79e901ae 100644 --- a/src/core/portal/portal.spec.ts +++ b/src/core/portal/portal.spec.ts @@ -1,8 +1,4 @@ import { - it, - describe, - expect, - beforeEach, inject, fakeAsync, flushMicrotasks @@ -140,7 +136,7 @@ describe('Portals', () => { appFixture.detectChanges(); // Expect the new value to be reflected in the rendered output. - expect(hostContainer.textContent).toContainError('Mango'); + expect(hostContainer.textContent).toContain('Mango'); })); it('should change the attached portal', fakeAsync(() => { @@ -210,7 +206,7 @@ describe('Portals', () => { flushMicrotasks(); - expect(componentInstance).toBeAnInstanceOf(PizzaMsg); + expect(componentInstance).toEqual(jasmine.any(PizzaMsg)); expect(someDomElement.textContent).toContain('Pizza'); host.detach(); @@ -269,7 +265,7 @@ describe('Portals', () => { appFixture.detectChanges(); // Expect the new value to be reflected in the rendered output. - expect(someDomElement.textContent).toContainError('Mango'); + expect(someDomElement.textContent).toContain('Mango'); host.detach(); expect(someDomElement.innerHTML).toBe(''); diff --git a/src/demo-app/main.ts b/src/demo-app/main.ts index 5c75fc7984b3..b43d71a7119a 100644 --- a/src/demo-app/main.ts +++ b/src/demo-app/main.ts @@ -1,8 +1,6 @@ import {bootstrap} from '@angular/platform-browser-dynamic'; import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser'; import {HTTP_PROVIDERS} from '@angular/http'; -import {provide} from '@angular/core'; -import {Renderer} from '@angular/core'; import {disableDeprecatedForms, provideForms} from '@angular/forms'; import {OVERLAY_CONTAINER_TOKEN} from '@angular2-material/core/overlay/overlay'; @@ -19,9 +17,8 @@ bootstrap(DemoApp, [ disableDeprecatedForms(), provideForms(), MdLiveAnnouncer, - provide(OVERLAY_CONTAINER_TOKEN, {useValue: createOverlayContainer()}), + {provide: OVERLAY_CONTAINER_TOKEN, useValue: createOverlayContainer()}, HTTP_PROVIDERS, MdIconRegistry, - Renderer, - provide(HAMMER_GESTURE_CONFIG, {useClass: MdGestureConfig}), + {provide: HAMMER_GESTURE_CONFIG, useClass: MdGestureConfig}, ]); diff --git a/src/e2e-app/main.ts b/src/e2e-app/main.ts index eb1da6ac4128..a86dbf408839 100644 --- a/src/e2e-app/main.ts +++ b/src/e2e-app/main.ts @@ -1,7 +1,6 @@ import {bootstrap} from '@angular/platform-browser-dynamic'; import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser'; import {HTTP_PROVIDERS} from '@angular/http'; -import {provide} from '@angular/core'; import {Renderer} from '@angular/core'; import {disableDeprecatedForms, provideForms} from '@angular/forms'; @@ -19,9 +18,9 @@ bootstrap(E2EApp, [ disableDeprecatedForms(), provideForms(), MdLiveAnnouncer, - provide(OVERLAY_CONTAINER_TOKEN, {useValue: createOverlayContainer()}), + {provide: OVERLAY_CONTAINER_TOKEN, useValue: createOverlayContainer()}, HTTP_PROVIDERS, MdIconRegistry, Renderer, - provide(HAMMER_GESTURE_CONFIG, {useClass: MdGestureConfig}), + {provide: HAMMER_GESTURE_CONFIG, useClass: MdGestureConfig}, ]);