// user-profile.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { UserProfileComponent, User } from './user-profile.component';

describe('UserProfileComponent — Properties', () => {
  let component: UserProfileComponent;
  let fixture: ComponentFixture<UserProfileComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [UserProfileComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(UserProfileComponent);
    component = fixture.componentInstance;
    // Note: Do NOT call fixture.detectChanges() yet
    // so we can test initial (raw) default values.
  });

  // ── Happy Path ───────────────────────────────────────────
  it('should have correct default property values', () => {
    // Verify primitive defaults before any lifecycle runs
    expect(component.title).toBe('User Profile');
    expect(component.isLoading).toBeFalse();
    expect(component.users).toEqual([]); // deep-equal for arrays
    expect(component.currentUser).toBeNull();
  });

  it('should set isLoading=true on ngOnInit', () => {
    fixture.detectChanges(); // triggers ngOnInit
    expect(component.isLoading).toBeTrue();
  });

  it('should update currentUser and clear loading when setUser() called', () => {
    const mockUser: User = { id: 1, name: 'Sindhu', role: 'admin' };
    component.setUser(mockUser);

    // Both state changes should happen atomically
    expect(component.currentUser).toEqual(mockUser);
    expect(component.isLoading).toBeFalse();
  });

  // ── Getter / Computed Value ───────────────────────────────
  it('should return "Guest" from displayName when no user set', () => {
    expect(component.displayName).toBe('Guest');
  });

  it('should include name and role in displayName', () => {
    component.currentUser = { id: 2, name: 'Ravi', role: 'user' };
    expect(component.displayName).toBe('Ravi (user)');
  });

  // ── Edge Case ─────────────────────────────────────────────
  it('should clear currentUser on clearUser()', () => {
    component.currentUser = { id: 1, name: 'Test', role: 'guest' };
    component.clearUser();
    expect(component.currentUser).toBeNull();
    // Getter should fall back to "Guest" again
    expect(component.displayName).toBe('Guest');
  });

  // ── Type Check ────────────────────────────────────────────
  it('should be an instance of UserProfileComponent', () => {
    expect(component).toBeInstanceOf(UserProfileComponent);
  });
});

// counter.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { CounterComponent } from './counter.component';

describe('CounterComponent — TestBed Basics', () => {
  let component: CounterComponent;
  let fixture: ComponentFixture<CounterComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [CounterComponent]
      // NO providers needed — no services used
    }).compileComponents();

    fixture = TestBed.createComponent(CounterComponent);
    component = fixture.componentInstance;
    fixture.detectChanges(); // triggers ngOnInit + initial render
  });

  // ── Component Creation ────────────────────────────────────
  it('should create the component', () => {
    // Basic sanity check — always include this
    expect(component).toBeTruthy();
  });

  // ── DOM Queries ───────────────────────────────────────────
  it('should display initial count of 0 in the template', () => {
    const display = fixture.debugElement.query(By.css('[data-testid="count-display"]'));
    // .nativeElement.textContent reads actual DOM text
    expect(display.nativeElement.textContent.trim()).toBe('0');
  });

  // ── @Input() Binding ──────────────────────────────────────
  it('should display custom label from @Input', () => {
    component.label = 'Score';
    fixture.detectChanges(); // re-render after property change
    const h2 = fixture.nativeElement.querySelector('h2');
    expect(h2.textContent).toBe('Score');
  });

  it('should disable increment button when count reaches max', () => {
    component.max = 2;
    component.count = 2;
    fixture.detectChanges();
    const btn = fixture.nativeElement.querySelector('button');
    expect(btn.disabled).toBeTrue();
  });

  // ── @Output() Binding ─────────────────────────────────────
  it('should emit countChanged when increment is called', () => {
    const emittedValues: number[] = [];
    // Subscribe to the EventEmitter directly
    component.countChanged.subscribe((v: number) => emittedValues.push(v));

    component.increment();
    expect(emittedValues).toEqual([1]);

    component.increment();
    expect(emittedValues).toEqual([1, 2]);
  });

  // ── User Interaction via DOM Click ────────────────────────
  it('should increment count when + button is clicked', () => {
    const buttons = fixture.nativeElement.querySelectorAll('button');
    buttons[0].click(); // + button
    fixture.detectChanges(); // sync component → DOM

    const display = fixture.debugElement.query(By.css('[data-testid="count-display"]'));
    expect(display.nativeElement.textContent.trim()).toBe('1');
  });

  // ── Edge Case ─────────────────────────────────────────────
  it('should not go below 0 when decrement called at 0', () => {
    component.decrement();
    expect(component.count).toBe(0);
  });

  it('should not exceed max when increment called at max', () => {
    component.count = component.max;
    component.increment();
    expect(component.count).toBe(component.max); // unchanged
  });

  afterEach(() => {
    // fixture.destroy() is called automatically by Karma
    // Only needed if you have manual subscriptions to clean up
  });
});

// task-list.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { TaskListComponent } from './task-list.component';

describe('TaskListComponent — Template Bindings', () => {
  let component: TaskListComponent;
  let fixture: ComponentFixture<TaskListComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [TaskListComponent],
      imports: [CommonModule] // Required for *ngIf, *ngFor
    }).compileComponents();

    fixture = TestBed.createComponent(TaskListComponent);
    component = fixture.componentInstance;
  });

  // ── Interpolation ─────────────────────────────────────────
  it('should render the page title via interpolation', () => {
    fixture.detectChanges();
    const h1 = fixture.nativeElement.querySelector('h1');
    expect(h1.textContent).toBe('My Tasks');
  });

  // ── *ngIf — empty state ───────────────────────────────────
  it('should show empty message when tasks array is empty', () => {
    component.tasks = []; // override before detectChanges
    fixture.detectChanges();

    const msg = fixture.debugElement.query(By.css('[data-testid="empty-msg"]'));
    expect(msg).toBeTruthy(); // element exists in DOM
  });

  it('should hide empty message when tasks exist', () => {
    fixture.detectChanges(); // ngOnInit loads tasks
    const msg = fixture.debugElement.query(By.css('[data-testid="empty-msg"]'));
    expect(msg).toBeNull(); // *ngIf removed element from DOM
  });

  // ── *ngFor ────────────────────────────────────────────────
  it('should render correct number of task items', () => {
    fixture.detectChanges();
    const items = fixture.debugElement.queryAll(By.css('[data-testid="task-item"]'));
    // ngOnInit pushes 2 tasks
    expect(items.length).toBe(2);
  });

  it('should render task titles in each list item', () => {
    fixture.detectChanges();
    const items = fixture.debugElement.queryAll(By.css('[data-testid="task-item"]'));
    expect(items[0].nativeElement.textContent).toContain('Write tests');
    expect(items[1].nativeElement.textContent).toContain('Review PR');
  });

  // ── [class] binding ───────────────────────────────────────
  it('should apply "completed" CSS class to completed tasks', () => {
    fixture.detectChanges();
    const items = fixture.debugElement.queryAll(By.css('[data-testid="task-item"]'));
    // First task has completed=true
    expect(items[0].nativeElement.classList).toContain('completed');
    // Second task has completed=false
    expect(items[1].nativeElement.classList).not.toContain('completed');
  });

  // ── [attr] binding ────────────────────────────────────────
  it('should set data-priority attribute correctly', () => {
    fixture.detectChanges();
    const items = fixture.debugElement.queryAll(By.css('[data-testid="task-item"]'));
    expect(items[0].nativeElement.getAttribute('data-priority')).toBe('high');
  });

  // ── *ngIf with button ─────────────────────────────────────
  it('should show Clear All button when tasks exist', () => {
    fixture.detectChanges();
    const btn = fixture.debugElement.query(By.css('[data-testid="clear-btn"]'));
    expect(btn).toBeTruthy();
  });

  it('should hide list and show empty msg after clearTasks()', () => {
    fixture.detectChanges();
    component.clearTasks();
    fixture.detectChanges(); // sync after state change

    const items = fixture.debugElement.queryAll(By.css('[data-testid="task-item"]'));
    const msg = fixture.debugElement.query(By.css('[data-testid="empty-msg"]'));
    expect(items.length).toBe(0);
    expect(msg).toBeTruthy();
  });
});

