Testen von Komponenten in Angular mit Jasmine: Teil 2, Dienste

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Final product image — What You'll Be Creating

Dies ist der zweite Teil der Serie zum Testen in Angular mit Jasmine. Im ersten Teil des Tutorials haben wir grundlegende Komponententests für die Pastebin-Klasse und die Pastebin-Komponente geschrieben. Die Tests, die anfänglich fehlschlugen, wurden später grün gemacht.

Überblick

Hier ist eine Übersicht darüber, woran wir im zweiten Teil des Tutorials arbeiten werden.

High level overview of things weve discussed in the previous tutorial and things we will be discussing in this tutorial

In diesem Tutorial werden wir:

neue Komponenten erstellen und weitere Unit-Tests schreiben
Tests für die Benutzeroberfläche der Komponente schreiben
Unit-Tests für den Pastebin-Dienst schreiben
eine Komponente mit Ein- und Ausgängen testen
eine Komponente mit Routen testen

Lassen Sie uns anfangen!

Hinzufügen einer Paste (Fortsetzung)

Wir waren in der Mitte des Prozesses des Schreibens von Komponententests für die AddPaste-Komponente. Hier haben wir im ersten Teil der Serie aufgehört.

  it('should display the `create Paste` button', () => {
     //There should a create button in view
      expect(element.innerText).toContain("create Paste");
  });

  it('should not display the modal unless the button is clicked', () => {
      //source-model is an id for the modal. It shouldn't show up unless create button is clicked
      expect(element.innerHTML).not.toContain("source-modal");
  })

  it('should display the modal when `create Paste` is clicked', () => {

      let createPasteButton = fixture.debugElement.query(By.css("button"));
      //triggerEventHandler simulates a click event on the button object
      createPasteButton.triggerEventHandler('click',null);
      fixture.detectChanges();
      expect(element.innerHTML).toContain("source-modal");
     
  })

})

Wie bereits erwähnt, werden wir keine strengen UI-Tests schreiben. Stattdessen werden wir einige grundlegende Tests für die Benutzeroberfläche schreiben und nach Möglichkeiten suchen, die Logik der Komponente zu testen.

Die Klickaktion wird mit der DebugElement.triggerEventHandler()-Methode ausgelöst, die Teil der Angular-Testdienstprogramme ist.

Bei der AddPaste-Komponente geht es im Wesentlichen darum, neue Pasten zu erstellen. Daher sollte die Vorlage der Komponente eine Schaltfläche zum Erstellen einer neuen Einfügung enthalten. Durch Klicken auf die Schaltfläche sollte ein "modales Fenster" mit der ID "source-modal" angezeigt werden, das ansonsten ausgeblendet bleiben sollte. Das modale Fenster wird mit Bootstrap erstellt. Daher finden Sie möglicherweise viele CSS-Klassen in der Vorlage.

Die Vorlage für die Add-Paste-Komponente sollte ungefähr so aussehen:

<!--- add-paste.component.html -->

<div class="add-paste">
    <button> create Paste </button>
  <div  id="source-modal" class="modal fade in">
    <div class="modal-dialog" >
      <div class="modal-content">
        <div class="modal-header"></div>
        <div class="modal-body"></div>
         <div class="modal-footer"></div>
     </div>
    </div>
  </div>
</div>

Der zweite und dritte Test geben keine Auskunft über die Implementierungsdetails der Komponente. Hier ist die überarbeitete Version von add-paste.component.spec.ts.

 it('should not display the modal unless the button is clicked', () => {
   
   //source-model is an id for the modal. It shouldn't show up unless create button is clicked
    expect(element.innerHTML).not.toContain("source-modal");

   //Component's showModal property should be false at the moment
    expect(component.showModal).toBeFalsy("Show modal should be initially false");
 })

 it('should display the modal when `create Paste` is clicked',() => {
   
    let createPasteButton = fixture.debugElement.query(By.css("button"));
    //create a spy on the createPaste  method
    spyOn(component,"createPaste").and.callThrough();
    
    //triggerEventHandler simulates a click event on the button object
    createPasteButton.triggerEventHandler('click',null);
    
    //spy checks whether the method was called
    expect(component.createPaste).toHaveBeenCalled();
    fixture.detectChanges();
    expect(component.showModal).toBeTruthy("showModal should now be true");
    expect(element.innerHTML).toContain("source-modal");
 })

Die überarbeiteten Tests sind insofern expliziter, als sie die Logik der Komponente perfekt beschreiben. Hier ist die AddPaste-Komponente und ihre Vorlage.

<!--- add-paste.component.html -->

<div class="add-paste">
  <button (click)="createPaste()"> create Paste </button>
  <div *ngIf="showModal" id="source-modal" class="modal fade in">
    <div class="modal-dialog" >
      <div class="modal-content">
        <div class="modal-header"></div>
        <div class="modal-body"></div>
         <div class="modal-footer"></div>
     </div>
    </div>
  </div>
</div>

/* add-paste.component.ts */

export class AddPasteComponent implements OnInit {

  showModal: boolean = false;
  // Languages imported from Pastebin class
  languages: string[] = Languages;
  
  constructor() { }
  ngOnInit() { }
  
  //createPaste() gets invoked from the template. 
  public createPaste():void {
  	this.showModal = true;
  }
}

Die Tests sollten weiterhin fehlschlagen, da der Spion von addPaste eine solche Methode im PastebinService nicht findet. Kehren wir zum PastebinService zurück und legen etwas Fleisch darauf.

Schreiben der Tests für Dienste

Bevor wir mit dem Schreiben weiterer Tests fortfahren, fügen wir dem Pastebin-Dienst Code hinzu.

public addPaste(pastebin: Pastebin): Promise<any> {
    return this.http.post(this.pastebinUrl, JSON.stringify(pastebin), {headers: this.headers})
	   .toPromise()
 	   .then(response =>response.json().data)
 	   .catch(this.handleError);
}

addPaste() ist die Methode des Dienstes zum Erstellen neuer Pasten. http.post gibt ein Observable zurück, das mit der toPromise()-Methode in ein Versprechen umgewandelt wird. Die Antwort wird in das JSON-Format umgewandelt, und alle Laufzeitausnahmen werden von handleError() abgefangen und gemeldet.

Sollten wir nicht Tests für Dienstleistungen schreiben, könnten Sie fragen? Und meine Antwort ist ein klares Ja. Services, die über Dependency Injection(DI) in Angular-Komponenten injiziert werden, sind ebenfalls fehleranfällig. Darüber hinaus sind Tests für Angular-Dienste relativ einfach. Die Methoden in PastebinService sollten den vier CRUD-Operationen ähneln, mit einer zusätzlichen Methode zur Behandlung von Fehlern. Die Methoden sind wie folgt:

handleError()
getPastebin()
addPaste()
updatePaste()
deletePaste()

Wir haben die ersten drei Methoden in der Liste implementiert. Versuchen wir, Tests für sie zu schreiben. Hier ist der Beschreibungsblock.

import { TestBed, inject } from '@angular/core/testing';
import { Pastebin, Languages } from './pastebin';
import { PastebinService } from './pastebin.service';
import { AppModule } from './app.module';
import { HttpModule } from '@angular/http';

let testService: PastebinService;
let mockPaste: Pastebin;
let responsePropertyNames, expectedPropertyNames;

describe('PastebinService', () => {
  beforeEach(() => {
   TestBed.configureTestingModule({
      providers: [PastebinService],
      imports: [HttpModule]
    });
    
    //Get the injected service into our tests
    testService= TestBed.get(PastebinService);
    mockPaste = { id:999, title: "Hello world", language: Languages[2], paste: "console.log('Hello world');"};

  });
});

Wir haben TestBed.get(PastebinService) verwendet, um den realen Service in unsere Tests einzufügen.

  it('#getPastebin should return an array with Pastebin objects',async() => {
     
    testService.getPastebin().then(value => {
      //Checking the property names of the returned object and the mockPaste object
      responsePropertyNames = Object.getOwnPropertyNames(value[0]);
      expectedPropertyNames = Object.getOwnPropertyNames(mockPaste);
     
      expect(responsePropertyNames).toEqual(expectedPropertyNames);
      
    });
  });

getPastebin gibt ein Array von Pastebin-Objekten zurück. Die Typprüfung zur Kompilierungszeit von TypeScript kann nicht verwendet werden, um zu überprüfen, ob der zurückgegebene Wert tatsächlich ein Array von Pastebin-Objekten ist. Daher haben wir Object.getOwnPropertNames() verwendet, um sicherzustellen, dass beide Objekte dieselben Eigenschaftsnamen haben.

Der zweite Test folgt:

  it('#addPaste should return async paste', async() => {
    testService.addPaste(mockPaste).then(value => {
      expect(value).toEqual(mockPaste);
    })
  })

Beide Tests sollten bestehen. Hier sind die restlichen Tests.

  it('#updatePaste should update', async() => {
    //Updating the title of Paste with id 1
    mockPaste.id = 1;
    mockPaste.title = "New title"
    testService.updatePaste(mockPaste).then(value => {
      expect(value).toEqual(mockPaste);
    })
  })

  it('#deletePaste should return null', async() => {
    testService.deletePaste(mockPaste).then(value => {
      expect(value).toEqual(null);
    })
  })

Überarbeiten Sie pastebin.service.ts mit dem Code für die Methoden updatePaste() und deletePaste().

//update a paste
public updatePaste(pastebin: Pastebin):Promise<any> {
	const url = `${this.pastebinUrl}/${pastebin.id}`;
	return this.http.put(url, JSON.stringify(pastebin), {headers: this.headers})
		.toPromise()
		.then(() => pastebin)
		.catch(this.handleError);
}
//delete a paste
public deletePaste(pastebin: Pastebin): Promise<void> {
	const url = `${this.pastebinUrl}/${pastebin.id}`;
	return this.http.delete(url, {headers: this.headers})
		.toPromise()
		.then(() => null )
		.catch(this.handleError);
}

Zurück zu den Komponenten

Die verbleibenden Anforderungen für die AddPaste-Komponente lauten wie folgt:

Durch Drücken der Schaltfläche Speichern sollte die addPaste()-Methode des Pastebin-Dienstes aufgerufen werden.
Wenn der Vorgang addPaste erfolgreich ist, sollte die Komponente ein Ereignis ausgeben, um die übergeordnete Komponente zu benachrichtigen.
Durch Klicken auf die Schaltfläche Schließen sollte die ID 'source-modal' aus dem DOM entfernt und die showModal-Eigenschaft auf false aktualisiert werden.

Da sich die obigen Testfälle mit dem Modalfenster befassen, ist es möglicherweise eine gute Idee, verschachtelte Beschreibungsblöcke zu verwenden.

describe('AddPasteComponent', () => {
  .
  .
  .
  describe("AddPaste Modal", () => {
  
    let inputTitle: HTMLInputElement;
    let selectLanguage: HTMLSelectElement;
    let textAreaPaste: HTMLTextAreaElement;
    let mockPaste: Pastebin;
    let spyOnAdd: jasmine.Spy;
    let pastebinService: PastebinService;
    
    beforeEach(() => {
      
      component.showModal = true;
      fixture.detectChanges();

      mockPaste = { id:1, title: "Hello world", language: Languages[2], paste: "console.log('Hello world');"};
      //Create a jasmine spy to spy on the addPaste method
      spyOnAdd = spyOn(pastebinService,"addPaste").and.returnValue(Promise.resolve(mockPaste));
      
    });
  
  });
});

Das Deklarieren aller Variablen an der Wurzel des Beschreibungsblocks ist aus zwei Gründen eine gute Vorgehensweise. Auf die Variablen kann innerhalb des Beschreibungsblocks zugegriffen werden, in dem sie deklariert wurden, und der Test wird lesbarer.

  it("should accept input values", () => {
      //Query the input selectors
      inputTitle = element.querySelector("input");
      selectLanguage = element.querySelector("select");
      textAreaPaste = element.querySelector("textarea");
      
      //Set their value
      inputTitle.value = mockPaste.title;
      selectLanguage.value = mockPaste.language;
      textAreaPaste.value = mockPaste.paste;
      
      //Dispatch an event
      inputTitle.dispatchEvent(new Event("input"));
      selectLanguage.dispatchEvent(new Event("change"));
      textAreaPaste.dispatchEvent(new Event("input"));

      expect(mockPaste.title).toEqual(component.newPaste.title);
      expect(mockPaste.language).toEqual(component.newPaste.language);
      expect(mockPaste.paste).toEqual(component.newPaste.paste);
    });

Der obige Test verwendet die querySelector()-Methode, um inputTitle, SelectLanguage und textAreaPaste ihre jeweiligen HTML-Elemente (<input>, <select> und <textArea>) zuzuweisen. Als Nächstes werden die Werte dieser Elemente durch die Eigenschaftswerte von mockPaste ersetzt. Dies entspricht einem Benutzer, der das Formular über einen Browser ausfüllt.

element.dispatchEvent(new Event("input")) löst ein neues Eingabeereignis aus, um die Vorlage darüber zu informieren, dass sich die Werte des Eingabefelds geändert haben. Der Test erwartet, dass die Eingabewerte in die newPaste-Eigenschaft der Komponente übertragen werden.

Deklarieren Sie die newPaste-Eigenschaft wie folgt:

1	newPaste: Pastebin = new Pastebin();

Und aktualisieren Sie die Vorlage mit dem folgenden Code:

<!--- add-paste.component.html -->
<div class="add-paste">
  <button type="button" (click)="createPaste()"> create Paste </button>
  <div *ngIf="showModal"  id="source-modal" class="modal fade in">
    <div class="modal-dialog" >
      <div class="modal-content">
        <div class="modal-header">
           <h4 class="modal-title"> 
        	 <input  placeholder="Enter the Title" name="title" [(ngModel)] = "newPaste.title" />
          </h4>
        </div>
        <div class="modal-body">
      	 <h5> 
      		<select name="category"  [(ngModel)]="newPaste.language" >
      			<option  *ngFor ="let language of languages" value={{language}}> {{language}} </option>
        	</select>
         </h5>     	
      	 <textarea name="paste" placeholder="Enter the code here" [(ngModel)] = "newPaste.paste"> </textarea>
      	</div>
      <div class="modal-footer">
        <button type="button" (click)="onClose()">Close</button>
        <button type="button" (click) = "onSave()">Save</button>
      </div>
     </div>
    </div>
  </div>
</div>

Die zusätzlichen Divs und Klassen gelten für das modale Fenster des Bootstraps. [(ngModel)] ist eine Angular-Direktive, die die bidirektionale Datenbindung implementiert. (click) = "onClose()" und (click) = "onSave()" sind Beispiele für Ereignisbindungstechniken, mit denen das Klickereignis an eine Methode in der Komponente gebunden wird. Weitere Informationen zu verschiedenen Datenbindungstechniken finden Sie in der offiziellen Vorlage Syntax-Anleitung von Angular.

Wenn ein Template Parse-Fehler auftritt, liegt dies daran, dass Sie das FormsModule nicht in die AppComponent importiert haben.

Fügen wir unserem Test weitere Spezifikationen hinzu.

 it("should submit the values", async() => {   
   component.newPaste = mockPaste;
   component.onSave();
    fixture.detectChanges();
    fixture.whenStable().then( () => {
        fixture.detectChanges();
        expect(spyOnAdd.calls.any()).toBeTruthy();
    });

 });
 
 it("should have a onClose method", () => {
    component.onClose();
    fixture.detectChanges();
    expect(component.showModal).toBeFalsy();
  })

component.onSave() entspricht dem Aufruf von triggerEventHandler() für das Element Save button. Da wir die Benutzeroberfläche für die Schaltfläche bereits hinzugefügt haben, klingt der Aufruf von component.save() sinnvoller. Die Expect-Anweisung prüft, ob der Spion angerufen wurde. Hier ist die endgültige Version der AddPaste-Komponente.

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Pastebin, Languages } from '../pastebin';
import { PastebinService } from '../pastebin.service';

@Component({
  selector: 'app-add-paste',
  templateUrl: './add-paste.component.html',
  styleUrls: ['./add-paste.component.css']
})
export class AddPasteComponent implements OnInit {

