Merge pull request #9 from opiepj/feature/8-custom-pipe

Feature/8 custom pipe

Author: opiepj

src/app/pipes/capitalize/capitalize-pipe.spec.ts

@@ -0,0 +1,138 @@
+/// <reference path="../../../typings/_custom.d.ts" />
+import {CapitalizePipe, CapitalizeFactory} from './Capitalize-Pipe';
+
+describe('Capitalize', () => {
+
+  describe('CapitalizePipe', () => {
+    var subject;
+    var result;
+    var pipe;
+
+    beforeEach(() => {
+      pipe = new CapitalizePipe();
+    });
+    afterEach(() => {
+      expect(subject).toEqual(result);
+    });
+
+    describe('#support', () => {
+
+      it('should support string', () => {
+        subject = pipe.supports('yolo');
+        result  = true;
+      });
+
+      it('should not support null', () => {
+        subject = pipe.supports(null);
+        result  = false;
+      });
+
+      it('should not support NaN', () => {
+        subject = pipe.supports(NaN);
+        result  = false;
+      });
+
+      it('should not support new Object()', () => {
+        subject = pipe.supports(new Object());
+        result  = false;
+      });
+
+      it('should not support function(){}', () => {
+        subject = pipe.supports(function(){});
+        result  = false;
+      });
+
+    });
+
+    describe('#transform', () => {
+      it('should transform string to Capitalized versions', () => {
+        subject = pipe.transform('yolo');
+        result  = 'Yolo';
+      });
+
+      it('should transform all strings to Capitalized versions', () => {
+        var str = 'what does the scouter say about its power level';
+
+        subject = pipe.transform(str, true);
+        result  = 'What Does The Scouter Say About Its Power Level';
+      });
+
+    });
+
+
+    describe('#capitalizeWord', () => {
+      it('should capitalized a word', () => {
+        subject = pipe.capitalizeWord('something');
+        result  = 'Something';
+      });
+
+      it('should only capitalized first char', () => {
+        subject = pipe.capitalizeWord('something something something');
+        result  = 'Something something something';
+      });
+
+    });
+
+
+  });
+
+  describe('CapitalizeFactory', () => {
+    var subject;
+    var result;
+    var factory;
+
+    beforeEach(() => {
+      factory = new CapitalizeFactory();
+    });
+
+    afterEach(() => {
+      expect(subject).toEqual(result);
+    });
+
+    it('should exist', () => {
+      subject = Boolean(factory);
+      result  = true;
+    });
+
+    describe('#support', () => {
+      it('should support string', () => {
+        subject = factory.supports('yolo');
+        result  = true;
+      });
+
+      it('should not support null', () => {
+        subject = factory.supports(null);
+        result  = false;
+      });
+
+      it('should not support NaN', () => {
+        subject = factory.supports(NaN);
+        result  = false;
+      });
+
+      it('should not support new Object()', () => {
+        subject = factory.supports(new Object());
+        result  = false;
+      });
+
+      it('should not support function(){}', () => {
+        subject = factory.supports(function(){});
+        result  = false;
+      });
+
+
+    });
+
+    describe('#create', () => {
+      it('should be instance of CapitalizePipe', () => {
+        subject = factory.create() instanceof CapitalizePipe;
+        result  = true;
+      });
+
+    });
+
+
+  });
+
+
+});

src/app/pipes/capitalize/capitalize-pipe.ts

@@ -0,0 +1,43 @@
+/// <reference path="../../../typings/_custom.d.ts" />
+import {Pipe, PipeFactory} from 'angular2/angular2';
+
+// Check if the value is supported for the pipe
+export function isString(txt): boolean {
+  return typeof txt === 'string';
+}
+
+// Simple example of a Pipe
+export class CapitalizePipe implements Pipe {
+  regexp: RegExp = /([^\W_]+[^\s-]*) */g;
+
+  supports(txt): boolean {
+    return isString(txt);
+  }
+  transform(value: string, args?: List<any>): any {
+    return (!value) ? '' :
+      (!args) ?
+        this.capitalizeWord(value) :
+        value.replace(this.regexp, this.capitalizeWord);
+  }
+  capitalizeWord(txt: string): string {
+    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+  }
+  onDestroy(): void {
+    // not needed since this is stateless
+  }
+
+}
+
+// We create a factory since we create an instance for each binding for stateful pipes
+export class CapitalizeFactory implements PipeFactory {
+  supports(txt): boolean {
+    return isString(txt);
+  }
+  create(cdRef): Pipe {
+    return new CapitalizePipe();
+  }
+}
+
+// Since templates in angular are async we are passing the value to
+// NullPipeFactory if the value is not supported
+export var capitalize = [ new CapitalizeFactory() ];

src/app/pipes/pipes.ts

@@ -7,15 +7,13 @@ import {Pipes} from 'angular2/change_detection';
 /*
  * App Pipes
  */
-/* TODO: Create these pipe classes
-import {capitalize} from './CapitalizePipe';
+import {capitalize} from './Capitalize/Capitalize-Pipe';
 import {rxAsync} from './RxPipe';
-*/
 
 export var appPipes = [
   Pipes.extend({
-    //'async': rxAsync,
-    //'capitalize': capitalize
+    'async': rxAsync,
+    'capitalize': capitalize
     // add more pipes to this Map
   })
 ];

src/app/pipes/rx/rxpipe.ts

@@ -0,0 +1,38 @@
+/// <reference path="../../../typings/_custom.d.ts" />
+
+import {Pipe, PipeFactory} from 'angular2/angular2';
+import {ObservablePipe} from 'angular2/pipes';
+import {async} from 'angular2/src/change_detection/change_detection';
+import * as Rx from 'rx';
+
+export function isObservable(obs) {
+  return obs && typeof obs.subscribe === 'function';
+}
+
+//upgrade async pipe with Rx support
+export class RxPipe extends ObservablePipe {
+  _subscription: any;
+  _observable: any;
+  constructor(ref) { super(ref); }
+  supports(obs) { return isObservable(obs); }
+  _subscribe(obs) {
+    this._observable = obs;
+    this._subscription = obs.subscribe(
+      value => this._updateLatestValue(value),
+      e => { throw e; }
+    );
+  }
+  transform(value: any, args?: List<any>): any {
+    return super.transform(value, args);
+  }
+  onDestroy(): void {
+    return super.onDestroy();
+  }
+}
+
+export class RxPipeFactory implements PipeFactory {
+  supports(obs) { return isObservable(obs); }
+  create(cdRef): Pipe { return new RxPipe(cdRef); }
+}
+
+export var rxAsync = [ new RxPipeFactory() ].concat(async);