// cart.service.spec.ts
import { TestBed } from '@angular/core/testing';
import { CartService, CartItem } from './cart.service';

describe('CartService', () => {
  let service: CartService;

  const mockItem: CartItem = {
    productId: 1, name: 'Angular Book', price: 29.99, quantity: 1
  };

  beforeEach(() => {
    TestBed.configureTestingModule({});
    // For simple services: TestBed.inject() is preferred over new CartService()
    // because it respects DI and works with dependencies
    service = TestBed.inject(CartService);
  });

  // ── Happy Path ────────────────────────────────────────────
  it('should be created', () => {
    expect(service).toBeTruthy();
  });

  it('should start with an empty cart', () => {
    expect(service.getItems()).toEqual([]);
    expect(service.getItemCount()).toBe(0);
    expect(service.getTotalPrice()).toBe(0);
  });

  it('should add a new item to the cart', () => {
    service.addItem(mockItem);
    const items = service.getItems();
    expect(items.length).toBe(1);
    expect(items[0].name).toBe('Angular Book');
  });

  it('should increase quantity when adding an existing item', () => {
    service.addItem(mockItem);
    service.addItem({ ...mockItem, quantity: 2 }); // same productId
    const items = service.getItems();
    // Should NOT add a second entry — should merge
    expect(items.length).toBe(1);
    expect(items[0].quantity).toBe(3);
  });

  it('should calculate total price correctly', () => {
    service.addItem({ productId: 1, name: 'Book', price: 10, quantity: 2 });
    service.addItem({ productId: 2, name: 'Pen', price: 5, quantity: 3 });
    // 10*2 + 5*3 = 20 + 15 = 35
    expect(service.getTotalPrice()).toBe(35);
  });

  // ── Removal ───────────────────────────────────────────────
  it('should remove item by productId', () => {
    service.addItem(mockItem);
    service.addItem({ productId: 2, name: 'Pen', price: 1, quantity: 1 });
    service.removeItem(1);
    const items = service.getItems();
    expect(items.length).toBe(1);
    expect(items[0].productId).toBe(2);
  });

  it('should not throw when removing non-existent item', () => {
    expect(() => service.removeItem(999)).not.toThrow();
  });

  // ── Edge Cases ────────────────────────────────────────────
  it('should clear all items from cart', () => {
    service.addItem(mockItem);
    service.clearCart();
    expect(service.getItems()).toEqual([]);
  });

  it('should return a copy of items (not the internal array)', () => {
    service.addItem(mockItem);
    const items1 = service.getItems();
    items1.push({ productId: 99, name: 'Hacked', price: 0, quantity: 1 });
    // Internal array should NOT be mutated
    expect(service.getItems().length).toBe(1);
  });

  afterEach(() => {
    // Each test gets a fresh service instance via TestBed
    // No manual cleanup needed here
  });
});

// product.service.spec.ts
import { TestBed } from '@angular/core/testing';
import {
  HttpClientTestingModule,
  HttpTestingController
} from '@angular/common/http/testing';
import { ProductService, Product, ProductsResponse } from './product.service';

describe('ProductService — HTTP', () => {
  let service: ProductService;
  let httpMock: HttpTestingController;

  const mockProduct: Product = { id: 1, name: 'Laptop', price: 999, stock: 5 };

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule], // replaces real HttpClient
      providers: [ProductService]
    });
    service = TestBed.inject(ProductService);
    // HttpTestingController lets us intercept and control HTTP requests
    httpMock = TestBed.inject(HttpTestingController);
  });

  // CRITICAL: After each test, verify no unexpected requests remain
  afterEach(() => {
    httpMock.verify(); // throws if any request was unhandled
  });

  // ── GET with query params ─────────────────────────────────
  it('should GET products with correct query params', () => {
    const mockResponse: ProductsResponse = { data: [mockProduct], total: 1 };
    let result: ProductsResponse | undefined;

    service.getProducts(2, 5).subscribe(res => (result = res));

    // Intercept the pending request
    const req = httpMock.expectOne(r =>
      r.url === '/api/products' &&
      r.params.get('page') === '2' &&
      r.params.get('limit') === '5'
    );
    expect(req.request.method).toBe('GET');
    // Flush: provide the mock response to the observable
    req.flush(mockResponse);

    expect(result).toEqual(mockResponse);
  });

  // ── GET by ID ─────────────────────────────────────────────
  it('should GET a single product by ID', () => {
    let product: Product | undefined;

    service.getProductById(1).subscribe(p => (product = p));

    const req = httpMock.expectOne('/api/products/1');
    req.flush(mockProduct);

    expect(product?.name).toBe('Laptop');
    expect(product?.price).toBe(999);
  });

  // ── POST ──────────────────────────────────────────────────
  it('should POST to create a new product', () => {
    const newProduct = { name: 'Mouse', price: 25, stock: 100 };
    let created: Product | undefined;

    service.createProduct(newProduct).subscribe(p => (created = p));

    const req = httpMock.expectOne('/api/products');
    expect(req.request.method).toBe('POST');
    // Verify request body was sent correctly
    expect(req.request.body).toEqual(newProduct);
    req.flush({ id: 99, ...newProduct });

    expect(created?.id).toBe(99);
  });

  // ── Error Response ────────────────────────────────────────
  it('should handle 404 error from getProductById', () => {
    let errorOccurred = false;

    service.getProductById(999).subscribe({
      next: () => fail('Expected an error, not a success'),
      error: (err) => {
        errorOccurred = true;
        expect(err.status).toBe(404);
      }
    });

    const req = httpMock.expectOne('/api/products/999');
    // Flush with an error
    req.flush('Not Found', { status: 404, statusText: 'Not Found' });

    expect(errorOccurred).toBeTrue();
  });

  // ── Network Error ─────────────────────────────────────────
  it('should handle network errors', () => {
    let hadError = false;

    service.getProducts().subscribe({ error: () => (hadError = true) });

    const req = httpMock.expectOne(r => r.url === '/api/products');
    req.error(new ProgressEvent('error')); // simulate network error

    expect(hadError).toBeTrue();
  });
});