  @Output() addPasteSuccess: EventEmitter<Pastebin> = new EventEmitter<Pastebin>();
  showModal: boolean = false;
  newPaste: Pastebin = new Pastebin();
  languages: string[] = Languages;

  constructor(private pasteServ: PastebinService) { }

  ngOnInit() {  }
  //createPaste() gets invoked from the template. This shows the Modal
  public createPaste():void {
    this.showModal = true;
    
  }
  //onSave() pushes the newPaste property into the server
  public onSave():void {
    this.pasteServ.addPaste(this.newPaste).then( () => {
      console.log(this.newPaste);
        this.addPasteSuccess.emit(this.newPaste);
        this.onClose();
    });
  }
  //Used to close the Modal
  public onClose():void {
    this.showModal=false;
  }
}

Wenn der onSave-Vorgang erfolgreich ist, sollte die Komponente ein Ereignis ausgeben, das der übergeordneten Komponente (Pastebin-Komponente) signalisiert, ihre Ansicht zu aktualisieren. Zu diesem Zweck dient addPasteSuccess, eine Ereigniseigenschaft, die mit einem @Output-Dekorator dekoriert ist.

Das Testen einer Komponente, die ein Ausgabeereignis ausgibt, ist einfach.

 describe("AddPaste Modal", () => {
   
    beforeEach(() => {
    .
    .
   //Subscribe to the event emitter first
   //If the emitter emits something, responsePaste will be set
   component.addPasteSuccess.subscribe((response: Pastebin) => {responsePaste = response},)
      
    });
    
    it("should accept input values", async(() => {
    .
    .
      component.onSave();
      fixture.detectChanges();
      fixture.whenStable().then( () => {
        fixture.detectChanges();
        expect(spyOnAdd.calls.any()).toBeTruthy();
        expect(responsePaste.title).toEqual(mockPaste.title);
      });
    }));
  
  });


Der Test abonniert die Eigenschaft addPasteSuccess genau wie die übergeordnete Komponente. Die Erwartung gegen Ende bestätigt dies. Unsere Arbeit an der AddPaste-Komponente ist abgeschlossen.

Kommentieren Sie diese Zeile in pastebin.component.html aus:

1	<app-add-paste (addPasteSuccess)= 'onAddPaste($event)'> </app-add-paste>

Und aktualisieren Sie pastebin.component.ts mit dem folgenden Code.

1	//This will be invoked when the child emits addPasteSuccess event
2	public onAddPaste(newPaste: Pastebin) {
3	this.pastebin.push(newPaste);
4	}

Wenn Sie auf einen Fehler stoßen, liegt dies daran, dass Sie die AddPaste-Komponente in der Spezifikationsdatei der Pastebin-Komponente nicht deklariert haben. Wäre es nicht großartig, wenn wir alles, was unsere Tests erfordern, an einem einzigen Ort deklarieren und in unsere Tests importieren könnten? Um dies zu erreichen, können wir entweder das AppModule in unsere Tests importieren oder stattdessen ein neues Modul für unsere Tests erstellen. Erstellen Sie eine neue Datei und nennen Sie sie app-testing-module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

//Components
import { AppComponent } from './app.component';
import { PastebinComponent } from './pastebin/pastebin.component';
import { AddPasteComponent } from './add-paste/add-paste.component';
//Service for Pastebin

import { PastebinService } from "./pastebin.service";

//Modules used in this tutorial
import { HttpModule }    from '@angular/http';
import { FormsModule } from '@angular/forms';

//In memory Web api to simulate an http server
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';

@NgModule({
  declarations: [
    AppComponent,
    PastebinComponent,
    AddPasteComponent,
  ],
  
  imports: [
    BrowserModule, 
    HttpModule,
    FormsModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),
  ],
  providers: [PastebinService],
  bootstrap: [AppComponent]
})
export class AppTestingModule { }

Jetzt können Sie ersetzen:

 beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ AddPasteComponent ],
      imports: [ HttpModule, FormsModule ],
      providers: [ PastebinService ],
    })
    .compileComponents();
}));

mit:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [AppTestingModule]
    })
    .compileComponents();
  }));

Die Metadaten, die providers und declarations definieren, sind verschwunden. Stattdessen wird das AppTestingModule importiert. Das ist ordentlich! TestBed.configureTestingModule() sieht schlanker aus als zuvor.

Anzeigen, Bearbeiten und Löschen Einfügen

Die ViewPaste-Komponente übernimmt die Logik zum Anzeigen, Bearbeiten und Löschen einer Einfügung. Das Design dieser Komponente ähnelt dem, was wir mit der AddPaste-Komponente gemacht haben.

Mock design of the ViewPasteComponent in edit mode — Bearbeitungsmodus

Mock design of the ViewPasteComponent in view mode — Ansichtsmodus

Die Ziele der ViewPaste-Komponente sind nachfolgend aufgeführt:

Die Vorlage der Komponente sollte eine Schaltfläche namens Ansicht Einfügen enthalten.
Wenn Sie auf die Schaltfläche Ansicht Einfügen klicken, sollte ein modales Fenster mit der ID "source-modal" angezeigt werden.
Die Einfügedaten sollten sich von der übergeordneten Komponente zur untergeordneten Komponente ausbreiten und im modalen Fenster angezeigt werden.
Durch Drücken der Bearbeitungstaste sollte component.editEnabled auf true gesetzt werden (editEnabled wird verwendet, um zwischen Bearbeitungsmodus und Ansichtsmodus umzuschalten).
Durch Klicken auf die Schaltfläche Speichern sollte die updatePaste()-Methode des Pastebin-Dienstes aufgerufen werden.
Ein Klick auf die Schaltfläche Löschen sollte die Methode deletePaste() des Pastebin-Dienstes aufrufen.
Erfolgreiche Aktualisierungs- und Löschvorgänge sollten ein Ereignis auslösen, um die übergeordnete Komponente über Änderungen an der untergeordneten Komponente zu informieren.

