Permalink
Browse files

support deprecated and new forms api

  • Loading branch information...
1 parent 39ff1fe commit c47bcf1fafab9d5652d37a05a7e2a90053144ae8 @mseemann committed Aug 7, 2016
View
@@ -31,8 +31,9 @@
"url": "git+https://github.com/mseemann/angular2-mdl.git"
},
"dependencies": {
+ "@angular/common": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
- "@angular/common": "2.0.0-rc.4"
+ "@angular/forms": "0.2.0"
},
"devDependencies": {
"@angular/compiler": "2.0.0-rc.4",
@@ -63,9 +64,9 @@
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.31",
"ts-node": "0.9.3",
- "tslint": "3.13.0",
- "typescript": "1.9.0-dev.20160615-1.0",
- "typings": "1.3.1",
+ "tslint": "3.14.0",
+ "typescript": "2.0.0",
+ "typings": "1.3.2",
"zone.js": "0.6.12"
}
}
@@ -1,14 +1,14 @@
<h4>Snackbar </h4>
-<mdl-button mdl-button-type="raised" mdl-colored mdl-ripple (click)="showSnackbar()">Show Snackbar</mdl-button>
+<mdl-button mdl-button-type="raised" mdl-colored="primary" mdl-ripple (click)="showSnackbar()">Show Snackbar</mdl-button>
<pre prism>
<![CDATA[
- <mdl-button mdl-button-type="raised" mdl-colored mdl-ripple (click)="showSnackbar()">Show Snackbar</mdl-button>
+ <mdl-button mdl-button-type="raised" mdl-colored="primary" mdl-ripple (click)="showSnackbar()">Show Snackbar</mdl-button>
<script>
export class SnackbarDemo {
@@ -3,39 +3,45 @@ import {
expect,
it,
inject,
- beforeEach
+ beforeEach,
+ addProviders
} from '@angular/core/testing';
import { By, DOCUMENT } from '@angular/platform-browser';
import { Component} from '@angular/core';
import { TestComponentBuilder } from '@angular/compiler/testing';
import { MdlCheckboxComponent } from './mdl-checkbox.component';
+import { disableDeprecatedForms, provideForms} from '@angular/forms';
+
describe('Component: MdlCheckbox', () => {
var builder: TestComponentBuilder;
var doc: HTMLDocument;
- beforeEach(inject([TestComponentBuilder, DOCUMENT], function (tcb: TestComponentBuilder, document) {
- builder = tcb;
- doc = document;
- }));
+ describe('with deprecated forms api', () => {
- it('should add the css class mdl-checkbox to the host element', () => {
+ beforeEach(inject([TestComponentBuilder, DOCUMENT], function (tcb: TestComponentBuilder, document) {
+ builder = tcb;
+ doc = document;
+ }));
- return builder
- .createAsync(MdlTestCheckboxComponent).then( (fixture) => {
+ it('should add the css class mdl-checkbox to the host element', ( done ) => {
- fixture.detectChanges();
+ return builder
+ .createAsync(MdlTestCheckboxComponent).then( (fixture) => {
- let checkboxEl: HTMLElement = fixture.nativeElement.children.item(0);
- expect(checkboxEl.classList.contains('mdl-checkbox')).toBe(true);
+ fixture.detectChanges();
- });
- });
+ let checkboxEl: HTMLElement = fixture.nativeElement.children.item(0);
+ expect(checkboxEl.classList.contains('mdl-checkbox')).toBe(true);
- it('should support ngModel', () => {
- return builder
- .createAsync(MdlTestCheckboxComponent).then( (fixture) => {
+ done();
+ });
+ });
+
+ it('should support ngModel', ( done ) => {
+ return builder
+ .createAsync(MdlTestCheckboxComponent).then( (fixture) => {
fixture.detectChanges();
@@ -45,19 +51,22 @@ describe('Component: MdlCheckbox', () => {
instance.checkboxValue1 = true;
fixture.detectChanges();
+
expect(el.checked).toEqual(true);
component.value = false;
fixture.detectChanges();
expect(el.checked).toEqual(false);
- });
- });
+ done();
+
+ });
+ });
- it('should change the value on click', () => {
- return builder
- .createAsync(MdlTestCheckboxComponent).then( (fixture) => {
- fixture.detectChanges();
+ it('should change the value on click', ( done ) => {
+ return builder
+ .createAsync(MdlTestCheckboxComponent).then( (fixture) => {
+ fixture.detectChanges();
let instance = fixture.componentInstance;
let el: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
@@ -72,13 +81,14 @@ describe('Component: MdlCheckbox', () => {
expect(el.checked).toEqual(true);
- });
- });
+ done();
+ });
+ });
- it('should mark the component as focused and blured', () => {
- return builder
- .createAsync(MdlTestCheckboxComponent).then( (fixture) => {
- fixture.detectChanges();
+ it('should mark the component as focused and blured', ( done ) => {
+ return builder
+ .createAsync(MdlTestCheckboxComponent).then( (fixture) => {
+ fixture.detectChanges();
let inputEl: HTMLInputElement = fixture.debugElement.query(By.css('input')).nativeElement;
@@ -98,9 +108,38 @@ describe('Component: MdlCheckbox', () => {
fixture.detectChanges();
expect(checkboxEl.classList.contains('is-focused')).toBe(false);
- });
+ done();
+ });
+ });
});
+
+ describe('with new forms api', () => {
+ beforeEach( () => {
+ addProviders([
+ disableDeprecatedForms(),
+ provideForms()
+ ]);
+ });
+
+ beforeEach(inject([TestComponentBuilder, DOCUMENT], function (tcb: TestComponentBuilder, document) {
+ builder = tcb;
+ doc = document;
+ }));
+
+ it('should be possible to create the testcomponnet if the new forms api is used', ( done ) => {
+
+ return builder
+ .createAsync(MdlTestCheckboxComponent).then( (fixture) => {
+
+ done();
+ });
+
+ });
+
+ });
+
+
});
@@ -3,24 +3,32 @@ import {
ElementRef,
Provider,
Renderer,
- forwardRef,
- Input
+ forwardRef
} from '@angular/core';
import {
+ NG_VALUE_ACCESSOR as DEPRECTAED_NG_VALUE_ACCESSOR,
+ ControlValueAccessor as DEPRECATED_ControlValueAccessor
+} from '@angular/common';
+import {
NG_VALUE_ACCESSOR,
ControlValueAccessor
-} from '@angular/common';
+} from '@angular/forms';
const MD_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(NG_VALUE_ACCESSOR, {
useExisting: forwardRef(() => MdlCheckboxComponent),
multi: true
});
+const DEPRECATED_MD_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(DEPRECTAED_NG_VALUE_ACCESSOR, {
+ useExisting: forwardRef(() => MdlCheckboxComponent),
+ multi: true
+});
+
const IS_FOCUSED = 'is-focused';
@Component({
selector: 'mdl-checkbox',
- providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR],
+ providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR, DEPRECATED_MD_INPUT_CONTROL_VALUE_ACCESSOR],
host: {
'(click)': 'onClick()',
'[class.mdl-checkbox]': 'true',
@@ -31,7 +39,7 @@ const IS_FOCUSED = 'is-focused';
<input type="checkbox" class="mdl-checkbox__input"
(focus)="onFocus()"
(blur)="onBlur()"
- [(ngModel)]="value">
+ [ngModel]="value">
<span class="mdl-checkbox__label"><ng-content></ng-content></span>
<span class="mdl-checkbox__focus-helper"></span>
<span class="mdl-checkbox__box-outline">
@@ -40,7 +48,7 @@ const IS_FOCUSED = 'is-focused';
`,
inputs: ['value']
})
-export class MdlCheckboxComponent implements ControlValueAccessor {
+export class MdlCheckboxComponent implements ControlValueAccessor, DEPRECATED_ControlValueAccessor {
private value_: boolean = false;
@@ -3,34 +3,66 @@ import {
expect,
it,
inject,
- beforeEach
+ beforeEach,
+ addProviders
} from '@angular/core/testing';
import { DOCUMENT } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { TestComponentBuilder } from '@angular/compiler/testing';
import { MdlIconToggleComponent } from './mdl-icon-toggle.component';
+import { disableDeprecatedForms, provideForms} from '@angular/forms';
describe('Component: MdlIconToggle', () => {
var builder: TestComponentBuilder;
var doc: HTMLDocument;
- beforeEach(inject([TestComponentBuilder, DOCUMENT], function (tcb: TestComponentBuilder, document) {
- builder = tcb;
- doc = document;
- }));
+ describe('with deprecated forms api', () => {
- it('should add the css class mdl-icon-toggle to the host element', () => {
+ beforeEach(inject([TestComponentBuilder, DOCUMENT], function (tcb: TestComponentBuilder, document) {
+ builder = tcb;
+ doc = document;
+ }));
- return builder
- .createAsync(MdlTestIconToggleComponent).then( (fixture) => {
+ it('should add the css class mdl-icon-toggle to the host element', () => {
- fixture.detectChanges();
+ return builder
+ .createAsync(MdlTestIconToggleComponent).then( (fixture) => {
- let checkboxEl: HTMLElement = fixture.nativeElement.children.item(0);
- expect(checkboxEl.classList.contains('mdl-icon-toggle')).toBe(true);
+ fixture.detectChanges();
+
+ let checkboxEl: HTMLElement = fixture.nativeElement.children.item(0);
+ expect(checkboxEl.classList.contains('mdl-icon-toggle')).toBe(true);
+
+ });
+ });
+ });
+
+ describe('with new forms api', () => {
+
+ beforeEach( () => {
+ addProviders([
+ disableDeprecatedForms(),
+ provideForms()
+ ]);
+ });
+ beforeEach(inject([TestComponentBuilder, DOCUMENT], function (tcb: TestComponentBuilder, document) {
+ builder = tcb;
+ doc = document;
+ }));
+
+ it('should create the testcomponent', ( done ) => {
+
+ return builder
+ .createAsync(MdlTestIconToggleComponent).then( (fixture) => {
+
+ fixture.detectChanges();
+
+ done();
+
+ });
+ });
- });
});
});
@@ -6,11 +6,19 @@ import {
forwardRef
} from '@angular/core';
import {
- NG_VALUE_ACCESSOR
+ NG_VALUE_ACCESSOR as DEPRECATED_NG_VALUE_ACCESSOR
} from '@angular/common';
+import {
+ NG_VALUE_ACCESSOR
+} from '@angular/forms';
import { MdlIconComponent } from './../icon/mdl-icon.component';
import { MdlCheckboxComponent } from './../checkbox/mdl-checkbox.component';
+const DEPRECATED_MD_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(DEPRECATED_NG_VALUE_ACCESSOR, {
+ useExisting: forwardRef(() => MdlIconToggleComponent),
+ multi: true
+});
+
const MD_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(NG_VALUE_ACCESSOR, {
useExisting: forwardRef(() => MdlIconToggleComponent),
multi: true
@@ -19,7 +27,7 @@ const MD_INPUT_CONTROL_VALUE_ACCESSOR = new Provider(NG_VALUE_ACCESSOR, {
@Component({
selector: 'mdl-icon-toggle',
- providers: [MD_INPUT_CONTROL_VALUE_ACCESSOR],
+ providers: [DEPRECATED_MD_INPUT_CONTROL_VALUE_ACCESSOR, MD_INPUT_CONTROL_VALUE_ACCESSOR],
host: {
'(click)': 'onClick()',
'[class.mdl-icon-toggle]': 'true',
Oops, something went wrong.

0 comments on commit c47bcf1

Please sign in to comment.