test v1

src/app/app.component.spec.ts

@@ -1,35 +1,44 @@
-import { TestBed } from '@angular/core/testing';
-import { RouterModule } from '@angular/router';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideRouter } from '@angular/router';
 
 describe('AppComponent', () => {
+  let component: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [
-        RouterModule.forRoot([])
-      ],
-      declarations: [
-        AppComponent
+      // si AppComponent est un composant standalone
+      //imports: [AppComponent],
+      // si AppComponent n'est PAS un composant standalone
+      declarations: [AppComponent],
+
+      providers: [
+        provideHttpClient(),
+        provideHttpClientTesting(),
+        provideRouter([]),
       ],
     }).compileComponents();
   });
 
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AppComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
+    expect(component).toBeTruthy();
   });
 
   it(`should have as title 'pokedemo'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('pokedemo');
+    expect(component.title).toEqual('pokedemo');
   });
 
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
+  it('should render the title', () => {
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, pokedemo');
+    expect(compiled.querySelector('h1')?.textContent).toContain('pokedemo');
   });
 });

src/app/app.component.ts

@@ -4,8 +4,8 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
+  styleUrl: './app.component.css',
 })
 export class AppComponent {
   title = 'pokedemo';
-}
+}

src/app/filter-pokemon--pipe.pipe.spec.ts

@@ -1,8 +1,45 @@
+import { pipe } from 'rxjs';
 import { FilterPokemonPipePipe } from './filter-pokemon--pipe.pipe';
 
 describe('FilterPokemonPipePipe', () => {
+  let pipe: FilterPokemonPipePipe;
+
+  beforeEach(() => {
+    pipe = new FilterPokemonPipePipe();
+  });
+
   it('create an instance', () => {
     const pipe = new FilterPokemonPipePipe();
     expect(pipe).toBeTruthy();
   });
+
+
+  it('search is undefined so return original', () => {
+    const pokes = [{ name: 'bulbasaur' }, { name: 'ivysaur' }];
+    const result = pipe.transform(pokes, 'name');
+    expect(result).toEqual(pokes);
+  });
+
+  it('filtre by property', () => {
+    const pokes = [{ name: 'bulbasaur' }, { name: 'ivysaur' }, { name: 'venusaur' }];
+    const result = pipe.transform(pokes, 'name', 'ivy');
+    expect(result).toEqual([{ name: 'ivysaur' }]);
+  });
+
+  it('pokes is undefined', () => {
+    const result = pipe.transform(undefined, 'name', 'ivy');
+    expect(result).toEqual([]);
+  });
+
+  it('property is undefined', () => {
+    const pokes = [{ name: 'bulbasaur' }, { name: 'ivysaur' }];
+    const result = pipe.transform(pokes, undefined, 'ivy');
+    expect(result).toEqual([]);
+  });
+
+  it('emty array because no matched', () => {
+    const pokes = [{ name: 'bulbasaur' }, { name: 'ivysaur' }];
+    const result = pipe.transform(pokes, 'name', 'charmander');
+    expect(result).toEqual([]);
+  });
 });

src/app/my-component/my-component.component.spec.ts

@@ -1,16 +1,67 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
+import { ComponentFixture, fakeAsync, flush, TestBed } from '@angular/core/testing';
+import { PokeDetail, Pokemon } from '../pokemon';
+import { PokeAPIServiceService } from '../poke-apiservice.service';
+import { PokeShareInfoService } from '../poke-share-info.service';
 import { MyComponentComponent } from './my-component.component';
 
 describe('MyComponentComponent', () => {
   let component: MyComponentComponent;
   let fixture: ComponentFixture<MyComponentComponent>;
+  let pokeAPI: PokeAPIServiceService;
+  let pokeShare: PokeShareInfoService;
+
+  const mockPokemonList = {
+    results: [
+      { name: 'bulbasaur' },
+      { name: 'ivysaur' },
+      { name: 'venusaur' }
+    ]
+  };
+
+  const mockPokeDetail: PokeDetail = {
+    id: 1,
+    name: 'bulbasaur',
+    height: 7,
+    weight: 69,
+    types: [],
+    sprites: {
+      front_default: 'https://raw.githubuserco…er/sprites/pokemon/1.png"',
+      back_default: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/1.png',
+      back_female: null,
+      back_shiny: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/1.png',
+      back_shiny_female: null,
+      front_female: null,
+      front_shiny: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/1.png',
+      front_shiny_female: null
+    },
+    abilities: [],
+    base_experience: 64,
+    cries: undefined,
+    forms: [],
+    game_indices: [],
+    held_items: [],
+    is_default: 	true,
+    location_area_encounters: 'https://pokeapi.co/api/v2/pokemon/1/encounters',
+    moves: [],
+    order: 1,
+    past_abilities: [],
+    past_types: [],
+    species: undefined,
+    stats: []
+  };
 
   beforeEach(async () => {
+    pokeAPI = jasmine.createSpyObj('PokeAPIServiceService', ['getPokemons', 'getPokemonInfo']);
+    pokeShare = jasmine.createSpyObj('PokeShareInfoService', ['setValue']);
+
     await TestBed.configureTestingModule({
       declarations: [MyComponentComponent]
-    })
-    .compileComponents();
+    ,
+    providers: [
+        { provide: PokeAPIServiceService, useValue: pokeAPI },
+        { provide: PokeShareInfoService, useValue: pokeShare}
+      ]
+    }).compileComponents();
 
     fixture = TestBed.createComponent(MyComponentComponent);
     component = fixture.componentInstance;
@@ -20,4 +71,25 @@ describe('MyComponentComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  //ngOnINIT
+  it('should load pokemon list on init', fakeAsync(() => {
+    fixture.detectChanges();
+    flush();
+    expect(pokeAPI.getPokemons).toHaveBeenCalled();
+    expect(component.pokes.length).toBe(3);
+    expect(component.pokes[0]).toEqual(jasmine.objectContaining({
+      id: '1',
+      name: 'bulbasaur'
+    }));
+  }));
+
+  it('go()', fakeAsync(() => {
+    component.selectedPokeId = '1';
+    component.go();
+    flush();
+
+    expect(pokeAPI.getPokemonInfo).toHaveBeenCalledWith('1');
+    expect(component.pokeDetail).toEqual(mockPokeDetail);
+  }));
 });

src/app/poke-apiservice.service.spec.ts

@@ -1,16 +1,40 @@
 import { TestBed } from '@angular/core/testing';
-
+import {  HttpTestingController } from '@angular/common/http/testing';
 import { PokeAPIServiceService } from './poke-apiservice.service';
+import { PokeServiceRes, PokeDetail } from './pokemon';
 
 describe('PokeAPIServiceService', () => {
   let service: PokeAPIServiceService;
+  let httpMock: HttpTestingController;
 
   beforeEach(() => {
-    TestBed.configureTestingModule({});
+    TestBed.configureTestingModule({
+      providers: [PokeAPIServiceService],
+    });
     service = TestBed.inject(PokeAPIServiceService);
+    httpMock = TestBed.inject(HttpTestingController);
   });
 
   it('should be created', () => {
     expect(service).toBeTruthy();
   });
+/*
+  it('should create', () => {
+    const mock: PokeServiceRes = {
+      results: [
+        { name: 'bulbasaur', url: 'https://pokeapi.co/api/v2/pokemon/1/' },
+        { name: 'ivysaur', url: 'https://pokeapi.co/api/v2/pokemon/2/' },
+      ],
+      count: 0,
+      next: '',
+      previous: null
+    };
+
+    service.getPokemons().subscribe((response) => {
+      expect(response).toEqual(mock);
+      expect(response.results.length).toBe(2);
+      expect(response.results[0].name).toBe('bulbasaur');
+    });
+  });
+  */
 });

src/app/poke-share-info.service.spec.ts

@@ -13,4 +13,14 @@ describe('PokeShareInfoService', () => {
   it('should be created', () => {
     expect(service).toBeTruthy();
   });
+
+  it('should set value when setValue is called', (done) => {
+    const testValue = 'Test Value';
+    service.getObservable().subscribe((value) => {
+      expect(value).toBe(testValue);
+      done();
+    });
+
+    service.setValue(testValue);
+  });
 });

src/app/pokedetail/pokedetail.component.spec.ts

@@ -1,14 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { PokedetailComponent } from './pokedetail.component';
+import { PokeShareInfoService } from '../poke-share-info.service';
 
 describe('PokedetailComponent', () => {
   let component: PokedetailComponent;
   let fixture: ComponentFixture<PokedetailComponent>;
 
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [PokedetailComponent]
+      declarations: [PokedetailComponent],
+      providers: [PokeShareInfoService]
     })
     .compileComponents();
 
@@ -17,7 +19,7 @@ describe('PokedetailComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it('should be created', () => {
     expect(component).toBeTruthy();
   });
 });

src/app/pokemon.spec.ts

@@ -2,6 +2,9 @@ import { Pokemon } from './pokemon';
 
 describe('Pokemon', () => {
   it('should create an instance', () => {
-    //expect(new Pokemon("1","test")).toBeTruthy();
+    const pokemon = new Pokemon('1', 'Bulbasaur');
+    expect(pokemon).toBeTruthy();
+    expect(pokemon.id).toBe('1');
+    expect(pokemon.name).toBe('Bulbasaur');
   });
 });

src/app/pokemon.ts

@@ -191,13 +191,7 @@ export interface Type {
     type: Species;
 }
 
-
-
-
 export class Pokemon {
-
-
     constructor(public id:string, public name:string){
     }
-
 }