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

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 — Mehdi Benmoha, Jun 05 '18 at 09:21
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 :) — smnbbrv, Jun 05 '18 at 09:23
you can easily use Angular spec generator extension in VS Code. https://marketplace.visualstudio.com/items?itemName=ThorstenRintelen.angular-spec-generator#:~:text=Angular%20spec%20(jest%20%2F%20jasmine%20%2F%20mockito)%20file%20generator&text=Select%20an%20Angular%20*.,component — sajadre, Feb 17 '23 at 09:48

score 50 · Accepted Answer · edited Nov 18 '22 at 22:55

50

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

edited Nov 18 '22 at 22:55

Mauricio Gracia Gutierrez

10,288
6
68
99

answered Jun 05 '18 at 09:18

smnbbrv

23,502
9
78
109

score 27 · Answer 2 · edited Jul 16 '19 at 16:22

27

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'

edited Jul 16 '19 at 16:22

Community

1
1

answered Jul 05 '18 at 10:44

Vinay

433
5
8

Chris Halcrow · Answer 3 · 2019-09-06T05:38:45.077

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

score -3 · Answer 4 · answered Sep 18 '17 at 13:50

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.

Angular CLI create .spec files for already existing components

4 Answers4

Linked