improve pipes and test them

Author: Manuela Paula Ritter

src/app/matrix/x-position.pipe.spec.ts

@@ -0,0 +1,39 @@
+import { XPositionPipe } from './x-position.pipe';
+
+describe('XPositionPipe', () => {
+  const pipe = new XPositionPipe();
+  let today: Date;
+  let maxTenDays: Date;
+
+  beforeEach(() => {
+    const now = new Date();
+    today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+    maxTenDays = new Date(today.valueOf());
+    maxTenDays = new Date(maxTenDays.setDate(maxTenDays.getDate() + 10));
+  });
+
+  it('should return a % string', () => {
+    const result = pipe.transform(1, 1, 1, new Date());
+    expect(result.charAt(result.length - 1)).toBe('%');
+  });
+
+  it('should return 1 for maxDate', () => {
+    const result = pipe.transform(
+      maxTenDays.getDate(),
+      maxTenDays.getMonth() + 1, // getMonth returns monthIndex which is one less than actual month
+      maxTenDays.getFullYear() - 2000,
+      maxTenDays,
+    );
+    expect(result).toBe('1%');
+  });
+
+  it('should return 95 for today', () => {
+    const result = pipe.transform(
+      today.getDate(),
+      today.getMonth() + 1,
+      today.getFullYear() - 2000,
+      maxTenDays,
+    );
+    expect(result).toBe('95%');
+  });
+});

src/app/matrix/x-position.pipe.ts

@@ -28,6 +28,6 @@ export class XPositionPipe implements PipeTransform {
     ratio = Math.max(ratio, 0);
     ratio = Math.min(ratio, 1);
 
-    return (1 - ratio) * 94 + '%';
+    return (1 - ratio) * 94 + 1 + '%';
   }
 }

src/app/matrix/y-position.pipe.spec.ts

@@ -0,0 +1,18 @@
+import { YPositionPipe } from './y-position.pipe';
+
+describe('YPositionPipe', () => {
+  const pipe = new YPositionPipe();
+
+  it('should return a % string', () => {
+    const result = pipe.transform(10);
+    expect(result.charAt(result.length - 1)).toBe('%');
+  });
+
+  it('should return 95 for a value 0', () => {
+    expect(pipe.transform(0)).toBe('95%');
+  });
+
+  it('should return 1 for a value of 100', () => {
+    expect(pipe.transform(100)).toBe('1%');
+  });
+});

src/app/matrix/y-position.pipe.ts

@@ -4,6 +4,6 @@ import { Pipe, PipeTransform } from '@angular/core';
 export class YPositionPipe implements PipeTransform {
   // 100%, unten 5% Mindestabstand, 1% oben -> 94% übrig
   transform(yValue: number): string {
-    return ((100 - yValue) / 100) * 94 + '%';
+    return ((100 - yValue) / 100) * 94 + 1 + '%';
   }
 }