Angular6,7,8,9,10,11,12,13,14,15,16 Unit Test Generator For Components, Directive, Services, and Pipes
$ 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 # write unit test to my.directive.spec.ts
$ npx ngentest my.directive.ts -c ../ngentest.config.js # use different config file.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
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:
jestorkarma. The default isjest. 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
fromvalue with regular expression andtovalue 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', // or 'jest'
outputTemplates: {
klass: klassTemplate, // ejs contents read from file
component: componentTemplate,
directive: directiveTemplate,
injectable: injectableTemplate,
pipe: pipeTemplate
},
// necessary directives used for a component test
directives: [
// 'myCustomDirective' // my custom directive used over application
],
// necessary pipes used for a component test
pipes: [
'translate', 'phoneNumber', 'safeHtml'
],
// when convert to JS, some codes need to be replaced to work
replacements: [ // some 3rd party module causes an error
{ from: '^\\S+\\.define\\(.*\\);', to: ''} // some commands causes error
],
// when constructor param type is as following, create a mock class with this properties
// e.g. @Injectable() MockElementRef { nativeElement = {}; }
providerMocks: {
ElementRef: ['nativeElement = {};'],
Router: ['navigate() {};'],
Document: ['querySelector() {};'],
HttpClient: ['post() {};'],
TranslateService: ['translate() {};'],
EncryptionService: [],
}
}-
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.
-
apidirectory:- source code to run this as an API
- To run local express server,
node api/express-server.js api/index.jsis a structure used by Vercel
-
ejs-templatedirectory:- default EJS templates for unit test generation
-
testdirectory:- All test files including unit test goes here
-
cli.js:- used as
ngentestcommand
- used as
-
ngentest.config.js:- The default configuration file used by
cli.js
- The default configuration file used by
-
vercel.json:- Used to deploy to
https://ngentest.vercel.com/api/ngentest
- Used to deploy to
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
- Deployment setting: https://vercel.com/allenhwkim/ngentest/deployments
- Project setting https://vercel.com/allenhwkim/ngentest
$ npm i
$ npm test
> [email protected] 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
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent