smnbbrv/ngx-spec

A missing spec generator for Angular CLI

ngx-spec

A missing schematic for creating Angular spec.

Works only from @angular/cli@^6.0.0 on.

Installation

Angular 7+:

npm i -D ngx-spec@^2.0.0

Angular 6 (only spec, no specs support):

npm i -D ngx-spec@^1.0.0

Supported types

Supported types are

const SupportedTypes = ['component', 'directive', 'guard', 'service', 'pipe'];

ng g ngx:spec

Run:

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

or

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

Please note that in a standard Angular CLI project the path will start at src/app. That's why if you use the file paths then it would be comfortable to cd src/app first and then safely use the shell autocompletion to produce the proper path.

ng g ngx-spec:specs

Batch specs generator. Supports minimatch globs. Does not override existing spec files.

Important: the glob should be passed as a string, otherwise OS tries to intercept it with its glob.

Examples:

ng g ngx-spec:specs 'path/*.service.ts'

ng g ngx-spec:specs '**/*.service.ts'

ng g ngx-spec:specs '**/*'

etc.

Please note that in a standard Angular CLI project the path will start at src/app. That's why if you use the file paths then it would be comfortable to cd src/app first and then safely use the shell autocompletion to produce the proper path.

Usage in Visual Studio Code

It could be easier to use the schematic with vscode-angular-schematics extension in Visual Studio Code.

History

See the story behind on stackoverflow and on Angular CLI github issue.

License

MIT

ngx-spec's Issues

Batch specs generator not working

Issue: the single file command works, but the batch command seems don't.

Steps to reproduce

1. run npm i -D ngx-spec to add ngx-spec to an existing project;
2. run ng g ngx-spec:specs '**/*' throws Nothing to be done.;
3. tried to change to inner folder, than run 2) give same results;
4. tried to change path in command, eg. ng g ngx-spec:specs 'myfolder/**/*' gives same;
5. tried to run ng g ngx-spec:specs 'myfolder/*.service.ts' gives same.

Issue reported on Win10, Node 10.15.1, npm 6.6.0; my package.json is:

"dependencies": {
    "@angular/animations": "^7.2.1",
    "@angular/cdk": "^7.2.1",
    "@angular/common": "^7.2.1",
    "@angular/compiler": "^7.2.1",
    "@angular/core": "^7.2.1",
    "@angular/forms": "^7.2.1",
    "@angular/http": "^7.2.1",
    "@angular/platform-browser": "^7.2.1",
    "@angular/platform-browser-dynamic": "^7.2.1",
    "@angular/router": "^7.2.1",
    "@auth0/angular-jwt": "^2.1.0",
    "@nebular/auth": "^3.1.0",
    "@nebular/bootstrap": "^3.1.0",
    "@nebular/date-fns": "^3.1.0",
    "@nebular/security": "^3.1.0",
    "@nebular/theme": "^3.1.0",
    "@ng-bootstrap/ng-bootstrap": "^4.0.1",
    "@swimlane/ngx-charts": "^10.0.0",
    "@types/video.js": "^7.2.10",
    "angular-tag-cloud-module": "^3.3.0",
    "angular2-chartjs": "0.4.1",
    "chart.js": "^2.7.3",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.1",
    "date-fns": "^2.0.0-alpha.27",
    "echarts": "^4.0.2",
    "intl": "1.2.5",
    "nebular-icons": "1.1.0",
    "ng2-nouislider": "^1.7.13",
    "ngx-echarts": "^4.0.1",
    "normalize.css": "6.0.0",
    "nouislider": "^13.1.1",
    "npm": "^6.6.0",
    "pace-js": "1.0.2",
    "roboto-fontface": "0.8.0",
    "rxjs": "6.3.0",
    "rxjs-compat": "6.3.0",
    "typeface-exo": "0.0.22",
    "video.js": "^7.4.1",
    "web-animations-js": "2.2.5",
    "zone.js": "^0.8.28"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.12.2",
    "@angular/cli": "^7.2.2",
    "@angular/compiler-cli": "^7.2.1",
    "@angular/language-service": "^7.2.1",
    "@compodoc/compodoc": "^1.1.7",
    "@fortawesome/fontawesome-free": "^5.2.0",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "@types/d3-color": "1.0.5",
    "@types/jasmine": "2.5.54",
    "@types/jasminewd2": "2.0.3",
    "@types/leaflet": "1.2.3",
    "@types/lodash": "^4.14.120",
    "@types/node": "^6.0.90",
    "bootstrap": "^4.1.3",
    "codelyzer": "^4.5.0",
    "concurrently": "^4.1.0",
    "conventional-changelog-cli": "1.3.4",
    "jasmine-core": "^3.3.0",
    "jasmine-spec-reporter": "^4.2.1",
    "jquery": "^3.3.1",
    "json-server": "^0.14.0",
    "karma": "^3.1.4",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "^2.0.4",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "ngx-spec": "^2.1.4",
    "node-sass": "^4.9.3",
    "npm-run-all": "4.0.2",
    "popper.js": "^1.14.6",
    "protractor": "^5.4.2",
    "rimraf": "2.6.1",
    "sass-loader": "^7.0.1",
    "stylelint": "7.13.0",
    "ts-node": "3.2.2",
    "tslint": "^5.13.1",
    "tslint-sonarts": "^1.9.0",
    "typescript": "3.1.3"
  }

