SlideShare ist ein Scribd-Unternehmen logo
AIT GmbH & Co. KG – Ihre Software effizienter entwickelt
AIT GmbH & Co. KG – Ihre Software effizienter entwickelt.
TESTING EINER ANGULAR APP
3AIT GmbH & Co. KG – Ihre Software effizienter entwickelt.
TAKE AWAYS
Was gibt es für Teststrategien
für Angular Apps?
Was sind die Grundlagen für
das Testing einer Angular App?
Wie gehe ich mit
Abhängigkeiten um?
Was gibt es alles
zu beachten?
4AIT GmbH & Co. KG – Ihre Software effizienter entwickelt.
WAS WIR HEUTE NICHT LERNEN
Wie konfiguriere ich Karma,
Jasmine, … ?
Was ist TDD, BDD, … ?
Wie teste ich RxJS, … ?
Wie teste ich untestbare
Szenarien?
MIT WEM HABEN SIE ES ZU TUN?
Florian Bader, Senior Consultant
@ AIT Gmbh & Co. KG
Florian.bader@aitgmbh.de
@FlorianBaderDE
5AIT GmbH & Co. KG – Ihre Software effizienter entwickelt.
TEST STRATEGIEN
6AIT GmbH & Co. KG – Ihre Software effizienter entwickelt.
E2E
Tests
Snapshot Tests
Integration Tests
Unit Tests
Testing Pyramide
Frontend
TESTING FRAMEWORKS
7AIT GmbH & Co. KG – Ihre Software effizienter entwickelt.
JEST
◼ Performance
◼ All-in-one solution (faking, code coverage, …)
◼ DOM abstraction (no browser required)
◼ Fast feedback (watch)
◼ Snapshot Testing
8AIT GmbH & Co. KG – Ihre Software effizienter entwickelt.
https://jestjs.io/
ANGULAR WITH JEST
Angular CLI
npm i -D jest @angular-builders/jest
Angular
npm i -D jest jest-preset-angular
9AIT GmbH & Co. KG – Ihre Software effizienter entwickelt.
https://bit.ly/2ynCRiY
TYPEMOQ
npm i -D typemoq
Alternativen:
ts-mockito, Jest/Jasmine Spies
10AIT GmbH & Co. KG – Ihre Software effizienter entwickelt.
https://github.com/florinn/typemoq
sessionServiceMock = typemoq.Mock.ofType<SessionService>();
sessionServiceMock.setup(s => s.get(typemoq.It.isValue(session.id)))
.returns(() => Promise.resolve(session));
EXAMPLE PROJECT
OPEN SPACE PLANNER
11AIT GmbH & Co. KG – Ihre Software effizienter entwickelt.
https://github.com/florianbader/openspaceplanner
AIT GmbH & Co. KG – Ihre Software effizienter entwickelt.
DEMO TIME
AIT GmbH & Co. KG – Ihre Software effizienter entwickelt. 12
E2E BEST PRACTICES
• Page Object Model verwenden
• Properties geben kein HTML Element zurück
• Methoden beschreiben die Domänen-Aktion, nicht die
Browser-Aktion
• Methoden die auf andere Seiten navigieren, geben das POM
der Seite zurück
• Parameter über Umgebungsvariable
• URL, Browser, …
• Angular E2E funktioniert auch ohne Protractor
13AIT GmbH & Co. KG – Ihre Software effizienter entwickelt.
DEBUGGING TESTS
node --inspect-brk ng test
14AIT GmbH & Co. KG – Ihre Software effizienter entwickelt.
{
"name": "Debug Tests",
"type": "node",
"request": "launch",
"runtimeArgs": [
"--inspect-brk"
],
"args": [
"test",
"--runInBand"
],
"program": "${workspaceFolder}/node_modules/@angular/cli/bin/ng",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"cwd": "${workspaceFolder}/Web",
"port": 9229
}
LAST BUT NOT LEAST
DIRECTIVES
• Gleiches Prinzip wie bei Components
PIPES
• Klasse instanziieren, transform Methode aufrufen
SUB COMPONENTS
• Stub Components im TestBed deklarieren
15AIT GmbH & Co. KG – Ihre Software effizienter entwickelt.
AIT GmbH & Co. KG
Leitzstr. 45, 70469 Stuttgart
www.aitgmbh.de
KONTAKT
info@aitgmbh.de
+49 711 49066430
BERATUNG
Agile ALM und TFS
.NET und Architektur
ENTWICKLUNG
Dienstleister für individuelle
Lösungen mit .NET und Azure
© AIT GmbH & Co. KG – Alle genannten und gezeigten Marken oder Warenzeichen sind eingetragene Marken oder eingetragene Warenzeichen ihrer jeweiligen Eigentümer
und ggf. nicht gesondert gekennzeichnet. Aus dem Fehlen der Kennzeichnung kann nicht geschlossen werden, dass es sich bei einem Begriff oder einem Bild nicht um eine
eingetragene Marke oder ein eingetragenes Warenzeichen handelt.
AIT GmbH & Co. KG – Ihre Software effizienter entwickelt
WIR UNTERSTÜTZEN SIE
16

