¿Para qué son los archivos "spec.ts" generados por Angular CLi?

213

Soy nuevo en Angular 2 (y Angular en general ...) y lo encuentro muy atractivo. Estoy usando Angular CLi para generar y servir proyectos. Parece funcionar bien, aunque para mis pequeños proyectos de aprendizaje, produce más de lo que necesito, pero eso es de esperar.

Me di cuenta de que se genera spec.tspara cada elemento angular en un proyecto (Componente, Servicio, Tubería, etc.). He buscado pero no he encontrado una explicación de para qué sirven estos archivos.

¿Son estos archivos de compilación que normalmente están ocultos al usar tsc? Me preguntaba porque quería cambiar el nombre de un mal nombrado Componentque había creado y descubrí que el nombre también se mencionaba en estos spec.tsarchivos.


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

Respuestas:

267

Los archivos de especificaciones son pruebas unitarias para sus archivos fuente. La convención para aplicaciones angulares es tener un archivo .spec.ts para cada archivo .ts. Se ejecutan utilizando el marco de prueba de jazmín jazmín a través del corredor de prueba de Karma ( https://karma-runner.github.io/ ) cuando utiliza el ng testcomando.

Puede usar esto para leer más:

https://angular.io/guide/testing

un hombre sabio
fuente
17
Gracias, me preguntaba esto yo mismo. Supongamos que no quiero ejecutar ninguna prueba, ¿puedo eliminar de forma segura los archivos .spec? (¿y también las carpetas y archivos de prueba como la carpeta e2e?)
Kokodoko
77
También siento que esta pregunta requiere un poco más de respuesta. ¿Podemos ignorar totalmente estos archivos y continuar con nuestro trabajo?
Mateusz Migała
18
Como afirma awiseman, los archivos de especificaciones son para probar su aplicación. Si no desea utilizar los archivos de prueba, simplemente puede eliminarlos o ignorarlos. Su proyecto continuará funcionando sin los archivos de especificaciones.
dennismuijs
33
cuando genera un nuevo componente con CLI, puede agregarlo --spec=falsepara excluir la generación de un archivo de especificaciones. El comando completo para la generación de un nuevo componente sería la siguiente: ng g component comp-name --spec=false. Más información aquí: github.com/angular/angular-cli/wiki/generate-component
Dean
11
esto se puede desactivar modificando angular-cli.jsonasí:{ "defaults": { "component": { "spec": false } } }
Ali Sherafat
20

si genera un nuevo proyecto angular utilizando "ng new", puede omitir la generación de archivos spec.ts. Para esto, debe aplicar la opción --skip-tests.

ng new ng-app-name --skip-tests

Trueboroda
fuente
1
¿Puede configurar esta opción después de que se haya generado el proyecto?
HughHughTeotl
2

Los archivos .spec.ts son para pruebas unitarias de componentes individuales. Puede ejecutar el corredor de tareas Karma ng test. Para ver la cobertura del código de casos de prueba de unidad para componentes particulares ejecutadosng test --code-coverage

Pritam Sinha
fuente
0

.spec.tsarchivo se utiliza para unit testingsu aplicación.

Si no quieres que se genere, solo úsalo --spec=falsemientras creas uno nuevo Component. Me gusta esto

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