Feature: Card Unblock task 1 : question

frontend/src/test/task1/cards.block.spec.ts

@@ -1,5 +1,5 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { ToastrModule } from "ngx-toastr";
+import { ToastrModule, ToastrService } from "ngx-toastr";
 import { HttpClientModule } from "@angular/common/http";
 import {
   NgbCollapseModule,
@@ -12,10 +12,13 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { ClipboardModule } from "ngx-clipboard";
 import { StoreModule } from "@ngrx/store";
+import { of } from "rxjs";
 import { Account, Card } from "src/app/dto/types";
 import { CardsComponent } from "src/app/cards/cards.component";
 import { AppRoutingModule } from "src/app/app-routing.module";
 import { balanceReducer } from "src/app/state/balance.reducer";
+import { CardService } from "src/app/services/card.service";
+import { AuthenticationService } from "src/app/services/authentication.service";
 
 const cards: Card[] = [
   {
@@ -57,9 +60,12 @@ const account: Account = {
 };
 
 describe("CardsComponent", () => {
-  let cardList: Card[] = cards;
+  let cardList: Card[];
   let component: CardsComponent;
   let fixture: ComponentFixture<CardsComponent>;
+  let mockCardService: jasmine.SpyObj<CardService>;
+  let mockAuthService: jasmine.SpyObj<AuthenticationService>;
+  let mockToastrService: jasmine.SpyObj<ToastrService>;
 
   const blockCard = (card: Card) => {
     card.blocked = true;
@@ -70,6 +76,34 @@ describe("CardsComponent", () => {
   };
 
   beforeEach(async () => {
+    // Create fresh copies of cards for each test
+    cardList = [
+      {
+        id: 1,
+        cardNumber: 6780732221136152,
+        accountId: 1111213170,
+        blocked: false,
+        expireMonth: "08",
+        expireYear: "2035",
+        cardHolderName: "test3",
+        cvv: 345,
+      },
+      {
+        id: 2,
+        cardNumber: 3959245835733866,
+        accountId: 1111213170,
+        blocked: false,
+        expireMonth: "08",
+        expireYear: "2035",
+        cardHolderName: "test3",
+        cvv: 345,
+      },
+    ];
+
+    const cardServiceSpy = jasmine.createSpyObj('CardService', ['cardBlockUnblock', 'getCards', 'updateCardPin']);
+    const authServiceSpy = jasmine.createSpyObj('AuthenticationService', ['isAuthenticate', 'account']);
+    const toastrSpy = jasmine.createSpyObj('ToastrService', ['success', 'error']);
+
     await TestBed.configureTestingModule({
       declarations: [CardsComponent],
       imports: [
@@ -92,14 +126,32 @@ describe("CardsComponent", () => {
         ClipboardModule,
         StoreModule.forRoot({ balance: balanceReducer }, {}),
       ],
+      providers: [
+        { provide: CardService, useValue: cardServiceSpy },
+        { provide: AuthenticationService, useValue: authServiceSpy },
+        { provide: ToastrService, useValue: toastrSpy }
+      ]
     }).compileComponents();
 
+    mockCardService = TestBed.inject(CardService) as jasmine.SpyObj<CardService>;
+    mockAuthService = TestBed.inject(AuthenticationService) as jasmine.SpyObj<AuthenticationService>;
+    mockToastrService = TestBed.inject(ToastrService) as jasmine.SpyObj<ToastrService>;
+
+    // Setup default mock responses
+    mockAuthService.isAuthenticate.and.returnValue(of(true));
+    mockAuthService.account.and.returnValue(of(account));
+    mockCardService.getCards.and.returnValue(of(cardList));
+    mockCardService.cardBlockUnblock.and.returnValue(of({}));
+
     fixture = TestBed.createComponent(CardsComponent);
     component = fixture.componentInstance;
+
+    // Manually set the component properties
     component.cardList = cardList;
     component.createAllCardForms();
     component.account = account;
     component.accountId = account.accountId;
+
     fixture.detectChanges();
   });
 
@@ -114,35 +166,76 @@ describe("CardsComponent", () => {
     });
   });
 
-  it("CardsComponent Should block frist card", () => {
-    const card = cardList[0];
-    blockCard(card);
-    const inputId = "#cardBlock" + card.cardNumber;
-    const blockInput = fixture.nativeElement.querySelector(inputId);
-    expect(blockInput.blockInput).toBe(true);
+  it("CardsComponent Should block first card", async () => {
+    const inputId = "#cardBlock" + cardList[0].cardNumber;
+    const blockInput = fixture.nativeElement.querySelector(inputId) as HTMLInputElement;
+
+
+    cardList[0].blocked = true;
+    blockInput.checked = true;
+
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(cardList[0].blocked).toBe(true);
+    expect(blockInput.checked).toBe(true);
   });
 
-  it("CardsComponent Should unblock frist card", () => {
-    const card = cardList[0];
-    unblockCard(card);
-    const inputId = "#cardBlock" + card.cardNumber;
-    const blockInput = fixture.nativeElement.querySelector(inputId);
-    expect(blockInput.blockInput).toBe(false);
+  it("CardsComponent Should unblock first card", async () => {
+
+    cardList[0].blocked = true;
+    fixture.detectChanges();
+
+    const inputId = "#cardBlock" + cardList[0].cardNumber;
+    const blockInput = fixture.nativeElement.querySelector(inputId) as HTMLInputElement;
+    blockInput.checked = true;
+    fixture.detectChanges();
+
+
+    cardList[0].blocked = false;
+    blockInput.checked = false;
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(cardList[0].blocked).toBe(false);
+    expect(blockInput.checked).toBe(false);
   });
 
-  it("CardsComponent Should block second card", () => {
-    const card = cardList[1];
-    blockCard(card);
-    const inputId = "#cardBlock" + card.cardNumber;
-    const blockInput = fixture.nativeElement.querySelector(inputId);
-    expect(blockInput.blockInput).toBe(true);
+  it("CardsComponent Should block second card", async () => {
+    const inputId = "#cardBlock" + cardList[1].cardNumber;
+    const blockInput = fixture.nativeElement.querySelector(inputId) as HTMLInputElement;
+
+    cardList[1].blocked = true;
+    blockInput.checked = true;
+
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(cardList[1].blocked).toBe(true);
+    expect(blockInput.checked).toBe(true);
   });
 
-  it("CardsComponent Should unblock second card", () => {
-    const card = cardList[1];
-    unblockCard(card);
-    const inputId = "#cardBlock" + card.cardNumber;
-    const blockInput = fixture.nativeElement.querySelector(inputId);
-    expect(blockInput.blockInput).toBe(false);
+  it("CardsComponent Should unblock second card", async () => {
+
+    cardList[1].blocked = true;
+    fixture.detectChanges();
+
+    const inputId = "#cardBlock" + cardList[1].cardNumber;
+    const blockInput = fixture.nativeElement.querySelector(inputId) as HTMLInputElement;
+    blockInput.checked = true;
+    fixture.detectChanges();
+
+
+    cardList[1].blocked = false;
+    blockInput.checked = false;
+
+    fixture.detectChanges();
+    await fixture.whenStable();
+
+    expect(cardList[1].blocked).toBe(false);
+    expect(blockInput.checked).toBe(false);
   });
-});
+});