Testowanie serwisów - sparing przed bitwą

import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="service-testing">
      <h1>Testowanie Serwisów i HTTP</h1>

      <section>
        <h2>Testowanie serwisu z HttpClient</h2>
        <pre><code>{{ serviceTestCode }}</code></pre>
      </section>

      <section>
        <h2>Mockowanie zależności</h2>
        <pre><code>{{ mockingCode }}</code></pre>
      </section>

      <section>
        <h2>Testowanie komponentów z serwisami</h2>
        <pre><code>{{ componentServiceCode }}</code></pre>
      </section>

      <section class="commands">
        <h2>Komendy testowe</h2>
        <div class="command-list">
          <div class="command">
            <code>ng test</code>
            <span>Uruchom testy jednostkowe</span>
          </div>
          <div class="command">
            <code>ng test --watch=false</code>
            <span>Uruchom testy raz (CI)</span>
          </div>
          <div class="command">
            <code>ng test --code-coverage</code>
            <span>Generuj raport pokrycia</span>
          </div>
          <div class="command">
            <code>ng e2e</code>
            <span>Uruchom testy E2E</span>
          </div>
        </div>
      </section>
    </div>
  `,
  styles: [`
    .service-testing {
      font-family: 'Segoe UI', sans-serif;
      padding: 20px;
      background: linear-gradient(135deg, #1e3a5f 0%, #0d2137 100%);
      min-height: 100vh;
      color: #eee;
    }

    h1 {
      text-align: center;
      color: #4ecca3;
    }

    h2 {
      color: #4ecca3;
      border-bottom: 2px solid #4ecca3;
      padding-bottom: 10px;
    }

    section {
      background: rgba(255,255,255,0.05);
      border-radius: 10px;
      padding: 20px;
      margin: 20px 0;
    }

    pre {
      background: #0a1628;
      padding: 15px;
      border-radius: 8px;
      overflow-x: auto;
      border-left: 4px solid #4ecca3;
    }

    code {
      color: #e6e6e6;
      font-family: 'Fira Code', monospace;
      font-size: 0.85em;
    }

    .command-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .command {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 12px;
      background: rgba(0,0,0,0.3);
      border-radius: 5px;
    }

    .command code {
      background: #4ecca3;
      color: #0d2137;
      padding: 5px 12px;
      border-radius: 4px;
      font-weight: bold;
      min-width: 200px;
    }

    .command span {
      color: #aaa;
    }
  `]
})
export class AppComponent {
  serviceTestCode = `// samurai.service.spec.ts
import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { SamuraiService } from './samurai.service';

describe('SamuraiService', () => {
  let service: SamuraiService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [SamuraiService]
    });

    service = TestBed.inject(SamuraiService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  afterEach(() => {
    httpMock.verify(); // Sprawdź czy nie ma nieobsłużonych requestów
  });

  it('should fetch samurai list', () => {
    const mockSamurai = [
      { id: 1, name: 'Musashi' },
      { id: 2, name: 'Kojiro' }
    ];

    service.getSamuraiList().subscribe(samurai => {
      expect(samurai.length).toBe(2);
      expect(samurai[0].name).toBe('Musashi');
    });

    const req = httpMock.expectOne('/api/samurai');
    expect(req.request.method).toBe('GET');
    req.flush(mockSamurai);
  });

  it('should handle error', () => {
    service.getSamuraiList().subscribe({
      error: (error) => {
        expect(error.status).toBe(500);
      }
    });

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

  mockingCode = `// Tworzenie mocka serwisu
const mockSamuraiService = {
  getSamuraiList: jasmine.createSpy().and.returnValue(of([
    { id: 1, name: 'Musashi' }
  ])),
  addSamurai: jasmine.createSpy().and.returnValue(of({ id: 2, name: 'Kojiro' }))
};

// Użycie w TestBed
TestBed.configureTestingModule({
  imports: [SamuraiListComponent],
  providers: [
    { provide: SamuraiService, useValue: mockSamuraiService }
  ]
});

// Spy na istniejącym serwisie
const service = TestBed.inject(SamuraiService);
spyOn(service, 'getSamuraiList').and.returnValue(of(mockData));

// Sprawdzanie wywołań
expect(mockSamuraiService.getSamuraiList).toHaveBeenCalled();
expect(mockSamuraiService.addSamurai).toHaveBeenCalledWith({ name: 'Hanzo' });`;

  componentServiceCode = `// samurai-list.component.spec.ts
describe('SamuraiListComponent', () => {
  let component: SamuraiListComponent;
  let fixture: ComponentFixture<SamuraiListComponent>;
  let samuraiService: jasmine.SpyObj<SamuraiService>;

  beforeEach(async () => {
    const spy = jasmine.createSpyObj('SamuraiService', ['getSamuraiList', 'deleteSamurai']);

    await TestBed.configureTestingModule({
      imports: [SamuraiListComponent],
      providers: [
        { provide: SamuraiService, useValue: spy }
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(SamuraiListComponent);
    component = fixture.componentInstance;
    samuraiService = TestBed.inject(SamuraiService) as jasmine.SpyObj<SamuraiService>;
  });

  it('should load samurai on init', fakeAsync(() => {
    const mockSamurai = [{ id: 1, name: 'Musashi' }];
    samuraiService.getSamuraiList.and.returnValue(of(mockSamurai));

    fixture.detectChanges();
    tick();

    expect(component.samuraiList()).toEqual(mockSamurai);
    expect(samuraiService.getSamuraiList).toHaveBeenCalled();
  }));

  it('should display samurai in template', () => {
    samuraiService.getSamuraiList.and.returnValue(of([
      { id: 1, name: 'Musashi' }
    ]));

    fixture.detectChanges();

    const compiled = fixture.nativeElement;
    expect(compiled.textContent).toContain('Musashi');
  });
});`;
}