Các tập tin của spec spec.ts được tạo bởi Angular CLi để làm gì?


210

Tôi mới biết đến Angular 2 (và Angular nói chung ...) và tôi thấy nó rất hấp dẫn. Tôi đang sử dụng Angular CLi để tạo và phục vụ các dự án. Nó dường như hoạt động tốt - mặc dù đối với các dự án học tập nhỏ của tôi, nó tạo ra nhiều hơn tôi cần - nhưng đó là điều được mong đợi.

Tôi đã nhận thấy rằng nó tạo ra spec.tscho từng thành phần Angular trong một dự án (Thành phần, Dịch vụ, Đường ống, v.v.). Tôi đã tìm kiếm xung quanh nhưng không tìm thấy lời giải thích về những tập tin này để làm gì.

Là những tập tin xây dựng thường được ẩn khi sử dụng tsc? Tôi tự hỏi bởi vì tôi muốn thay đổi tên của một người nghèo Componentmà tôi đã tạo ra và phát hiện ra rằng tên đó cũng được tham chiếu trong các spec.tstệp này .


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 {
}

Câu trả lời:


265

Các tệp spec là các bài kiểm tra đơn vị cho các tệp nguồn của bạn. Quy ước cho các ứng dụng Angular là có tệp .spec.ts cho mỗi tệp .ts. Chúng được chạy bằng khung kiểm tra javascript của Jasmine thông qua trình chạy thử Karma ( https://karma-runner.github.io/ ) khi bạn sử dụng ng testlệnh.

Bạn có thể sử dụng điều này để đọc thêm:

https://angular.io/guide/testing


17
Cảm ơn, tôi đã tự hỏi điều này bản thân mình. Giả sử tôi không muốn chạy bất kỳ thử nghiệm nào, tôi có thể xóa các tệp .spec một cách an toàn không? (và cả các thư mục và tệp thử nghiệm như thư mục e2e?)
Kokodoko

7
Tôi cũng cảm thấy câu hỏi này đòi hỏi phải trả lời nhiều hơn một chút. Chúng ta có thể hoàn toàn bỏ qua các tập tin này và chỉ đi về công việc của chúng tôi?
Mateusz Migała

18
Như awiseman tuyên bố, các tệp spec thực sự là để thử nghiệm ứng dụng của bạn. Nếu bạn không muốn sử dụng các tệp kiểm tra, bạn chỉ cần xóa hoặc bỏ qua chúng. Dự án của bạn sẽ tiếp tục hoạt động mà không có các tệp spec.
dennismuijs

33
khi bạn tạo một thành phần mới với CLI, bạn có thể thêm --spec=falseđể loại trừ việc tạo tệp spec. Lệnh đầy đủ để tạo một thành phần mới sẽ là : ng g component comp-name --spec=false. Thêm thông tin ở đây: github.com/angular/angular-cli/wiki/generate-component
Trưởng khoa

11
điều này có thể bị vô hiệu hóa bằng cách sửa đổi angular-cli.jsonnhư thế này:{ "defaults": { "component": { "spec": false } } }
Ali Sherafat

20

nếu bạn tạo dự án góc mới bằng cách sử dụng "ng new", bạn có thể bỏ qua việc tạo tệp spec.ts. Đối với điều này, bạn nên áp dụng tùy chọn --skip-tests.

ng ng-app-name mới --skip-tests


1
Bạn có thể thiết lập tùy chọn này sau khi dự án đã được tạo không?
HughHughTeotl

2

Các tệp .spec.ts dành cho các bài kiểm tra đơn vị cho các thành phần riêng lẻ. Bạn có thể chạy Karma nhiệm vụ chạy qua ng test. Để xem phạm vi bảo hiểm mã của các trường hợp thử nghiệm đơn vị cho các thành phần cụ thể chạyng test --code-coverage


0

.spec.tstập tin được sử dụng cho unit testingứng dụng của bạn.

Nếu bạn không nhận được nó, chỉ cần sử dụng --spec=falsetrong khi tạo mới Component. Như thế này

ng generate component --spec=false mycomponentName
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.