Lassen Sie uns anfangen! Die ersten beiden Spezifikationen sind identisch mit den Tests, die wir zuvor für die AddPaste-Komponente geschrieben haben.

 it('should show a button with text View Paste', ()=> {
    expect(element.textContent).toContain("View Paste");
  });

  it('should not display the modal until the button is clicked', () => {
      expect(element.textContent).not.toContain("source-modal");
  });

Ähnlich wie zuvor werden wir einen neuen Beschreibungsblock erstellen und den Rest der Spezifikationen darin platzieren. Durch das Verschachteln von Beschreibungsblöcken auf diese Weise wird die Spezifikationsdatei besser lesbar und das Vorhandensein einer Beschreibungsfunktion aussagekräftiger.

Der verschachtelte Beschreibungsblock verfügt über eine beforeEach()-Funktion, mit der zwei Spione initialisiert werden, einer für die updatePaste()-Methode und der andere für die deletePaste()-Methode. Vergessen Sie nicht, ein mockPaste-Objekt zu erstellen, da unsere Tests darauf basieren.

beforeEach(()=> {
      //Set showPasteModal to true to ensure that the modal is visible in further tests
      component.showPasteModal = true;
      mockPaste = {id:1, title:"New paste", language:Languages[2], paste: "console.log()"};
      
      //Inject PastebinService
      pastebinService = fixture.debugElement.injector.get(PastebinService);
      
      //Create spies for deletePaste and updatePaste methods
      spyOnDelete = spyOn(pastebinService,'deletePaste').and.returnValue(Promise.resolve(true));
      spyOnUpdate = spyOn(pastebinService, 'updatePaste').and.returnValue(Promise.resolve(mockPaste));
     
      //component.paste is an input property 
      component.paste = mockPaste;
      fixture.detectChanges();
     
    })

Hier sind die Tests.

 it('should display the modal when the view Paste button is clicked',() => {
    
    fixture.detectChanges();
    expect(component.showPasteModal).toBeTruthy("Show should be true");
    expect(element.innerHTML).toContain("source-modal");
})

it('should display title, language and paste', () => {
    expect(element.textContent).toContain(mockPaste.title, "it should contain title");
    expect(element.textContent).toContain(mockPaste.language, "it should contain the language");
    expect(element.textContent).toContain(mockPaste.paste, "it should contain the paste");
});

Der Test setzt voraus, dass die Komponente über eine paste-Eigenschaft verfügt, die Eingaben von der übergeordneten Komponente akzeptiert. Zuvor haben wir ein Beispiel dafür gesehen, wie von der untergeordneten Komponente ausgegebene Ereignisse getestet werden können, ohne dass die Logik der Hostkomponente in unsere Tests einbezogen werden muss. In ähnlicher Weise ist es zum Testen der Eingabeeigenschaften einfacher, die Eigenschaft auf ein Scheinobjekt festzulegen und zu erwarten, dass die Werte des Scheinobjekts im HTML-Code angezeigt werden.

Das modale Fenster enthält viele Schaltflächen, und es wäre keine schlechte Idee, eine Spezifikation zu schreiben, um sicherzustellen, dass die Schaltflächen in der Vorlage verfügbar sind.

it('should have all the buttons',() => {
      expect(element.innerHTML).toContain('Edit Paste');
      expect(element.innerHTML).toContain('Delete');
      expect(element.innerHTML).toContain('Close');
});

Beheben wir die fehlgeschlagenen Tests, bevor wir komplexere Tests durchführen.

<!--- view-paste.component.html -->
<div class="view-paste">
    <button class="text-primary button-text"  (click)="showPaste()"> View Paste </button>
  <div *ngIf="showPasteModal" id="source-modal" class="modal fade in">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)='onClose()' aria-hidden="true">&times;</button>
          <h4 class="modal-title">{{paste.title}} </h4>
        </div>
        <div class="modal-body">
      	  <h5> {{paste.language}} </h5>     	
      	  <pre><code>{{paste.paste}}</code></pre>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="onClose()" data-dismiss="modal">Close</button>
          <button type="button" *ngIf="!editEnabled" (click) = "onEdit()" class="btn btn-primary">Edit Paste</button>
           <button type = "button"  (click) = "onDelete()" class="btn btn-danger"> Delete Paste </button>
        </div>
      </div>
    </div>
  </div>
</div>
       

/* view-paste.component.ts */

export class ViewPasteComponent implements OnInit {

  @Input() paste: Pastebin;
  @Output() updatePasteSuccess: EventEmitter<Pastebin> = new EventEmitter<Pastebin>();
  @Output() deletePasteSuccess: EventEmitter<Pastebin> = new EventEmitter<Pastebin>();

  showPasteModal:boolean ;
  readonly languages = Languages;
  
  constructor(private pasteServ: PastebinService) { }

  ngOnInit() {
      this.showPasteModal = false;
  }
  //To make the modal window visible
  public showPaste() {
  	this.showPasteModal = true;
  }
  //Invoked when edit button is clicked
  public onEdit() { }
  
