Add test of header, footer, list, card, filter and paginator

src/app/feature/card/card.component.spec.ts

@@ -1,6 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { CardComponent } from './card.component';
+import { MagicCard } from '../../core/model/model';
+import { By } from '@angular/platform-browser';
 
 describe('CardComponent', () => {
   let component: CardComponent;
@@ -19,4 +21,27 @@ describe('CardComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should display a card', () => {
+    const testCard: MagicCard = {
+      name: 'testCard',
+      imageUrl: 'http://www.test.com/',
+      manaCost: '',
+      cmc: 0,
+      colors: [],
+      rarity: '',
+      setName: '',
+      text: '',
+      artist: '',
+      number: '',
+      isFavorite: false,
+      types: [],
+      flavor: '',
+    };
+    component.card = testCard;
+    fixture.detectChanges();
+    const image = fixture.debugElement.query(By.css('li img')).nativeElement;
+    expect(image.src).toEqual(testCard.imageUrl);
+    expect(image.alt).toEqual(testCard.name);
+  });
 });

src/app/feature/filter/filter.component.html

@@ -1,14 +1,45 @@
 <ul class="filters">
-  <li> <button (click)="changeColor('G')"><img src="../../../assets/filter/green.png" alt="filter by green"></button>
+  <li>
+    <button class="green" (click)="changeColor('G')">
+      <img src="../../../assets/filter/green.png" alt="filter by green" />
+    </button>
   </li>
-  <li><button (click)="changeType('Artifact')"><img src="../../../assets/filter/colorless.png"
-        alt="filter by artifact"></button></li>
-  <li><button (click)="changeColor('R')"><img src="../../../assets/filter/red.png" alt="filter by red"></button></li>
-  <li><button (click)="changeColor('U')"><img src="../../../assets/filter/blue.png" alt="filter by blue"></button></li>
-  <li><button (click)="changeColor('W')"><img src="../../../assets/filter/white.png" alt="filter by white"></button>
+  <li>
+    <button class="artifact" (click)="changeType('Artifact')">
+      <img
+        src="../../../assets/filter/colorless.png"
+        alt="filter by artifact"
+      />
+    </button>
   </li>
-  <li><button (click)="changeColor('B')"><img src="../../../assets/filter/black.png" alt="filter by black"></button>
+  <li>
+    <button class="red" (click)="changeColor('R')">
+      <img src="../../../assets/filter/red.png" alt="filter by red" />
+    </button>
+  </li>
+  <li>
+    <button class="blue" (click)="changeColor('U')">
+      <img src="../../../assets/filter/blue.png" alt="filter by blue" />
+    </button>
+  </li>
+  <li>
+    <button class="white" (click)="changeColor('W')">
+      <img src="../../../assets/filter/white.png" alt="filter by white" />
+    </button>
+  </li>
+  <li>
+    <button class="black" (click)="changeColor('B')">
+      <img src="../../../assets/filter/black.png" alt="filter by black" />
+    </button>
+  </li>
+  <li>
+    <button class="reset" (click)="resetFilter()">
+      <img
+        src="../../../assets/filter/reset.svg"
+        alt="reset filter"
+        width="55"
+        height="60"
+      />
+    </button>
   </li>
-  <li><button (click)="resetFilter()"><img src="../../../assets/filter/reset.svg" alt="reset filter" width="55"
-        height="60"></button></li>
 </ul>

src/app/feature/filter/filter.component.spec.ts

@@ -1,16 +1,21 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FilterComponent } from './filter.component';
-import { provideHttpClient } from '@angular/common/http';
+import { StoreService } from '../../core/store/store.service';
+import { By } from '@angular/platform-browser';
 
 describe('FilterComponent', () => {
   let component: FilterComponent;
   let fixture: ComponentFixture<FilterComponent>;
 
+  const mockSrv = jasmine.createSpyObj(StoreService, {
+    loadData: [],
+  });
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [FilterComponent],
-      providers: [provideHttpClient()],
+      providers: [{ provide: StoreService, useValue: mockSrv }],
     }).compileComponents();
 
     fixture = TestBed.createComponent(FilterComponent);
@@ -21,4 +26,17 @@ describe('FilterComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should call loadData', () => {
+    fixture.debugElement.query(By.css('.green')).triggerEventHandler('click');
+    fixture.debugElement
+      .query(By.css('.artifact'))
+      .triggerEventHandler('click');
+    fixture.debugElement.query(By.css('.red')).triggerEventHandler('click');
+    fixture.debugElement.query(By.css('.blue')).triggerEventHandler('click');
+    fixture.debugElement.query(By.css('.white')).triggerEventHandler('click');
+    fixture.debugElement.query(By.css('.black')).triggerEventHandler('click');
+    fixture.debugElement.query(By.css('.reset')).triggerEventHandler('click');
+    expect(mockSrv.loadData).toHaveBeenCalled();
+  });
 });

src/app/feature/filter/filter.component.ts

@@ -6,23 +6,27 @@ import { StoreService } from '../../core/store/store.service';
   standalone: true,
   imports: [],
   templateUrl: './filter.component.html',
