Testing

This page contains information useful for testing of WATcher.

Dev commands

Given below are different commands you can use to run the tests.

Command Description
npm run lint Runs the linter (TSLint)
npm run test Runs the tests
npm run test -- "--code-coverage" Runs the tests and generates code coverage report under tests/coverage folder

Individual Testing

To test an individual file, replace the xxx below with the more specific file pattern in test.ts.

const context = require.context('../tests', true, /xxx\.spec\.ts$/);

You will also need to update tsconfig.spec.json to include only the relevant test files.

This is relevant as not all tests in WATcher have been fixed and may produce compilation errors.

Within the file, prefix describe and it with f into fdescribe and fit to run specific tests.

Testing with Jasmine

Jasmine is a behavior-driven development framework specific for testing JavaScript code. We follow the Jasmine Style Guide loosely for our tests (Link under Resources for Jasmine). One main guideline is that a describe block should be created for each method / scenario under test, and an it block should be created for each property being verified.

Resources:

  1. Jasmine Style Guide
  2. Official Jasmine documentation : This is the official Jasmine documentation for Jasmine 3.6
  3. Introduction to Jasmine 2.0 : This is a good summary / introduction of Jasmine test features

E2E testing

Running E2E tests

can be executed using npm run e2e. You should see CATcher launch in an instance of Google Chrome, with some automated actions occurring on it. Note: Google Chrome needs to be installed on the machine.

Unlike the production version of CATcher, we do not use the actual GitHub API in the E2E tests. Mock data is used to simulate the GitHub API. You can run npm run ng:serve:test to run CATcher in this "offline" mode (to further develop or debug the E2E tests). The following additional parameters would allow for further customisation,

Additional Parameter Default Description Full Command Example Command Explanation
--protractor-config=e2e/protractor.*.conf.js protractor.conf.js Allows selection of the Protractor configuration file npm run e2e -- --protractor-config=e2e/protractor.firefox.conf.js Runs E2E Tests on the Firefox Browser
--suite=* All Suites Runs E2E Tests for specific suites npm run e2e -- --suite=login,bugReporting Run E2E Tests from Login and BugReporting Suites only

Relevant Browsers must be installed prior to running tests (i.e. Chrome, Firefox).

Troubleshooting conflicts between the versions of the browser and browser driver

If tests fail on your machine due to mismatches between the versions of the browser and the browser driver, you can use the webdriver-manager tool to install the right version of the driver. By default, running webdriver-manager update updates all drivers to the latest version, but particular versions can be specified as options.

Protractor Configuration

E2E Tests are run using Protractor testing framework.

  • Protractor primarily requires the *.conf.js files to define E2E Testing Environments (this includes Browser Details, Base URL, etc...)
  • The base configuration data is stored in protractor.base.conf.js which is then extended by separate configuration files for individual browsers as well as the CI/CD pipeline.
  • E2E Tests are typically split into Page-Objects Files and Test Files in accordance with the Protractor Style Guide (more information regarding the interaction between the aforementioned filetypes can be found there).
  • E2E Tests are also grouped into suites based on the Application's Phase (i.e. Login, Bug-Reporting). Currently defined suite information is located in the protractor.base.conf.js file as well.

How the E2E tests work

E2E Tests are run with the following stages:

  1. Build CATcher using test architecture
    • Using test build configuration located in angular.json under projects.catcher.architect.configurations we build a version of CATcher within a test environment that replaces src/environments/environment.ts with src/environments/environment.test.ts on runtime. This file provides data that allows CATcher to switch into "E2E test" mode.
  2. Provide Test Environment Information
    • The Test Environment (in src/environments/environment.test.ts) provides information such as,
      • Login Credentials (Username).
      • User Role and Team Information.
      • A test flag that is set to true, so that CATcher switches into "E2E test mode"
  3. Mock Service Injections
    • Once CATcher switches to E2E test mode, it creates mocks of some services, in order to simulate behaviour that is outside the scope of E2E Testing. This includes authentication, and communication with GitHub (via its APIs).
    • These Service Injections are carried out in the respective *-module.ts files with the help of Factories (located in /src/app/core/services/factories) that check the current build environment and make the Service Replacements accordingly.
  4. Browser Action Automation using Protractor
    • With the application ready for testing, we then utilize Protractor to run test cases that are located in the /e2e directory.