spectator
1.0.0
Ein leistungsstarkes Werkzeug, um Ihre Winkeltests zu vereinfachen
Zu den Zuschauern hilft Ihnen die gesamte Grunzarbeit, die Sie mit lesbaren, eleganten und optimierten Unit -Tests entfernen.
✅ Unterstützung für das Testen von Winkelkomponenten, Richtlinien und Diensten
✅ Einfache DOM -Abfrage
✅ Reinigen Sie die API zum Auslösen von Tastatur-/Maus-/Touch -Ereignissen
✅ Testen ng-content
✅ benutzerdefinierte Jasmine/Scherz -Matcher (tohaveclass, todsabled ..)
✅ Unterstützung für das Routing -Test
✅ HTTP -Testunterstützung
✅ integrierte Unterstützung für Einstiegskomponenten
✅ integrierte Unterstützung für Komponentenanbieter
✅ Auto-Making-Anbieter
✅ stark tippt
✅ Scherzunterstützung
Sponsoring helfen bei der fortgesetzten Entwicklung und Aufrechterhaltung von NGNEAT -Bibliotheken. Erwägen Sie, Ihr Unternehmen zu bitten, NgNeat als Kern für seine Geschäfts- und Anwendungsentwicklung zu sponsern.
Erhöhen Sie Ihre Unterstützung, indem Sie Goldsponsor werden, und lassen Sie Ihr Logo prominent auf unserem Readme in den Top 5 Repositories vorgestellt.
Steigern Sie Ihren Hintergrund, indem Sie goldene Sponsor werden, und genießen Sie das Rampenlicht mit Ihrem Logo, das prominent in den Top 3 Repositories auf unserem Readme zeigt.
Werden Sie Bronze -Sponsor und holen Sie sich Ihr Logo auf unserem Readme auf GitHub.
Merkmale
Inhaltsverzeichnis
Installation
NPM
Garn
Testen von Komponenten
Verschachtelte aufschiebbare Ansichten
String -Selektor
Typ Selector
DOM -Selektor
Tests wählen Sie Elemente aus
Spottkomponenten
Testen von Winkelmodulen einzelner Komponenten/Richtlinien
Benutzerdefinierte Ereignisse
Event -Schöpfer
Ereignisse API
Tastaturhelfer
Maushelfer
Abfragen
Aufschubansichten
Testen mit Host
Benutzerdefinierte Hostkomponente
Testen mit Routing
Navigation auslösen
Integrationstest mit RouterTestingModule
Routingoptionen
Testen von Richtlinien
Testdienste
Zusätzliche Optionen
Testrohre
Verwenden der benutzerdefinierten Hostkomponente
Spottanbieter
Verspottung über Abhängigkeiten
Verspottete Konstruktorabhängigkeiten
Scherzunterstützung
Testen mit HTTP
Globale Injektionen
Komponentenanbieter
Benutzerdefinierte Matcher
Schemata
Standardschematsammlung
Arbeiter -Zuschauer- und Scherzprobe -Repo- und Karma -Vergleich
Kernteam
Mitwirkende
npm install @ngneat/spectator --save-dev
yarn add @ngneat/spectator --dev
Erstellen Sie eine Komponentenfabrik, indem Sie die Funktion createComponentFactory() verwenden und die von Ihnen testende Komponentenklasse übergeben. Der createComponentFactory() gibt eine Funktion zurück, die eine neue Komponente in jedem it -Block erzeugt:
Import {Spectator, CreateComponentFactory} aus '@ngNeat/Spectator'; Import {buttonComponent} aus './button.comPonent';
Lassen Sie den Zuschauer: Spectator <buttonComponent>;
const createComponent = createComponentFactory (buttonComponent);
voranach (() => SPECTATOR = CreateComponent ());
IT ("sollte standardmäßig eine Erfolgsklasse haben", () => {erwarteten (spectator.query ('button')). tohaveclass ('Erfolg');
});
IT ('sollte den Klassennamen gemäß dem [className] input', () => {spectator.setInput ('className', 'danger'); erwarten (Spectator.query ('Taste')). tohaveclass ('festlegen ('. ' Gefahr '); erwarten (Spectator.Query (' Button ')). Nicht.tohaveclass (' Erfolg ');
});}); Die Funktion createComponentFactory kann optional die folgenden Optionen nutzen, die die Optionen für Winkel -Testmodul erweitern:
const createComponent = CreateComponentFactory ({{
Komponente: Button Component,
Importe: [],
Anbieter: [],
Deklarationen: [],
Eintragskomponenten: [],
Komponentierer: [], // überschreiben die Anbieter der Komponenten
componentViewProviders: [], // überschreiben die Ansichtsanbieter der Komponente der Komponente
overdiemodules: [], // überschreiben Module überschreiben
Oversidecomponenten: [], // Überschreibungskomponenten im Falle einer eigenständigen Komponenten des Testens
Übergeordnete Direktiven: [], // Überschreiber -Richtlinien im Falle einer Standalone -Richtlinie überschreiben
Overridepipes: [], // Überschreien von Rohren beim Testen von eigenständigem Rohr
Mocks: [], // Anbieter, die automatisch verspottet werden
Komponentmocks: [], // Komponentenanbieter, die automatisch verspottet werden
componentViewProvidersMocks: [], // Komponentenansichtanbieter, die automatisch verspottet werden
DetectChanges: Falsch, // standardmäßig true
deklarecomponent: falsch, // standardmäßig true
Behinderungen: Falsch, // standardmäßig true
flach: wahr, // standardmäßig zu falsch
DeferBlockBehavior: DeferBlockBehavior // standardmäßig von DeferBlockBehavior.Playthrough}); Die Funktion createComponent() nutzt optional die folgenden Optionen:
it ('sollte ...', () => {
SPECTATOR = CreateComponent ({// Die Komponenteneingabesprops: {title: 'click'}, // überschreien die Anbieter der Komponenten // Beachten Sie, dass Sie es einmal in der `createComponentFactory`Providers deklarieren müssen: []/, ob die Änderungserkennung ausgeführt werden soll (standardmäßig true) DetectChanges: Falsch
});
erwarten (SPECTATOR.QUERY ('Button')). TohaveText ('Click');}); Durch die Bereitstellung von overrideComponents -Optionen im Bereich unserer Funktion createComponent() können wir die Art und Weise definieren, die eigenständige eigenständige Komponente und seine Abhängigkeiten überschrieben haben
@Komponente({
Selector: `App-Standalone-with-import`,
Vorlage: `<div id =" Standalone "> eigenständige Komponente mit Import!
Importe: [Standalonecomponent withDependency],
eigenständig: true,}) exportieren Sie die Klasse StandaloneWithimportsComponent {} @Component ({{{
Selector: `App-Standalone-mit Abhängigkeit",,
Vorlage: `<div id =" StandaloneWithDependency "> eigenständige Komponente mit Abhängigkeit! </div>`,,
eigenständig: true,}) exportieren Klasse StandalonecomponentwithDependency {
Konstruktor (public Query: queryService) {}}@component ({{{{
Selector: `App-Standalone-mit Abhängigkeit",,
Vorlage: `<div id =" StandaloneWithDependency "> eigenständige Komponente mit Override -Abhängigkeit! </div>`,,
Standalone: Richtig,}) Exportklasse MockstandaloneComponent withDependency {
constructor () {}} it ('sollte ...', () => {
const spectator = createHostfactory ({Komponente: eigenständiges WithimportsComponent, Vorlage: `<Div> <App-Standalone-with-Import> </App-Standalone-with-Import> </div>`, Überdienne {Importe: [StandaloneComponentWithDependency]}, Add: {Importe: [MockstandaloneComponentWithDependency]},},],],],
});
erwarten (host.query ('#Standalone)). ToContainText (' eigenständige Komponente mit Import! ');
erwarten (host.query ('#StandaloneWithDependency')). ToContainText ('eigenständige Komponente mit Überschreibungsabhängigkeit!');}); Die Methode createComponent() gibt eine Instanz des Spectator zurück, die die folgende API enthüllt:
fixture - Die Akte der getesteten Komponente
component - die Instanz der getesteten Komponente
element - Das native Element der getesteten Komponente
debugElement - Das Debug -Element des getesteten Spiels
flushEffects() - Bietet einen Wrapper für TestBed.flushEffects()
inject() - stellt einen Wrapper für TestBed.inject() bereit:
const service = spectator.inject (queryService); const from componentinjector = true; const Service = Spectator.inject (QueryService, FromComponentinjector);
detectChanges() - FIRTECTCHANGES auf dem getesteten Element/Host:
SPECTATOR.DETECTCHANGES ();
detectComponentChanges() - läuft detectChanges auf der getesteten Komponente (nicht auf dem host ). Sie benötigen diese Methode in seltenen Fällen, wenn Sie einen host verwenden und die getestete Komponente ist onPush und Sie möchten ihn zwingen, einen Änderungserkennungszyklus auszuführen.
SPECTATOR.DETECTComponentChanges ();
setInput() - ändert den Wert eines @Input () der getesteten Komponente. Die Methode wird ngOnChanges mit SimpleChanges manuell ausgeführt, wenn es existiert.
it ('sollte ...', () => {
SPECTATOR.SETINPUT ('ClassName', 'Danger');
Spectator.setInput ({className: 'danger'
});}); output - Gibt ein beobachtbares @Output () der getesteten Komponente zurück:
IT ('sollte das $ Ereignis auf klicks absenden', () => {
Ausgabe lassen;
SPECTATOR.OUTPUT ('Click'). abonnieren (result => (output = result));
spectator.component.onclick ({type: 'klick'});
erwarten (output) .toEqual ({type: 'klick'});}); tick(millis?: number) - Führen Sie die Funktion fakeasync tick() aus und rufen Sie detectChanges() an:
IT ('sollte mit Tick arbeiten', fakeasync (() => {
SPECTATOR = CreateComponent (ZippyComponent);
spectator.component.update ();
erwarten (spectator.component.updatedasync) .TobeFalsy ();
SPECTATOR.TICK (6000);
erwarten (spectator.component.updatedasync) .not.tobeFalsy ();})) Jedes der Ereignisse kann eine SpectatorElement akzeptieren, die eines der folgenden sein kann:
Typ SpectatorElement = String | Element | Debugelement | ElementRef | Fenster | Dokument | Domselektor;
Wenn nicht bereitgestellt, ist das Standardelement das Hostelement der untersuchten Komponente.
click() - löst ein Klickereignis aus:
SPECTATOR.CLICK (SPECTatorElement); Spectator.click (Bytext ('Element')); blur() - löst ein Unschärfeereignis aus:
SPECTATOR.BLUR (SPECTatorElement); Spectator.blur (Bytext ('Element'));Beachten Sie, dass Blur () nur dann funktioniert, wenn das Element fokussiert ist. Details.
focus() - löst ein Fokusereignis aus:
SPECTATOR.FOCUS (SPECTatorElement); Spectator.focus (Bytext ('Element')); typeInElement() - Simulation des Benutzer -Typs:
SPECTATOR.TYPEINELEMENT (Wert, ZuschauerElement); Spectator.Typeinelement (Wert, Bytext ('Element')); dispatchMouseEvent() - löst ein Mausereignis aus:
SPECTATOR.DISPATCHMOUSEEvent (SpectatorElement, 'Mouseout'); Spectator.DispatchMouseEvent (SpectatorElement, 'Mouseout'), x, y, Ereignis); Spectator ('Element'), 'Mouseout', x, y, Ereignis); dispatchKeyboardEvent() - löst ein Tastaturereignis aus:
SPECTATOR.DISPATCHKEYBOARDEVENT (SPECTatorElement, 'KeyUp', 'Escape'); Spectator.DispatchKeyboardEvent (SpectatorElement, 'KeyUp', {Key: 'Escape', KeyCode: 27}) Spectator.DispatchKeyboardEvent (ByText ('Element'), 'KeyUp -KeyUp -Bereich', 'KeyUp - ',' Escape '). dispatchTouchEvent() - löst ein Touch -Ereignis aus:
SPECTATOR.DISPATCHTOUCHED (SPECTATORELEMENT, TYP, X, Y); SPECTATOR.DISPATTTOUCHEPENT (BYTEXT ('Element'), Typ, x, y);Sie können benutzerdefinierte Ereignisse (@Output () von untergeordneten Komponenten) mithilfe der folgenden Methode auslösen:
SPECTATOR.TERGERGEREventHandler (MyChildComponent, 'Mycustomevent', 'eventValue'); Spectator.ThergerventHandler (MyChildComponent, 'Mycustomevent', 'EventValue', {root: wahr}; ',' eventValue '); Spectator.triggerEventHandler (' App-Child-Component ',' MyCustomeEvent ',' eventValue ', {root: true});Falls Sie Ereignisse unabhängig von jeder Vorlage (z. B. in den Moderator -Diensten) testen möchten, können Sie die zugrunde liegenden Ereignisschöpfer zurückfallen. Sie liefern im Grunde genommen die gleiche Signatur ohne das vorhergehende Element.
const keyboardEvent = createKeyboardEvent ('keyUp', 'arrowdown'/ *, targetElement */); const mouseEvent = CreateMouseEvent ('mausout'); const toucheVent = CreateTouchEvent ('TouchMove'); const fakeEvent = createFakeEvent ('Input'); Spectator.Keyboard.pressenter (); Spectator.Keyboard.pressescape (); Spectator.Keyboard.PressTab (); Spectator.Keyboard.Pressbackspace (); Spectator.Keyboard. ctrl.a '); Spectator.Keyboard.pressKey (' ctrl.shift.a '); Spectator.mouse.ContextMenu ('. Selector'); Spectator.mouse.dblClick ('. Selector'); Beachten Sie, dass jede der oben genannten Methoden auch detectChanges() ausgeführt wird.
Die Zuschauer -API enthält bequeme Methoden zur Abfrage des DOM als Teil eines Tests: query , queryAll , queryLast , queryHost und queryHostAll . Alle Abfragemethoden sind polymorph und ermöglichen es Ihnen, anhand einer der folgenden Techniken abzufragen.
Geben Sie einen String -Selektor (im gleichen Stil wie bei der Verwendung von jQuery oder document.querySelector) über, um Elemente abzufragen, die diesem Pfad im DOM entsprechen. Diese Abfragemethode entspricht dem von Angulars by.css -Prädikat. Beachten Sie, dass native HTML -Elemente zurückgegeben werden. Zum Beispiel:
// Gibt einen einzelnen htmlelementspectator.query ('div> ul.nav li: First-child') zurück; // Gibt ein Array aller übereinstimmenden htmlelementSpectator.queryall zurück ('div> ul.nav li'); // Abfrage aus dem document contextspectator.Query ('div', {root: true}); Spectator.Query ('App-Child', {Read: ChildServiceService}); Geben Sie einen Typ (z. B. eine Komponente, Richtlinie oder Anbieterklasse) an, um Instanzen dieser Art im DOM abzufragen. Dies entspricht dem von Angular von By.directive Prädikat. Sie können optional einen zweiten Parameter übergeben, um ein bestimmtes Injektions -Token aus den Injektoren der Matching -Elemente zu lesen. Zum Beispiel:
// Gibt eine einzelne Instanz von MyComponent (falls vorhanden) Spectator.Query (myComponent) zurück; // Gibt die Instanz von "someservice" zurück, die in der Instanz von "myComponent" gefunden wurden, das im DOM (falls vorhanden) Spectator.query (mycomponent "existiert , {read: someservice}); Spectator.Query (MyComponent, {Read: elementRef}); Host.querylast (ChildComponent);Mit Spectator können Sie mit Selektoren, die von der Dom-Testing-Bibliothek inspiriert sind, nach Elementen abfragen. Die verfügbaren Selektoren sind:
Spectator.Query (By Placeholder ('Bitte geben Sie Ihre E -Mail -Adresse ein)); Spectator.Query (Byvalue (' nach Wert ')); Spectator.Query (Bytitle (' nach Titel '); Spectator.Query (Byalttext (' by ') ALT -Text ')); Spectator.Query (bylabel (' by label '); SPECTATOR.QUERY (BYTEXT (' BY Text ')); Spectator.Query (Bytext (' nach Text ', {selector:' #Some. Selector '})); Spectator.Query (bytextContent (' nach Textinhalt ', {Selektor:' #Some .Seselector '})); SPECTATOR.QUY (Byrole (' Kontrollkästchen ', {Checked: true})); Der Unterschied zwischen byText und byTextContent besteht darin, dass der erstere den Text in verschachtelten Elementen nicht übereinstimmt.
In diesem folgenden HTML byText('foobar', {selector: 'div'}) wird beispielsweise nicht mit der folgenden div übereinstimmt, aber byTextContent wird:
<div> <span> foo </span> <spann> bar </span> </div>
Mit Spectator können Sie nach verschachtelten Elementen innerhalb eines übergeordneten Elements abfragen. Dies ist nützlich, wenn Sie mehrere Instanzen derselben Komponente auf der Seite haben und nach Kindern innerhalb eines bestimmten. Der übergeordnete Selektor ist ein String -Selektor, mit dem das übergeordnete Element ermittelt wird. Der übergeordnete Selektor wird als zweiter Parameter an die Abfragemethoden übergeben. Zum Beispiel:
SPECTATOR.QUERY (ChildComponent, {Elternteil: '#Elternkomponent-1'}); Spectator.queryall (ChildComponent, {Elternteil: '#Elternkomponent-1'}); Mit SPECTOR können Sie die Elemente <select></select> Elemente problemlos testen und unterstützt Multi -Select.
Beispiel:
IT ('sollte die richtigen Optionen für Multi -Select', () => {festlegen
const select = spectator.Query ('#test-multi-select') als htmlSelectelement;
SPECTATOR.SelectOption (select, ['1', '2']);
Erwartung (ausgewählt). TOHAVESELECTECTEPTIONS (['1', '2']);}); IT ('sollte die korrekte Option für Standard -Auswahl festlegen', () => {
const select = spectator.Query ('#Test-Single-Select') als htmlSelectElement;
Spectator.SelectOption (select, '1');
erwarten (auswählen). TOHAVESELECTECTEPTIONS ('1');}); Außerdem können Sie überprüfen, ob Ihr change für jeden ausgewählten Element korrekt handelt. Sie können dies deaktivieren, wenn Sie die Auswahl vorlegen müssen, ohne das Änderungsereignis zu versenden.
API:
SPECTATOR.SelectOption (SelectElement: htmlSelectElement, Optionen: String | String [] | HtmloptionElement |
Beispiel:
IT ('sollte die korrekte Anzahl von Änderungsereignissen entsenden', () => {
const onchangespy = spyon (Spectator.comPonent, 'Handlechange');
const select = spectator.Query ('#test-onchange-select') als htmlSelectElement;
SPECTATOR.SelectOption (select, ['1', '2'], {emiteVents: true});
erwarten (auswählen). TOHAVESELECTECTEPTIONS (['1', '2']);
Erwartung (Onchangespy). TOHAVEBEENCALLEDTIME (2);}); IT ('sollte nicht die korrekte Anzahl von Änderungenereignissen entsenden', () => {
const onchangespy = spyon (Spectator.comPonent, 'Handlechange');
const select = spectator.Query ('#test-onchange-select') als htmlSelectElement;
SPECTATOR.SelectOption (select, ['1', '2'], {emiteVents: false});
erwarten (auswählen). TOHAVESELECTECTEPTIONS (['1', '2']);
erwarten (onchangespy) .not.tohaveBeencalledTimes (2);}); Sie können auch HTMLOptionElement (S) als Argumente an selectOption und den toHaveSelectedOptions -Match übergeben. Dies ist besonders nützlich, wenn Sie [ngValue] -Bindung für die <option> verwenden:
It ('sollte die richtige Option für einzelne auswählen, wenn das Element übergeben wird', () => {
const select = spectator.Query ('#Test-Single-Select-Element') als htmlSelectElement;
SPECTATOR.SELECTOPTION (SELECT, SPECTATOR.QUERY (BYTEXT ('TWE') AS HTMLOPTIONELEMENT);
erwarten (select) .tohaveSelectedOptions (Spectator.Query (Bytext ('zwei') als htmloptionElement);}); Wenn Sie Komponenten verspotten müssen, können Sie die NG-Mocks-Bibliothek verwenden. Anstatt CUSTOM_ELEMENTS_SCHEMA zu verwenden, das einige Probleme ausblenden kann und Ihnen nicht hilft, Eingänge, Ausgänge usw. festzulegen, verspotten ng-mocks die Eingänge, Ausgänge usw. für Sie.
Beispiel:
Import {createHostfactory} aus '@ngNeat/spectator'; import {mockComponent} aus 'ng-mocks'; import {foocomponent} aus './path/to/foo.comPonent';const createHost = createHostfactory ({{{{{{{{{{{{{{{{{{{{{{{{{
Komponente: YourComponentTotest,
Deklarationen: [MockComponent (Foocomponent)
]});Komponenten (oder Anweisungen), die in ihrem eigenen Modul deklariert werden, können getestet werden, indem das Komponentenmodul in der Importliste der Komponentenfabrik zusammen mit der Komponente definiert wird. Zum Beispiel:
const createComponent = CreateComponentFactory ({{
Komponente: Button Component,
Importe: [ButtonComponentModule],}); Wenn der Spectator jedoch so verwendet wird, fügt Spectator die ButtonComponent in den Erklärungen des intern erstellten neuen Moduls innen hinzu. Daher sehen Sie den folgenden Fehler:
Type ButtonComponent is part of the declarations of 2 modules [...]
Es ist möglich, den Zuschauern zu sagen, dass sie die Komponente nicht zu den Erklärungen des internen Moduls hinzufügen soll und stattdessen das explizit definierte Modul wie es ist. Legen Sie einfach die declareComponent -Eigenschaft der Fabrikoptionen auf false ein:
const createComponent = CreateComponentFactory ({{
Komponente: Button Component,
Importe: [ButtonComponentmodule],
deklarecomponent: false,}); Setzen Sie bei der Verwendung von CreateRectiveFactory die declareDirective Eigenschaft der Fabrikoptionen auf false :
const erstellte irective = CreateDIRectiveFactory ({{
Komponente: HighlightComponent,
Importe: [HighlightComponentModule],
deklariert: false,}); Der Zuschauer bietet eine bequeme API, um auf die aufwidrigen Ansichten zuzugreifen ( @defer {} ).
Greifen Sie mit der Methode des spectator.deferBlock(optionalIndex) auf den gewünschten Aufschubblock zu. Der optionalIndex -Parameter ist optional und ermöglicht es Ihnen, den Index des Aufschubblocks anzugeben, auf den Sie zugreifen möchten.
Zugriff auf den ersten Aufschubblock : Rufen Sie einfach spectator.deferBlock() .
Zugriff auf nachfolgende Aufschubblöcke : Verwenden Sie den entsprechenden Index als Argument. Zum Beispiel greift spectator.deferBlock(1) auf den zweiten Block (Null-basierte Indexierung) zu.
spectator.deferBlock(optionalIndex)
renderComplete() - macht den vollständigen Zustand des Aufschubblocks.
renderPlaceholder() - macht den Platzhalterstaat des Aufschubblocks.
renderLoading() - Rendert den Ladezustand des Aufschubblocks.
renderError() - Rendert den Fehlerzustand des Aufschubblocks.
Beispiel:
@Component ({Selector: 'App-CMP', Vorlage: `@Defer (auf dem Ansichtsfenster) {<Div> Der vollständige Status des ersten Aufschubblocks </div> <!-Parent Complete State->} @placeholder { <Div> Platzhalter </div>} `,}) Klasse DummyComponent {} const CreateComponent = CreateComponentFactory ({Komponente: DummyComponent, DeferBlockBehavior: DeferBlockBehavior.manual,}); > {// const Spectator = createComponent (); Um auf Zustände innerhalb verschachtelter Aufschubblöcke zuzugreifen, rufen Sie die Verkettung von deferBlock -Methoden aus der zurückgegebenen Blockzustandsmethode auf.
Beispiel: Zugriff auf den verschachtelten vollständigen Staat:
// Annahme von "Spectator.DeferBlock (0) .renderComplete ()` den vollständigen Zustand des übergeordneten Defer -Blockconst -ParentCompletestate = auf den Zuschauer erwarten. = erwarten Sie parantCompletEs.renderComplete (). DeferBlock ();
Vollständiges Beispiel :
@Component ({Selector: 'App-CMP', Vorlage: `@Defer (auf dem Ansichtsfenster) {<Div> Der vollständige Status des ersten Aufschubblocks </div> <!-übergeordneter Zustand-> @Defer {< Div> Vollständiger Zustand des verschachtelten Aufschubblocks </div> <!-verschachtelter vollständiger Zustand->}} @placeholder {<div> Platzhalter </div>} `,}) Klasse DummyComponent {} const CreateComponent = CreateComponentFactory (( {Komponente: DummyComponent, DeferBlockBehavior: DeferBlockBehavior.manual,}); IT ('sollte den ersten verschachtelten vollständigen Zustand', async () => {// const Spectator ordnen vollständige staatliche const completestate = erwarten Sie Spectator.DeferBlock () Block aufschieben ');});Das Testen einer Komponente mit einer Hostkomponente ist eine elegantere und leistungsstärkere Technik, um Ihre Komponente zu testen. Es gibt Ihnen im Grunde die Möglichkeit, Ihre Tests genauso zu schreiben, wie Sie Ihren Code schreiben. Lassen Sie es uns in Aktion sehen:
Import {createHostfactory, SpectatorHost} aus '@ngNeat/Spectator'; beschreiben ('ZippyComponent', () => {
Lassen Sie Spectator: SPECTatorHost <ZippyComponent>;
const createHost = createHostfactory (ZippyComponent);
IT ('sollte den Titel aus der Host -Eigenschaft anzeigen', () => {spectator = createHost (`<zippy [title] =" title "> </zippy>`, {hostProps: {title: 'spectator is fantastisch'} }); erwarten (Spectator.Query ('. Zippy__Title')). tohaveText ('Spectator ist großartig');
});
IT ('sollte das Wort "schließen", wenn öffnen', () => {spectator = createHost (`<Zippy title =" Zippy title "> Zippy -Inhalt </Zippy>`); Spectator.click ('. Zippy__title' ); erwarten (Spectator.Query ('. Pfeil')). tohavext ('close'); erwarten (Spectator.Query ('. Arrow')). Nicht.tohaveText ('offen');
});}); Die Host -Methode gibt eine Instanz von SpectatorHost zurück, die Spectator mit der folgenden zusätzlichen API erweitert:
hostFixture - Die Akte des Hosts
hostComponent - die Komponenteninstanz des Hosts
hostElement - das native Element des Gastgebers
hostDebugElement - Das Debug -Element des Hosts des Hosts
setHostInput - ändert den Wert eines @Input() der Hostkomponente
queryHost - Lesen Sie mehr über Abfragen beim Zuschauer
queryHostAll - Lesen Sie mehr über die Abfragung beim Zuschauer
Das Einstellen von Eingängen direkt in einer Komponente mit setInput oder props ist beim Testen mit einer Hostkomponente nicht möglich. Eingänge sollten stattdessen über hostProps oder setHostInput eingestellt und an Ihre Komponente in der Vorlage übergeben werden.
Manchmal ist es hilfreich, Ihre eigene Host -Implementierung zu bestehen. Wir können eine benutzerdefinierte Hostkomponente an den createHostFactory() übergeben, der die Standardeinstellung ersetzt:
@Component ({Selector: 'Custom-Host', Vorlage: ''}) Klasse CustomHostComponent {
title = 'benutzerdefinierter hostcomponent';} beschreiben ('mit benutzerdefinierter Hostkomponente', function () {
Lassen Sie Spectator: SpectatorHost <ZippyComponent, CustomHostComponent>;
const createHost = createHostfactory ({Komponente: ZippyComponent, Host: CustomHostComponent
});
IT ('Sollte den Host -Komponenten -Titel anweisen', () => {Spectator = createHost (`<zippy [title] =" title "> </zippy>`); erwarten (Spectator.Query ('. Zippy__Title'))) .TOHAVETEXT ('benutzerdefinierte HostComponent');
});}); Für Komponenten, die Routing verwenden, steht eine spezielle Fabrik zur Verfügung, die die Standardeinstellung erweitert und eine Stubbed ActivatedRoute bietet, damit Sie zusätzliche Routing -Optionen konfigurieren können.
beschreiben ('productDetailsComponent', () => {
Lassen Sie den Zuschauer: Spectatorrouting <productDetailsComponent>;
const createComponent = croateoutingfactory ({Komponente: productDetailsComponent, Params: {productId: '3'}, Daten: {Titel: 'Einige Titel'}
});
voranach (() => SPECTATOR = CreateComponent ());
IT ('Sollte Routendatentitel anzeigen', () => {erwarten (Spectator.Query ('. Titel')). tohaveText ('ein Titel');
});
IT ('sollte auf Routenänderungen reagieren', () => {Spectator.SetRouteParam ('ProductID', '5'); // Ihr Test hier ...
});}); Die SpectatorRouting -API enthält bequeme Methoden zum Aktualisieren der aktuellen Route:
Schnittstelle Spectatorrouting <C> erweitert Spectator <c> {
/*** simuliert eine Routennavigation durch Aktualisierung der Parameter, Queryparams und Datenbeobachtbaren Streams. */
TriggerNavigation (Optionen?: Routenoptionen): void;
/*** Aktualisiert die Routenparameter und löst eine Routennavigation aus. */
setRouteParam (Name: String, Wert: String): void;
/*** Aktualisiert die Routenabfrageparameter und löst eine Routennavigation aus. */
setRoutequeryparam (Name: String, Wert: String): void;
/*** Aktualisiert die Routendaten und löst eine Routennavigation aus. */
setRoutedata (Name: String, Wert: Any): void;
/*** Aktualisiert das Routenfragment und löst eine Routennavigation aus. */
setRoutefragment (Fragment: String | null): void;
/*** Aktualisiert die Routen -URL und löst eine Routennavigation aus. */
setRouteurl (URL: urlSegment []): void;}RouterTestingModule Wenn Sie die stubsEnabled -Option auf false festlegen, können Sie eine reale Routing -Konfiguration übergeben und einen Integrationstest mithilfe des RouterTestingModule von Angular einrichten.
Beachten Sie, dass dies Versprechungen zur Lösung erfordert. Eine Möglichkeit, damit umzugehen, besteht darin, Ihren Test asynchronisiert zu machen:
beschreiben ('Routing -Integrationstest', () => {
const createComponent = createroutingFactory ({Komponente: MyComponent, Deklarationen: [OtherComponent], Stubsenabled: false, Routes: [{Pfad: '', Komponente: MyComponent}, {Path: 'Foo', Komponent: Andere Component}]
});
IT ('sollte mit dem Router -Link weg navigieren', async () => {const Spectator = createComponent (); // Warten Sie, bis Versprechen auflösen. Achten Sie auf den StandortExect (SPECTATOR.inject (Ort) .Path ()). tobe ('/'); // Klicken Versprechen zu lösen ... erwarten Sie die Spectator.
});}); Die createRoutesFactory -Funktion kann die folgenden Optionen über die Standard -Zuschaueroptionen ergreifen:
params : Anfangsparameter für ActivatedRoute Stub verwendet
queryParams : Erste Abfrageparameter in ActivatedRoute Stub verwenden
data : Anfangsdaten für ActivatedRoute Stub verwendet
fragment : Erstes Fragment, das in ActivatedRoute Stub verwendet werden soll
url : Erste URL -Segmente, die in ActivatedRoute Stub verwendet werden sollen
root : Der Wert für root für den ActivatedRoute -Stub
parent : Der Wert für parent für den ActivatedRoute -Stub
children : Der Wert für children für den ActivatedRoute -Stub
firstChild : Der Wert für firstChild für den ActivatedRoute -Stub
stubsEnabled (Standard: true ): Aktiviert den ActivatedRoute -Stub, wenn auf false eingestellt wird, verwendet er stattdessen RouterTestingModule
routes : Wenn stubsEnabled auf False eingestellt ist, können Sie eine Routes für RouterTestingModule übergeben
Es gibt eine spezielle Testfabrik zum Testen von Richtlinien. Nehmen wir an, wir haben die folgende Richtlinie:
@Directive ({selector: '[highlight]'}) exportklasse highlightDirective {
@Hostbinding ('style.background-color') HintergrundColor: String;
@HostListener ('mouseover')
onhover () {this.backgroundcolor = '#000000';
}
@HostListener ('Mouseout')
onleave () {this.backgroundcolor = '#ffffff';
}}Lassen Sie uns sehen, wie wir Anweisungen leicht mit Spectator testen können:
beschreiben ('highlightDirective', () => {
Lassen Sie den Zuschauer: Spectatordirective <HighlightDirective>;
const erstellte IRECTIREL = CreateDIRectiveFactory (highlightDirective);
voranach (() => {spectator = createDirective (`<div light light> testing highlight Richtlinie </div>`);
});
IT ('sollte die Hintergrundfarbe ändern', () => {Spectator.DispatchMouseeEvent (Spectator.Element, 'Mouseover'); erwartete (Spectator.Element). TOHAVESTYLE ({BINTERGYCOLOR: 'RGBA (0,0,0, 0.1) ) '}); Spectator.DispatchMouseeEvent (Spectator.Element,' Mouseout '); erwartete (Spectator.Element) .Tohavestyle ({HintergrundColor:' #fff '});
});
IT ('sollte die Instanz bekommen', () => {const Instance = Spectator.directive; erwartete (Instanz) .ToBEDEFINED ();
});}); Das Einstellen von Eingängen direkt in einer Direktive mit setInput oder props ist nicht möglich. Eingänge sollten stattdessen über hostProps oder setHostInput eingestellt und an Ihre Richtlinie in der Vorlage übergeben werden.
Das folgende Beispiel zeigt, wie Sie einen Dienst mit Zuschauer testen:
Import {createServiceFactory, SpectatorService} aus '@ngNeat/Spectator'; importieren {authService} aus 'Auth.Service.ts'; beschreiben ('AuthService', () => {
Lassen Sie den Zuschauer: Zuschauerverservice <authService>;
const createService = createServiceFactory (AuthService);
voranach (() => SPECTATOR = CreateService ());
IT ('sollte nicht in', () => {erwarten (Spectator.Service.isLoggedin ()). tobefalsy ();
});}); Die Funktion createService() gibt SpectatorService mit den folgenden Eigenschaften zurück:
service - Erhalten Sie eine Instanz des Dienstes
inject() - Ein Proxy für Winkel TestBed.inject()
Es ist auch möglich, ein Objekt mit Optionen zu übergeben. Wenn Sie beispielsweise einen Dienst testen, möchten Sie häufig seine Abhängigkeiten verspotten, da wir uns auf den getesteten Dienst konzentrieren.
Zum Beispiel:
@Injectable () exportklasse authservice {
Konstruktor (Privatdatesservice: DateService) {}
isLoggedin () {if (this.dateService.isexpired ('timestamp')) {return false;} return true;
}} In diesem Fall können wir die Abhängigkeit DateService verspotten.
Import {createServiceFactory, SpectatorService} aus '@ngNeat/Spectator'; importieren {authService} aus 'Auth.Service.ts'; beschreiben ('AuthService', () => {
Lassen Sie den Zuschauer: Zuschauerverservice <authService>;
const createService = createServiceFactory ({Service: AuthService, Anbieter: [], EntryComponents: [], Mocks: [DateService]
});
voranach (() => SPECTATOR = CreateService ());
IT ('sollte in', () => {const dateservice = spectator.inject (DateService); datesservice.isexpired.and.ReturnValue (falsch); erwarten (Spectator.Service.isloggedInge ()). TOBTRUTHY ();
});});Das folgende Beispiel zeigt, wie Sie ein Rohr mit Zuschauer testen:
Import {SpectatorPipe, CreatePipeFactory} aus '@ngNeat/spectator'; import {statsservice} from './stats.service'i; {
Lassen Sie Spectator: Spectatorpipe <Sumpipe>;
const createPipe = CreatePipeFactory (Sumpipe);
IT ('sollte die angegebene Liste der Zahlen (Vorlage) zusammenfassen', () => {Spectator = createPipe (`{{{[1, 2, 3] | ('6');
});
IT ('sollte die angegebene Liste der Zahlen (Prop)', () => {spectator = createPipe ({{{prop | sum}} `, {hostProps: {prop: [1, 2, 3]}} zusammenfassen ); erwarten (Zuschauer.
});
IT ('sollte die Summe zum Dienst delegieren', () => {const sum = () => 42; const provider = {geben: statsservice, useValue: {sum}}; Spectator = CreatePipe (`{{Prop | sum}} `, {hostProps: {prop: [2, 40]}, Anbieter: [Anbieter]}); erwarten (Spectator.Element) .tohaveText ('42 ');
});}); Die Funktion createPipe() gibt SpectatorPipe mit den folgenden Eigenschaften zurück:
hostComponent - Instanz der Hostkomponente
debugElement - Das Debug -Element des Geräts um die Hostkomponente
element - Das native Element der Hostkomponente
detectChanges() - Ein Proxy für TestBed.fixture.detectChanges()
inject() - Ein Proxy für Winkel TestBed.inject()
Das Einstellen von Eingängen direkt auf einem Rohr mit setInput oder props ist nicht möglich. Eingänge sollten stattdessen über hostProps oder setHostInput eingestellt und an Ihr Rohr in der Vorlage geleitet werden.
Das folgende Beispiel zeigt, wie Sie ein Rohr mit einer benutzerdefinierten Hostkomponente testen:
Import {Komponente, Eingabe} aus '@angular/core'; importieren {SpectatorPipe, createPipeFactory} aus '@ngNeat/Spectator'; importieren {durchschnittlich} aus './Aververweichung.Pipe'; service ';@component ({{
Vorlage: `<div> {{Prop | avg}} </div> `}) Klasse CustomHostComponent {
@Input () public prop: number [] = [1, 2, 3];} beschreiben ('AveragePipe', () => {
Lassen Sie den Zuschauer: SPECTATORPIPE <IveralPipe>;
const createPipe = CreatePipeFactory ({Pipe: Durchschnittspipe, Host: CustomHostComponent
});
IT ("sollte den Durchschnitt einer bestimmten Liste von Zahlen berechnen", () => {Spectator = createPipe (); erwarten (Spectator.Element) .tohaveText ('2');
});
IT ('sollte zu 0 führen, wenn die Liste der Zahlen leer ist', () => {spectator = createPipe ({hostProps: {prop: []}}); erwarten (Spectator.Element) .tohaveText ('0');
});
IT ('sollte die Berechnung an den Dienst delegieren', () => {const avg = () => 42; const provider = {geben ]}); erwarten (Spectator.Element). TOHAVETEXT ('42 ');
});});Für jede Zuschauerfabrik können wir jeden Anbieter leicht verspotten.
Jeder Dienst, den wir an die mocks -Immobilie übergeben, wird mit der Funktion mockProvider() verspottet. Die mockProvider() -Funktion wandelt jede Methode in einen Jasmine -Spion um. (dh jasmine.createSpy() ).
Hier sind einige der Methoden, die es enthüllt:
datesService.isexpired.and.callThrough (); dateService.isexpired.and.callfake (() => fake); dateService.isexpired.and.Throwerror ('error'); dateService.isexpired.andcallfake () => fake)) ; Wenn Sie jedoch Scherz als Test -Framework verwenden und stattdessen seinen Spottmechanismus verwenden möchten, importieren Sie den mockProvider() von @ngneat/spectator/jest . Dadurch wird automatisch die Funktion jest.fn() .
mockProvider() enthält keine Eigenschaften. Falls Sie Eigenschaften auf Ihrem Schein haben müssen, können Sie das 2. Argument verwenden:
const createService = createServiceFactory ({{
Service: AuthService,
Anbieter: [MockProvider (ONDERSERVICE, {Name: 'Martin', Emitter: neues Thema (), mockedMethod: () => 'verspottet'})
],});Wenn eine Komponente auf einen Dienst beruht, der in der Oninit-Lebenszyklusmethode verspottet wird, muss die Änderung der Erkennung deaktiviert werden, bis die Dienste injiziert wurden.
Um dies zu konfigurieren, ändern Sie die Methode createComponent so, dass die Option detectChanges auf False eingestellt ist, und rufen Sie dann detectChanges auf dem Zuschauer nach der Einrichtung der injizierten Dienste manuell auf.
const createComponent = CreateComponentFactory ({{
Komponente: WeatherDashboardComponent}); IT ('sollte die Wetter -API auf init', () => {aufrufen
const Spectator = CreateComponent ({DetectChanges: Falsch
});
const weatherservice = spectator.inject (weatherDataapi);
Weatherservice.getweatherData.andreturn (von (MockweatherData));
SPECTATOR.DETECTCHANGES ();
erwarten (weatherservice.getweatherData). TOAVEBEENCALLED ();});Wenn eine Komponente darauf angewiesen ist, dass ein Dienst in seinem Konstruktor verspottet wird, müssen Sie das Schein erstellen und konfigurieren und das Schein beim Erstellen der Komponente bereitstellen.
const createComponent = CreateComponentFactory ({{
Komponente: WeatherDashboardComponent}); IT ('sollte die Wetterapi im Konstruktor aufrufen', () => {
const weatherservice = CreateSespyObject (WeatherDataapi);
Weatherservice.getweatherData.andreturn (von (MockweatherData));
SPECTATOR = CreateComponent ({Anbieter: [{geben: WeatherDataapi, UseValue: Weatherservice}]
});
erwarten (weatherservice.getweatherData). TOAVEBEENCALLED ();});Standardmäßig verwendet Spectator Jasmine zum Erstellen von Spione. Wenn Sie stattdessen Scherz als Test-Framework verwenden, können Sie den Zuschauer mit scherzkompatiblen Spione erstellen lassen.
Importieren Sie einfach eine der folgenden Funktionen aus @ngneat/spectator/jest (anstelle von @ngNeat/Spectator), und es wird Scherz anstelle von Jasmine verwenden. createComponentFactory() , createHostFactory() , createServiceFactory() , createHttpFactory() , mockProvider() .
Import {createServiceFactory, SpectatorService} aus '@ngNeat/spectator/scherzen'; import {authService} from './auth.service'iimport {dateService} from'. => {
Lassen Sie den Zuschauer: Zuschauerverservice <authService>;
const createService = createServiceFactory ({Service: AuthService, Mocks: [DateService]
});
voranach (() => SPECTATOR = CreateService ());
IT ('sollte nicht in', () => {const dateservice = spectator.inject <DateService> (DateService); dateService.isexpired.MockReturnValue (true); erwarten (Spectator.Service.isloggedin ()). TEBEFALSY (TRUE) (TRUE) (TRUE). );
});
IT ('sollte in', () => {const dateservice = spectator.inject <DateService> (dateservice); datesservice.isexpired.mockReturnValue (false); erwarten (Spectator.Service.isloggedin ()). ;
});}); Wenn Sie das Komponentenschema verwenden, können Sie das --jest -Flag angeben, damit die Scherzimporte verwendet werden. Um den Standard zu importieren, aktualisieren Sie angular.json :
"Schematische } }
Der Zuschauer wird viel einfacher erleichtert, die das Angular HTTP -Modul verwenden. Nehmen wir beispielsweise an, Sie haben Dienst mit drei Methoden, eine GET, eine ein Beitrag und eine durchführt gleichzeitige Anfragen:
Exportklasse todosdataService {
Konstruktor (private httpclient: httpclient) {}
getTodos () {return this.httpclient.get ('api/todos');
}
posttodo (id: number) {return this.httpclient.post ('api/todos', {id});
}
CollectTodos () {return merge (this.httpclient.get ('/api1/todos'), this.httpclient.get ('/api2/Todos'));
}}Der Test für den obigen Service sollte wie:
Import {createHttpfactory, httpMethod} aus '@ngNeat/Spectator'; importieren {todosDataService} aus './todos-data.service'ide cribe('httpclient testing', () => {{{{{
Lassen Sie den Zuschauer: SpectatorHttp <todosdataService>;
const createShttp = createHttpfactory (todosDataService);
voranach (() => spectator = createHttp ());
IT ('kann httpclient.get', () => {spectator.service.gettodos (). abonnCribe (); Spectator.exectone ('api/todos', httpMethod.get) testen;
});
IT ('kann httpclient.post', () => {spectator.service.posttodo (1) .SubScribe (); const req = spectator.exectone ('api/todos', httpMethod.post); erwarten (req. request.body ['id']). gift (1);
});
IT ('CAN Testen Sie die aktuellen HTTP -Anforderungen', () => {Spectator.service.GetTodos (). abonnieren (); const reqs = spectator.exectConcurrent ([{url: '/api1/todos', Methode: httpMethod.get.get.get. }, {Url: '/api2/Todos', Methode: httpMethod.get}]); Spectator.flushall (reqs, [{}, {}, {}]);
});}); Wir müssen eine HTTP -Fabrik erstellen, indem wir die Funktion createHttpFactory() verwenden und den von Ihnen testen Sie den Dienst übergeben. Der createHttpFactory() gibt eine Funktion zurück, die aufgerufen werden kann, um eine Instanz von SpectatorHttp mit den folgenden Eigenschaften zu erhalten:
controller - ein Proxy für eckige HttpTestingController
httpClient - ein Proxy für Winkel HttpClient
service - die Serviceinstanz
inject() - Ein Proxy für Winkel TestBed.inject()
expectOne() - Erwarten Sie, dass eine einzige Anfrage gestellt wurde, die der angegebenen URL und der Methode entspricht, und geben Sie ihre Scheinanforderung zurück
Es ist möglich, Injektionen zu definieren, die für jeden Test verfügbar sein werden, ohne dass sie in jedem Test neu deaktiviert werden müssen:
// test.tsimport {defineGlobalsinjections} aus '@ngneat/spectator'; import {translocomodule} aus '@ngNeat/transloco'; definEgloBalsinjections ({{{{{{{{{{{{{
Importe: [Translocomodule],}); Bitte beachten Sie, dass defineGlobalsInjections() aufgerufen werden muss, bevor die Module geladen werden. Im Standard -Angular test.ts bedeutet dies vor dieser Zeile:
context.keys (). map (Kontext);
Standardmäßig werden die ursprünglichen Komponentenanbieter (z. B. die providers der @Component ) nicht berührt.
In den meisten Fällen möchten Sie jedoch in Ihrem Test auf die Anbieter der Komponenten zugreifen oder sie durch Mocks ersetzen.
Zum Beispiel:
@Komponente({
Vorlage: '...',
Anbieter: [FooService]}) Klasse foocomponent {
Konstruktor (privater FooService: FooService} {}
// ...} Verwenden Sie die componentProviders , um den FooService -Anbieter zu ersetzen:
const createComponent = CreateComponentFactory ({{
Komponente: Fookomponent,
componentProviders: [{geben: fooService, useValue: therelse}
]}) Oder verspotten Sie den Dienst mithilfe von componentMocks :
const createComponent = CreateComponentFactory ({{
Komponente: Fookomponent,
componentmocks: [fooService]}); Um auf den Anbieter zuzugreifen, erhalten Sie ihn vom Komponenteninjektor mit dem Parameter fromComponentInjector :
SPECTATOR.inject (FooService, True)
Auf die gleiche Weise können Sie auch die Komponentenansichtsanbieter überschreiben, indem Sie die componentViewProviders und componentViewProvidersMocks verwenden.
Dieselben Regeln gelten auch für Anweisungen mit den Parametern der directiveProviders und directiveMocks .
erwarten ('. Zippy__Content'). Nicht.toexist (); erwarten ('. Zippy__Content'). tohavelength (3); erwarten ('. Zippy__Content'). tohaveid ('id'); erwarten (Spectator.query ('. zippy ')). tohaveattribute (' id ',' zippy '); erwarten (spectator.Query ('. Zippy ')). tohaveTtribute ({id:' zippy '}); erwarten (Spectator.Query ('. Checkbox '' )). tohaveProperty ('geprüft', true); erwarten (Spectator.Query ('. img')). toHaveProperty ({Src: 'Assets/Myimg.jpg'}); erwartete (Spectator.query ('. Img' )). ToContainProperty ({Src: 'myimg.jpg'}); // Beachten Sie, dass tohaveclass Klassen nur in strenger Reihenfolge akzeptiert. Wenn die Reihenfolge irrelevant ist, deaktivieren Sie den strengen Modus manuell. Zippy__Content '). Nicht.tohaveclass (' Class-B, Class-A '); erwarten ('. Zippy__Content '). tohaveclass ([' Klasse-A ',' Class-B ']; erwarten ('. Zippy__Content '' ) .not.tohaveclass (['Klasse-B', 'class-a']); erwartete ('. Zippy__Content'). tohaveclass ('class', {strict: false}); erwartete ('. Zippy__Content'). tohaveclass ('class-a, class-b', {strict: false}); erwarten ('. Zippy__Content'). tohaveclass ('class-b, class-a', {strict: false}); erwartete ('. Zippy__Content '). tohaveclass ([' Klasse-B ',' class-a '], {strict: false}); erwarten ('. Zippy__Content '). tohaveclass ([' Klasse-B ',' Class-A '] , {strict: false}); // Beachten Sie, dass TohaveText nur nach der Existenz einer Zeichenfolge sucht, nicht wenn die Zeichenfolge genau gleich ist. Wenn Sie überprüfen möchten, ob die Zeichenfolge vollständig gleich ist, verwenden Sie toHavexactText.//. Beachten Der Zuschauer überprüft den Text jedes Array -Elements gegen den Index des Elements Found.exect ('. Zippy__Content'). TohaveText ('Inhalt'); erwarten ('. Zippy__Content'). TohaveText (['Inhalt A', 'Inhalt B b ']); erwarten ('. Zippy__Content '). tohaveText ((text) => text.includes (' .. ')); erwarten ('. Zippy__Content ') ') .tocontainText ([' Inhalt A ',' Inhalt B ']); erwartete ('. Zippy__Content '). toHavexactText (' Inhalt '); erwarten ('. Zippy__Content '). tohavexacttext ([' Inhalt A ',', ',', ',', ',', ',', ',', ',', ' Inhalt b ']); erwarten ('. Zippy__Content '). TohavexacttrimmedText (' Inhalt '); erwarten ('. Zippy__Content '). ToHavexacttrimmedText ([' Inhalt A ',' Inhalt B ']; ) toHaveValue ('Wert'); erwartete ('. Zippy__Content'). toContainValue ('Wert'); // Beachten ('.zippy__Content'). TohaveValue (['Wert a', 'Wert b']); erwarten ('. Zippy__Content'). ToContainValue (['Wert A', 'Wert b']); . .CheckBox '). Tobechecked (); erwartete ('. Kontrollkästchen '). tobeindeterminate (); erwartete ('. Knopf '). todsabled (); erwarten (' div '). tobeeMpty (); erwartete (' div ') .tobeHidden (); erwartete ('Element'). tobeSelted (); // Beachten Sie, dass bestimmte Matcher aufgrund von Einschränkungen innerhalb des Scherzes (keine tatsächliche Layoutlogik in virtueller DOM angewendet werden können) zu Fehlwesen führen können. Zum Beispiel Breite und Höhe auf 0Expect ('Element'). Tobevisible (); erwartete ('Eingabe'). Tobefocused (); erwarten ('div'). Tabematchedby ('. component.Object) .tobepartial ({aproperty: 'avalue'}); erwarten ('div'). TohavedScendant ('. Child'); erwarten ('div'). TohavedScendantWithText ({Selektor: Child ', Text: Text: 'Text'});Generieren Sie Komponenten, Dienst und Anweisung mit Spectator -Spezifikationsvorlagen mit Winkel -CLI: (Wenn Sie sie standardmäßig verwenden)
Komponente
Standardspezifikation: ng g cs dashrized-name
Spezifikation mit einem Host: ng g cs dashrized-name --withHost=true
Spezifikation mit einem benutzerdefinierten Host: ng g cs dashrized-name --withCustomHost=true
Service:
Standardspezifikation: ng g ss dashrized-name
Spezifikation zum Testen des HTTP-Datendienstes: ng g ss dashrized-name --isDataService=true
Richtlinie:
ng g ds dashrized-name
Um spectator als Standardsammlung in Ihrem Angular CLI -Projekt zu verwenden, fügen Sie sie Ihrem angular.json hinzu:
ng config cli.defaultCollection @ngNeat/Spectator
Die spectator erweitern die Standard - @schematics/angular -Sammlung. Wenn Sie Standardeinstellungen für Schaltplätze festlegen möchten, z. B. Komponenten mit SCSS -Datei, müssen Sie den Namen des Schaltplans von @schematics/angular in @ngneat/spectator in angular.json ändern:
"Schematik": {"@ngNeat/Spectator: Spectator-Komponent": {"Stil": "SCSS"
}
}Die Beispiele in Karma aus Angular Docs Testing Developer Guide wurden in Zuschauer und Scherz reproduziert. (Aus Gründen der Einschätzung ist dies die lokale Version der Karma -Beispiele.)
Die Spectator & Scherzversion kann hier zugegriffen werden.
Netanel Basal | Dirk Luijk | Ben Elliott |
Danke geht an diese wunderbaren Menschen (Emoji -Schlüssel): ~~~~
I. Sinai ? ? | Valentin Buryakov ? | Ben Grynhaus ? | Martin Nuc | Lars Gyrup Brink Nielsen ? | Andrew Grekov ? | Jeroen Zwartepoorte |
Oliver Schlegel | Rex ye ? | Tchmura | Yoeri nijs | Anders Skarby | Gregor Woiwode | Alexander Sheremetev ? |
Mikrofon | Mehmet Erim | Brett Eckert | Ismail Faizi | Maxime | Jonathan Bonnefoy | Colum Ferry |
Chris Cooper | Marc Scheib | DGSmith2 | Dedwardstech ? | Tamasfoldi ? | Paolo Caleffi | Toni Villena |
Itay oded | Guillaume de Jabrun | Anand Tiwary | Ales Doganoc | Zoltan | Vitalii Baziuk | Clementlemarc-Certua |
Yuriy Grunin | Andrey Chalkin | Steven Harris | RICHARD SAHRAKORPI | Dominik Kremer | Mehmet Ozan Turhan | Vlad Lashko |
William Tjondrosuharto | Chaz Gatian | Pavel Korobov | Enno Lohmann | Pawel Boguslawski | Tobias Wittwer | Mateo Tibaquirá |
Dieses Projekt folgt der All-Contributors-Spezifikation. Beiträge jeglicher Art willkommen!
