Ana içeriğe geç

NG-Mocs Nedir?

ng-mocks, Angular uygulamalarında testlerde servisleri, bileşenleri, direktifleri, boruları ve modülleri sahtelemek için yardımcı olan bir test kütüphanesidir. Eğer gürültücü bir alt bileşen, ya da başka bir rahatsız edici bağımlılık varsa, ng-mocks, bu beyanları sahte hallerine dönüştürmek için araçlar sunar, arayüzleri olduğu gibi korur, fakat uygulamalarını bastırır.

bilgi

ng-mocks'un mevcut sürümü test edildi ve kullanılabilir.

Angularng-mocksJasmineJestIvy
18latestyesyesyes
17latestyesyesyes
16latestyesyesyes
15latestyesyesyes
14latestyesyesyes
13latestyesyesyes
12latestyesyesyes
11latestyesyesyes
10latestyesyesyes
9latestyesyesyes
8latestyesyes
7latestyesyes
6latestyesyes
5latestyesyes

Üst menüde önceden yapılandırılmış kumandalar bulabiliriz, burada tüm özellikleri kontrol edebiliriz. Belirli bir özelliğe odaklanmak için, basitçe fdescribe veya fit ile önek yapın.

Ayrıca, CHANGELOG adresinde en son değişikliklerin kısa bir özeti bulunmaktadır.

Hızlı Navigasyon​

  • Bu kılavuzu nasıl okuyacağınız
  • Testleri daha hızlı hale getirme
  • Her şeyi otomatik olarak casus yapma
  • Girişler, çıkışlar ve yaşam döngüsü kancalarını test etme
  • Bileşenlerin başlatılmadan önceki yöntemlerini sahteleme

Çok kısa tanıtım​

Sahtelemeler için küresel yapılandırma src/test.ts'de. Jest için src/setup-jest.ts / src/test-setup.ts kullanılmalıdır.

src/test.ts
// Sahtelemeler ve sağlayıcılar
// oluşturulduklarında otomatik olarak casusluk yapılacaktır.
// https://ng-mocks.sudo.eu/extra/auto-spy
ngMocks.autoSpy('jasmine'); // veya jest

// ngMocks.defaultMock, sahtelemeleri
// küresel olarak özelleştirmeye yardımcı olur. Böylece,
// testler arasında kopyala-yapıştır yapmaktan
// kaçınabiliriz.
// https://ng-mocks.sudo.eu/api/ngMocks/defaultMock
ngMocks.defaultMock(AuthService, () => ({
  isLoggedIn$: EMPTY,
  currentUser$: EMPTY,
}));

Profil düzenleme bileşeni için bir örnek spesifikasyon.

src/profile.component.spec.ts
// Bir ProfileComponent olduğunu varsayalım
// ve bunun 3 metin alanı vardır: email, firstName,
// lastName ve bir kullanıcı bunları düzenleyebilir.
// Aşağıdaki test setinde, bileşenin
// davranışını kapsamak istiyoruz.
describe('profile:builder', () => {
  // Her testten sonra özelleştirmeleri sıfırlamaya yardımcı olur.
  // Alternatif olarak, test.ts'de otomatik sıfırlamayı etkinleştirebilirsiniz.
  MockInstance.scope();

  // TestBed'i MockBuilder aracılığıyla yapılandıralım.
  // Aşağıdaki kod, ProfileComponent ve
  // ReactiveFormsModule hariç ProfileModule'daki her şeyi sahteleyeceğini söyler.
  beforeEach(() => {
    // MockBuilder'ın sonucu döndürülmelidir.
    // https://ng-mocks.sudo.eu/api/MockBuilder
    return MockBuilder(ProfileComponent, ProfileModule)
      .keep(ReactiveFormsModule);
    // // veya eski usul
    // return TestBed.configureTestingModule({
    //   imports: [
    //     MockModule(SharedModule), // sahte
    //     ReactiveFormsModule, // gerçek
    //   ],
    //   declarations: [
    //     ProfileComponent, // gerçek
    //     MockPipe(CurrencyPipe), // sahte
    //     MockDirective(HoverDirective), // sahte
    //   ],
    //   providers: [
    //     MockProvider(AuthService), // sahte
    //   ],
    // }).compileComponents();
  });

  // ProfileComponent'in oluşturulabildiğini
  // sağlamak için bir test.
  it('should be created', () => {
    // MockRender, TestBed.createComponent'ın
    // gelişmiş bir versiyonudur.
    // Tüm yaşam döngüsü kancalarına,
    // onPush değişiklik algılamaya saygı gösterir
    // ve <app-root ...allInputs></profile>
    // gibi bir şablona sahip bir sarıcı bileşen oluşturur
    // ve bunu renderlar.
    // Ayrıca tüm yaşam döngüsü kancalarına saygı gösterir.
    // https://ng-mocks.sudo.eu/api/MockRender
    const fixture = MockRender(ProfileComponent);

    expect(fixture.point.componentInstance).toEqual(
      assertion.any(ProfileComponent),
    );
  });

  // Bileşenin ctrl+s kısayolunu dinlediğinden emin olan bir test.
  it('saves on ctrl+s hot key', () => {
    // Sahte bir profil.
    const profile = {
      email: 'test2@email.com',
      firstName: 'testFirst2',
      lastName: 'testLast2',
    };

    // Kaydetme çağrılarını izlemek için bir casus.
    // MockInstance, sahte sağlayıcıları, beyanları ve modülleri
    // başlatmadan ve kullanmadan önce yapılandırmaya yardımcı olur.
    // https://ng-mocks.sudo.eu/api/MockInstance
    const spySave = MockInstance(
      StorageService,
      'save',
      jasmine.createSpy(), // veya jest.fn()
    );

    // <profile [profile]="params.profile">
    // </profile> render eder.
    // https://ng-mocks.sudo.eu/api/MockRender
    const { point } = MockRender(
      ProfileComponent,
      { profile }, // bağlamalar
    );

    // Rastgele bir değerle e-posta adresleri için form kontrolünün
    // değerini değiştirelim.
    // ngMocks.change, ilgili kontrolü bulur
    // değer alıcısını ve uygun şekilde günceller.
    // https://ng-mocks.sudo.eu/api/ngMocks/change
    ngMocks.change(
      '[name=email]', // css seçici
      'test3@em.ail', // bir e-posta adresi
    );

    // Hiçbir şeyin çağrılmadığından emin olalım.
    expect(spySave).not.toHaveBeenCalled();

    // Varsayalım ki ctrl+s tuş kombinasyonu için bir ana dinleyici
    // vardır ve bunu tetiklemek istiyoruz.
    // ngMocks.trigger, olayları yaymak için
    // basit bir arayüz aracılığıyla yardımcı olur.
    // https://ng-mocks.sudo.eu/api/ngMocks/trigger
    ngMocks.trigger(point, 'keyup.control.s');

    // Casus, kullanıcı ve rastgele e-posta adresi ile çağrılmalıdır.
    expect(spySave).toHaveBeenCalledWith({
      email: 'test3@em.ail',
      firstName: profile.firstName,
      lastName: profile.lastName,
    });
  });
});

Ek​

Eğer ng-mocks'u beğendiyseniz, lütfen destekleyin:

Teşekkürler!

P.S. Yardıma ihtiyacınız varsa, lütfen bize ulaşın.