feat(pipes): add example for testing a filter pipe

Author: Fabian Gosebrink

README.md

@@ -41,6 +41,8 @@ All the scenarios are listed here below and nicely linked to the source file.
     _Learn how to test async operations using the `async()` as well as `fakeAsync()` functions._
     - [Mocking and remote http calls](./src/app/services/remote.service.spec.ts)  
     _Learn how to mock external dependencies, such as use the `MockBackend` provided by Angular to respond to http calls._
+1. [**Testing Pipes**](./src/app/pipes)
+    - [custom filter pipe](./src/app/pipes/filter.pipe.spec.ts)
 1. [**Custom Matchers and Utilities**](./src/app/utils)
     - [Create your own custom Jasmine matchers](./src/app/utils/custom-matchers.ts)
 

src/app/pipes/filter.pipe.spec.ts

@@ -0,0 +1,74 @@
+import { FilterPipe } from './filter.pipe';
+
+describe('FilterPipe', () => {
+
+    let filterPipe: FilterPipe;
+
+    // synchronous beforeEach
+    beforeEach(() => {
+        filterPipe = new FilterPipe();
+    });
+
+    it('should be instanciated', () => {
+        expect(filterPipe).toBeDefined();
+    });
+
+    it('should return empty array if no items given', () => {
+
+        let items = null;
+
+        let filtered = filterPipe.transform(items, 'name', 'Hans');
+
+        expect(filtered.length).toBe(0);
+        expect(filtered).toEqual([]);
+    });
+
+    it('should return items if no field is given', () => {
+
+        let items = [];
+        items.push({ id: 1, name: 'Hans' });
+
+        let filtered = filterPipe.transform(items, null, 'Hans');
+
+        expect(filtered).toEqual(items);
+    });
+
+    it('should return items if no value is given', () => {
+
+        let items = [];
+        items.push({ id: 1, name: 'Hans' });
+
+        let filtered = filterPipe.transform(items, 'name', null);
+
+        expect(filtered).toEqual(items);
+    });
+
+    it('should filter correctly', () => {
+
+        let items = [];
+
+        items.push({ id: 1, name: 'Hans' });
+        items.push({ id: 2, name: 'Franz' });
+        items.push({ id: 3, name: 'Kurt' });
+        items.push({ id: 4, name: 'Gustav' });
+
+        let filtered = filterPipe.transform(items, 'name', 'Hans');
+
+        expect(filtered.length).toBeGreaterThan(0);
+        expect(filtered.length).toBe(1);
+    });
+
+    it('should filter two items', () => {
+
+        let items = [];
+
+        items.push({ id: 1, name: 'Hans' });
+        items.push({ id: 2, name: 'Hans' });
+        items.push({ id: 3, name: 'Kurt' });
+        items.push({ id: 4, name: 'Gustav' });
+
+        let filtered = filterPipe.transform(items, 'name', 'Hans');
+
+        expect(filtered.length).toBe(2);
+    });
+});

src/app/pipes/filter.pipe.ts

@@ -0,0 +1,19 @@
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'filter'
+})
+
+@Injectable()
+export class FilterPipe implements PipeTransform {
+    transform(items: any[], field: string, value: string): any[] {
+        if (!items) {
+            return [];
+        }
+        if (!field || !value) {
+            return items;
+        }
+
+        return items.filter(singleItem => singleItem[field].toLowerCase().includes(value.toLowerCase()));
+    }
+}