  //invoked when save button is clicked
  public onSave() { }
  
  //invoked when close button is clicked
  public onClose() {
  	this.showPasteModal = false;
  }
  
  //invoked when Delete button is clicked
  public onDelete() { }
  
}

Es reicht nicht aus, die Paste anzeigen zu können. Die Komponente ist auch für das Bearbeiten, Aktualisieren und Löschen einer Paste verantwortlich. Die Komponente sollte über eine editEnabled-Eigenschaft verfügen, die auf true gesetzt wird, wenn der Benutzer auf die Schaltfläche Einfügen bearbeiten klickt.

it('and clicking it should make the paste editable', () => {

    component.onEdit();
    fixture.detectChanges();
    expect(component.editEnabled).toBeTruthy();
    //Now it should have a save button
    expect(element.innerHTML).toContain('Save');
      
});

Fügen Sie editEnabled=true; in die Methode onEdit() ein, um die erste expect-Anweisung zu löschen.

In der folgenden Vorlage wird mit der Anweisung ngIf zwischen dem Ansichtsmodus und dem Bearbeitungsmodus umgeschaltet. <ng-container> ist ein logischer Container, mit dem mehrere Elemente oder Knoten gruppiert werden.

  <div *ngIf="showPasteModal" id="source-modal" class="modal fade in" >

    <div class="modal-dialog">
      <div class="modal-content">
        <!---View mode -->
        <ng-container *ngIf="!editEnabled">
        
          <div class="modal-header">
            <button type="button" class="close" (click)='onClose()' data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title"> {{paste.title}} </h4>
          </div>
          <div class="modal-body">
              <h5> {{paste.language}} </h5>
      		  <pre><code>{{paste.paste}}</code>
            </pre>
      	
      	  </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" (click)="onClose()" data-dismiss="modal">Close</button>
            <button type="button" (click) = "onEdit()" class="btn btn-primary">Edit Paste</button>
            <button type = "button"  (click) = "onDelete()" class="btn btn-danger"> Delete Paste </button>

          </div>
        </ng-container>
        <!---Edit enabled mode -->
        <ng-container *ngIf="editEnabled">
          <div class="modal-header">
             <button type="button" class="close" (click)='onClose()' data-dismiss="modal" aria-hidden="true">&times;</button>
             <h4 class="modal-title"> <input *ngIf="editEnabled" name="title" [(ngModel)] = "paste.title"> </h4>
          </div>
          <div class="modal-body">
            <h5>
                <select name="category"  [(ngModel)]="paste.language">
                  <option   *ngFor ="let language of languages" value={{language}}> {{language}} </option>
                </select>
            </h5>

           <textarea name="paste" [(ngModel)] = "paste.paste">{{paste.paste}} </textarea>
          </div>
          <div class="modal-footer">
             <button type="button" class="btn btn-default" (click)="onClose()" data-dismiss="modal">Close</button>
             <button type = "button" *ngIf="editEnabled" (click) = "onSave()" class="btn btn-primary"> Save Paste </button>
             <button type = "button"  (click) = "onDelete()" class="btn btn-danger"> Delete Paste </button>      
          </div>
        </ng-container>
      </div>
    </div>
  </div>

Die Komponente sollte über zwei Output()-Ereignisemitter verfügen, einen für die updatePasteSuccess-Eigenschaft und einen für deletePasteSuccess. Der folgende Test bestätigt Folgendes:

Die Vorlage der Komponente akzeptiert Eingaben.
Die Vorlageneingaben sind an die paste-Eigenschaft der Komponente gebunden.
Wenn der Aktualisierungsvorgang erfolgreich ist, gibt updatePasteSuccess ein Ereignis mit dem aktualisierten Einfügen aus.

it('should take input values', fakeAsync(() => {
      component.editEnabled= true;
      component.updatePasteSuccess.subscribe((res:any) => {response = res},)
      fixture.detectChanges();

      inputTitle= element.querySelector("input");
      inputTitle.value = mockPaste.title;
      inputTitle.dispatchEvent(new Event("input"));
      
      expect(mockPaste.title).toEqual(component.paste.title);
    
      component.onSave();
       //first round of detectChanges()
      fixture.detectChanges();

      //the tick() operation. Don't forget to import tick
      tick();

      //Second round of detectChanges()
      fixture.detectChanges();
      expect(response.title).toEqual(mockPaste.title);
      expect(spyOnUpdate.calls.any()).toBe(true, 'updatePaste() method should be called');
      
}))

Der offensichtliche Unterschied zwischen diesem Test und den vorherigen ist die Verwendung der fakeAsync-Funktion. fakeAsync ist mit async vergleichbar, da beide Funktionen zum Ausführen von Tests in einer asynchronen Testzone verwendet werden. Mit fakeAsync sieht Ihr Look-Test jedoch synchroner aus.

Die tick()-Methode ersetzt fixture.whenStable(). Then(), und der Code ist aus Entwicklersicht besser lesbar. Vergessen Sie nicht, fakeAsync zu importieren und von @angular/core/testing anzukreuzen.

Schließlich ist hier die Spezifikation zum Löschen einer Paste.

it('should delete the paste', fakeAsync(()=> {
      
      component.deletePasteSuccess.subscribe((res:any) => {response = res},)
      component.onDelete();
      fixture.detectChanges();
      tick();
      fixture.detectChanges();
      expect(spyOnDelete.calls.any()).toBe(true, "Pastebin deletePaste() method should be called");
      expect(response).toBeTruthy();
}))
    

