Angular実践 #6 テストとデプロイ — トラック総仕上げ

describe('AuthService', () => {
  beforeEach(() => {
    localStorage.clear();
    TestBed.configureTestingModule({ providers: [AuthService] });
  });

  it('login はトークンを保存し isAuthenticated を true にする', () => {
    const auth = TestBed.inject(AuthService);
    auth.login('curtis', 'password');
    expect(auth.isAuthenticated()).toBeTrue();
    expect(localStorage.getItem('auth_token')).toBeTruthy();
  });

  it('logout はトークンを空にして状態を初期化する', () => {
    const auth = TestBed.inject(AuthService);
    auth.login('curtis', 'password');
    auth.logout();
    expect(auth.isAuthenticated()).toBeFalse();
    expect(localStorage.getItem('auth_token')).toBeNull();
  });
});

describe('ProductsStore', () => {
  let store: ProductsStore;
  beforeEach(() => {
    TestBed.configureTestingModule({ providers: [ProductsStore] });
    store = TestBed.inject(ProductsStore);
  });

  it('add は新しい商品を一覧に追加する', () => {
    store.add({ name: 'キーボード', price: 90000, stock: 5 });
    expect(store.products().length).toBe(1);
    expect(store.products()[0].name).toBe('キーボード');
  });

  it('totalValue は 価格×在庫 の合計', () => {
    store.add({ name: 'A', price: 1000, stock: 2 });
    store.add({ name: 'B', price: 500, stock: 4 });
    expect(store.totalValue()).toBe(1000 * 2 + 500 * 4);
  });
});

describe('LoginComponent', () => {
  let fixture: ComponentFixture<LoginComponent>;
  let authSpy: jasmine.SpyObj<AuthService>;

  beforeEach(() => {
    authSpy = jasmine.createSpyObj<AuthService>('AuthService', ['login']);
    TestBed.configureTestingModule({
      imports: [LoginComponent, ReactiveFormsModule],
      providers: [{ provide: AuthService, useValue: authSpy }],
    });
    fixture = TestBed.createComponent(LoginComponent);
    fixture.detectChanges();
  });

  it('空入力で送信すると login は呼ばれない', () => {
    fixture.nativeElement.querySelector('form').dispatchEvent(new Event('submit'));
    expect(authSpy.login).not.toHaveBeenCalled();
  });

  it('有効な入力なら login が呼ばれる', () => {
    const el: HTMLElement = fixture.nativeElement;
    const username: HTMLInputElement = el.querySelector('[data-testid="username"]')!;
    const password: HTMLInputElement = el.querySelector('[data-testid="password"]')!;
    username.value = 'curtis';
    username.dispatchEvent(new Event('input'));
    password.value = 'secret123';
    password.dispatchEvent(new Event('input'));
    el.querySelector('form')!.dispatchEvent(new Event('submit'));
    expect(authSpy.login).toHaveBeenCalledOnceWith('curtis', 'secret123');
  });
});

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

  beforeEach(() => {
    TestBed.configureTestingModule({
      providers: [ProductApiService, provideHttpClient(), provideHttpClientTesting()],
    });
    service = TestBed.inject(ProductApiService);
    httpMock = TestBed.inject(HttpTestingController);
  });
  afterEach(() => httpMock.verify());

  it('GET /api/products は商品配列を流す', () => {
    const fake = [{ id: '1', name: 'キーボード', price: 90000, stock: 5 }];
    service.list().subscribe((products) => expect(products).toEqual(fake));
    const req = httpMock.expectOne('/api/products');
    expect(req.request.method).toBe('GET');
    req.flush(fake);
  });

  it('500 レスポンスなら空配列にフォールバックする', () => {
    service.list().subscribe((products) => expect(products).toEqual([]));
    httpMock.expectOne('/api/products')
      .flush('boom', { status: 500, statusText: 'Server Error' });
  });
});

test('ログインして商品を追加するとチャートが更新される', async ({ page }) => {
  await page.goto('/login');
  await page.getByTestId('username').fill('curtis');
  await page.getByTestId('password').fill('password');
  await page.getByRole('button', { name: 'ログイン' }).click();
  await expect(page).toHaveURL(/\/dashboard/);

  await page.getByRole('link', { name: '商品' }).click();
  await page.getByRole('button', { name: '新規商品' }).click();
  await page.getByTestId('product-name').fill('E2E キーボード');
  await page.getByTestId('product-price').fill('120000');
  await page.getByTestId('product-stock').fill('3');
  await page.getByRole('button', { name: '保存' }).click();
  await expect(page.getByText('E2E キーボード')).toBeVisible();

  await page.getByRole('link', { name: 'ダッシュボード' }).click();
  await expect(page.getByTestId('total-value')).toContainText('360,000');
});

// dev
export const environment = { production: false, apiUrl: 'http://localhost:3000' };
// prod
export const environment = { production: true, apiUrl: 'https://api.example.com' };

"configurations": {
  "production": {
    "fileReplacements": [
      { "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts" }
    ],
    "optimization": true,
    "outputHashing": "all"
  }
}

# ---------- Build stage ----------
FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build -- --configuration production

# ---------- Runtime stage ----------
FROM nginx:alpine
COPY --from=builder /app/dist/dashboard/browser /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;

  location ~* \.(js|css|woff2|png|jpg|svg)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }
  location / { try_files $uri $uri/ /index.html; }
}

name: CI/CD
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm run test -- --watch=false --browsers=ChromeHeadless
      - run: npx playwright install --with-deps chromium
      - run: npx playwright test
      - run: npm run build -- --configuration production

  deploy:
    needs: test
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm run build -- --configuration production
      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}
          accountId: ${{ secrets.CF_ACCOUNT_ID }}
          command: pages deploy dist/dashboard/browser --project-name=dashboard