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

Solution 1:^[1]

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'

Solution 2:^[2]

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

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

Solution 3:^[3]

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.

Solution 4:^[4]

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

Solution 5:^[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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Community
Solution 2
Solution 3	ForOhFor
Solution 4	Kyrolus Kamal Fahim
Solution 5	Alex Beugnet

'Angular CLI create .spec files for already existing components

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]