Answer:8

apps/angular/8-pure-pipe/jest.config.ts

@@ -0,0 +1,23 @@
+/* eslint-disable */
+export default {
+  displayName: 'angular-projection',
+  preset: '../../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {},
+  coverageDirectory: '../../../coverage/apps/angular/1-projection',
+  transform: {
+    '^.+\\.(ts|mjs|js|html)$': [
+      'jest-preset-angular',
+      {
+        tsconfig: '<rootDir>/tsconfig.spec.json',
+        stringifyContentPathRegex: '\\.(html|svg)$',
+      },
+    ],
+  },
+  transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};

apps/angular/8-pure-pipe/src/app/app.component.ts

@@ -1,21 +1,19 @@
-import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
+import { PersonPipe } from './person.pipe';
+import { Person } from './types';
 
 @Component({
   standalone: true,
-  imports: [NgFor],
+  imports: [PersonPipe],
   selector: 'app-root',
   template: `
-    <div *ngFor="let person of persons; let index = index">
-      {{ heavyComputation(person, index) }}
-    </div>
+    @for (person of persons; track person) {
+      <div>
+        {{ person | person: $index }}
+      </div>
+    }
   `,
 })
 export class AppComponent {
-  persons = ['toto', 'jack'];
-
-  heavyComputation(name: string, index: number) {
-    // very heavy computation
-    return `${name} - ${index}`;
-  }
+  persons: Person[] = ['toto', 'jack'];
 }

apps/angular/8-pure-pipe/src/app/person.pipe.spec.ts

@@ -0,0 +1,13 @@
+import { PersonPipe } from './person.pipe';
+
+describe('PersonPipe', () => {
+  it('create an instance', () => {
+    const pipe = new PersonPipe();
+    expect(pipe).toBeTruthy();
+  });
+  it('should transform', () => {
+    const pipe = new PersonPipe();
+    expect(pipe.transform('person', 10)).toBe(`person - 10`);
+    expect(pipe.transform('', 10)).toBe(`? - 10`);
+  });
+});

apps/angular/8-pure-pipe/src/app/person.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Person } from './types';
+
+@Pipe({
+  name: 'person',
+  standalone: true,
+})
+export class PersonPipe implements PipeTransform {
+  transform(person: Person, index: number): string {
+    return `${person || '?'} - ${index}`;
+  }
+}

apps/angular/8-pure-pipe/src/app/types.ts

@@ -0,0 +1 @@
+export type Person = string;

apps/angular/8-pure-pipe/src/test-setup.ts

@@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';

apps/angular/8-pure-pipe/tsconfig.editor.json

@@ -2,6 +2,6 @@
   "extends": "./tsconfig.json",
   "include": ["**/*.ts"],
   "compilerOptions": {
-    "types": []
+    "types": ["jest", "node"]
   }
 }

apps/angular/8-pure-pipe/tsconfig.json

@@ -6,6 +6,9 @@
     {
       "path": "./tsconfig.app.json"
     },
+    {
+      "path": "./tsconfig.spec.json"
+    },
     {
       "path": "./tsconfig.editor.json"
     }

apps/angular/8-pure-pipe/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": ["jest.config.ts", "**/*.test.ts", "**/*.spec.ts", "**/*.d.ts"]
+}