// auth.interceptor.spec.ts
import { TestBed } from '@angular/core/testing';
import {
  HttpClientTestingModule,
  HttpTestingController
} from '@angular/common/http/testing';
import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { AuthInterceptor } from './auth.interceptor';
import { AuthService } from './auth.service';

describe('AuthInterceptor', () => {
  let httpMock: HttpTestingController;
  let httpClient: HttpClient;
  let mockAuthService: jasmine.SpyObj<AuthService>;
  let mockRouter: jasmine.SpyObj<Router>;

  beforeEach(() => {
    mockAuthService = jasmine.createSpyObj('AuthService', ['getToken', 'logout']);
    mockRouter = jasmine.createSpyObj('Router', ['navigate']);

    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [
        // Register the interceptor via the multi-provider token
        { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
        { provide: AuthService, useValue: mockAuthService },
        { provide: Router, useValue: mockRouter }
      ]
    });

    httpClient = TestBed.inject(HttpClient);
    httpMock = TestBed.inject(HttpTestingController);
  });

  afterEach(() => httpMock.verify());

  // ── Token Injection ───────────────────────────────────────
  it('should add Authorization header when token exists', () => {
    mockAuthService.getToken.and.returnValue('my-jwt-token');

    httpClient.get('/api/data').subscribe();

    const req = httpMock.expectOne('/api/data');
    // Verify the interceptor modified the request headers
    expect(req.request.headers.get('Authorization')).toBe('Bearer my-jwt-token');
    req.flush({});
  });

  it('should NOT add Authorization header when no token', () => {
    mockAuthService.getToken.and.returnValue(null);

    httpClient.get('/api/data').subscribe();

    const req = httpMock.expectOne('/api/data');
    expect(req.request.headers.has('Authorization')).toBeFalse();
    req.flush({});
  });

  // ── 401 Handling ──────────────────────────────────────────
  it('should call logout and navigate to /login on 401 error', () => {
    mockAuthService.getToken.and.returnValue('expired-token');

    httpClient.get('/api/protected').subscribe({ error: () => {} });

    const req = httpMock.expectOne('/api/protected');
    req.flush('Unauthorized', { status: 401, statusText: 'Unauthorized' });

    // Verify side-effects triggered by the interceptor
    expect(mockAuthService.logout).toHaveBeenCalledTimes(1);
    expect(mockRouter.navigate).toHaveBeenCalledWith(['/login']);
  });

  it('should NOT call logout on non-401 errors', () => {
    mockAuthService.getToken.and.returnValue('valid-token');

    httpClient.get('/api/data').subscribe({ error: () => {} });

    const req = httpMock.expectOne('/api/data');
    req.flush('Server Error', { status: 500, statusText: 'Internal Server Error' });

    expect(mockAuthService.logout).not.toHaveBeenCalled();
  });
});

// currency-format.pipe.spec.ts + time-ago.pipe.spec.ts
import { CurrencyFormatPipe } from './currency-format.pipe';
import { TimeAgoPipe } from './time-ago.pipe';
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { Component, ChangeDetectorRef } from '@angular/core';

// ── Pure Pipe — NO TestBed needed ────────────────────────────
describe('CurrencyFormatPipe (Pure)', () => {
  let pipe: CurrencyFormatPipe;

  beforeEach(() => {
    // Pure pipes have no dependencies — instantiate directly
    pipe = new CurrencyFormatPipe();
  });

  it('should format USD by default', () => {
    const result = pipe.transform(1234.5);
    expect(result).toBe('$1,234.50');
  });

  it('should format with a different currency', () => {
    const result = pipe.transform(500, 'EUR', 'de-DE');
    expect(result).toContain('500');
    expect(result).toContain('€');
  });

  // ── Edge Cases ────────────────────────────────────────────
  it('should return "—" for null', () => {
    expect(pipe.transform(null)).toBe('—');
  });

  it('should return "—" for undefined', () => {
    expect(pipe.transform(undefined)).toBe('—');
  });

  it('should return "Invalid" for NaN', () => {
    expect(pipe.transform(NaN)).toBe('Invalid');
  });

  it('should handle zero correctly', () => {
    expect(pipe.transform(0)).toBe('$0.00');
  });

  it('should handle negative values', () => {
    expect(pipe.transform(-50)).toBe('-$50.00');
  });
});

// ── Impure Pipe — Use TestBed with host component ─────────────
@Component({
  template: `<span>{{ date | timeAgo }}</span>`
})
class TestHostComponent {
  date = new Date();
}

describe('TimeAgoPipe (Impure)', () => {
  let fixture: ComponentFixture<TestHostComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [TestHostComponent, TimeAgoPipe]
    }).compileComponents();

    fixture = TestBed.createComponent(TestHostComponent);
    fixture.detectChanges();
  });

  it('should show "just now" for current time', () => {
    const span = fixture.nativeElement.querySelector('span');
    expect(span.textContent).toBe('just now');
  });

  it('should show minutes ago for a date 5 minutes in the past', () => {
    const fiveMinAgo = new Date(Date.now() - 5 * 60 * 1000);
    fixture.componentInstance.date = fiveMinAgo;
    fixture.detectChanges();
    const span = fixture.nativeElement.querySelector('span');
    expect(span.textContent).toContain('minutes ago');
  });

  it('should transform directly without component for unit test', () => {
    // Can still call transform() directly on impure pipes
    const mockRef = { markForCheck: jasmine.createSpy() } as unknown as ChangeDetectorRef;
    const pipe = new TimeAgoPipe(mockRef);
    const yesterday = new Date(Date.now() - 25 * 3600 * 1000);
    expect(pipe.transform(yesterday)).toContain('days ago');
  });
});

// highlight.directive.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Component } from '@angular/core';
import { By } from '@angular/platform-browser';
import { HighlightDirective } from './highlight.directive';
import { UnlessDirective } from './unless.directive';

