Home

Awesome

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 # 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

Full Example (https://github.com/allenhwkim/ngentest/blob/master/ngentest.config.js)

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

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