Skip to main content

Money Tracker Testing

By default, Angular uses Jasmine Testing Framework. This is a BDD testing framework with Karma Tests Runner. However, Money Tracker has replaced this bundle with Jest.

Installation​

Jest needs the following dev dependencies, along with a plugin to Nx:

package.json
{
  "devDependencies": {
    "@nx/jest": "19.5.7",
    "@types/jest": "^29.5.13",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-preset-angular": "^14.2.4",
    "ts-jest": "^29.2.5"
  }
}

Jest And Nx​

Jest is configured individually for every application or library within Nx mono repository, Nx merges all the configurations into one root configuration.

Nx 18+ provides a utility function called getJestProjectsAsync which retrieves a list of paths to all the Jest config files from subprojects (jump to docs):

jest.config.ts
import { getJestProjectsAsync } from '@nx/jest';

export default async () => ({
  projects: await getJestProjectsAsync(),
});

Also, Nx provides a default base configuration for Jest:

jest.preset.ts
const nxPreset = require('@nx/jest/preset').default;

module.exports = {
    ...nxPreset,
    //...
};

... and subproject use this preset, see the line with preset: '../../jest.preset.js' in the following paragraph.

Configuration In Subprojects​

This example is for apps/money-tracker-ui application. The same configuration is copied to other modules with respect to displayName:

apps/money-tracker-ui/jest.config.ts
/* eslint-disable */
export default {
  displayName: 'money-tracker-ui',
  preset: '../../jest.preset.js',
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
  coverageDirectory: '../../coverage/apps/money-tracker-ui/',
  transform: {
    '^.+\\.(ts|mjs|js|html)$': ['jest-preset-angular', {
        tsconfig: '<rootDir>/tsconfig.spec.json',
        stringifyContentPathRegex: '\\.(html|svg)$',
    }],
  },
  transformIgnorePatterns: [
    'node_modules/(?!.*\\.mjs$|lodash-es|uri-templates-es)',
  ],
  snapshotSerializers: [
    'jest-preset-angular/build/serializers/no-ng-attributes',
    'jest-preset-angular/build/serializers/ng-snapshot',
    'jest-preset-angular/build/serializers/html-comment',
  ],
};
More info on Jest config

Note, this jest.config.ts uses jest-preset-angular for Angular components tests. More info on configuration options is in the docs.

For every test Jest is repeating Angular tests initialization with TestBed.initTestEnvironment to remove the old dependencies for the new component test:

apps/money-tracker-ui/src/test-setup.ts
import 'jest-preset-angular/setup-jest';

Jest And Typescript​

Next important piece of configuration is the usage of the ts-jest library.

info

ts-jest is a Jest transformer with source map support that lets use Jest to test projects written in TypeScript.

This configuration will collect files containing tests and required TypeScript declarations and feed them back to Jest, ts-jest configuration follows jest-preset-angular:

apps/money-tracker-ui/jest.config.ts
/* eslint-disable */
export default {
  displayName: 'money-tracker-ui',
  preset: '../../jest.preset.js',
  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
  coverageDirectory: '../../coverage/apps/money-tracker-ui/',
  transform: {
    '^.+\\.(ts|mjs|js|html)$': ['jest-preset-angular', {
      tsconfig: '<rootDir>/tsconfig.spec.json',
      stringifyContentPathRegex: '\\.(html|svg)$',
    }],
  },
  transformIgnorePatterns: [
    'node_modules/(?!.*\\.mjs$|lodash-es|uri-templates-es)',
  ],
  snapshotSerializers: [
    'jest-preset-angular/build/serializers/no-ng-attributes',
    'jest-preset-angular/build/serializers/ng-snapshot',
    'jest-preset-angular/build/serializers/html-comment',
  ],
};

Testing Plain Code​

The most straightforward testing is with plain TypeScript code, as in utility classes:

libs/model/src/utils/utils.spec.ts
describe('Utils', () => {
  it('should create an instance', () => {
    expect(new Utils()).toBeTruthy();
  });
//...
})

The data can be imported from the other files, for example:

libs/model/src/utils/utils.spec.ts
import { token, url, url2, url3 } from './utils.data';

describe('Utils', () => {
    it('should parse a token', () => {
        const user = Utils.parseJwt(token);
        expect(user.email).toEqual('some@qa.com');
        expect(user.userid).toEqual('some');
    });

})

Testing With TestBed​

Angular tests are thoroughly described in Angular Testing Guide. The principal class is TestBed which has a vast API and does almost all testing tasks.

For example, almost all components have this basic test to try to create the component and validate if it is created successfully:

describe('HeaderComponent', () => {
    let component: HeaderComponent;
    let fixture: ComponentFixture<HeaderComponent>;

    beforeEach(async () => {
        await TestBed.configureTestingModule({
            declarations: [HeaderComponent],
            imports: [
                MatSidenavModule,
                BrowserAnimationsModule,
                MatSidenavModule,
                MatToolbarModule,
                MatIconModule,
                MatListModule,
            ],
            providers: [KeycloakService],
        }).compileComponents();
    });

    beforeEach(() => {
        fixture = TestBed.createComponent(HeaderComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

Here, TestBed.configureTestingModule function configures module context for the component, with dependencies like library classes and services. Also, it declares the component to test: declarations: [HeaderComponent].

More info

These tests are being generated by Angular CLI components scaffolding, however, usually they require more dependencies to be added manually to the imports section. More info on how to use ComponentFixture.

Providing Service Test Doubles​

If components talk to the other systems, they do it via services, and in most of the cases it is not possible to use real services in these unit tests. By default, Angular offers Jasmine test doubles; however, for Money Tracker, Jest Mocking Functions are used.

For example, in the following example, TestSearchService is created for tests:

libs/shared-components/src/lib/service/search.service.spec.ts
class TestResource extends Resource {}

class TestSearchService extends SearchService<TestResource> {
    
    // can return examples of some real data here
    searchPage(options?: PagedGetOption,
               queryName?: string | null): Observable<PagedResourceCollection<TestResource>> {
        return of({} as PagedResourceCollection<TestResource>);
    }

    // can return examples of some real data here
    getPage(options?: PagedGetOption): Observable<PagedResourceCollection<TestResource>> {
        return of({} as PagedResourceCollection<TestResource>);
    }
}

If only a signature of a method is required, Jest mock function can create one:

keycloakServiceMock = {
    keycloakEvents$: of(),
    loadUserProfile: jest.fn().mockResolvedValue({}),
    login: jest.fn().mockResolvedValue({}),
}
Try Copilot

It makes sense to use Copilot or any other generative AI to make such tests. For example, apps/money-tracker-ui/src/app/app.component.spec.ts was generated by Copilot; it was able to correctly detect authentication scenarios for Keycloak. However, it is always a good idea to trim the tests manually after generation.

Coverage​

Jest is configured for all the subprojects and libraries by Nx preset configuration file mentioned above:

jest.preset.ts
const nxPreset = require('@nx/jest/preset').default;

module.exports = {
    //...
    coverageReporters: ['clover', 'json', 'text', 'cobertura', 'html'],
    coveragePathIgnorePatterns: [
        'index.js',
        'index.jsx',
        'index.ts',
        '/node_modules/',
    ],
};