Angular CLI create .spec files for already existing components

Question

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...

• Mehdi Benmoha: Tests are important in a fast growing project ! When it will be a big project you will suffer from side effects problems and it will become a slow growing project. QED
• smnbbrv: You are right. Might be that I just expressed it wrong: when requirements are not yet clear and the project is in proof of concept state the tests are a real problem. That's why it is good to be able to generate them a bit later :)
• sajadre: you can easily use Angular spec generator extension in VS Code. marketplace.visualstudio.com/…*.,component

Answer 1

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

• Chris Barr: This no longer seems to be working. I tried this with an Angular 20 app and I get "exportDefault is not defined"

Answer 2

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'

Answer 3

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

Answer 4

I found this to work for an Angular 20 app

https://github.com/pedroclayman/angular-spec-generator

Install: npm install -g '@peter.mihalik/angular-spec-generator

Run: asg generate -f src/app/path/to/my-cmpt/my-cmpt.component.ts

Un fortunately there doesn't appear to be a way to run this as a bath for multiple components, but even so it seems to be a time saver

If you are using standalone components, you will also have to manually change these generated files from

await TestBed.configureTestingModule({
 imports: [],
 declarations: [ExampleComponent],
 providers: [],
}).compileComponents();

to

await TestBed.configureTestingModule({
 imports: [ExampleComponent],
 providers: [],
}).compileComponents();

Answer 5

There are 2 solutions for this :

• 1 : Create a copy of @angular/cli, add your own code (or extend it) to the existing ng new command (https://github.com/angular/angular-cli/blob/master/packages/%40angular/cli/commands/new.ts) and integrate to your global installed @angular/cli. This is probably impractical and not worth your time.
• 2 : Make a pull request to the @angular/cli team to integrate your idea, and if the code works and the idea seems good enough, they might add it.