// ── Test Attribute Directive with host component ───────────────
@Component({
  template: `
    <p [appHighlight]="color" [defaultColor]="'white'" data-testid="item">
      Hover me
    </p>
  `
})
class HighlightHostComponent {
  color = 'pink';
}

describe('HighlightDirective', () => {
  let fixture: ComponentFixture<HighlightHostComponent>;
  let el: HTMLElement;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [HighlightHostComponent, HighlightDirective]
    }).compileComponents();

    fixture = TestBed.createComponent(HighlightHostComponent);
    fixture.detectChanges();
    el = fixture.debugElement.query(By.css('[data-testid="item"]')).nativeElement;
  });

  it('should set default background color on init', () => {
    expect(el.style.backgroundColor).toBe('white');
  });

  it('should change background on mouseenter', () => {
    const directive = fixture.debugElement.query(By.directive(HighlightDirective));
    // Trigger HostListener by dispatching event
    directive.triggerEventHandler('mouseenter', null);
    expect(el.style.backgroundColor).toBe('pink');
  });

  it('should revert background on mouseleave', () => {
    const directive = fixture.debugElement.query(By.directive(HighlightDirective));
    directive.triggerEventHandler('mouseenter', null);
    directive.triggerEventHandler('mouseleave', null);
    expect(el.style.backgroundColor).toBe('white');
  });

  it('should update color when @Input changes', () => {
    fixture.componentInstance.color = 'lightblue';
    fixture.detectChanges();
    const directive = fixture.debugElement.query(By.directive(HighlightDirective));
    directive.triggerEventHandler('mouseenter', null);
    expect(el.style.backgroundColor).toBe('lightblue');
  });
});

// ── Test Structural Directive with host component ──────────────
@Component({
  template: `
    <div *appUnless="condition" data-testid="content">Visible</div>
  `
})
class UnlessHostComponent {
  condition = false;
}

describe('UnlessDirective', () => {
  let fixture: ComponentFixture<UnlessHostComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [UnlessHostComponent, UnlessDirective]
    }).compileComponents();
    fixture = TestBed.createComponent(UnlessHostComponent);
    fixture.detectChanges();
  });

  it('should show content when condition is false', () => {
    const div = fixture.debugElement.query(By.css('[data-testid="content"]'));
    expect(div).toBeTruthy();
  });

  it('should hide content when condition is true', () => {
    fixture.componentInstance.condition = true;
    fixture.detectChanges();
    const div = fixture.debugElement.query(By.css('[data-testid="content"]'));
    expect(div).toBeNull();
  });
});

// auth.guard.spec.ts
import { TestBed } from '@angular/core/testing';
import { Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { AuthGuard } from './auth.guard';
import { AuthService } from './auth.service';
import { UnsavedChangesGuard, CanDeactivateComponent } from './unsaved-changes.guard';

describe('AuthGuard', () => {
  let guard: AuthGuard;
  let mockAuth: jasmine.SpyObj<AuthService>;
  let router: Router;

  // Minimal mock snapshots — only include what the guard actually uses
  const mockRoute = { data: {} } as ActivatedRouteSnapshot;
  const mockState = { url: '/dashboard' } as RouterStateSnapshot;

  beforeEach(() => {
    mockAuth = jasmine.createSpyObj('AuthService', ['isLoggedIn', 'hasRole']);

    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      providers: [
        AuthGuard,
        { provide: AuthService, useValue: mockAuth }
      ]
    });

    guard = TestBed.inject(AuthGuard);
    router = TestBed.inject(Router);
  });

  // ── Logged In (Happy Path) ────────────────────────────────
  it('should return true when user is logged in', () => {
    mockAuth.isLoggedIn.and.returnValue(true);
    const result = guard.canActivate(mockRoute, mockState);
    expect(result).toBeTrue();
  });

  // ── Role Check ────────────────────────────────────────────
  it('should allow access when user has required role', () => {
    mockAuth.isLoggedIn.and.returnValue(true);
    mockAuth.hasRole.and.returnValue(true);
    const routeWithRole = { data: { role: 'admin' } } as unknown as ActivatedRouteSnapshot;
    expect(guard.canActivate(routeWithRole, mockState)).toBeTrue();
  });

  it('should redirect to /forbidden when user lacks required role', () => {
    mockAuth.isLoggedIn.and.returnValue(true);
    mockAuth.hasRole.and.returnValue(false);
    const routeWithRole = { data: { role: 'admin' } } as unknown as ActivatedRouteSnapshot;
    const result = guard.canActivate(routeWithRole, mockState);
    // Should return UrlTree, not boolean
    expect(result).not.toBeTrue();
    expect((result as any).toString()).toContain('/forbidden');
  });

  // ── Not Logged In ─────────────────────────────────────────
  it('should redirect to /login with returnUrl when not logged in', () => {
    mockAuth.isLoggedIn.and.returnValue(false);
    const result = guard.canActivate(mockRoute, mockState);
    const urlTree = result as any;
    // UrlTree serialization contains /login
    expect(router.serializeUrl(urlTree)).toContain('/login');
    expect(router.serializeUrl(urlTree)).toContain('returnUrl');
  });
});

describe('UnsavedChangesGuard', () => {
  let guard: UnsavedChangesGuard;

  const makeComponent = (hasChanges: boolean): CanDeactivateComponent => ({
    hasUnsavedChanges: () => hasChanges
  });

  beforeEach(() => {
    TestBed.configureTestingModule({ providers: [UnsavedChangesGuard] });
    guard = TestBed.inject(UnsavedChangesGuard);
  });

  it('should allow deactivation when no unsaved changes', () => {
    expect(guard.canDeactivate(makeComponent(false))).toBeTrue();
  });

  it('should confirm before allowing deactivation with unsaved changes', () => {
    // Mock window.confirm to avoid real dialog
    spyOn(window, 'confirm').and.returnValue(true);
    expect(guard.canDeactivate(makeComponent(true))).toBeTrue();
    expect(window.confirm).toHaveBeenCalled();
  });

  it('should block deactivation when user cancels confirm', () => {
    spyOn(window, 'confirm').and.returnValue(false);
    expect(guard.canDeactivate(makeComponent(true))).toBeFalse();
  });
});

// product-detail.resolver.spec.ts
import { TestBed } from '@angular/core/testing';
import { Router, ActivatedRouteSnapshot, convertToParamMap } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import { of, throwError, EMPTY } from 'rxjs';
import { ProductDetailResolver } from './product-detail.resolver';
import { ProductService, Product } from './product.service';

