Angular CLI create .spec files for already existing components

There is an option in .angular-cli.json to disable the automatic creating of *.spec files e.g. for components, see json schema.

This is a really nice feature because personally (this is just my opinion) testing the components might not be the thing that really worth it in a fast growing project.

However sometimes I would like to have an option to generate / recreate the corresponding *.spec file for an already existing component / service / pipe / whatsoever.

Is that possible using some command line call?

Created a feature request, let's see how it goes...

65274 次浏览
小开

There are 2 solutions for this :

小开
最佳答案

Currently Angular CLI does not provide this functionality and it is not clear how and when it will be possible to manage it in official way.

However, here is a library "ngx-spec" that generates the spec based on Angular CLI spec presets.

If you are using vsCode the authors of ngx-spec recomend using this extension https://github.com/cyrilletuzi/vscode-angular-schematics

小开

chose a directory where you want to generate spec, and then it will generate all Angular spec.

only generate file when spec file not exist, and the component / directive / guard / pipe / service follow the angular-cli file generate name.

npm install -g angular-spec-generator


angular-spec-generator 'C:\Users\Alan\Desktop\test'
小开

SimonTest is an extension to VS Code that generates tests for existing files. I highly recommend it (I am not affiliated with them in any way).

The only catch is that it comes with a 30-day free trial, and afterwards requires a paid license.

小开

Scaffolding for existing .ts files can be created by using https://github.com/smnbbrv/ngx-spec

To install in an Angular project:

npm i -D ngx-spec@^2.0.0

(-D is the shorthand for --save-dev)

example usage (for a service):

ng g ngx-spec:spec path/my.service

or

ng g ngx-spec:spec path/my.service.ts

For a service, this doesn’t set up a test to be created via injection. Adapt so that the test looks something like this:

import { TestBed, inject } from '@angular/core/testing';


import { DataService } from './data.service';
import { AuthService } from './auth.service';
import { HttpClient, HttpHandler } from '@angular/common/http';


describe('DataService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [DataService, AuthService, HttpClient, HttpHandler
]
});
});


it('should be created', inject([DataService, AuthService], (service: DataService) => {
expect(service).toBeTruthy();
}));
});

It's also meant to be possible to generate tests using a wildcard, e.g.

ng g ngx-specs '**/*

That didn't work for me - see the GitHub issue:

https://github.com/smnbbrv/ngx-spec/issues/10

Note - As a strategy to implement test-driven development, I found it easiest to search for and remove all existing *.spec.ts files that had automatically been created in the Angular project as part of initial artifact creation (by searching in Windows explorer), then as a starting point I created a single test for the main Angular data provider service, using ngx-spec

小开

You can use the angular spec generator vs code extension https://marketplace.visualstudio.com/items?itemName=ThorstenRintelen.angular-spec-generator


提交答案