pipe tests added

Author: JaimeSalas

05-testing/02-angular-2025/01-pipes.md

@@ -1,2 +1,59 @@
-# Testin Pipes
+# Testing Pipes
 
+> You can test pipes without the Angular testing utilities
+
+```bash
+npx ng g p titlecase
+```
+
+Update `titlecase.pipe.ts`
+
+```ts
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+  name: "titlecase",
+  pure: true,
+})
+export class TitlecasePipe implements PipeTransform {
+  transform(input: string): string {
+    return input.length === 0
+      ? ""
+      : input.replace(
+          /\w\S*/g,
+          (txt) => txt[0].toUpperCase() + txt.slice(1).toLowerCase()
+        );
+  }
+}
+```
+
+Update `titlecase.pipe.spec.ts`
+
+```ts
+import { TitlecasePipe } from './titlecase.pipe';
+
+describe('TitlecasePipe', () => {
+  const pipe = new TitlecasePipe();
+
+  it('transforms "abc" to "Abc"', () => {
+    expect(pipe.transform('abc')).toBe('Abc');
+  });
+  
+  it('transforms "abc def" to "Abc Def"', () => {
+    expect(pipe.transform('abc def')).toBe('Abc Def');
+  });
+});
+
+```
+
+```bash
+npx ng test --include app/titlecase.pipe.spec.ts
+```
+
+## Writing DOM tests to support a pipe test
+
+Previous tests are working in isolation. They can't tell if the `TitleCasePipe` is working properly as applied in the application components.
+
+### Exercise 
+
+Create a component that uses `HighlightDirective` and create a test that ensures that the directive is applied.

05-testing/02-angular-2025/solution/application/src/app/app.component.spec.ts

@@ -1,29 +1,29 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
+// import { TestBed } from '@angular/core/testing';
+// import { AppComponent } from './app.component';
 
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AppComponent],
-    }).compileComponents();
-  });
+// describe('AppComponent', () => {
+//   beforeEach(async () => {
+//     await TestBed.configureTestingModule({
+//       imports: [AppComponent],
+//     }).compileComponents();
+//   });
 
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
+//   it('should create the app', () => {
+//     const fixture = TestBed.createComponent(AppComponent);
+//     const app = fixture.componentInstance;
+//     expect(app).toBeTruthy();
+//   });
 
-  it(`should have the 'application' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('application');
-  });
+//   it(`should have the 'application' title`, () => {
+//     const fixture = TestBed.createComponent(AppComponent);
+//     const app = fixture.componentInstance;
+//     expect(app.title).toEqual('application');
+//   });
 
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, application');
-  });
-});
+//   it('should render title', () => {
+//     const fixture = TestBed.createComponent(AppComponent);
+//     fixture.detectChanges();
+//     const compiled = fixture.nativeElement as HTMLElement;
+//     expect(compiled.querySelector('h1')?.textContent).toContain('Hello, application');
+//   });
+// });

05-testing/02-angular-2025/solution/application/src/app/titlecase.pipe.spec.ts

@@ -0,0 +1,13 @@
+import { TitlecasePipe } from './titlecase.pipe';
+
+describe('TitlecasePipe', () => {
+  const pipe = new TitlecasePipe();
+
+  it('transforms "abc" to "Abc"', () => {
+    expect(pipe.transform('abc')).toBe('Abc');
+  });
+
+  it('transforms "abc def" to "Abc Def"', () => {
+    expect(pipe.transform('abc def')).toBe('Abc Def');
+  });
+});

05-testing/02-angular-2025/solution/application/src/app/titlecase.pipe.ts

@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'titlecase',
+  pure: true,
+})
+export class TitlecasePipe implements PipeTransform {
+  transform(input: string): string {
+    return input.length === 0
+      ? ''
+      : input.replace(
+          /\w\S*/g,
+          (txt) => txt[0].toUpperCase() + txt.slice(1).toLowerCase()
+        );
+  }
+}