describe('ProductDetailResolver', () => {
  let resolver: ProductDetailResolver;
  let mockProductService: jasmine.SpyObj<ProductService>;
  let router: Router;

  const mockProduct: Product = { id: 42, name: 'Laptop', price: 999, stock: 5 };

  // Helper: create ActivatedRouteSnapshot with paramMap
  function makeRoute(id: string): ActivatedRouteSnapshot {
    return {
      paramMap: convertToParamMap({ id })
    } as unknown as ActivatedRouteSnapshot;
  }

  beforeEach(() => {
    mockProductService = jasmine.createSpyObj('ProductService', ['getProductById']);

    TestBed.configureTestingModule({
      imports: [RouterTestingModule],
      providers: [
        ProductDetailResolver,
        { provide: ProductService, useValue: mockProductService }
      ]
    });

    resolver = TestBed.inject(ProductDetailResolver);
    router = TestBed.inject(Router);
    spyOn(router, 'navigate');
  });

  // ── Happy Path ────────────────────────────────────────────
  it('should resolve and return product for valid ID', (done) => {
    mockProductService.getProductById.and.returnValue(of(mockProduct));

    resolver.resolve(makeRoute('42'), {} as any).subscribe(product => {
      expect(product).toEqual(mockProduct);
      expect(mockProductService.getProductById).toHaveBeenCalledWith(42);
      done();
    });
  });

  // ── Error Case ────────────────────────────────────────────
  it('should navigate to /not-found and return EMPTY on HTTP error', (done) => {
    mockProductService.getProductById.and.returnValue(
      throwError(() => new Error('Not found'))
    );

    resolver.resolve(makeRoute('99'), {} as any).subscribe({
      complete: () => {
        // EMPTY completes immediately without emitting
        expect(router.navigate).toHaveBeenCalledWith(['/not-found']);
        done();
      }
    });
  });

  // ── Invalid ID ────────────────────────────────────────────
  it('should navigate to /not-found for invalid (non-numeric) ID', (done) => {
    resolver.resolve(makeRoute('abc'), {} as any).subscribe({
      complete: () => {
        expect(router.navigate).toHaveBeenCalledWith(['/not-found']);
        expect(mockProductService.getProductById).not.toHaveBeenCalled();
        done();
      }
    });
  });

  it('should navigate to /not-found for missing ID (empty string)', (done) => {
    resolver.resolve(makeRoute(''), {} as any).subscribe({
      complete: () => {
        expect(router.navigate).toHaveBeenCalledWith(['/not-found']);
        done();
      }
    });
  });
});

// routing.spec.ts
import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { Router } from '@angular/router';
import { Location } from '@angular/common';
import { By } from '@angular/platform-browser';
import { NavComponent } from './nav.component';
import { routes } from './app-routing.module';
import { HomeComponent } from './home/home.component';
import { ProductListComponent } from './products/product-list.component';
import { Component } from '@angular/core';

// Stub components for testing navigation (avoids heavy deps)
@Component({ template: '' }) class HomeStub {}
@Component({ template: '' }) class ProductListStub {}
@Component({ template: '' }) class ProductDetailStub {}

describe('NavComponent — Routing', () => {
  let fixture: ComponentFixture<NavComponent>;
  let router: Router;
  let location: Location;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [NavComponent, HomeStub, ProductListStub, ProductDetailStub],
      imports: [
        RouterTestingModule.withRoutes([
          { path: '', component: HomeStub },
          { path: 'products', component: ProductListStub },
          { path: 'products/:id', component: ProductDetailStub }
        ])
      ]
    }).compileComponents();

    router = TestBed.inject(Router);
    location = TestBed.inject(Location);
    fixture = TestBed.createComponent(NavComponent);
    fixture.detectChanges();
  });

  // ── RouterLink href ───────────────────────────────────────
  it('should have correct href on routerLink anchors', () => {
    const homeLink = fixture.debugElement.query(By.css('[data-testid="home-link"]'));
    const productsLink = fixture.debugElement.query(By.css('[data-testid="products-link"]'));
    expect(homeLink.nativeElement.getAttribute('href')).toBe('/');
    expect(productsLink.nativeElement.getAttribute('href')).toBe('/products');
  });

  // ── Programmatic navigation ───────────────────────────────
  it('should navigate to /products/42 when goToProduct(42) called', fakeAsync(() => {
    fixture.componentInstance.goToProduct(42);
    tick(); // flush async router operations
    expect(location.path()).toBe('/products/42');
  }));

  // ── Navigate via router directly ──────────────────────────
  it('should navigate to /products via router.navigate', fakeAsync(() => {
    router.navigate(['/products']);
    tick();
    expect(location.path()).toBe('/products');
  }));

  // ── routerLinkActive ──────────────────────────────────────
  it('should apply active class to current route link', fakeAsync(() => {
    router.navigate(['/products']);
    tick();
    fixture.detectChanges();
    const productsLink = fixture.debugElement.query(By.css('[data-testid="products-link"]'));
    expect(productsLink.nativeElement.classList).toContain('active');
  }));

  // ── Button click navigation ───────────────────────────────
  it('should navigate on button click', fakeAsync(() => {
    const btn = fixture.debugElement.query(By.css('[data-testid="nav-btn"]'));
    btn.nativeElement.click();
    tick();
    expect(location.path()).toBe('/products/42');
  }));
});

// notification.service.spec.ts
import { TestBed, fakeAsync, tick } from '@angular/core/testing';
import { NotificationService } from './notification.service';
// marble testing: jasmine-marbles (install: npm i jasmine-marbles -D)
// import { cold, hot } from 'jasmine-marbles';

describe('NotificationService — RxJS', () => {
  let service: NotificationService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(NotificationService);
  });

  // ── Method 1: done() callback (simple async) ──────────────
  it('should emit empty array initially (done callback)', (done) => {
    service.notifications$.subscribe(notifications => {
      expect(notifications).toEqual([]);
      done(); // tell Jasmine the async test is done
    });
  });

  // ── Method 2: fakeAsync + tick (most common) ──────────────
  it('should emit updated notifications after add() (fakeAsync)', fakeAsync(() => {
    const emitted: any[] = [];
    service.notifications$.subscribe(n => emitted.push(n));

    service.add({ message: 'Success!', type: 'success' });
    tick(); // flush microtasks/timers

    expect(emitted.length).toBe(2); // initial + after add
    expect(emitted[1][0].message).toBe('Success!');
  }));

  it('should debounce search emissions', fakeAsync(() => {
    const results: string[] = [];
    service.searchResults$.subscribe(v => results.push(v));

    service.search('a');
    service.search('an');
    service.search('ang'); // only last one should emit (after 300ms)
    tick(299); // not yet
    expect(results.length).toBe(0);

    tick(1); // total 300ms — debounce fires
    expect(results.length).toBe(1);
    expect(results[0]).toBe('ang');
  }));

  it('should filter duplicate consecutive searches (distinctUntilChanged)', fakeAsync(() => {
    const results: string[] = [];
    service.searchResults$.subscribe(v => results.push(v));

    service.search('angular');
    tick(300);
    service.search('angular'); // duplicate — should not emit
    tick(300);
    service.search('react');
    tick(300);

    expect(results).toEqual(['angular', 'react']); // 2, not 3
  }));

  // ── BehaviorSubject ───────────────────────────────────────
  it('should emit current value immediately on subscribe (BehaviorSubject)', () => {
    service.add({ message: 'Alert', type: 'info' });
    const collected: number[] = [];
    service.getCount().subscribe(c => collected.push(c));
    // New subscriber gets the CURRENT value immediately
    expect(collected[0]).toBe(1);
  });

  // ── Marble Testing Concept (explained) ───────────────────
  // Marble syntax: -a--b--c-  (- = 10ms frame, a/b/c = emissions, | = complete, # = error)
  // With jasmine-marbles:
  //   const source$ = cold('-a-b|', { a: 'hello', b: 'world' });
  //   const expected = cold('-a-b|', { a: 'HELLO', b: 'WORLD' });
  //   expect(source$.pipe(map(s => s.toUpperCase()))).toBeObservable(expected);

  it('should remove notification on dismiss()', fakeAsync(() => {
    service.add({ message: 'Test', type: 'info' });
    tick();
    const id = service['notificationsSubject'].getValue()[0].id;
    service.dismiss(id);
    tick();
    const current = service['notificationsSubject'].getValue();
    expect(current.length).toBe(0);
  }));
});

