Angular CLi tarafından oluşturulan “spec.ts” dosyaları ne için?


210

Açısal 2 (ve genel olarak Açısal ...) konusunda yeniyim ve çok ilgi çekici buluyorum. Projeleri oluşturmak ve sunmak için Açısal CLi kullanıyorum . İyi çalışıyor gibi görünüyor - küçük öğrenme projelerim için ihtiyacımdan fazlasını üretiyor - ama bu beklenecek.

spec.tsBir projedeki her bir Açısal eleman (Bileşen, Servis, Boru vb.) İçin ürettiğini fark ettim . Etrafımda arama yaptım, ancak bu dosyaların ne için olduğunu açıklayamadım.

Bu derleme dosyaları normalde kullanıldığında gizli tscmi? ComponentOluşturduğum ve adın bu spec.tsdosyalarda da başvurulduğunu keşfettiğim kötü adlandırılmış bir adın adını değiştirmek istediğimi merak ettim .


import {
  beforeEach,
  beforeEachProviders,
  describe,
  expect,
  it,
  inject,
} from '@angular/core/testing';
import { ComponentFixture, TestComponentBuilder } from '@angular/compiler/testing';
import { Component } from '@angular/core';
import { By } from '@angular/platform-browser';
import { PovLevelComponent } from './pov-level.component';

describe('Component: PovLevel', () => {
  let builder: TestComponentBuilder;

  beforeEachProviders(() => [PovLevelComponent]);
  beforeEach(inject([TestComponentBuilder], function (tcb: TestComponentBuilder) {
    builder = tcb;
  }));

  it('should inject the component', inject([PovLevelComponent],
      (component: PovLevelComponent) => {
    expect(component).toBeTruthy();
  }));

  it('should create the component', inject([], () => {
    return builder.createAsync(PovLevelComponentTestController)
      .then((fixture: ComponentFixture<any>) => {
        let query = fixture.debugElement.query(By.directive(PovLevelComponent));
        expect(query).toBeTruthy();
        expect(query.componentInstance).toBeTruthy();
      });
  }));
});

@Component({
  selector: 'test',
  template: `
    <app-pov-level></app-pov-level>
  `,
  directives: [PovLevelComponent]
})
class PovLevelComponentTestController {
}

Yanıtlar:


265

Spec dosyaları, kaynak dosyalarınız için birim testlerdir. Açısal uygulamalar için kural, her .ts dosyası için bir .spec.ts dosyasına sahip olmaktır. Komutu kullandığınızda Karma test çalıştırıcısı ( https://karma-runner.github.io/ ) aracılığıyla Jasmine javascript test çerçevesi kullanılarak çalıştırılırlar ng test.

Bunu daha fazla okumak için kullanabilirsiniz:

https://angular.io/guide/testing


17
Teşekkürler, bunu kendim merak ediyordum. Herhangi bir test yapmak istemediğimi varsayalım .spec dosyalarını güvenle silebilir miyim? (ve ayrıca e2e klasörü gibi test klasörleri ve dosyalar?)
Kokodoko

7
Ayrıca bu sorunun biraz daha yanıtlanmasını gerektirdiğini hissediyorum. Bu dosyaları tamamen görmezden gelebilir ve işimize devam edebilir miyiz?
Mateusz Migała

18
Savaşçının belirttiği gibi, spec dosyaları gerçekten sizin uygulamanızı test etmek içindir. Test dosyalarını kullanmak istemiyorsanız, bunları silebilir veya yok sayabilirsiniz. Projeniz spec dosyaları olmadan çalışmaya devam edecektir.
dennismuijs

33
CLI ile yeni bir bileşen oluşturduğunuzda --spec=false, bir spec dosyasının oluşturulmasını hariç tutmak için ekleyebilirsiniz . Yeni bir bileşen oluşturmak için tam komut şöyle olacaktır: ng g component comp-name --spec=false. Daha fazla bilgi için: github.com/angular/angular-cli/wiki/generate-component
Dean

11
Bu, şu şekilde değiştirilerek devre dışı bırakılabilir angular-cli.json:{ "defaults": { "component": { "spec": false } } }
Ali Sherafat

20

"ng new" kullanarak yeni bir açısal proje oluşturursanız, bir spec.ts dosyası atlayabilirsiniz. Bunun için - atlama testleri seçeneğini kullanmalısınız.

yeni ng-app-name - atlama testleri


1
Proje oluşturulduktan sonra bu seçeneği ayarlayabilir misiniz?
HughHughTeotl

2

.Spec.ts dosyaları, tek tek bileşenlerin birim sınamaları içindir. Karma görev çalıştırıcısını çalıştırabilirsiniz ng test. Belirli bileşenler için ünite test senaryolarının kod kapsamını görmek içinng test --code-coverage


0

.spec.tsdosyası unit testinguygulamanız için kullanılıyor.

Oluşturulmasını istemiyorsanız sadece --spec=falseyeni oluştururken kullanın Component. Bunun gibi

ng generate component --spec=false mycomponentName
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.