-  styleUrl: './filter.component.css'
+  styleUrl: './filter.component.css',
 })
 export class FilterComponent {
   currentColor: string = '';
   currentType: string = '';
-constructor(private store: StoreService) {}
-changeColor( color: string ) {
-  this.store.loadData(this.store.currentPage, color)
-  this.currentColor = color;
-}
-changeType( type: string ) {
-  this.store.loadData(this.store.currentPage, this.store.currentColor, type)
-  this.currentType = type;
-}
-resetFilter()  {
-  this.currentColor = '';
-  this.currentType = '';
-  this.store.loadData(this.store.currentPage, this.currentColor, this.currentType)
-}
+  constructor(private store: StoreService) {}
+  changeColor(color: string) {
+    this.store.loadData(this.store.currentPage, color);
+    this.currentColor = color;
+  }
+  changeType(type: string) {
+    this.store.loadData(this.store.currentPage, this.store.currentColor, type);
+    this.currentType = type;
+  }
+  resetFilter() {
+    this.currentColor = '';
+    this.currentType = '';
+    this.store.loadData(
+      this.store.currentPage,
+      this.currentColor,
+      this.currentType
+    );
+  }
 }

src/app/feature/home/home.component.spec.ts

@@ -21,4 +21,8 @@ describe('HomeComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });

src/app/feature/list/list.component.spec.ts

@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ListComponent } from './list.component';
 import { provideHttpClient } from '@angular/common/http';
+import { By } from '@angular/platform-browser';
 
 describe('ListComponent', () => {
   let component: ListComponent;
@@ -21,4 +22,9 @@ describe('ListComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should render ul', () => {
+    const list = fixture.debugElement.query(By.css('ul'));
+    expect(list).toBeTruthy();
+  });
 });

src/app/feature/paginator/paginator.component.spec.ts

@@ -1,16 +1,21 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { PaginatorComponent } from './paginator.component';
-import { provideHttpClient } from '@angular/common/http';
+import { StoreService } from '../../core/store/store.service';
+import { By } from '@angular/platform-browser';
 
 describe('PaginatorComponent', () => {
   let component: PaginatorComponent;
   let fixture: ComponentFixture<PaginatorComponent>;
 
+  const mockSrv = jasmine.createSpyObj(StoreService, {
+    loadData: [],
+  });
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [PaginatorComponent],
-      providers: [provideHttpClient()],
+      providers: [{ provide: StoreService, useValue: mockSrv }],
     }).compileComponents();
 
     fixture = TestBed.createComponent(PaginatorComponent);
@@ -21,4 +26,9 @@ describe('PaginatorComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should call loadData', () => {
+    fixture.debugElement.query(By.css('button')).triggerEventHandler('click');
+    expect(mockSrv.loadData).toHaveBeenCalled();
+  });
 });

src/app/shared/footer/footer.component.spec.ts

@@ -1,16 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FooterComponent } from './footer.component';
+import { By } from '@angular/platform-browser';
 
 describe('FooterComponent', () => {
   let component: FooterComponent;
   let fixture: ComponentFixture<FooterComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [FooterComponent]
-    })
-    .compileComponents();
+      imports: [FooterComponent],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(FooterComponent);
     component = fixture.componentInstance;
@@ -20,4 +20,29 @@ describe('FooterComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should render an address element', () => {
+    const address = fixture.debugElement.query(By.css('address'));
+    expect(address.nativeElement.textContent).toContain('Copyright');
+  });
+
+  it('should render social links', () => {
+    const compiled = fixture.debugElement.nativeElement;
+    const githubLink = compiled.querySelector('a[href="https://github.com/"]');
+    const youtubeLink = compiled.querySelector(
+      'a[href="https://youtube.com/"]'
+    );
+    const twitchLink = compiled.querySelector('a[href="https://twitch.com/"]');
+    const facebookLink = compiled.querySelector(
+      'a[href="https://facebook.com/"]'
+    );
+    const twitterLink = compiled.querySelector(
+      'a[href="https://twitter.com/"]'
+    );
+    expect(githubLink).toBeTruthy();
+    expect(youtubeLink).toBeTruthy();
+    expect(twitchLink).toBeTruthy();
+    expect(facebookLink).toBeTruthy();
+    expect(twitterLink).toBeTruthy();
+  });
 });

src/app/shared/header/header.component.spec.ts

@@ -1,16 +1,16 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { HeaderComponent } from './header.component';
+import { By } from '@angular/platform-browser';
 
 describe('HeaderComponent', () => {
   let component: HeaderComponent;
   let fixture: ComponentFixture<HeaderComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HeaderComponent]
-    })
-    .compileComponents();
+      imports: [HeaderComponent],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(HeaderComponent);
     component = fixture.componentInstance;
@@ -20,4 +20,9 @@ describe('HeaderComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should create render an image', () => {
+    const image = fixture.debugElement.query(By.css('img'));
+    expect(image).toBeTruthy();
+  });
 });