I have version 2.1.5 and am getting 'index.js.js' error

Hi

npm i -D ngx-spec

Gets me version ^2.1.5 from npm

ng g ngx-spec:spec path/my.service.ts
Cannot find module '/Users/<...mypath...>/node_modules/@schematics/angular/service/index.js.js'

Looking at the file: node_modules/ngx-spec/src/spec/index.js

line : 60 const schematicsPath = require.resolve(`@schematics/angular/${type}/index.js`).replace(/index\.js$/, 'files');

when changed to 

line : 60 const schematicsPath = require.resolve(`@schematics/angular/${type}/index`).replace(/index\.js$/, 'files');

Starts working. I can see a closed patch fix for this so I am assuming this patch is in v2.1.5 is this correct? if not when will it be released?

Unexpected token ] in JSON at position 4457

when using this command in app/src :
ng g ngx-spec:spec features/homepage/homepage.ts

got this error

Unexpected token ] in JSON at position 4457

Cannot find module '@schematics/angular/component/index.js'

do you know what I miss in the install ?

$ ng g ngx-spec:spec my-app.ts
Cannot find module '@schematics/angular/component/index.js'
[fixed , just have to reinstall all the project]

feature request : create all missing specs

It would be nice to traverse the app tree, generating all missing specs for all services, components and directives ...

unable to run generator

after trying to install with npm i -D ngx-spec and then yarn add -D ngx-spec (just in case it was an npm problem) I get the following error when running

ng g spec ngx-spec:spec app.component.ts

Schematic "spec" not found in collection "@schematics/angular".
Error: Schematic "spec" not found in collection "@schematics/angular".

not sure if I'm missing a step or something

The 'path' option in '/*removed_local_directory*/node_modules/ngx-spec/src/specs/schema.json' is using deprecated behaviour.'workingDirectory' smart default provider should be used instead.

Then Running ng g ngx-spec:specs 'components/alerts/* To generate a spec file on a component I received that warning.
I also recieved an error calling "Cannot find module '/removed_local_directory/node_modules/@schematics/angular/component/index.js.js'

My package.json