Wir sind fast fertig mit den Komponenten. Hier ist der endgültige Entwurf der ViewPaste-Komponente.

/*view-paste.component.ts*/
export class ViewPasteComponent implements OnInit {

  @Input() paste: Pastebin;
  @Output() updatePasteSuccess: EventEmitter<Pastebin> = new EventEmitter<Pastebin>();
  @Output() deletePasteSuccess: EventEmitter<Pastebin> = new EventEmitter<Pastebin>();

  showPasteModal:boolean ;
  editEnabled: boolean;
  readonly languages = Languages;
  
  constructor(private pasteServ: PastebinService) { }

  ngOnInit() {
      this.showPasteModal = false;
  	  this.editEnabled = false;
  }
  //To make the modal window visible
  public showPaste() {
  	this.showPasteModal = true;
  }
  //Invoked when the edit button is clicked
  public onEdit() {
  	this.editEnabled=true;
  }
  //Invoked when the save button is clicked
  public onSave() {
 	this.pasteServ.updatePaste(this.paste).then( () => {
  		this.editEnabled= false;
        this.updatePasteSuccess.emit(this.paste);
  	})
  }
 //Invoked when the close button is clicked
  public onClose() {
  	this.showPasteModal = false;
  }
 
 //Invoked when the delete button is clicked
  public onDelete() {
	  this.pasteServ.deletePaste(this.paste).then( () => {
        this.deletePasteSuccess.emit(this.paste);
 	    this.onClose();
 	  })
  }
  
}

Die übergeordnete Komponente (pastebin.component.ts) muss mit Methoden aktualisiert werden, um die von der untergeordneten Komponente ausgegebenen Ereignisse zu verarbeiten.

/*pastebin.component.ts */
  public onUpdatePaste(newPaste: Pastebin) {
    this.pastebin.map((paste)=> { 
       if(paste.id==newPaste.id) {
         paste = newPaste;
       } 
    })
  }

  public onDeletePaste(p: Pastebin) {
   this.pastebin= this.pastebin.filter(paste => paste !== p);
   
  }

Hier ist die aktualisierte pastebin.component.html:

<tbody>
    	<tr *ngFor="let paste of pastebin">
			<td> {{paste.id}} </td>
			<td> {{paste.title}} </td>
			<td> {{paste.language}} </td>
			
			<td> <app-view-paste [paste] = paste (updatePasteSuccess)= 'onUpdatePaste($event)' (deletePasteSuccess)= 'onDeletePaste($event)'> </app-view-paste></td> 
		</tr>
	</tbody>
	<app-add-paste (addPasteSuccess)= 'onAddPaste($event)'> </app-add-paste> 

Einrichten von Routen

Um eine geroutete Anwendung zu erstellen, benötigen wir einige weitere Lagerkomponenten, damit wir einfache Routen erstellen können, die zu diesen Komponenten führen. Ich habe eine Info-Komponente und eine Kontaktkomponente erstellt, damit wir sie in eine Navigationsleiste einfügen können. AppComponent enthält die Logik für die Routen. Wir werden die Tests für Routen schreiben, nachdem wir damit fertig sind.

Importieren Sie zunächst RouterModule und Routes in AppModule (und AppTestingModule).

1	import { RouterModule, Routes } from '@angular/router';

Definieren Sie als Nächstes Ihre Routen und übergeben Sie die Routendefinition an die RouterModule.forRoot-Methode.

const appRoutes :Routes = [
  { path: '', component: PastebinComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent},
  ];
 
 imports: [
    BrowserModule, 
    FormsModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    RouterModule.forRoot(appRoutes),
   
  ],

Alle am AppModule vorgenommenen Änderungen sollten auch am AppTestingModule vorgenommen werden. Wenn Sie jedoch beim Ausführen der Tests auf einen Fehler "No base href set" stoßen, fügen Sie dem providers-Array Ihres AppTestingModule die folgende Zeile hinzu.

1	{provide: APP_BASE_HREF, useValue: '/'}

Fügen Sie nun den folgenden Code zu app.component.html hinzu.

<nav class="navbar navbar-inverse">
   <div class="container-fluid">
       <div class="navbar-header">
      	   <div class="navbar-brand" >{{title}}</div>
      </div>
   	  <ul class="nav navbar-nav bigger-text">
    	  <li>
	    	 <a routerLink="" routerLinkActive="active">Pastebin Home</a>
	      </li>
	      <li>
	     	 <a routerLink="/about" routerLinkActive="active">About Pastebin</a>
	      </li>
	      <li>
	     	 <a routerLink="/contact" routerLinkActive="active"> Contact </a>
	       </li>
	  </ul>
   </div>
</nav>
  <router-outlet></router-outlet>



routerLink ist eine Direktive, mit der ein HTML-Element an eine Route gebunden wird. Wir haben es hier mit dem HTML-Ankertag verwendet. RouterOutlet ist eine weitere Anweisung, die die Stelle in der Vorlage markiert, an der die Ansicht des Routers angezeigt werden soll.