Weitere ähnliche Inhalte

Ähnlich wie Testing einer Angular App

UI Testautomation in der Praxis: Von Lokalisierung bis Nachhaltigkeit
UI Testautomation in der Praxis: Von Lokalisierung bis NachhaltigkeitUI Testautomation in der Praxis: Von Lokalisierung bis Nachhaltigkeit
UI Testautomation in der Praxis: Von Lokalisierung bis Nachhaltigkeit
Nico Orschel
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Christian Janz
 
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Bokowsky + Laymann GmbH
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
Marc Müller
 
DWX 2014 - Coded UI in der Praxis: Von Lokalisierung bis Nachhaltigkeit
DWX 2014 -  Coded UI in der Praxis: Von Lokalisierung bis NachhaltigkeitDWX 2014 -  Coded UI in der Praxis: Von Lokalisierung bis Nachhaltigkeit
DWX 2014 - Coded UI in der Praxis: Von Lokalisierung bis Nachhaltigkeit
Nico Orschel
 
TFS 2010 Überblick
TFS 2010 ÜberblickTFS 2010 Überblick
TFS 2010 Überblick
Sven Hubert
 
JavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerJavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
Dennis Wilson
 
Einstieg in Xamarin und Xamarin.Forms, DDC 2018
Einstieg in Xamarin und Xamarin.Forms, DDC 2018Einstieg in Xamarin und Xamarin.Forms, DDC 2018
Einstieg in Xamarin und Xamarin.Forms, DDC 2018
André Krämer
 
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Bokowsky + Laymann GmbH
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
David Schneider
 
Test-getriebene Entwicklung in ABAP – Das Entwicklungsmodell der Zukunft
Test-getriebene Entwicklung in ABAP – Das Entwicklungsmodell der ZukunftTest-getriebene Entwicklung in ABAP – Das Entwicklungsmodell der Zukunft
Test-getriebene Entwicklung in ABAP – Das Entwicklungsmodell der Zukunft
Christian Drumm
 
Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...
Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...
Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...
OPITZ CONSULTING Deutschland
 
CodeFluent Entities and AppSofa
CodeFluent Entities and AppSofaCodeFluent Entities and AppSofa
CodeFluent Entities and AppSofa
Mykola Dobrochynskyy
 
dachnug51 - Business Adapter in Volt MX Foundry.pdf
dachnug51 - Business Adapter in Volt MX Foundry.pdfdachnug51 - Business Adapter in Volt MX Foundry.pdf
dachnug51 - Business Adapter in Volt MX Foundry.pdf
DNUG e.V.
 
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndroid Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickeln
André Krämer
 
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John MuñozSmartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
John Muñoz
 
Mobile Produktentwicklung
Mobile ProduktentwicklungMobile Produktentwicklung
Mobile Produktentwicklung
Bokowsky + Laymann GmbH
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
Ralf Lütke
 
Agile BI in der Praxis - Agiles Testen
Agile BI in der Praxis - Agiles TestenAgile BI in der Praxis - Agiles Testen
Agile BI in der Praxis - Agiles Testen
OPITZ CONSULTING Deutschland
 
TFS 2012 What's new in ALM with Team Foundation Server Overview
TFS 2012 What's new in ALM with Team Foundation Server OverviewTFS 2012 What's new in ALM with Team Foundation Server Overview
TFS 2012 What's new in ALM with Team Foundation Server Overview
Sven Hubert
 

Ähnlich wie Testing einer Angular App (20)

UI Testautomation in der Praxis: Von Lokalisierung bis Nachhaltigkeit
UI Testautomation in der Praxis: Von Lokalisierung bis NachhaltigkeitUI Testautomation in der Praxis: Von Lokalisierung bis Nachhaltigkeit
UI Testautomation in der Praxis: Von Lokalisierung bis Nachhaltigkeit
 
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
Building Enterprise Applications with AngularJS (GDG DevFest Karlsruhe 2014)
 
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile-Produktentwicklung: Konzeption, Design, Entwicklung,...
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
 
DWX 2014 - Coded UI in der Praxis: Von Lokalisierung bis Nachhaltigkeit
DWX 2014 -  Coded UI in der Praxis: Von Lokalisierung bis NachhaltigkeitDWX 2014 -  Coded UI in der Praxis: Von Lokalisierung bis Nachhaltigkeit
DWX 2014 - Coded UI in der Praxis: Von Lokalisierung bis Nachhaltigkeit
 
TFS 2010 Überblick
TFS 2010 ÜberblickTFS 2010 Überblick
TFS 2010 Überblick
 
JavaScript und trotzdem Softwerker
JavaScript und trotzdem SoftwerkerJavaScript und trotzdem Softwerker
JavaScript und trotzdem Softwerker
 
Einstieg in Xamarin und Xamarin.Forms, DDC 2018
Einstieg in Xamarin und Xamarin.Forms, DDC 2018Einstieg in Xamarin und Xamarin.Forms, DDC 2018
Einstieg in Xamarin und Xamarin.Forms, DDC 2018
 
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
Einführung in die Mobile Produktentwicklung: Konzeption, Design, Entwicklung,...
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
 
Test-getriebene Entwicklung in ABAP – Das Entwicklungsmodell der Zukunft
Test-getriebene Entwicklung in ABAP – Das Entwicklungsmodell der ZukunftTest-getriebene Entwicklung in ABAP – Das Entwicklungsmodell der Zukunft
Test-getriebene Entwicklung in ABAP – Das Entwicklungsmodell der Zukunft
 
Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...
Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...
Oberflächentests für JavaScript-Web-Apps – Mobile Tech Conference 2012 Autumn...
 
CodeFluent Entities and AppSofa
CodeFluent Entities and AppSofaCodeFluent Entities and AppSofa
CodeFluent Entities and AppSofa
 
dachnug51 - Business Adapter in Volt MX Foundry.pdf
dachnug51 - Business Adapter in Volt MX Foundry.pdfdachnug51 - Business Adapter in Volt MX Foundry.pdf
dachnug51 - Business Adapter in Volt MX Foundry.pdf
 
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndroid Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickeln
 
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John MuñozSmartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
Smartes SEO Monitoring & Alerting mit Apps Scripts [DE] - John Muñoz
 
Mobile Produktentwicklung
Mobile ProduktentwicklungMobile Produktentwicklung
Mobile Produktentwicklung
 
Erstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-AppsErstellung von mobilen cross-platform-Apps
Erstellung von mobilen cross-platform-Apps
 
Agile BI in der Praxis - Agiles Testen
Agile BI in der Praxis - Agiles TestenAgile BI in der Praxis - Agiles Testen
Agile BI in der Praxis - Agiles Testen
 
TFS 2012 What's new in ALM with Team Foundation Server Overview
TFS 2012 What's new in ALM with Team Foundation Server OverviewTFS 2012 What's new in ALM with Team Foundation Server Overview
TFS 2012 What's new in ALM with Team Foundation Server Overview
 

Testing einer Angular App

  • 1. AIT GmbH & Co. KG – Ihre Software effizienter entwickelt
  • 2. AIT GmbH & Co. KG – Ihre Software effizienter entwickelt. TESTING EINER ANGULAR APP
  • 3. 3AIT GmbH & Co. KG – Ihre Software effizienter entwickelt. TAKE AWAYS Was gibt es für Teststrategien für Angular Apps? Was sind die Grundlagen für das Testing einer Angular App? Wie gehe ich mit Abhängigkeiten um? Was gibt es alles zu beachten?
  • 4. 4AIT GmbH & Co. KG – Ihre Software effizienter entwickelt. WAS WIR HEUTE NICHT LERNEN Wie konfiguriere ich Karma, Jasmine, … ? Was ist TDD, BDD, … ? Wie teste ich RxJS, … ? Wie teste ich untestbare Szenarien?
  • 5. MIT WEM HABEN SIE ES ZU TUN? Florian Bader, Senior Consultant @ AIT Gmbh & Co. KG Florian.bader@aitgmbh.de @FlorianBaderDE 5AIT GmbH & Co. KG – Ihre Software effizienter entwickelt.
  • 6. TEST STRATEGIEN 6AIT GmbH & Co. KG – Ihre Software effizienter entwickelt. E2E Tests Snapshot Tests Integration Tests Unit Tests Testing Pyramide Frontend
  • 7. TESTING FRAMEWORKS 7AIT GmbH & Co. KG – Ihre Software effizienter entwickelt.
  • 8. JEST ◼ Performance ◼ All-in-one solution (faking, code coverage, …) ◼ DOM abstraction (no browser required) ◼ Fast feedback (watch) ◼ Snapshot Testing 8AIT GmbH & Co. KG – Ihre Software effizienter entwickelt. https://jestjs.io/
  • 9. ANGULAR WITH JEST Angular CLI npm i -D jest @angular-builders/jest Angular npm i -D jest jest-preset-angular 9AIT GmbH & Co. KG – Ihre Software effizienter entwickelt. https://bit.ly/2ynCRiY
  • 10. TYPEMOQ npm i -D typemoq Alternativen: ts-mockito, Jest/Jasmine Spies 10AIT GmbH & Co. KG – Ihre Software effizienter entwickelt. https://github.com/florinn/typemoq sessionServiceMock = typemoq.Mock.ofType<SessionService>(); sessionServiceMock.setup(s => s.get(typemoq.It.isValue(session.id))) .returns(() => Promise.resolve(session));
  • 11. EXAMPLE PROJECT OPEN SPACE PLANNER 11AIT GmbH & Co. KG – Ihre Software effizienter entwickelt. https://github.com/florianbader/openspaceplanner
  • 12. AIT GmbH & Co. KG – Ihre Software effizienter entwickelt. DEMO TIME AIT GmbH & Co. KG – Ihre Software effizienter entwickelt. 12
  • 13. E2E BEST PRACTICES • Page Object Model verwenden • Properties geben kein HTML Element zurück • Methoden beschreiben die Domänen-Aktion, nicht die Browser-Aktion • Methoden die auf andere Seiten navigieren, geben das POM der Seite zurück • Parameter über Umgebungsvariable • URL, Browser, … • Angular E2E funktioniert auch ohne Protractor 13AIT GmbH & Co. KG – Ihre Software effizienter entwickelt.
  • 14. DEBUGGING TESTS node --inspect-brk ng test 14AIT GmbH & Co. KG – Ihre Software effizienter entwickelt. { "name": "Debug Tests", "type": "node", "request": "launch", "runtimeArgs": [ "--inspect-brk" ], "args": [ "test", "--runInBand" ], "program": "${workspaceFolder}/node_modules/@angular/cli/bin/ng", "console": "integratedTerminal", "internalConsoleOptions": "neverOpen", "cwd": "${workspaceFolder}/Web", "port": 9229 }
  • 15. LAST BUT NOT LEAST DIRECTIVES • Gleiches Prinzip wie bei Components PIPES • Klasse instanziieren, transform Methode aufrufen SUB COMPONENTS • Stub Components im TestBed deklarieren 15AIT GmbH & Co. KG – Ihre Software effizienter entwickelt.
  • 16. AIT GmbH & Co. KG Leitzstr. 45, 70469 Stuttgart www.aitgmbh.de KONTAKT info@aitgmbh.de +49 711 49066430 BERATUNG Agile ALM und TFS .NET und Architektur ENTWICKLUNG Dienstleister für individuelle Lösungen mit .NET und Azure © AIT GmbH & Co. KG – Alle genannten und gezeigten Marken oder Warenzeichen sind eingetragene Marken oder eingetragene Warenzeichen ihrer jeweiligen Eigentümer und ggf. nicht gesondert gekennzeichnet. Aus dem Fehlen der Kennzeichnung kann nicht geschlossen werden, dass es sich bei einem Begriff oder einem Bild nicht um eine eingetragene Marke oder ein eingetragenes Warenzeichen handelt. AIT GmbH & Co. KG – Ihre Software effizienter entwickelt WIR UNTERSTÜTZEN SIE 16