Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/allenhwkim/ngentest

Angular6+ Unit Test Generator For Components, Directive, Services, and Pipes
https://github.com/allenhwkim/ngentest

angular generator parser typescript unittest

Last synced: about 1 month ago
JSON representation

Angular6+ Unit Test Generator For Components, Directive, Services, and Pipes

Host: GitHub
URL: https://github.com/allenhwkim/ngentest
Owner: allenhwkim
License: mit
Created: 2018-05-04T14:57:52.000Z (over 6 years ago)
Default Branch: main
Last Pushed: 2024-05-02T13:03:09.000Z (7 months ago)
Last Synced: 2024-11-01T23:36:35.369Z (about 1 month ago)
Topics: angular, generator, parser, typescript, unittest
Language: TypeScript
Homepage: https://ngentest.github.io
Size: 705 KB
Stars: 144
Watchers: 12
Forks: 60
Open Issues: 5
Metadata Files:
- Readme: README.md
- License: LICENSE.md

Awesome Lists containing this project

awesome-angular - ngentest - Angular6+ Unit Test Generator For Components, Directive, Services, and Pipes. (Table of contents / Angular)
fucking-awesome-angular - ngentest - Angular6+ Unit Test Generator For Components, Directive, Services, and Pipes. (Table of contents / Angular)
fucking-awesome-angular - ngentest - Angular6+ Unit Test Generator For Components, Directive, Services, and Pipes. (Table of contents / Angular)

README

# ngentest
Angular6,7,8,9,10,11,12,13,14,15,16 Unit Test Generator For Components, Directive, Services, and Pipes

## Install & Run
```bash
$ npm install ngentest -D
$ npx ngentest -h
Usage: index.js [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

## 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](https://github.com/allenhwkim/ngentest/blob/main/ngentest.config.js)

* **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.,
```javascript
outputTemplates: {
klass: myKlassTemplate,
component: myComponentTemplate,
directive: myDirectiveTemplate,
injectable: myInjectableTemplate,
pipe: myPipeTemplate
}
```

* **directives**: Array of diretive names, necessary for a component test. e.g.,
```javascript
directives: ['myDirective']
```

* **pipes**: Array of pipe names, necessary for a component test. e.g.
```javascript
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.
```javascript
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.
```javascript
providerMocks: {
ElementRef: ['nativeElement = {};'],
Router: ['navigate() {};'],
Document: ['querySelector() {};'],
HttpClient: ['post() {};'],
TranslateService: ['translate() {};'],
EncryptionService: [],
}
```

### Full Example (https://github.com/allenhwkim/ngentest/blob/master/ngentest.config.js)
```javascript
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: [],
}
}
```

## How It works

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

2. Compile Typescript to Javascript, then parse the Javascript, and get the following info.

* constructor param data
* provider mock data
* accessor tests
* function tests

3. 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](https://vercel.com/guides/using-express-with-vercel#standalone-express)

* `ejs-template` directory:
- default EJS templates for unit test generation
* `test` directory:
- All test files including unit test goes here
* `cli.js`:
- used as `ngentest` command
* `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](https://ngentest.vercel.app/api)
* Deployment setting: https://vercel.com/allenhwkim/ngentest/deployments
* Project setting https://vercel.com/allenhwkim/ngentest

### To make it sure it does not break any feature
```
$ 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

```