Das Testen von Routen ist etwas schwierig, da es mehr Interaktion mit der Benutzeroberfläche erfordert. Hier ist der Test, der prüft, ob die Ankerverbindungen funktionieren.

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [AppTestingModule],
      
    }).compileComponents();
  }));


  it(`should have as title 'Pastebin Application'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('Pastebin Application');
  }));


  it('should go to url',
    fakeAsync((inject([Router, Location], (router: Router, location: Location) => {
      let anchorLinks,a1,a2,a3;
    let fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
     //Create an array of anchor links
     anchorLinks= fixture.debugElement.queryAll(By.css('a'));
     a1 = anchorLinks[0];
     a2 = anchorLinks[1];
     a3 = anchorLinks[2];
     
     //Simulate click events on the anchor links
     a1.nativeElement.click();
     tick();
     
     expect(location.path()).toEqual("");

     a2.nativeElement.click();
     tick()
     expect(location.path()).toEqual("/about");

      a3.nativeElement.click();
      tick()
      expect(location.path()).toEqual("/contact");
    
  }))));
});

Wenn alles gut geht, sollten Sie so etwas sehen.

Screenshot of Karma test runner on Chrome displaying the final test results

Letzter Schliff

Fügen Sie Ihrem Projekt ein ansprechendes Bootstrap-Design hinzu und bedienen Sie Ihr Projekt, falls Sie dies noch nicht getan haben.

ng serve

Zusammenfassung

Wir haben eine vollständige Anwendung von Grund auf in einer testgetriebenen Umgebung geschrieben. Ist das nicht toll? In diesem Tutorial haben wir gelernt:

entwerfen einer Komponente mithilfe des ersten Testansatzes
schreiben von Komponententests und grundlegenden UI-Tests für Komponenten
über Angulars Testdienstprogramme und wie man sie in unsere Tests einbezieht
Informationen zur Verwendung von async() und fakeAsync() zum Ausführen asynchroner Tests
die Grundlagen des Routings in Angular und des Schreibens von Routentests

Ich hoffe, Ihnen hat der TDD-Workflow gefallen. Bitte kontaktieren Sie uns über die Kommentare und teilen Sie uns Ihre Meinung mit!

1	/* view-paste.component.ts */
2
3	export class ViewPasteComponent implements OnInit {
4
5	@Input() paste: Pastebin;
6	@Output() updatePasteSuccess: EventEmitter<Pastebin> = new EventEmitter<Pastebin>();
7	@Output() deletePasteSuccess: EventEmitter<Pastebin> = new EventEmitter<Pastebin>();
8
9	showPasteModal:boolean ;
10	readonly languages = Languages;
11
12	constructor(private pasteServ: PastebinService) { }
13
14	ngOnInit() {
15	this.showPasteModal = false;
16	}
17	//To make the modal window visible
18	public showPaste() {
19	this.showPasteModal = true;
20	}
21	//Invoked when edit button is clicked
22	public onEdit() { }
23
24	//invoked when save button is clicked
25	public onSave() { }
26
27	//invoked when close button is clicked
28	public onClose() {
29	this.showPasteModal = false;
30	}
31
32	//invoked when Delete button is clicked
33	public onDelete() { }
34
35	}

1	/view-paste.component.ts/
2	export class ViewPasteComponent implements OnInit {
3
4	@Input() paste: Pastebin;
5	@Output() updatePasteSuccess: EventEmitter<Pastebin> = new EventEmitter<Pastebin>();
6	@Output() deletePasteSuccess: EventEmitter<Pastebin> = new EventEmitter<Pastebin>();
7
8	showPasteModal:boolean ;
9	editEnabled: boolean;
10	readonly languages = Languages;
11
12	constructor(private pasteServ: PastebinService) { }
13
14	ngOnInit() {
15	this.showPasteModal = false;
16	this.editEnabled = false;
17	}
18	//To make the modal window visible
19	public showPaste() {
20	this.showPasteModal = true;
21	}
22	//Invoked when the edit button is clicked
23	public onEdit() {
24	this.editEnabled=true;
25	}
26	//Invoked when the save button is clicked
27	public onSave() {
28	this.pasteServ.updatePaste(this.paste).then( () => {
29	this.editEnabled= false;
30	this.updatePasteSuccess.emit(this.paste);
31	})
32	}
33	//Invoked when the close button is clicked
34	public onClose() {
35	this.showPasteModal = false;
36	}
37
38	//Invoked when the delete button is clicked
39	public onDelete() {
40	this.pasteServ.deletePaste(this.paste).then( () => {
41	this.deletePasteSuccess.emit(this.paste);
42	this.onClose();
43	})
44	}
45
46	}

1	describe('AppComponent', () => {
2	beforeEach(async(() => {
3	TestBed.configureTestingModule({
4	imports: [AppTestingModule],
5
6	}).compileComponents();
7	}));
8
9
10	it(`should have as title 'Pastebin Application'`, async(() => {
11	const fixture = TestBed.createComponent(AppComponent);
12	const app = fixture.debugElement.componentInstance;
13	expect(app.title).toEqual('Pastebin Application');
14	}));
15
16
17	it('should go to url',
18	fakeAsync((inject([Router, Location], (router: Router, location: Location) => {
19	let anchorLinks,a1,a2,a3;
20	let fixture = TestBed.createComponent(AppComponent);
21	fixture.detectChanges();
22	//Create an array of anchor links
23	anchorLinks= fixture.debugElement.queryAll(By.css('a'));
24	a1 = anchorLinks[0];
25	a2 = anchorLinks[1];
26	a3 = anchorLinks[2];
27
28	//Simulate click events on the anchor links
29	a1.nativeElement.click();
30	tick();
31
32	expect(location.path()).toEqual("");
33
34	a2.nativeElement.click();
35	tick()
36	expect(location.path()).toEqual("/about");
37
38	a3.nativeElement.click();
39	tick()
40	expect(location.path()).toEqual("/contact");
41
42	}))));
43	});