// fakeAsync.spec.ts
import { ComponentFixture, TestBed, fakeAsync, tick, flushMicrotasks } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { SearchComponent } from './search.component';

describe('fakeAsync, tick, flushMicrotasks', () => {
  let component: SearchComponent;
  let fixture: ComponentFixture;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [SearchComponent],
      imports: [ReactiveFormsModule]
    }).compileComponents();
    fixture = TestBed.createComponent(SearchComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  // ── setTimeout scenario ───────────────────────────────────
  it('should set results after simulateSearch (setTimeout 200ms)', fakeAsync(() => {
    component.simulateSearch('angular');
    expect(component.results).toEqual([]); // not yet — setTimeout pending

    tick(200); // advance virtual clock by 200ms
    expect(component.results).toEqual(['Result for: angular']);
    expect(component.isLoading).toBeFalse();
  }));

  // ── debounceTime scenario ─────────────────────────────────
  it('should only trigger search after debounce delay', fakeAsync(() => {
    component.searchControl.setValue('a');
    component.searchControl.setValue('an');
    component.searchControl.setValue('angular'); // rapid typing

    tick(399); // debounceTime is 400ms — not fired yet
    expect(component.isLoading).toBeFalse();

    tick(1); // now 400ms total — debounce fires
    expect(component.isLoading).toBeTrue(); // search started

    tick(200); // wait for setTimeout in simulateSearch
    expect(component.isLoading).toBeFalse();
    expect(component.results[0]).toContain('angular');
  }));

  // ── Promise / flushMicrotasks ─────────────────────────────
  it('should resolve Promise with flushMicrotasks', fakeAsync(() => {
    let value = '';
    Promise.resolve('hello').then(v => (value = v));

    expect(value).toBe(''); // promise not resolved yet
    flushMicrotasks(); // flush the microtask queue (Promise.then)
    expect(value).toBe('hello');
  }));

  // ── tick(0) for async/await ───────────────────────────────
  it('should handle async/await with tick(0)', fakeAsync(() => {
    let resolved = false;
    async function doAsync() {
      await Promise.resolve();
      resolved = true;
    }
    doAsync();
    expect(resolved).toBeFalse();
    flushMicrotasks(); // resolves the await
    expect(resolved).toBeTrue();
  }));

  // ── Combined: multiple timers ─────────────────────────────
  it('should handle cascaded setTimeout calls', fakeAsync(() => {
    const order: number[] = [];
    setTimeout(() => order.push(1), 100);
    setTimeout(() => order.push(2), 300);
    setTimeout(() => order.push(3), 150);

    tick(100); expect(order).toEqual([1]);
    tick(50);  expect(order).toEqual([1, 3]); // 150ms total
    tick(150); expect(order).toEqual([1, 3, 2]); // 300ms total
  }));
});

// counter-signal.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { SignalCounterComponent } from './counter-signal.component';

describe('SignalCounterComponent — Angular Signals', () => {
  let component: SignalCounterComponent;
  let fixture: ComponentFixture;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [SignalCounterComponent]
    }).compileComponents();
    fixture = TestBed.createComponent(SignalCounterComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  // ── Signal Read / Write ───────────────────────────────────
  it('should initialize count signal to 0', () => {
    // Signals are read by calling them as functions
    expect(component.count()).toBe(0);
  });

  it('should update count signal with set()', () => {
    component.count.set(5);
    expect(component.count()).toBe(5);
  });

  it('should update count with update() (functional)', () => {
    component.count.set(3);
    component.count.update(c => c + 2);
    expect(component.count()).toBe(5);
  });

  // ── computed() ────────────────────────────────────────────
  it('should compute doubleCount reactively', () => {
    component.count.set(4);
    // computed() re-evaluates automatically
    expect(component.doubleCount()).toBe(8);
  });

  it('should update statusMessage computed signal', () => {
    component.count.set(0);
    expect(component.statusMessage()).toBe('Start counting!');

    component.count.set(-1);
    expect(component.statusMessage()).toBe('Going negative!');

    component.count.set(3);
    expect(component.statusMessage()).toContain('3');
  });

  // ── DOM reflection ────────────────────────────────────────
  it('should reflect count signal in template', () => {
    component.count.set(7);
    fixture.detectChanges(); // sync signal → template

    const el = fixture.debugElement.query(By.css('[data-testid="count"]'));
    expect(el.nativeElement.textContent).toContain('7');
  });

  it('should reflect doubleCount in template', () => {
    component.count.set(3);
    fixture.detectChanges();
    const el = fixture.debugElement.query(By.css('[data-testid="double"]'));
    expect(el.nativeElement.textContent).toContain('6');
  });

  // ── effect() — tested via side effects ───────────────────
  it('should track count history via effect()', () => {
    // effect() ran on init (count=0), then runs on each change
    component.count.set(1);
    fixture.detectChanges();
    component.count.set(2);
    fixture.detectChanges();

    // history should contain 0 (init), 1, 2
    expect(component.history).toContain(0);
    expect(component.history).toContain(1);
    expect(component.history).toContain(2);
  });

  // ── Increment / Decrement via template ────────────────────
  it('should increment via button click', () => {
    fixture.debugElement.query(By.css('[data-testid="inc-btn"]')).nativeElement.click();
    fixture.detectChanges();
    expect(component.count()).toBe(1);
  });

  it('should reset to 0 via reset button', () => {
    component.count.set(10);
    fixture.debugElement.query(By.css('[data-testid="reset-btn"]')).nativeElement.click();
    fixture.detectChanges();
    expect(component.count()).toBe(0);
  });
});

// ngrx.spec.ts
import { TestBed } from '@angular/core/testing';
import { provideMockActions } from '@ngrx/effects/testing';
import { of, throwError, ReplaySubject } from 'rxjs';
import {
  counterReducer, productsReducer,
  increment, decrement, reset,
  loadProducts, loadProductsSuccess, loadProductsFailure,
  selectCount, selectDouble,
  ProductsEffects, CounterState
} from './store';
import { MemoizedSelector } from '@ngrx/store';
import { MockStore, provideMockStore } from '@ngrx/store/testing';
import { ProductService } from './product.service';

// ── Reducer Tests (pure function — no TestBed needed) ─────────
describe('counterReducer', () => {
  const initial: CounterState = { count: 0 };

  it('should return initial state for unknown action', () => {
    const state = counterReducer(undefined, { type: '@@INIT' });
    expect(state).toEqual(initial);
  });

  it('should increment count', () => {
    const state = counterReducer(initial, increment());
    expect(state.count).toBe(1);
  });

  it('should decrement count', () => {
    const state = counterReducer({ count: 5 }, decrement());
    expect(state.count).toBe(4);
  });

  it('should reset to initial state', () => {
    const state = counterReducer({ count: 99 }, reset());
    expect(state.count).toBe(0);
  });
});

// ── Selector Tests ────────────────────────────────────────────
describe('Counter Selectors', () => {
  it('should select count from state', () => {
    const state = { counter: { count: 7 } };
    expect(selectCount(state as any)).toBe(7);
  });

  it('should compute double via memoized selector', () => {
    const state = { counter: { count: 4 } };
    expect(selectDouble(state as any)).toBe(8);
  });

  it('should memoize: same result for same input', () => {
    const state = { counter: { count: 3 } };
    const r1 = selectDouble(state as any);
    const r2 = selectDouble(state as any);
    expect(r1).toBe(r2); // same reference
  });
});

// ── Effects Tests ─────────────────────────────────────────────
describe('ProductsEffects', () => {
  let effects: ProductsEffects;
  let actions$: ReplaySubject;
  let mockProductService: jasmine.SpyObj;

  beforeEach(() => {
    actions$ = new ReplaySubject(1);
    mockProductService = jasmine.createSpyObj('ProductService', ['getProducts']);

    TestBed.configureTestingModule({
      providers: [
        ProductsEffects,
        provideMockActions(() => actions$),
        { provide: ProductService, useValue: mockProductService }
      ]
    });
    effects = TestBed.inject(ProductsEffects);
  });

  it('should dispatch loadProductsSuccess on success', (done) => {
    const products = [{ id: 1, name: 'Book', price: 10, stock: 5 }];
    mockProductService.getProducts.and.returnValue(of({ data: products, total: 1 }));

    actions$.next(loadProducts());

    effects.loadProducts$.subscribe(action => {
      expect(action).toEqual(loadProductsSuccess({ products }));
      done();
    });
  });

  it('should dispatch loadProductsFailure on error', (done) => {
    mockProductService.getProducts.and.returnValue(throwError(() => new Error('Network fail')));
    actions$.next(loadProducts());

    effects.loadProducts$.subscribe(action => {
      expect(action).toEqual(loadProductsFailure({ error: 'Network fail' }));
      done();
    });
  });
});

// error-handling.spec.ts
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { PaymentService, InsufficientFundsError } from './payment.service';

// ── Service Error Tests ───────────────────────────────────────
describe('PaymentService — Error Handling', () => {
  let service: PaymentService;

  beforeEach(() => {
    TestBed.configureTestingModule({});
    service = TestBed.inject(PaymentService);
  });

  it('should return success for valid payment', () => {
    const result = service.processPayment(50);
    expect(result.success).toBeTrue();
    expect(result.transactionId).toMatch(/^TXN-/);
  });

  // ── toThrow matchers ──────────────────────────────────────
  it('should throw for zero amount', () => {
    expect(() => service.processPayment(0)).toThrow();
  });

  it('should throw specific Error message for zero amount', () => {
    expect(() => service.processPayment(0))
      .toThrowError('Amount must be positive');
  });

  it('should throw InsufficientFundsError for amount exceeding balance', () => {
    expect(() => service.processPayment(200))
      .toThrowError(InsufficientFundsError);
  });

  it('should throw with correct funds details in custom error', () => {
    try {
      service.processPayment(200);
      fail('Expected InsufficientFundsError to be thrown');
    } catch (e) {
      expect(e).toBeInstanceOf(InsufficientFundsError);
      const err = e as InsufficientFundsError;
      expect(err.available).toBe(100);
      expect(err.required).toBe(200);
    }
  });

  // ── Validator Tests ───────────────────────────────────────
  it('should return null for strong password', () => {
    const ctrl = new FormControl('Secure@99');
    expect(PaymentService.strongPasswordValidator(ctrl)).toBeNull();
  });

  it('should return minLength error for short password', () => {
    const ctrl = new FormControl('Ab1!');
    const errors = PaymentService.strongPasswordValidator(ctrl);
    expect(errors?.['minLength']).toBeTrue();
  });

  it('should return all errors for weak password', () => {
    const ctrl = new FormControl('password'); // all lowercase, no number, no special
    const errors = PaymentService.strongPasswordValidator(ctrl);
    expect(errors?.['noUppercase']).toBeTrue();
    expect(errors?.['noNumber']).toBeTrue();
    expect(errors?.['noSpecial']).toBeTrue();
  });

  it('should return null for empty/null value (required handled separately)', () => {
    const ctrl = new FormControl('');
    expect(PaymentService.strongPasswordValidator(ctrl)).toBeNull();
  });
});

// ── Component Error State Tests ───────────────────────────────
@Component({
  template: `
    
{{ errorMsg }}
    Pay $200
  `
})
class PaymentFormStub {
  errorMsg = '';
  constructor(private payService: PaymentService) {}
  pay(): void {
    try { this.payService.processPayment(200); }
    catch (e: any) { this.errorMsg = e.message; }
  }
}

describe('Component Error State', () => {
  let fixture: ComponentFixture;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [PaymentFormStub],
      imports: [CommonModule],
      providers: [PaymentService]
    }).compileComponents();
    fixture = TestBed.createComponent(PaymentFormStub);
    fixture.detectChanges();
  });

  it('should show error banner when payment fails', () => {
    fixture.debugElement.query(By.css('[data-testid="pay-btn"]')).nativeElement.click();
    fixture.detectChanges();
    const banner = fixture.debugElement.query(By.css('[data-testid="error-banner"]'));
    expect(banner).toBeTruthy();
    expect(banner.nativeElement.textContent).toContain('Insufficient funds');
  });
});

