ngentest
Angular6,7,8,9,10,11,12,13,14,15,16 Unit Test Generator For Components, Directive, Services, and Pipes
Install & Run
$ npm install ngentest -D
$ npx ngentest -h
Usage: index.js <tsFile> [options]
Options:
--version Show version number [boolean]
-s, --spec write the spec file along with source file [boolean]
-f, --force It prints out a new test file, and it does not ask a
question when overwrite spec file [boolean]
-v, --verbose log verbose debug messages [boolean]
--framework test framework, jest or karma [string]
-c, --config The configuration file to load options from
[string] [default: "ngentest.config.js"]
-h Show help [boolean]
Examples:
index.js my.component.ts generate Angular unit test for my.component.ts
$ npx ngentest my.component.ts
$ npx ngentest my.directive.ts -s
$ npx ngentest my.directive.ts -c ../ngentest.config.js
To see the source file and generated examples, please take a look at test-examples
directory.
https://github.com/allenhwkim/ngentest/tree/master/test-examples
Config
You can override configuration by creating a file named as ngentest.config.js
in your application directory and running ngentest from that directory. You can also provide a configuration file using -c my.config.js
.
If you want to use your own config, refer the default config file
-
framework: jest
or karma
. The default is jest
. This value determines how function mock and assert is to be done.
-
outputTemplates: template string for each type. Please specify your own template if you want to override the default template. There are five types;
- klass: ejs template for an ES6 class without angular decorator.
- component: ejs template for an Angular component.
- directive: ejs template for an Angular directive.
- injectable: ejs template for an Angular service.
- pipe: ejs template for an Angular pipe.
e.g.,
outputTemplates: {
klass: myKlassTemplate,
component: myComponentTemplate,
directive: myDirectiveTemplate,
injectable: myInjectableTemplate,
pipe: myPipeTemplate
}
-
directives: Array of diretive names, necessary for a component test. e.g.,
directives: ['myDirective']
-
pipes: Array of pipe names, necessary for a component test. e.g.
pipes: ['translate', 'phoneNumber', 'safeHtml']
-
replacements: There are some codes, which causes error without proper environment. You need to replace these codes.
You can specify from
value with regular expression and to
value with string.
e.g.
replacements: [
{ from: '^\\S+\\.define\\(.*\\);', to: ''}`
]
-
providerMocks: When the following class is used in a constructor parameter, create a mock class with the given statements.
e.g.
providerMocks: {
ElementRef: ['nativeElement = {};'],
Router: ['navigate() {};'],
Document: ['querySelector() {};'],
HttpClient: ['post() {};'],
TranslateService: ['translate() {};'],
EncryptionService: [],
}
module.exports = {
framework: 'karma',
outputTemplates: {
klass: klassTemplate,
component: componentTemplate,
directive: directiveTemplate,
injectable: injectableTemplate,
pipe: pipeTemplate
},
directives: [
],
pipes: [
'translate', 'phoneNumber', 'safeHtml'
],
replacements: [
{ from: '^\\S+\\.define\\(.*\\);', to: ''}
],
providerMocks: {
ElementRef: ['nativeElement = {};'],
Router: ['navigate() {};'],
Document: ['querySelector() {};'],
HttpClient: ['post() {};'],
TranslateService: ['translate() {};'],
EncryptionService: [],
}
}
How It works
-
Parse a Typescript file and find these info.
- imports: imports statements info.
- inputs: @Input statements info.
- outputs: @Output statements info.
- component provider: providers info used in @Component decorator.
- selector: selector info used in @Component or @Directove decorator.
-
Compile Typescript to Javascript, then parse the Javascript, and get the following info.
- constructor param data
- provider mock data
- accessor tests
- function tests
-
build ejs data from #1 and #2, and generate test code.
For Developers:
Directory structure
-
api
directory:
- source code to run this as an API
- To run local express server,
node api/express-server.js
api/index.js
is a structure used by Vercel
-
ejs-template
directory:
- default EJS templates for unit test generation
-
test
directory:
- All test files including unit test goes here
-
cli.js
:
-
ngentest.config.js
:
- The default configuration file used by
cli.js
-
vercel.json
:
- Used to deploy to
https://ngentest.vercel.com/api/ngentest
Deployment to Vercel
Whenever main
branch is updated, API https://ngentest.vercel.app/api/ngentest
will be deployed by following vercel.json
.
To see the usage of this API, refer this
To make it sure it does not break any feature
$ npm i
$ npm test
> ngentest@2.1.1 test
> node --test test/*.spec.js && node test/index.js
âś TypescriptParser
...
âś Util
...
passed check /Users/allenkim/projects/ngentest/test/test-examples/example.klass.ts
passed check /Users/allenkim/projects/ngentest/test/test-examples/example.component.ts
passed check /Users/allenkim/projects/ngentest/test/test-examples/example2.component.ts
passed check /Users/allenkim/projects/ngentest/test/test-examples/example3.component.ts
passed check /Users/allenkim/projects/ngentest/test/test-examples/example4.component.ts
passed check /Users/allenkim/projects/ngentest/test/test-examples/example5.component.ts
passed check /Users/allenkim/projects/ngentest/test/test-examples/example6.component.ts
passed check /Users/allenkim/projects/ngentest/test/test-examples/example7.component.ts
passed check /Users/allenkim/projects/ngentest/test/test-examples/example8.component.ts
passed check /Users/allenkim/projects/ngentest/test/test-examples/example9.component.ts
passed check /Users/allenkim/projects/ngentest/test/test-examples/exampleX.component.ts
passed check /Users/allenkim/projects/ngentest/test/test-examples/example.directive.ts
passed check /Users/allenkim/projects/ngentest/test/test-examples/example.service.ts
passed check /Users/allenkim/projects/ngentest/test/test-examples/example.pipe.ts
passed check /Users/allenkim/projects/ngentest/test/test-examples/example2.pipe.ts