It’s #FrontendFriday – Mocken in Angular mit ng-mocks

Tests und Abhängigkeiten

Für eine gute Software sind gute Tests unabdingbar. Zum Glück bietet Angular schon eine eingerichtete Testsuite mit Jasmine und Karma. Mit diesen Werkzeugen ist es ziemlich einfach Unit Tests für Angular Komponenten zu schreiben. Oft hat eine Komponente mehrere Abhängigkeiten, wie andere Komponenten, Services und sogar ganze Module. Erst wenn alle Abhängigkeiten vorhanden sind, kann die Testumgebung die Komponente erstellen und die Tests durchlaufen. Wenn diese Abhängigkeiten wiederum Abhängigkeiten haben, macht das den Test unnötig kompliziert bzw. bläht ihn unnötig auf. Die Frage, die hier aufkommen sollte, ist: Braucht man alle diese Abhängigkeiten, um die Komponente gut zu testen?

Mocken mit ng-mocks

Ist eure Antwort auf die vorher gestellte Frage ein Nein, dann könnt ihr die Abhängigkeiten auch einfach wegmocken. Für alle die mit dem Begriff „mocken“ nichts anfangen können, hier die Definition laut Wikipedia:

„Ein Mock-Objekt (auch Attrappe, von englisch to mock ‚etwas vortäuschen‘) ist in der Softwareentwicklung ein Programmteil, der zur Durchführung von Modultests als Platzhalter für echte Objekte verwendet wird. Solche Hilfsmittel werden umgangssprachlich auch Mocks genannt.“ [5]

Das Mocken ist Gang und Gäbe beim Tests schreiben und nun durch ng-mocks auch im Angular Umfeld sehr viel einfacher. Einfach über npm installieren und wie folgt im Unit Test benutzen:

import {MockModule, MockComponent, MockProvider} from 'ng-mocks'

beforeAll(() => {
   return TestBed.configureTestingModule({
     imports: [
       MockModule(SharedModule), // mock
       ReactiveFormsModule, // real
     ],
     declarations: [
       MockComponent(AvatarComponent), // mock
       ProfileComponent, // real
     ],
     providers: [
       MockProvider(AuthService), // mock
     ],
  }).compileComponents();
});

Die zu testende Komponente benötigt Abhängigkeiten wie ShareModule, AvatarComponent und AuthService. Mithilfe von den ng-mocks Funktionen: MockModule, MockComponent, MockProvide sind diese gemockt.

Das Mocken von Komponenten, Services und Modulen ist sehr hilfreich. Dadurch konzentriere ich mich auf die Komponente von dem Test, ohne dass ich die anderen Abhängigkeiten beachten muss. Außerdem spare ich viel Boilerplate Code, da die Mocks ganz einfach erstellt sind. Durch die Einfachheit und den Nutzen von ng-mocks kann ich die Library nur jedem ans Herz legen der gute Unit Tests in Angular schreiben möchte.

Quellen: