Willkommen zu diesem praktischen AngularJS-Test-Tutorial f\u00fcr Anf\u00e4nger!<\/p>\n
Tests sind entscheidend f\u00fcr den Aufbau robuster AngularJS-Anwendungen, doch viele Entwickler finden sie herausfordernd. Dieses Tutorial hat das Ziel, das Testen von Angular-Code mit leicht verst\u00e4ndlichen Beispielen zu vereinfachen.<\/p>\n
Durch die Anwendung grundlegender Testprinzipien wie Isolation und Mocking werden Sie praktische Erfahrungen im Erstellen wartbarer Tests sammeln, die Probleme schnell erkennen. Am Ende werden Sie \u00fcber die wesentlichen F\u00e4higkeiten verf\u00fcgen, um produktionsreife AngularJS-Anwendungen zu erstellen, die den Anforderungen an Funktionalit\u00e4t, Kompatibilit\u00e4t, Zuverl\u00e4ssigkeit und Leistung gerecht werden.<\/p>\n
Mit einem Fokus auf Einfachheit und praktischer Anwendbarkeit wird Ihnen dieses AngularJS-Test-Tutorial das Vertrauen geben, fehlerfreie AngularJS-Apps zu erstellen.<\/p>\n
Also, lassen Sie uns anfangen!<\/p>\n
Cypress<\/strong> \u2013 End-to-End-Test-Framework, das direkt in modernen Browsern ausgef\u00fchrt wird<\/p>\n<\/li>\n Karma<\/strong> \u2013 Test Runner f\u00fcr das Unit-Testing von AngularJS-Code<\/p>\n<\/li>\n Protractor<\/strong> \u2013 End-to-End-Test-Framework f\u00fcr AngularJS-Anwendungen<\/p>\n<\/li>\n<\/ul>\n Beim Erstellen von AngularJS-Anwendungen arbeiten Entwickler mit mehreren wichtigen Komponenten, die die Struktur und Funktionalit\u00e4t der App ausmachen. Diese Komponenten arbeiten zusammen, um die Logik, Ansichten und zugrunde liegenden Dienste zu erstellen, die die Benutzererfahrung unterst\u00fctzen.<\/p>\n Sie sind JavaScript-Funktionen, die die Gesch\u00e4ftslogik hinter den Ansichten bereitstellen. Im MVC-Designmuster fungieren Controller als die Steuerungen. Sie verarbeiten Benutzereingaben, manipulieren Daten und entscheiden, welchen Inhalt sie rendern.<\/p>\n Entwickler erstellen aktiv Controller, um AngularJS-Scope mit Ansichten zu verbinden.<\/p>\n Entwickler definieren aktiv Ansichten mit HTML, um Daten aus Controllern und Modellen darzustellen. Ansichten nutzen Datenbindung, um sich automatisch zu aktualisieren, wenn sich die Modelldaten \u00e4ndern. Dadurch entf\u00e4llt die Notwendigkeit, Ansichten manuell zu aktualisieren.<\/p>\n Diese k\u00f6nnen einfache JavaScript-Objekte sein oder aus einem Persistenzframework wie Firebase abgeleitet werden. Entwickler erstellen aktiv Modellobjekte und -strukturen, um die Anwendungsdatenkonzepte darzustellen, die f\u00fcr Ansichten geeignet sind.<\/p>\n Dienste<\/p>\n Entwickler erstellen aktiv AngularJS-Dienste, um Aufgaben wie API-Aufrufe zu erledigen, ohne den Controller-Code zu \u00fcberladen. Dienste k\u00f6nnen in der gesamten Anwendung geteilt werden, was die Flexibilit\u00e4t und Wiederverwendbarkeit erh\u00f6ht.<\/p>\n Entwickler definieren aktiv Module mit ng-app, die die Anwendungsabh\u00e4ngigkeiten und die Einstiegskomponente festlegen. Dies f\u00f6rdert die Organisation und gew\u00e4hrleistet eine klare Trennung der Verantwortlichkeiten.<\/p>\n Wenn Entwickler diese Schl\u00fcsselfunktionen nutzen, k\u00f6nnen sie aktiv robuste AngularJS-Webanwendungen mit einer sauberen Trennung der Verantwortlichkeiten zwischen den verschiedenen Schichten erstellen. Die Flexibilit\u00e4t der AngularJS-Komponenten erm\u00f6glicht es, komplexe, datengetriebene Benutzererlebnisse zu gestalten.<\/p>\n Das Unit-Testing in AngularJS ist entscheidend f\u00fcr den Aufbau hochwertiger Anwendungen. Es stellt sicher, dass einzelne Komponenten wie Controller, Direktiven und Dienste wie erwartet funktionieren.<\/p>\n Unit-Testing erkennt Fehler fr\u00fchzeitig, erm\u00f6glicht eine sichere Refaktorierung des Codes und vereinfacht die Integration von Code aus verschiedenen Entwicklern.<\/p>\n Bevor eine AngularJS-Anwendung als produktionsbereit betrachtet werden kann, sollte sie gr\u00fcndlichem Unit-Testing unterzogen werden. Dies erkennt Probleme im Code bereits in der fr\u00fchesten Phase des Entwicklungszyklus.<\/p>\n Robustes Unit-Testing f\u00fchrt zu Anwendungen, die zuverl\u00e4ssiger, besser optimiert und st\u00e4rker an den gesch\u00e4ftlichen Anforderungen ausgerichtet sind. Es erm\u00f6glicht auch eine schnelle Diagnose und Behebung von Fehlern. Unit-getesteter Code gibt den Nutzern zudem mehr Vertrauen in die F\u00e4higkeiten der Anwendung.<\/p>\n Grundlagen des Unit-Testing in AngularJS<\/strong><\/p>\n Beim Schreiben von Unit-Tests f\u00fcr deinen AngularJS-Code sorgt das Befolgen grundlegender Prinzipien daf\u00fcr, dass deine Testsuite robust, wartbar und nachhaltig bleibt, w\u00e4hrend sich deine App weiterentwickelt:<\/p>\n Isolierung von Abh\u00e4ngigkeiten:<\/p>\n<\/li>\n<\/ul>\n Jeder Unit-Test sollte eine spezifische Komponente isoliert testen, ohne auf andere Module oder externe Abh\u00e4ngigkeiten angewiesen zu sein. Verwende Mocks, Spione und Stubs, um Abh\u00e4ngigkeiten zu simulieren.<\/p>\n Arrange, Act, Assert (AAA):<\/p>\n<\/li>\n<\/ul>\n Strukturiere deinen Test in 3 klar definierte Abschnitte \u2013 arrangiere Testdaten\/Inputs, f\u00fchre die Logik aus, die getestet werden soll (Act), und stelle sicher, dass die erwartete Ausgabe erzeugt wurde (Assert).<\/p>\n Eine Assertion pro Test:<\/p>\n<\/li>\n<\/ul>\n Jeder Testfall sollte ein Verhalten oder eine Ausgabe validieren, um es einfach zu machen, herauszufinden, was fehlgeschlagen ist. Vermeide Assertions, die mehrere Ausgaben \u00fcberpr\u00fcfen.<\/p>\n Mache Tests unabh\u00e4ngig:<\/p>\n<\/li>\n<\/ul>\n Schreibe Testf\u00e4lle, die ihre eigenen Testdaten einrichten, damit sie unabh\u00e4ngig ausgef\u00fchrt werden k\u00f6nnen und nicht von der Reihenfolge der Ausf\u00fchrung abh\u00e4ngen. Dies ist besonders hilfreich, wenn Tests parallel ausgef\u00fchrt werden.<\/p>\n Halte Tests kurz und lesbar:<\/p>\n<\/li>\n<\/ul>\n Zerlege umfangreiche Testf\u00e4lle in kleinere Hilfsfunktionen, die jeweils ein einzelnes Verhalten oder eine Untereinheit einer Komponente testen.<\/p>\n Das Befolgen dieser grundlegenden Richtlinien stellt sicher, dass deine AngularJS-Unit-Test-Suite robust bleibt und im Laufe der Zeit leicht erweiterbar ist, w\u00e4hrend die Komplexit\u00e4t der Anwendung w\u00e4chst.<\/p>\n Folge einfach diesen Schritten:<\/p>\n Erstelle package.json<\/p>\n npm initAngular installieren:<\/p>\n npm I angular \u2013saveKarma installieren:<\/p>\n npm i -g karma \u2013save -devJasmine installieren:<\/p>\n npm I karma-jasmine jasmine-core \u2013save -devAngular-Mocks installieren:<\/p>\n npm I angular-mocks \u2013save -devKarma Chrome-Browser installieren:<\/p>\n<\/div>\n<\/div>\n<\/div>\n npm I karma-chrome-launcher \u2013save-dev<\/p>\n \u00b7\u00a0 Erstellen Sie in Ihrem Unit-Testing-Ordner zwei neue Ordner mit den Namen \u201eapp\u201c und \u201etest\u201c.<\/p>\n \u00b7\u00a0 Erstellen Sie anschlie\u00dfend im Unit-Testing-Ordner eine neue Datei mit dem Namen karma.config.js.<\/p>\n \u00b7\u00a0 \u00d6ffnen Sie karma.config.js in Ihrem Code-Editor und geben Sie \u201ekarma init\u201c ein. Dadurch wird ein leeres Repository mit einigen Standardeinstellungen initialisiert.<\/p>\n \u00b7\u00a0 Es werden Ihnen einige Fragen zur Konfiguration von Karma gestellt. Beantworten Sie diese entsprechend Ihren W\u00fcnschen. Die Standardeinstellungen sind ebenfalls in Ordnung.<\/p>\n End-to-End (E2E)-Testing simuliert, wie ein echter Benutzer mit deiner Anwendung von Anfang bis Ende interagieren w\u00fcrde. Es geht \u00fcber das Unit-Testing hinaus, indem es sicherstellt, dass alle Komponenten richtig zusammenarbeiten.<\/p>\n Unit-Tests sind begrenzt, weil sie nur einzelne Teile des Codes isoliert bewerten. E2E-Testing ist wichtig, um Probleme zu erkennen, die auftreten, wenn diese Bausteine in vollst\u00e4ndige Workflows integriert werden.<\/p>\n Zum Beispiel k\u00f6nnten Unit-Tests \u00fcberpr\u00fcfen, ob ein Login-Formular und eine Datenbankabfrage wie erwartet funktionieren. Aber E2E-Testing meldet sich mit echten Zugangsdaten an, klickt durch die Anwendung, ruft tats\u00e4chliche Daten ab und mehr.<\/p>\n E2E-Testing gibt dir die Sicherheit, dass deine Anwendung unter realen Bedingungen reibungslos funktioniert. Es findet L\u00fccken, die zwischen Unit- und Integrationstests liegen. E2E-Testing richtig zu machen ist entscheidend, um qualitativ hochwertige Software zu liefern, die die Gesch\u00e4fts- und Benutzeranforderungen von Anfang bis Ende erf\u00fcllt.<\/p>\n Umfassendes End-to-End-Testing bietet mehrere wichtige Vorteile:<\/p>\n Erkennt mehr Fehler fr\u00fchzeitig, was zu hochwertigerer Software f\u00fchrt<\/p>\n<\/li>\n Stellt sicher, dass alle Komponenten reibungslos zusammenarbeiten, wodurch das Vertrauen gest\u00e4rkt wird<\/p>\n<\/li>\n Modelliert echte Benutzer-Workflows, was die Benutzererfahrung verbessert<\/p>\n<\/li>\n Spart Zeit und Geld, indem Probleme fr\u00fcher statt sp\u00e4ter behoben werden<\/p>\n<\/li>\n F\u00f6rdert die Zusammenarbeit zwischen Teams, die an verschiedenen Komponenten arbeiten<\/p>\n<\/li>\n Automatisiert wiederholende Tests, was die Produktivit\u00e4t steigert<\/p>\n<\/li>\n Beschleunigt die Markteinf\u00fchrungszeit, indem M\u00e4ngel vor der Ver\u00f6ffentlichung reduziert werden<\/p>\n<\/li>\n<\/ul>\n E2E-Testing liefert robustere, zuverl\u00e4ssigere Software, die den Gesch\u00e4fts- und Benutzeranforderungen gerecht wird. Es validiert die Qualit\u00e4t von Anfang bis Ende \u00fcber die gesamte Anwendung. Die Investition in E2E-Testing zahlt sich durch eine schnellere Lieferung besserer Software aus.<\/p>\n Cypress f\u00fcr E2E-Tests einrichten<\/p>\n Erstellen Sie einen neuen Projektordner und initialisieren Sie ihn:<\/p>\n npm init<\/p>\n Installieren Sie Cypress im Projektordner:<\/p>\n npm install cypress –save-dev<\/p>\n Oder mit Yarn:<\/p>\n yarn add cypress –dev<\/p>\n Dadurch wird die neueste Version von Cypress (zum Zeitpunkt der Erstellung dieses Artikels Version 12.11.0) lokal als Entwicklungsabh\u00e4ngigkeit installiert.<\/p>\n Und das war\u2019s! Nachdem Cypress installiert ist, k\u00f6nnen Sie nun End-to-End-Tests f\u00fcr Ihre Anwendung im neuen Projekt erstellen und ausf\u00fchren.<\/p>\n End-to-End-Tests mit Protractor oder Cypress erstellen und ausf\u00fchren Protractor f\u00fcr E2E-Tests installieren<\/p>\n Voraussetzung: Node.js muss installiert sein.<\/p>\n 1. \u00d6ffnen Sie ein Terminal und geben Sie Folgendes ein:<\/p>\n npm install -g protractor<\/p>\n 2. Dadurch werden zwei Kommandozeilentools installiert:<\/p>\n – protractor \u2013 Der Testrunner<\/p>\n – webdriver-manager \u2013 Verwaltet den Selenium-Webtreiber<\/p>\n 3. \u00dcberpr\u00fcfen Sie die Installation mit:<\/p>\n protractor –version<\/p>\n Dadurch wird die neueste Protractor-Version global auf Ihrem System installiert. Der Testrunner und der Selenium-Manager stehen nun \u00fcber die Kommandozeile zur Verf\u00fcgung, um mit dem End-to-End-Test Ihrer Anwendung zu beginnen.<\/p>\n Integrationstests in AngularJS<\/strong><\/p>\n Integrationstests validieren, dass verschiedene Einheiten oder Komponenten einer Anwendung korrekt zusammenarbeiten, wenn sie kombiniert werden.<\/p>\n Sie unterscheiden sich vom Unit-Testing, das sich auf das Testen einzelner Einheiten in Isolation konzentriert. Und sie unterscheiden sich vom End-to-End (E2E) Testing, das gesamte Benutzer-Workflows in der App nachbildet.<\/p>\n Stattdessen best\u00e4tigt das Integrationstesting, dass die Interaktionen zwischen integrierten Einheiten wie erwartet funktionieren. Zum Beispiel kann es testen, ob die UI-Schicht erfolgreich Daten von einem API-Endpunkt abruft und anzeigt.<\/p>\n W\u00e4hrend Unit-Tests also einzelne Module untersuchen und E2E-Tests die gesamten Abl\u00e4ufe \u00fcberpr\u00fcfen, konzentriert sich das Integrationstesting auf die \u00dcberpr\u00fcfung der Verbindungen zwischen integrierten Komponenten. Es stellt sicher, dass Einheiten korrekt zusammenarbeiten, auch wenn sie auf Netzwerke, Datenbanken oder andere externe Ressourcen angewiesen sind.<\/p>\n Einrichten eines Angular-Projekts<\/p>\n Um ein neues Angular-Projekt zu erstellen, gib den folgenden Befehl in dein Terminal oder die Kommandozeile ein:<\/p>\n Ersetze \u201eangular-todo-app\u201c durch den Namen, den du f\u00fcr deine App bevorzugst.<\/p>\n Dr\u00fccke danach die Eingabetaste. Warte einen Moment, w\u00e4hrend Angular dein neues Projekt einrichtet.<\/p>\n Jetzt hast du dein neues Projekt. Es kommt mit dem integrierten Test-Tool von Angular. Dies erm\u00f6glicht direktes Testen ohne weitere Einrichtung.<\/p>\n AngularJS generiert automatisch Testdateien f\u00fcr TypeScript-Komponenten, die mit der Angular CLI erstellt wurden. Navigiere zum Beispiel zu Dieses Muster findet sich in jedem Angular-Projekt \u2013 jede Komponente hat eine zugeh\u00f6rige F\u00fcr unseren Integrationstest werden wir die Standarddatei Diese Spec-Datei ist mit der Hauptdatei Angular k\u00fcmmert sich um die Verkabelung der Testumgebung f\u00fcr uns in Schritt 3: Testsuite erstellen und einrichten<\/strong><\/p>\n \u00d6ffnen Sie die Datei app.component.specs.ts, in der Sie eine neue Testsuite erstellen. Verwenden Sie die folgenden Codes:<\/p>\n describe(‘TodoList Integration’, () => {<\/p>\n let component: AppComponent;<\/p>\n let fixture: ComponentFixture<AppComponent>;<\/p>\n let service: TodoService;<\/p>\n beforeEach(async () => {<\/p>\n await TestBed.configureTestingModule({<\/p>\n imports: [FormsModule],<\/p>\n declarations: [AppComponent, TodoComponent],<\/p>\n providers: [<\/p>\n {<\/p>\n provide: TodoService,<\/p>\n useValue: {<\/p>\n getTasks: () => {<\/p>\n return dummyTodos;<\/p>\n }<\/p>\n }<\/p>\n }<\/p>\n ]<\/p>\n }).compileComponents();<\/p>\n fixture = TestBed.createComponent(AppComponent);<\/p>\n component = fixture.componentInstance;<\/p>\n service = TestBed.inject(TodoService);<\/p>\n });<\/p>\n });<\/p>\n const dummyTodos = [<\/p>\n {<\/p>\n id: 1,<\/p>\n title: ‘Todo 1’,<\/p>\n completed: false<\/p>\n },<\/p>\n {<\/p>\n id: 2,<\/p>\n title: ‘Todo 2’,<\/p>\n completed: false<\/p>\n }<\/p>\n ];<\/p>\n \u2022\u00a0 \u00a0 \u00a0 Asynchrones Test-Setup mit beforeEach<\/p>\n \u2022\u00a0 \u00a0 \u00a0 Testmodul konfigurieren und kompilieren<\/p>\n \u2022\u00a0 \u00a0 \u00a0 Komponenten-Fixture und -Instanzen erstellen<\/p>\n \u2022\u00a0 \u00a0 \u00a0 Externe Dummy-Daten zur Wiederverwendung definieren<\/p>\n \u2022\u00a0 \u00a0 \u00a0 Injections mit TestBed.inject abrufen<\/p>\n it(‘sollte Aufgaben vom Dienst laden’, async(() => {<\/p>\n fixture.detectChanges();<\/p>\n expect(component.todos.length).toBe(2);<\/p>\n expect(service.getTasks()).toEqual(dummyTodos);<\/p>\n }));<\/p>\n In diesem Test:<\/p>\n \u2022\u00a0 \u00a0 \u00a0 Verwenden Sie `it()`, um den Testfall zu definieren.<\/p>\n \u2022\u00a0 \u00a0 \u00a0 Rufen Sie detectChanges() auf, um die Datenbindung auszul\u00f6sen.<\/p>\n \u2022\u00a0 \u00a0 \u00a0 \u00dcberpr\u00fcfen Sie die L\u00e4nge des Komponenten-ToDos-Arrays.<\/p>\n \u2022\u00a0 \u00a0 \u00a0 \u00dcberpr\u00fcfen Sie die Gleichheit zwischen Service- und Dummy-Daten.<\/p>\n Einige wichtige Punkte:<\/p>\n \u2022\u00a0 \u00a0 \u00a0 Testname allgemeiner gestaltet.<\/p>\n \u2022\u00a0 \u00a0 \u00a0 Asynchrone Testfunktion genutzt.<\/p>\n \u2022\u00a0 \u00a0 \u00a0 Zuerst wurde die L\u00e4nge als indirekte Pr\u00fcfung gepr\u00fcft.<\/p>\n \u2022\u00a0 \u00a0 \u00a0 Servicedaten direkt mit Dummy-Daten verglichen.<\/p>\n Schritt 5.<\/p>\n Hier f\u00fchren Sie den Test aus.<\/p>\n \/\/ Alle Testsuiten ausf\u00fchren<\/p>\n ng test<\/p>\n \/\/ Eine bestimmte Testdatei ausf\u00fchren<\/p>\n ng test –include Dateiname<\/p>\n So f\u00fchren Sie die Integrationstests aus:<\/p>\n \u2022\u00a0 \u00a0 \u00a0 \u00d6ffnen Sie ein Terminal\/eine Eingabeaufforderung.<\/p>\n \u2022\u00a0 \u00a0 \u00a0 Navigieren Sie zum Projektstammverzeichnis.<\/p>\n \u2022\u00a0 \u00a0 \u00a0 F\u00fchren Sie `ng test` aus, um alle Spezifikationen auszuf\u00fchren.<\/p>\n \u2022\u00a0 \u00a0 \u00a0 Oder f\u00fchren Sie `ng test –include <Dateiname>` aus, um eine bestimmte Testdatei auszuf\u00fchren.<\/p>\n Angular f\u00fchrt Folgendes aus:<\/p>\n \u2022\u00a0 \u00a0 \u00a0 Richtet die Testumgebung ein.<\/p>\n \u2022\u00a0 \u00a0 \u00a0 F\u00fchrt die Testf\u00e4lle aus.<\/p>\n \u2022\u00a0 \u00a0 \u00a0 Berichtet die Ergebnisse in der CLI und im browserbasierten Runner.<\/p>\n Einige wichtige Punkte:<\/p>\n \u2022\u00a0 \u00a0 \u00a0 `ng test` f\u00fchrt standardm\u00e4\u00dfig alle Spezifikationen aus.<\/p>\n \u2022\u00a0 \u00a0 \u00a0 Kann Filtern Sie nach Dateinamen, falls erforderlich.<\/p>\n \u2022\u00a0 \u00a0 \u00a0 Ergebnisausgabe an Terminal und Browser-Test-Runner<\/p>\n Testen von Direktiven in AngularJS<\/p>\n Erkl\u00e4rung der Direktiven in AngularJS AngularJS-Test-Tutorial und AngularJS-Test-Dienste<\/p>\n Dienste sind eine der wichtigsten Bausteine in AngularJS-Anwendungen. Sie bieten wiederverwendbare Gesch\u00e4ftslogik, die \u00fcber Komponenten hinweg genutzt werden kann. Aber wie stellst du sicher, dass deine Dienste in AngularJS gut getestet sind?<\/p>\n Dieser einfache Abschnitt des AngularJS-Test-Tutorials bietet Best Practices f\u00fcr das Unit-Testing deiner Dienste. Lass uns eintauchen.<\/p>\n Die Konzepte gelten sowohl f\u00fcr Anf\u00e4nger als auch f\u00fcr Entwickler, die bereits AngularJS-Anwendungen gebaut haben. Erfahrene Entwickler k\u00f6nnen diese Best Practices des AngularJS-Testens verwenden, um bestehende Testsuiten zu optimieren. Weitere Informationen findest du auf dieser Seite.<\/p>\n Testing von Controllern in AngularJS<\/p>\n Controller sind das R\u00fcckgrat des dynamischen Verhaltens in AngularJS-Anwendungen. Sie verbinden die Benutzeroberfl\u00e4che mit der zugrunde liegenden Logik. Durch gr\u00fcndliches Testen der Controller werden Schnittstellenfehler in der Zukunft verhindert.<\/p>\n Mit einer zuverl\u00e4ssigen Testsuite kannst du Benutzerinteraktionen simulieren und sicherstellen, dass Controller Daten korrekt transformieren und anzeigen. Dies erm\u00f6glicht es dir, Funktionen selbstbewusst weiterzuentwickeln, da du Regressionen fr\u00fchzeitig erkennen kannst.<\/p>\n Hier ist ein dedizierter Abschnitt des AngularJS-Test-Tutorials, der die Best Practices f\u00fcr das Testen von Controllern zeigt.<\/p>\n Dienste in AngularJS-Controller einf\u00fcgen<\/p>\n Beim Unit-Test von Controllern m\u00fcssen Sie deren Abh\u00e4ngigkeiten simulieren. Dienste wie $http oder benutzerdefinierte Provider erm\u00f6glichen Controllern die Auslagerung der Gesch\u00e4ftslogik.<\/p>\n Es gibt zwei Standardmethoden, um diese Abh\u00e4ngigkeiten einzuf\u00fcgen und so eine korrekte Aufl\u00f6sung zu gew\u00e4hrleisten:<\/p>\n Inline-Array<\/p>\n Definieren Sie ein Inline-Array mit den Abh\u00e4ngigkeiten \u2013 praktisch f\u00fcr einfache F\u00e4lle:<\/p>\n angular.module(‘myApp’)<\/p>\n .controller(‘MyController’, [‘$scope’, ‘MyService’, function($scope, MyService) {<\/p>\n \/\/ …<\/p>\n }]);<\/p>\n $inject-Eigenschaft<\/p>\n Oder legen Sie eine $inject-Eigenschaft f\u00fcr die Controller-Funktion fest:<\/p>\n angular.module(‘myApp’)<\/p>\n .controller(‘MyController’, MyController);<\/p>\n MyController.$inject = [‘$scope’, ‘MyService’];<\/p>\n function MyController($scope, MyService) {<\/p>\n \/\/ …<\/p>\n }<\/p>\n Beide Ans\u00e4tze eignen sich f\u00fcr Mocking in Tests. Der Schl\u00fcssel liegt darin, Abh\u00e4ngigkeiten explizit aufzulisten, anstatt sich auf Inferenz zu verlassen.<\/p>\n So wird sichergestellt, dass Abh\u00e4ngigkeiten korrekt aufgel\u00f6st werden, wenn Code w\u00e4hrend des Build-Prozesses minimiert\/verunstaltet wird \u2013 eine wichtige Best Practice f\u00fcr AngularJS-Tests.<\/p>\n Herzlichen Gl\u00fcckwunsch, wenn Sie unser AngularJS-Test-Tutorial bis hierher gelesen haben. Sie verf\u00fcgen nun \u00fcber die grundlegenden Kenntnisse und F\u00e4higkeiten, um mit der Entwicklung robuster Testsuites f\u00fcr Ihre AngularJS-Anwendungen zu beginnen.<\/p>\n Testen mag zun\u00e4chst entmutigend erscheinen. Doch wer dranbleibt, zahlt sich langfristig in Form von Anwendungsstabilit\u00e4t, schnellerer Bereitstellung und verbesserter Benutzerfreundlichkeit aus. Seien Sie geduldig und vergessen Sie nicht, Best Practices wie Isolation, Mocking und eine \u00fcbersichtliche Testorganisation anzuwenden.<\/p>\n Das war erst der Anfang \u2013 es gibt noch viel mehr zu entdecken, wenn Sie ein erfahrener AngularJS-Testexperte werden. Sie m\u00fcssen sich mit weiteren und tiefergehenden Themen wie Testdirektiven, End-to-End-Testframeworks wie Protractor und Cypress, visuellen Regressionstests und fortgeschrittenen Techniken f\u00fcr knifflige Testszenarien auseinandersetzen.<\/p>\n W\u00e4hrend Sie verschiedene AngularJS-Test-Tutorials durchst\u00f6bern, ist es wichtig, positiv zu bleiben, fr\u00fchzeitig mit dem Testen zu beginnen, regelm\u00e4\u00dfig zu refaktorieren und sich bei Bedarf an andere zu wenden. Kontinuierliches \u00dcben von AngularJS-Tests festigt das Gelernte und st\u00e4rkt Ihr Selbstvertrauen. Sie schaffen das!<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" Willkommen zu diesem praktischen AngularJS-Test-Tutorial f\u00fcr Anf\u00e4nger! Tests sind entscheidend f\u00fcr den Aufbau robuster AngularJS-Anwendungen, doch viele Entwickler finden sie herausfordernd. Dieses Tutorial hat das Ziel, das Testen von Angular-Code mit leicht verst\u00e4ndlichen Beispielen zu vereinfachen. Durch die Anwendung grundlegender Testprinzipien wie Isolation und Mocking werden Sie praktische Erfahrungen im Erstellen wartbarer Tests sammeln, die […]<\/p>\n","protected":false},"author":22,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"content-type":"","om_disable_all_campaigns":false,"footnotes":""},"categories":[1171],"tags":[],"class_list":{"0":"post-15785","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-uncategorized-de"},"yoast_head":"\nAngularJS-Anwendungen \u2013 Wichtige Komponenten<\/strong><\/h2>\n
Controller<\/strong><\/h3>\n
Ansichten<\/strong><\/h3>\n
Modelle<\/strong><\/h3>\n
Module<\/strong><\/h3>\n
Unit-Testing in AngularJS<\/strong><\/h3>\n
\n
\n
\n
\n
\n
Einrichten Ihrer Entwicklungsumgebung<\/strong><\/h3>\n
\n
mkdir<\/code>. Hier wirst du deine Testdateien speichern.<\/li>\nEnd-to-End-Testing in AngularJS mit Protractor oder Cypress<\/strong><\/h2>\n
Vorteile des End-to-End-Testings<\/strong><\/h2>\n
\n
Testumgebung mit Protractor und Cypress einrichten<\/strong><\/h3>\n
\nBest Practices f\u00fcr End-to-End-Tests in AngularJS mit Protractor oder Cypress<\/p>\nEinrichten der Testumgebung und Schreiben und Ausf\u00fchren von Integrationstests<\/strong><\/h3>\n
Schritt 1.<\/strong><\/h4>\n
ng new angular-todo-app
\n<\/code><\/div>\n<\/div>\nSchritt 2.<\/strong><\/h4>\n
app > components > todo<\/code>, und du wirst eine todo.component.spec.ts<\/code> Testdatei finden, die der todo.component.ts<\/code> entspricht.<\/p>\n*.spec.ts<\/code>-Datei, die ihre Tests enth\u00e4lt.<\/p>\napp.component.spec.ts<\/code> nutzen, die Angular im Root-Ordner des Apps generiert.<\/p>\napp.component.ts<\/code> verbunden und erm\u00f6glicht es uns, Tests zu schreiben, die Integrationspunkte mit anderen Diensten und Komponenten validieren.<\/p>\napp.component.spec.ts<\/code>, was es zu einem gro\u00dfartigen Ausgangspunkt f\u00fcr unseren ersten Integrationstest macht.<\/p>\n<\/div>\nSchritt 4.<\/h4>\n
\nEinrichten der Testumgebung f\u00fcr Direktiven
\nSchreiben und Ausf\u00fchren von Tests f\u00fcr Direktiven
\nBest Practices zum Testen von Direktiven in AngularJS<\/p>\n\n
Fazit unseres AngularJS-Test-Tutorials<\/h2>\n