Birim Test

Angular uygulamanızı test etmek, beklediğiniz gibi çalışıp çalışmadığını kontrol etmenize yardımcı olur. Birim testleri, hataları erken yakalamak, kod kalitesini sağlamak ve güvenli yeniden düzenlemeyi kolaylaştırmak için kritik öneme sahiptir.

Test için kurulum

Angular CLI, bir Angular uygulamasını Vitest test çerçevesi ile test etmek için ihtiyaç duyduğunuz her şeyi indirir ve yükler. Yeni projeler varsayılan olarak vitest ve jsdom içerir.

Vitest, birim testlerinizi bir Node.js ortamında çalıştırır. Tarayıcının DOM'unu simüle etmek için Vitest, jsdom adlı bir kütüphane kullanır. Bu, tarayıcı başlatma yükünü ortadan kaldırarak daha hızlı test yürütülmesini sağlar. jsdom yerine happy-dom gibi bir alternatifi yükleyip jsdom'u kaldırarak değiştirebilirsiniz. Şu anda jsdom ve happy-dom desteklenen DOM emülasyon kütüphaneleridir.

CLI ile oluşturduğunuz proje hemen teste hazırdır. ng test komutunu çalıştırın:

ng test

ng test komutu uygulamayı izleme modunda derler ve Vitest test çalıştırıcısını başlatır.

Konsol çıktısı şu şekilde görünür:

 ✓ src/app/app.spec.ts (3)
   ✓ AppComponent should create the app
   ✓ AppComponent should have as title 'my-app'
   ✓ AppComponent should render title
 Test Files  1 passed (1)
      Tests  3 passed (3)
   Start at  18:18:01
   Duration  2.46s (transform 615ms, setup 2ms, collect 2.21s, tests 5ms)

ng test komutu ayrıca dosyalarınızı değişiklikler için izler. Bir dosyayı değiştirip kaydederseniz, testler tekrar çalışır.

Yapılandırma

Angular CLI, Vitest yapılandırmasının çoğunu sizin için yönetir. angular.json dosyanızdaki test hedef seçeneklerini değiştirerek test davranışını özelleştirebilirsiniz.

Angular.json seçenekleri

• include: Test için dahil edilecek dosyalar için glob kalıpları. Varsayılan olarak ['**/*.spec.ts', '**/*.test.ts'] değerindedir.
• exclude: Testten hariç tutulacak dosyalar için glob kalıpları.
• setupFiles: Testlerinizden önce çalıştırılan global kurulum dosyalarına (ör. polyfill'ler veya global mock'lar) giden yolların listesi.
• providersFile: Test ortamı için varsayılan bir Angular sağlayıcı dizisi dışa aktaran bir dosyanın yolu. Bu, testlerinize enjekte edilen global test sağlayıcılarını ayarlamak için kullanışlıdır.
• coverage: Kod kapsam raporlamasını etkinleştirmek veya devre dışı bırakmak için bir boolean değer. Varsayılan olarak false değerindedir.
• browsers: Testleri gerçek bir tarayıcıda çalıştırmak için tarayıcı adları dizisi (ör. ["chromium"]). Bir tarayıcı sağlayıcısının yüklenmesini gerektirir. Daha fazla ayrıntı için Testleri tarayıcıda çalıştırma bölümüne bakın.

Global test kurulumu ve provider'lar

setupFiles ve providersFile seçenekleri, global test yapılandırmasını yönetmek için özellikle kullanışlıdır.

Örneğin, tüm testlerinize provideHttpClientTesting sağlamak için bir src/test-providers.ts dosyası oluşturabilirsiniz:

import {EnvironmentProviders, Provider} from '@angular/core';
import {provideHttpClientTesting} from '@angular/common/http/testing';

const testProviders: (Provider | EnvironmentProviders)[] = [provideHttpClientTesting()];

export default testProviders;

Ardından bu dosyayı angular.json dosyanızda referans gösterirsiniz:

{
  "projects": {
    "your-project-name": {
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "providersFile": "src/test-providers.ts"
          }
        }
      }
    }
  }
}

Gelişmiş Vitest yapılandırması

İleri düzey kullanım durumları için, angular.json dosyasındaki configFile seçeneğini kullanarak özel bir Vitest yapılandırma dosyası sağlayabilirsiniz.

Bir Vitest yapılandırma dosyası (ör. vitest-base.config.ts) oluşturabilir ve angular.json dosyanızda referans gösterebilirsiniz:

{
  "projects": {
    "your-project-name": {
      "architect": {
        "test": {
          "builder": "@angular/build:unit-test",
          "options": {
            "runnerConfig": "vitest-base.config.ts"
          }
        }
      }
    }
  }
}

