Testing Strategy

Relevant source files

The following files were used as context for generating this wiki page:

• apps/api/test/app.e2e-spec.ts
• apps/api/src/app.controller.spec.ts
• apps/portal/jest.config.js
• apps/api/package.json
• package.json
• apps/extensions/README.md
• apps/extensions/package.json

The ever-rec project employs a multi-faceted testing strategy tailored to its monorepo structure, which includes a NestJS backend API, a Next.js frontend portal, and a browser extension. The strategy leverages Turborepo for efficient test execution across the different applications.

The backend (api) uses Jest for both unit and end-to-end (E2E) tests, utilizing @nestjs/testing for isolated component testing and supertest for HTTP-level E2E tests. The frontend (portal) is configured with Jest for component testing within a Next.js environment. The browser extension (extensions) relies on a structured manual testing process across multiple browsers, supported by specific build scripts.

Monorepo-Level Testing

Testing across the monorepo is orchestrated by Turborepo, as defined in the root package.json. This allows for running tests for all applications or specific ones in parallel, optimizing the development workflow.

"scripts": {
  "dev": "turbo dev",
  "build": "turbo build",
  "lint": "turbo lint",
  "type-check": "turbo type-check",
  "clean": "turbo clean",
  ...
},

Sources: package.json:15-26

The following diagram illustrates the high-level test execution flow managed by Turborepo.

Sources: package.json:15-26

Backend API Testing (api)

The backend API testing is divided into unit tests and end-to-end (E2E) tests, both running on the Jest framework.

Frameworks and Configuration

The apps/api/package.json file defines the testing scripts and Jest configuration.

Test Scripts

Script	Description
test	Runs all Jest tests.
test:watch	Runs tests in watch mode, re-running on file changes.
test:cov	Runs tests and generates a coverage report.
test:debug	Runs tests with the Node.js inspector for debugging.
test:e2e	Runs only the end-to-end tests, using a specific Jest config.

Sources: apps/api/package.json:14-26

Jest Configuration

The Jest configuration is embedded within apps/api/package.json. It uses ts-jest to transform TypeScript files and is set up to find test files ending in .spec.ts.

"jest": {
  "moduleFileExtensions": [
    "js",
    "json",
    "ts"
  ],
  "rootDir": "src",
  "testRegex": ".*\\.spec\\.ts$",
  "transform": {
    "^.+\\.(t|j)s$": "ts-jest"
  },
  "collectCoverageFrom": [
    "**/*.(t|j)s"
  ],
  "coverageDirectory": "../coverage",
  "testEnvironment": "node"
}

Sources: apps/api/package.json:100-119

A separate configuration for E2E tests is specified in test/jest-e2e.json.
Sources: apps/api/package.json:26

Unit Testing

Unit tests focus on individual controllers and services in isolation. The @nestjs/testing package is used to create a lightweight testing module that mocks dependencies.

The file apps/api/src/app.controller.spec.ts demonstrates this approach. A Test.createTestingModule is configured with the controller and a mock provider for its service.

// File: apps/api/src/app.controller.spec.ts:5-15
describe('AppController', () => {
  let appController: AppController;

  beforeEach(async () => {
    const app: TestingModule = await Test.createTestingModule({
      controllers: [AppController],
      providers: [AppService],
    }).compile();

    appController = app.get<AppController>(AppController);
  });
});

Sources: apps/api/src/app.controller.spec.ts:5-15

The diagram below shows the structure of the unit test setup.

Sources: apps/api/src/app.controller.spec.ts

End-to-End (E2E) Testing

E2E tests verify the behavior of the application through its HTTP endpoints. They use the supertest library to send requests to a running instance of the NestJS application.

In apps/api/test/app.e2e-spec.ts, a full application module is created, and an HTTP server is attached to it for testing.

// File: apps/api/test/app.e2e-spec.ts:7-19
describe('AppController (e2e)', () => {
  let app: INestApplication;

  beforeEach(async () => {
    const moduleFixture: TestingModule = await Test.createTestingModule({
      imports: [AppModule],
    }).compile();

    app = moduleFixture.createNestApplication();
    await app.init();
  });

  it('/ (GET)', () => {
    return request(app.getHttpServer())
      .get('/')
      .expect(200)
      .expect('Hello World!');
  });
});

Sources: apps/api/test/app.e2e-spec.ts:7-25

The following sequence diagram illustrates the flow of an E2E test.

Sources: apps/api/test/app.e2e-spec.ts

Frontend Portal Testing (portal)

The testing strategy for the ever-rec-portal application is configured for a Next.js environment using Jest. The configuration is defined in apps/portal/jest.config.js.

Key aspects of the configuration include:

• Test Environment: jest-environment-jsdom is used to simulate a browser environment.
• Transformers: It uses babel-jest to process JavaScript and TypeScript files.
• Module Name Mapper: It maps CSS/SASS module imports to an identity object to prevent errors during tests that don't rely on styling.

// File: apps/portal/jest.config.js
const nextJest = require('next/jest');

const createJestConfig = nextJest({
  dir: './',
});

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@/components/(.*)$': '<rootDir>/components/$1',
  },
  testEnvironment: 'jest-environment-jsdom',
};

module.exports = createJestConfig(customJestConfig);

Sources: apps/portal/jest.config.js

The apps/portal/package.json file lists jest and @types/jest as development dependencies, confirming the use of Jest as the testing framework.
Sources: apps/portal/package.json:84-85

Browser Extension Testing (extensions)

The browser extension relies on a manual testing process due to the complexity of automating browser-specific interactions. The process is documented in apps/extensions/README.md.

Manual Testing Procedure

The manual testing involves building the extension, loading it into different browsers in developer mode, and verifying its functionality.

Browser	Steps
Google Chrome	1. Navigate to chrome://extensions. 2. Enable "Developer mode". 3. Click "Load unpacked" and select the build/dev folder.
Mozilla Firefox	1. Navigate to about:debugging#/runtime/this-firefox. 2. Click "Load Temporary Add-on...". 3. Select the manifest.json file from the build folder.
Microsoft Edge	1. Navigate to edge://extensions. 2. Enable "Developer mode". 3. Click "Load unpacked" and select the build folder.
Opera	1. Navigate to opera://extensions. 2. Enable "Developer mode". 3. Click "Load unpacked" and select the build folder.

Sources: apps/extensions/README.md:13-43

Build Scripts for Testing

The apps/extensions/package.json file contains scripts to create builds for testing and release. The watch script is used for development, creating a build/dev directory that can be loaded into browsers for testing.

"scripts": {
  "dev": "npm run watch",
  "watch": "webpack --watch --config webpack.dev.js",
  "build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 webpack --progress --mode production --config webpack.prod.js",
  ...
},

Sources: apps/extensions/package.json:28-31