Unit Testing Specific Part Of Application

Question

I am trying to test a part of our application. I know I can limit the tests by using fit, fdescribe, and changing the require.context in the test.ts file. However, I would like a way to test a specific folder, and all files under it, plus a couple of services outside of this folder.

src
   app
      folder1
      folder2
      folder3
          services
             service1.service.ts
             service2.service.ts

As an example, I would like test test folder2, its children, and service2.service.ts.

Do you have any suggestions for doing such? By doing this, we will be able to automate our unit testing and be able to test grouped together pieces of functionality that are in different folders.

Note: I am using jasmine and karma for unit testing.

Answer 1

You can use --include option of ng test.

Globs of files to include, relative to workspace or project root. There are 2 special cases:

• when a path to directory is provided, all spec files ending ".spec.@(ts|tsx)" will be included.
• when a path to a file is provided, and a matching spec file exists it will be included instead

E.g.

Folder structure:

 ⚡  tree -L 4 -I 'node_modules|examples' src/
src/
├── app
│   ├── app-routing.module.ts
│   ├── app.component.html
│   ├── app.component.scss
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   ├── app.module.ts
│   ├── folder2
│   │   ├── example1.component.spec.ts
│   │   └── example2.component.spec.ts
│   └── folder3
│       └── services
│           ├── service1.service.spec.ts
│           ├── service1.service.ts
│           ├── service2.service.spec.ts
│           └── service2.service.ts
├── assets
├── environments
│   ├── environment.prod.ts
│   └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── styles.scss
└── test.ts

Run ng test with --include option:

npm t -- --include src/app/folder2 --include src/app/folder3/services/service2.service.spec.ts --code-coverage

  folder2/example1
Chrome Headless 95.0.4638.69 (Mac OS 10.15.7): Executed 2 of 3 SUCCESS (0 secs / 0.003 secs)

  folder2/example2
Chrome Headless 95.0.4638.69 (Mac OS 10.15.7): Executed 3 of 3 SUCCESS (0 secs / 0.003 secs)

  service2
Chrome Headless 95.0.4638.69 (Mac OS 10.15.7): Executed 3 of 3 SUCCESS (0.013 secs / 0.003 secs)
TOTAL: 3 SUCCESS

Chrome Headless 95.0.4638.69 (Mac OS 10.15.7): Executed 3 of 3 SUCCESS (0.013 secs / 0.003 secs)
TOTAL: 3 SUCCESS


=============================== Coverage summary ===============================
Statements   : 87.5% ( 7/8 )
Branches     : 100% ( 0/0 )
Functions    : 33.33% ( 1/3 )
Lines        : 100% ( 6/6 )
================================================================================

As you can see, all specs in folder2 will be included and only the service2.service.spec.ts will be included.

Answer 2

Go to test.ts file and replace the line with

const context = require.context('./', true, /\.spec.@(ts|tsx)\.ts$/);

After you can run test case on particular component.

ng test --include src\app\app.component.spec.ts