{
  "name": "portfolio",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "jest",
    "test:watch": "jest --watch",
    "cypress": "cypress run",
    "cypress:open": "cypress open",
    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
    "storybook": "npm run docs:json && start-storybook -p 6006",
    "build-storybook": "npm run docs:json && build-storybook"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.1.0",
    "@angular/common": "^14.1.0",
    "@angular/compiler": "^14.1.0",
    "@angular/core": "^14.1.0",
    "@angular/forms": "^14.1.0",
    "@angular/platform-browser": "^14.1.0",
    "@angular/platform-browser-dynamic": "^14.1.0",
    "@angular/router": "^14.1.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.1.1",
    "@angular/cli": "~14.1.1",
    "@angular/compiler-cli": "^14.1.0",
    "@babel/core": "^7.18.10",
    "@compodoc/compodoc": "^1.1.19",
    "@storybook/addon-actions": "^6.5.10",
    "@storybook/addon-essentials": "^6.5.10",
    "@storybook/addon-interactions": "^6.5.10",
    "@storybook/addon-links": "^6.5.10",
    "@storybook/angular": "^6.5.10",
    "@storybook/builder-webpack5": "^6.5.10",
    "@storybook/manager-webpack5": "^6.5.10",
    "@storybook/testing-library": "^0.0.13",
    "@types/jest": "^28.1.7",
    "autoprefixer": "^10.4.8",
    "babel-loader": "^8.2.5",
    "cypress": "^10.5.0",
    "jest": "^28.1.3",
    "jest-preset-angular": "^12.2.0",
    "ngx-spec": "^2.1.5",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.8",
    "typescript": "~4.7.2"
  }
}```

Unexpected token ] in JSON at position 719

Executing one of the example commands:
ng g ngx-spec:spec '**/*'

gives only me the following (and does not do anything):

Unexpected token ] in JSON at position 719

Either the package is broken or i have a configuration error i cannot find.

Also, the error message doesnt really help.

(All my dependencies are up to date)

`Schematic "spec" not found in collection "@schematics/angular".

I am getting Schematic "spec" not found in collection "@schematics/angular". Error: Schematic "spec" not found in collection "@schematics/angular" when I try to run ng g spec ngx-spec:spec src/app/my-service.service

Creates a weird spec file for even a single file

\ClientApp\src\app> ng g ngx-spec:spec .\pages\accounting\hour-log\invoicehours\invoicehours.component.ts

Output:

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

import { .\pages\accounting\hourLog\invoicehours\invoicehoursComponent } from './.\pages\accounting\hour-log\invoicehours\invoicehours.component';

describe('.\pages\accounting\hourLog\invoicehours\invoicehoursComponent', () => {
let component: .\pages\accounting\hourLog\invoicehours\invoicehoursComponent;
let fixture: ComponentFixture<.\pages\accounting\hourLog\invoicehours\invoicehoursComponent>;

beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ .\pages\accounting\hourLog\invoicehours\invoicehoursComponent ]
})
.compileComponents();
}));

beforeEach(() => {
fixture = TestBed.createComponent(.\pages\accounting\hourLog\invoicehours\invoicehoursComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});

Of course this doesn't compile.

Error "Unknown Protocol on url "[object Object]"."

When I run

ng g ngx-spec:spec _catalog-explorer/content/zooming/zooming.component

I get an error saying "Unknown Protocol on url "[object Object]"."

The path is correct and the component exists.

ng g ngx-specs '**/*'

The line of code its not working.
Path: src/app
Error: Schematic "specs" not found in collection "ngx-spec"

can you help me with this

Publish version 2.1.6

I saw there were commits and fixes after last publish with version 2.1.5. I just pulled the latest version according to the README, but I'm getting the error
Cannot find module '***/node_modules/@schematics/angular/component/index.js.js'

I think this was addressed in one of the latest commits, but have not been published to npm registry yet. Can you upload a new version of this lib with those fixes included?

"type is not defined" for type "component"

When trying to use "ng g ngx-spec:spec <some.component.ts>" I just get message "type is not defined" and nothing is generated. It works just fine with services...
Is this a known issue? Any idea?
I use version 2.1.4.

Error: Could not find (undefined)

I try to run
ng g ngx-spec:spec app.component.ts

and

ng g ngx-spec:spec app.component

And I always get error:

Error: Could not find (undefined)
Could not find (undefined)

"@angular/cli": "1.7.3",

How to fix this?

Tree type is not supported.

When I run I got this message:
"Tree type is not supported."

Whats the issue