Populaire testframeworks voor Angular-projecten; een vergelijking

Karma

Karma is een test runner ontwikkeld door het AngularJS-team. Het is ontworpen om het schrijven en uitvoeren van unittests voor JavaScript-applicaties zo eenvoudig mogelijk te maken.

Hoe Karma Werkt

• Configuratie: Karma gebruikt een configuratiebestand (karma.conf.js) om de omgeving voor het uitvoeren van tests op te zetten.
• Browsers: Karma start browsers om tests uit te voeren. Het ondersteunt verschillende browsers, waaronder Chrome, Firefox en zelfs headless browsers zoals PhantomJS.
• Watch mode: In de watch mode houdt Karma je bestanden in de gaten voor wijzigingen en voert automatisch tests opnieuw uit, wat directe feedback geeft.
• Rapportage: Karma genereert gedetailleerde testrapporten, waardoor je kunt zien welke tests zijn geslaagd, gefaald of fouten bevatten.

Voorbeeld van karma.conf.js

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, './coverage/rollercoaster-park'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    restartOnFileChange: true
  });
};

Jasmine

Jasmine is een behavior-driven development (BDD) framework voor het testen van JavaScript-code. Het is ontworpen om eenvoudig op te zetten en te gebruiken, met een duidelijke syntax voor het schrijven van tests.

Voordelen van Jasmine

• Gebruiksvriendelijkheid: eenvoudig op te zetten en te gebruiken met Angular.
• Behavior-Driven Development: stimuleert het schrijven van leesbare en onderhoudbare tests.
• Rijke matcher-bibliotheek: biedt een breed scala aan matchers om uitgebreide tests te schrijven.
• Community ondersteuning: grote community en uitgebreide documentatie.

Nadelen van Jasmine:

• Sequentiële uitvoering: voert tests sequentieel uit, wat langzamer kan zijn voor grote test suites.
• Beperkte functies: mist enkele geavanceerde functies die beschikbaar zijn in andere frameworks zoals Jest.

Voorbeeld

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ RollercoasterComponent ]
    }).compileComponents();
  });

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

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

Jest

Jest is een testframework ontwikkeld door Facebook, bekend om zijn eenvoud en prestaties. Het wint aan populariteit voor Angular testen vanwege het gebruiksgemak en de uitgebreide set functies.

Voordelen van Jest:

• Snelle en parallelle testen: voert tests parallel uit, wat zorgt voor snellere testuitvoering.
• Snapshot testing: maakt snapshots van componenten en vergelijkt deze automatisch.
• Zero configuratie: werkt out-of-the-box voor de meeste JavaScript-projecten.
• Rijke API: uitgebreide API voor mocken, spioneren en assertions.

Nadelen van Jest:

• Complexe setup voor Angular: kan extra configuratie vereisen voor Angular-projecten vergeleken met Jasmine.
• Potentiele overhead: sommige functies kunnen overbodig zijn voor eenvoudige testgevallen, wat kan leiden tot extra overhead.

Voorbeeld

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

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [RollercoasterComponent],
    }).compileComponents();
  });

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

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

Mocha

Mocha is een flexibel JavaScript testframework dat goed werkt voor zowel Front-End als Back-End testen. Het staat bekend om zijn flexibiliteit en uitbreidbaarheid.

Voordelen en Nadelen van Mocha

• Flexibele configuratie: hoog configurabel om aan verschillende behoeften te voldoen.
• Asynchroon testen: uitstekende ondersteuning voor asynchrone operaties.
• Uitgebreide plugins: groot ecosysteem van plugins voor rapportage, mocken en assertions.

Nadelen van Mocha:

• Omslachtige setup: vereist meer setup en boilerplate code vergeleken met andere frameworks.
• Standaard sequentiële uitvoering: Tests worden standaard sequentieel uitgevoerd, tenzij anders geconfigureerd, wat langzamer kan zijn.

Voorbeeld

const chai = require('chai');
const expect = chai.expect;
describe('RollercoasterComponent', () => {
  let component;
  let fixture;
  beforeEach(() => {
    fixture = TestBed.createComponent(RollercoasterComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
  it('should create', () => {
    expect(component).to.be.true;
  });
});

Ava

Ava is een modern JavaScript testframework dat bekend staat om zijn eenvoud en snelheid. Het is ontworpen voor snelle uitvoering en minimale configuratie.

Voordelen van Ava:

• Snelle uitvoering: voert tests gelijktijdig uit, wat zorgt voor snelle feedback.
• Minimale configuratie: eenvoudige setup en minimale boilerplate code.
• Geïsoleerde tests: elke test draait in een apart proces, waardoor testinterferentie wordt vermeden.

Nadelen van Ava:

• Leercurve: een nieuwer framework met een andere aanpak, wat een leercurve met zich mee kan brengen.
• Beperkt ecosysteem: kleiner ecosysteem vergeleken met meer gevestigde frameworks zoals Mocha en Jasmine.

Voorbeeld

import test from 'ava';
import { RollercoasterComponent } from './rollercoaster.component';

test.beforeEach(t => {
  t.context.fixture = TestBed.createComponent(RollercoasterComponent);
  t.context.component = t.context.fixture.componentInstance;
  t.context.fixture.detectChanges();
});

test('should create', t => {
  t.truthy(t.context.component);
});