Untuk apa file "spec.ts" yang dihasilkan oleh Angular CLi?

212

Saya baru mengenal Angular 2 (dan Angular pada umumnya ...) dan saya merasa sangat menarik. Saya menggunakan Angular CLi untuk menghasilkan dan melayani proyek. Tampaknya bekerja dengan baik - meskipun untuk proyek pembelajaran kecil saya, ini menghasilkan lebih dari yang saya butuhkan - tetapi itu sudah diduga.

Saya perhatikan bahwa ini menghasilkan spec.tsuntuk setiap elemen Sudut dalam proyek (Komponen, Layanan, Pipa, dll). Saya telah mencari-cari tetapi belum menemukan penjelasan untuk apa file-file ini.

Apakah ini membangun file yang biasanya disembunyikan saat menggunakan tsc? Saya bertanya-tanya karena saya ingin mengubah nama nama buruk yang Componentsaya buat dan menemukan bahwa nama itu juga dirujuk dalam spec.tsfile - file ini .

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 {
}
angular typescript musim semi
sumber

Jawaban:

266

File spesifikasi adalah tes unit untuk file sumber Anda. Konvensi untuk aplikasi Angular adalah memiliki file .spec.ts untuk setiap file .ts. Mereka dijalankan menggunakan kerangka uji javascript Jasmine melalui pelari uji Karma ( https://karma-runner.github.io/ ) saat Anda menggunakan ng testperintah.

Anda dapat menggunakan ini untuk bacaan lebih lanjut:

https://angular.io/guide/testing

tukang perahu
sumber
17
Terima kasih, saya ingin tahu sendiri ini. Misalkan saya tidak ingin menjalankan tes apa pun, dapatkah saya menghapus file .spec dengan aman? (dan juga folder uji dan file seperti folder e2e?)
Kokodoko
7
Saya juga merasa pertanyaan ini membutuhkan sedikit lebih banyak jawaban. Bisakah kita benar-benar mengabaikan file-file ini dan melanjutkan pekerjaan kita?
Mateusz Migała
18
Sebagai awiseman menyatakan, file spesifikasi memang untuk pengujian aplikasi Anda. Jika Anda tidak ingin menggunakan file uji, Anda dapat menghapus atau mengabaikannya. Proyek Anda akan terus berfungsi tanpa file spesifikasi.
dennismuijs
33
ketika Anda membuat komponen baru dengan CLI Anda dapat menambahkan --spec=falseuntuk mengecualikan pembuatan file spesifikasi. Perintah penuh untuk menghasilkan komponen baru akan: ng g component comp-name --spec=false. Info lebih lanjut di sini: github.com/angular/angular-cli/wiki/generate-component
Dean
11
ini dapat dinonaktifkan dengan memodifikasi angular-cli.jsonseperti ini:{ "defaults": { "component": { "spec": false } } }
Ali Sherafat
20

jika Anda menghasilkan proyek sudut baru menggunakan "ng baru", Anda dapat melewati pembuatan file spec.ts. Untuk ini, Anda harus menerapkan opsi --skip-tes.

ng baru ng-app-name --skip-tests

trueboroda
sumber
1
Bisakah Anda mengatur opsi ini setelah proyek dibuat?
HughHughTeotl
2

File .spec.ts adalah untuk pengujian unit untuk masing-masing komponen. Anda dapat menjalankan pelari tugas Karma melalui ng test. Untuk melihat cakupan kode kasus uji unit untuk komponen tertentu dijalankanng test --code-coverage

Pritam Sinha
sumber
0

.spec.ts file digunakan untuk unit testing aplikasi Anda.

Jika Anda tidak membuatnya, gunakan saja --spec=falsesaat membuat yang baru Component. Seperti ini

ng generate component --spec=false mycomponentName
Arvind Chourasiya
sumber