forked from angular/angular
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(PromisePipe): add pipe for promises
- Loading branch information
1 parent
92d6aa1
commit 7498758
Showing
2 changed files
with
191 additions
and
0 deletions.
There are no files selected for viewing
95 changes: 95 additions & 0 deletions
95
modules/angular2/src/change_detection/pipes/promise_pipe.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
import {Promise, PromiseWrapper} from 'angular2/src/facade/async'; | ||
import {isBlank, isPresent} from 'angular2/src/facade/lang'; | ||
import {Pipe, WrappedValue} from './pipe'; | ||
import {ChangeDetectorRef} from '../change_detector_ref'; | ||
|
||
// HACK: workaround for Traceur behavior. | ||
// It expects all transpiled modules to contain this marker. | ||
// TODO: remove this when we no longer use traceur | ||
export var __esModule = true; | ||
|
||
/** | ||
* Implements async bindings to Promise. | ||
* | ||
* # Example | ||
* | ||
* In this example we bind the description promise to the DOM. | ||
* The async pipe will convert a promise to the value with which it is resolved. It will also | ||
* request a change detection check when the promise is resolved. | ||
* | ||
* ``` | ||
* @Component({ | ||
* selector: "task-cmp", | ||
* changeDetection: ON_PUSH | ||
* }) | ||
* @View({ | ||
* inline: "Task Description {{description|promise}}" | ||
* }) | ||
* class Task { | ||
* description:Promise<string>; | ||
* } | ||
* | ||
* ``` | ||
* | ||
* @exportedAs angular2/pipes | ||
*/ | ||
export class PromisePipe extends Pipe { | ||
_ref: ChangeDetectorRef; | ||
_latestValue: Object; | ||
_latestReturnedValue: Object; | ||
_sourcePromise: Promise<any>; | ||
|
||
constructor(ref: ChangeDetectorRef) { | ||
super(); | ||
this._ref = ref; | ||
this._latestValue = null; | ||
this._latestReturnedValue = null; | ||
} | ||
|
||
supports(promise): boolean { return PromiseWrapper.isPromise(promise); } | ||
|
||
onDestroy(): void { | ||
// NO-OP | ||
} | ||
|
||
transform(promise: Promise<any>): any { | ||
var pipe = this; | ||
if (isBlank(this._sourcePromise)) { | ||
this._sourcePromise = promise; | ||
promise.then((val) => { | ||
if (pipe._sourcePromise === promise) { | ||
pipe._updateLatestValue(val); | ||
} | ||
}); | ||
return null; | ||
} | ||
|
||
if (promise !== this._sourcePromise) { | ||
this._sourcePromise = null; | ||
return this.transform(promise); | ||
} | ||
|
||
if (this._latestValue === this._latestReturnedValue) { | ||
return this._latestReturnedValue; | ||
} else { | ||
this._latestReturnedValue = this._latestValue; | ||
return WrappedValue.wrap(this._latestValue); | ||
} | ||
} | ||
|
||
_updateLatestValue(value: Object) { | ||
this._latestValue = value; | ||
this._ref.requestCheck(); | ||
} | ||
} | ||
|
||
/** | ||
* Provides a factory for [PromisePipe]. | ||
* | ||
* @exportedAs angular2/pipes | ||
*/ | ||
export class PromisePipeFactory { | ||
supports(promise): boolean { return PromiseWrapper.isPromise(promise); } | ||
|
||
create(cdRef): Pipe { return new PromisePipe(cdRef); } | ||
} |
96 changes: 96 additions & 0 deletions
96
modules/angular2/test/change_detection/pipes/promise_pipe_spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,96 @@ | ||
import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach, | ||
AsyncTestCompleter, inject, proxy, SpyObject} from 'angular2/test_lib'; | ||
import {IMPLEMENTS} from 'angular2/src/facade/lang'; | ||
import {PromisePipe} from 'angular2/src/change_detection/pipes/promise_pipe'; | ||
import {WrappedValue} from 'angular2/src/change_detection/pipes/pipe'; | ||
import {ChangeDetectorRef} from 'angular2/src/change_detection/change_detector_ref'; | ||
import {PromiseWrapper} from 'angular2/src/facade/async'; | ||
|
||
export function main() { | ||
describe("PromisePipe", () => { | ||
var message = new Object(); | ||
var pipe; | ||
var completer; | ||
var ref; | ||
|
||
beforeEach(() => { | ||
completer = PromiseWrapper.completer(); | ||
ref = new SpyChangeDetectorRef(); | ||
pipe = new PromisePipe(ref); | ||
}); | ||
|
||
describe("supports", () => { | ||
it("should support promises", () => { | ||
expect(pipe.supports(completer.promise)).toBe(true); | ||
}); | ||
|
||
it("should not support other objects", () => { | ||
expect(pipe.supports("string")).toBe(false); | ||
expect(pipe.supports(null)).toBe(false); | ||
}); | ||
}); | ||
|
||
describe("transform", () => { | ||
it("should return null when subscribing to a promise", () => { | ||
expect(pipe.transform(completer.promise)).toBe(null); | ||
}); | ||
|
||
it("should return the latest available value", inject([AsyncTestCompleter], (async) => { | ||
pipe.transform(completer.promise); | ||
|
||
completer.resolve(message); | ||
|
||
PromiseWrapper.setTimeout(() => { | ||
expect(pipe.transform(completer.promise)).toEqual(new WrappedValue(message)); | ||
async.done(); | ||
}, 0) | ||
})); | ||
|
||
it("should return unwrapped value when nothing has changed since the last call", | ||
inject([AsyncTestCompleter], (async) => { | ||
pipe.transform(completer.promise); | ||
completer.resolve(message); | ||
|
||
PromiseWrapper.setTimeout(() => { | ||
pipe.transform(completer.promise); | ||
expect(pipe.transform(completer.promise)).toBe(message); | ||
async.done(); | ||
}, 0) | ||
})); | ||
|
||
it("should dispose of the existing subscription when subscribing to a new promise", | ||
inject([AsyncTestCompleter], (async) => { | ||
pipe.transform(completer.promise); | ||
|
||
var newCompleter = PromiseWrapper.completer(); | ||
expect(pipe.transform(newCompleter.promise)).toBe(null); | ||
|
||
// this should not affect the pipe, so it should return WrappedValue | ||
completer.resolve(message); | ||
|
||
PromiseWrapper.setTimeout(() => { | ||
expect(pipe.transform(newCompleter.promise)).toBe(null); | ||
async.done(); | ||
}, 0) | ||
})); | ||
|
||
it("should request a change detection check upon receiving a new value", | ||
inject([AsyncTestCompleter], (async) => { | ||
pipe.transform(completer.promise); | ||
completer.resolve(message); | ||
|
||
PromiseWrapper.setTimeout(() => { | ||
expect(ref.spy('requestCheck')).toHaveBeenCalled(); | ||
async.done(); | ||
}, 0) | ||
})); | ||
}); | ||
}); | ||
} | ||
|
||
@proxy | ||
@IMPLEMENTS(ChangeDetectorRef) | ||
class SpyChangeDetectorRef extends SpyObject { | ||
constructor(){super(ChangeDetectorRef);} | ||
noSuchMethod(m){return super.noSuchMethod(m)} | ||
} |