// spies.spec.ts
import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { AnalyticsService } from './analytics.service';
import { LoggerService } from './logger.service';

describe('Spies & Mocks — AnalyticsService', () => {
  let service: AnalyticsService;
  let mockLogger: jasmine.SpyObj;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    // createSpyObj: creates a mock object with spied methods
    // All methods return undefined by default unless configured
    mockLogger = jasmine.createSpyObj('LoggerService', ['log', 'error', 'warn']);

    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [
        AnalyticsService,
        { provide: LoggerService, useValue: mockLogger }
      ]
    });
    service = TestBed.inject(AnalyticsService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  afterEach(() => httpMock.verify());

  // ── toHaveBeenCalled matchers ─────────────────────────────
  it('should call logger.log once when identify() is called', () => {
    service.identify('user-42');
    expect(mockLogger.log).toHaveBeenCalled();
    expect(mockLogger.log).toHaveBeenCalledTimes(1);
    expect(mockLogger.log).toHaveBeenCalledWith('User identified: user-42');
  });

  // ── returnValue ───────────────────────────────────────────
  it('should use spyOn with returnValue on existing object', () => {
    const logger = TestBed.inject(LoggerService);
    const spy = spyOn(logger, 'log').and.returnValue(undefined);
    // Now logger.log() does nothing and returns undefined
    logger.log('test');
    expect(spy).toHaveBeenCalledWith('test');
  });

  // ── callFake ──────────────────────────────────────────────
  it('should use callFake to replace implementation', () => {
    const captured: string[] = [];
    mockLogger.log.and.callFake((msg: string) => captured.push(msg));
    service.identify('user-1');
    expect(captured).toContain('User identified: user-1');
  });

  // ── callThrough ───────────────────────────────────────────
  it('should use callThrough to invoke the real implementation', () => {
    // callThrough: spy records the call but delegates to real implementation
    spyOn(console, 'log').and.callThrough();
    const realLogger = new LoggerService();
    spyOn(realLogger, 'log').and.callThrough();
    realLogger.log('real call');
    expect(realLogger.log).toHaveBeenCalledWith('real call');
  });

  // ── spyOnProperty ─────────────────────────────────────────
  it('should use spyOnProperty for getter', () => {
    // Spy on a getter property
    spyOnProperty(service, 'currentUserId', 'get').and.returnValue('mocked-id');
    expect(service.currentUserId).toBe('mocked-id');
  });

  // ── Verifying call arguments ──────────────────────────────
  it('should pass correct payload to HTTP when track() called', () => {
    service.identify('user-5');
    service.track('button_click', { button: 'submit' }).subscribe();

    const req = httpMock.expectOne('/api/analytics');
    expect(req.request.body).toEqual({
      event: 'button_click',
      properties: { button: 'submit' },
      userId: 'user-5'
    });
    req.flush(null);
  });

  // ── not.toHaveBeenCalled ──────────────────────────────────
  it('should not call logger.warn unless explicitly triggered', () => {
    service.identify('user-1');
    expect(mockLogger.warn).not.toHaveBeenCalled();
  });

  // ── Spy call count after multiple calls ───────────────────
  it('should log twice: once for identify, once for reset', () => {
    service.identify('user-3');
    service.reset();
    expect(mockLogger.log).toHaveBeenCalledTimes(2);
  });
});

// parent-child.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { ProductListComponent, ProductCardComponent } from './product.components';

// ── Test Child Component in Isolation ─────────────────────────
describe('ProductCardComponent (Child)', () => {
  let fixture: ComponentFixture;
  let component: ProductCardComponent;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ProductCardComponent],
      imports: [CommonModule]
    }).compileComponents();
    fixture = TestBed.createComponent(ProductCardComponent);
    component = fixture.componentInstance;
    // Set required @Input
    component.product = { id: 1, name: 'Laptop', price: 999 };
    fixture.detectChanges();
  });

  it('should render product name and price', () => {
    expect(fixture.nativeElement.querySelector('[data-testid="card-title"]').textContent).toBe('Laptop');
    expect(fixture.nativeElement.querySelector('[data-testid="card-price"]').textContent).toContain('999');
  });

  it('should emit cartAdd with product.id when button clicked', () => {
    let emittedId: number | undefined;
    component.cartAdd.subscribe((id: number) => emittedId = id);
    fixture.nativeElement.querySelector('[data-testid="add-btn"]').click();
    expect(emittedId).toBe(1);
  });

  it('should show favorite button only when showFavorite=true', () => {
    component.showFavorite = false;
    fixture.detectChanges();
    expect(fixture.nativeElement.querySelector('[data-testid="fav-btn"]')).toBeNull();

    component.showFavorite = true;
    fixture.detectChanges();
    expect(fixture.nativeElement.querySelector('[data-testid="fav-btn"]')).toBeTruthy();
  });
});

// ── Test Parent + Child Integration ───────────────────────────
describe('ProductListComponent (Parent with Child)', () => {
  let fixture: ComponentFixture;
  let component: ProductListComponent;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ProductListComponent, ProductCardComponent],
      imports: [CommonModule]
    }).compileComponents();
    fixture = TestBed.createComponent(ProductListComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should render two product cards', () => {
    const cards = fixture.debugElement.queryAll(By.directive(ProductCardComponent));
    expect(cards.length).toBe(2);
  });

  it('should pass correct product to child via @Input', () => {
    const cards = fixture.debugElement.queryAll(By.directive(ProductCardComponent));
    const firstCard = cards[0].componentInstance as ProductCardComponent;
    expect(firstCard.product.name).toBe('Laptop');
  });

  it('should update cartCount when child emits cartAdd', () => {
    const cards = fixture.debugElement.queryAll(By.directive(ProductCardComponent));
    const firstCard = cards[0].componentInstance as ProductCardComponent;

    // Simulate child Output event
    firstCard.cartAdd.emit(1);
    fixture.detectChanges();

    expect(component.cartCount).toBe(1);
    expect(fixture.nativeElement.querySelector('[data-testid="cart-count"]').textContent).toContain('1');
  });

  it('should pass showFavorite=true to all child cards', () => {
    const cards = fixture.debugElement.queryAll(By.directive(ProductCardComponent));
    cards.forEach(card => {
      expect((card.componentInstance as ProductCardComponent).showFavorite).toBeTrue();
    });
  });

  // ── ViewChild ─────────────────────────────────────────────
  it('should access first child via @ViewChild', () => {
    // ViewChild is populated after detectChanges
    expect(component.firstCard).toBeTruthy();
    expect(component.firstCard).toBeInstanceOf(ProductCardComponent);
  });
});