CLI kullanarak bir temel yapılandırma dosyası da oluşturabilirsiniz:

ng generate config vitest

Bu, özelleştirebileceğiniz bir vitest-base.config.ts dosyası oluşturur.

Kod coverage

ng test komutuna --coverage bayrağını ekleyerek bir kod kapsam raporu oluşturabilirsiniz. Rapor coverage/ dizininde oluşturulur.

Daha ayrıntılı bilgi için Kod kapsam kılavuzuna bakın.

Tarayıcıda test çalıştırma

Varsayılan Node.js ortamı çoğu birim testi için daha hızlı olsa da, testlerinizi gerçek bir tarayıcıda da çalıştırabilirsiniz. Bu, tarayıcıya özgü API'lere (örneğin render etme) dayanan testler veya hata ayıklama için kullanışlıdır.

Testleri bir tarayıcıda çalıştırmak için önce bir tarayıcı sağlayıcısı yüklemeniz gerekir. Vitest'in tarayıcı modu hakkında daha fazla bilgi için resmi belgeleri okuyun.

Sağlayıcı yüklendikten sonra, angular.json dosyasındaki browsers seçeneğini yapılandırarak veya --browsers CLI bayrağını kullanarak testlerinizi tarayıcıda çalıştırabilirsiniz. Testler varsayılan olarak görünür tarayıcıda çalışır. CI ortam değişkeni ayarlandıysa, bunun yerine başsız mod kullanılır. Başsız modu açıkça kontrol etmek için tarayıcı adının sonuna Headless ekleyebilirsiniz (ör. chromiumHeadless).

# Playwright örneği (görünür)
ng test --browsers=chromium

# Playwright örneği (başsız)
ng test --browsers=chromiumHeadless

# WebdriverIO örneği (görünür)
ng test --browsers=chrome

# WebdriverIO örneği (başsız)
ng test --browsers=chromeHeadless

İhtiyaçlarınıza göre aşağıdaki tarayıcı sağlayıcılarından birini seçin:

Playwright

Playwright, Chromium, Firefox ve WebKit'i destekleyen bir tarayıcı otomasyon kütüphanesidir.

npm install --save-dev @vitest/browser-playwright playwright

yarn add --dev @vitest/browser-playwright playwright

pnpm add -D @vitest/browser-playwright playwright

bun add --dev @vitest/browser-playwright playwright

WebdriverIO

WebdriverIO, Chrome, Firefox, Safari ve Edge'i destekleyen bir tarayıcı ve mobil otomasyon test çerçevesidir.

npm install --save-dev @vitest/browser-webdriverio webdriverio

yarn add --dev @vitest/browser-webdriverio webdriverio

pnpm add -D @vitest/browser-webdriverio webdriverio

bun add --dev @vitest/browser-webdriverio webdriverio

Preview

@vitest/browser-preview sağlayıcısı, StackBlitz gibi WebContainer ortamları için tasarlanmıştır ve CI/CD'de kullanılmak üzere tasarlanmamıştır.

npm install --save-dev @vitest/browser-preview

yarn add --dev @vitest/browser-preview

pnpm add -D @vitest/browser-preview

bun add --dev @vitest/browser-preview

Diğer test framework'leri

Bir Angular uygulamasını diğer test kütüphaneleri ve test çalıştırıcıları ile de birim test edebilirsiniz. Her kütüphane ve çalıştırıcının kendi kurulum prosedürleri, yapılandırması ve sözdizimi vardır.

Sürekli entegrasyonda test etme

Sağlam bir test paketi, sürekli entegrasyon (CI) hattının önemli bir parçasıdır. CI sunucuları, testlerinizi her commit ve pull request'te otomatik olarak çalıştırmanızı sağlar.

Angular uygulamanızı bir CI sunucusunda test etmek için standart test komutunu çalıştırın:

ng test

Çoğu CI sunucusu, ng test'in algıladığı bir CI=true ortam değişkeni ayarlar. Bu, testlerinizi otomatik olarak etkileşimsiz, tek çalıştırma modunda yapılandırır.

CI sunucunuz bu değişkeni ayarlamıyorsa veya tek çalıştırma modunu manuel olarak zorlamanız gerekiyorsa, --no-watch ve --no-progress bayraklarını kullanabilirsiniz:

ng test --no-watch --no-progress

Test hakkında daha fazla bilgi

Uygulamanızı test için kurduktan sonra, aşağıdaki test kılavuzlarını faydalı bulabilirsiniz.