javascript-apps moderner entwicklung testgetriebene · – externe webseiten nicht im test besuchen...
Post on 08-Jul-2020
7 Views
Preview:
TRANSCRIPT
© chemmedia AG
Testgetriebene Entwicklung moderner JavaScript-AppsBettina HelgenlechnerMartin Kutter
© chemmedia AG
Hallo.Schön, euch kennen zu lernen!
Portrait
Portrait
Portrait
Bettina HelgenlechnerSoftwareentwicklerin
Martin KutterSoftwaredesigner chemmedia AG
Experten für globalen Wissentransfer
www.chemmedia.deinfo@chemmedia.de
© chemmedia AG
Die chemmedia AG, Anbieter digitaler Kommunikations- und E-Learning-Lösungen in Deutschland. Wir bieten ein großes Portfolio an Beratungs-, Technologie- und Content-Services und sorgen mit eigenen Softwareprodukten seit 20 Jahren für maßgeschneiderte Lösungen im unternehmensweiten Wissens- und Kompetenzmanagement.
Über uns
Gründung 1997
Profitabel, inhabergeführt und unabhängig seit Gründung (kein Venture Capital)
Über 50 Mitarbeiter aus den BereichenEntwicklung, Consulting, Service & Support
370 Kunden mit über 9 Mio Lernern in 38 Ländern
Hauptsitz ChemnitzBüros in Dresden und Leipzig
Erstellung, Verteilung und Auswertung.
Knowledgeworker ist eine Software-Suite für überzeugende digitale Inhalte, mit denen Sie Mitarbeiter, Kunden und Partner weltweit erreichen.
So gestalten Sie nachhaltig die digitale Zukunft Ihrer Organisation. Wir stehen Ihnen dabei zur Seite.
Bild
– Computer findet Bugs
– Code wird besser strukturiert
– Mehr Vertrauen in den Code (“Testen statt hoffen”)
– Versicherung gegen zukünftige Bugs
Warum automatisierte Tests schreiben?
Arten von Tests
Static Unit Integration End-to-end
Testbare Aspekte
– Geschäftslogik: Unittests
– Präsentationslogik: Komponententests
– Features und Workflows: End-to-end Tests
“Fertig, jetzt muss ich nur noch Tests schreiben.”
Testgetriebene Entwicklung
Test schreiben Test ausführen Code anpassen
pass
fail
Refactoring
© chemmedia AG
Testgetriebene vs. nicht testgetriebene Entwicklung
Unit Testing
– Sicherstellen, dass sich jede Einheit verhält, wie erwartet
– Einheit: kleinster testbarer Teil der Software, z.B. eine einzelne Methode/Funktion
– Verwendung von Stubs, Mocks und Spies, um Einheiten zu isolieren
– Code muss in testbarer Weise geschrieben werden
1. Zu testenden Zustand herstellen
2. Unit aufrufen/ausführen
3. Prüfen, dass der erwartete Zustand besteht
Jest
– Logik und Komponenten testen
– Node-Umgebung, nicht Browser
– Syntax:describe(‘foo’, () => {
it(‘should do the right thing’, () => {expect(foo()).toEqual(‘hello world’);
});});
– Gesamtes Test-Toolkit an einer Stelle, inkl. Coverage-Reports
– Kompatibel mit React, Angular, Vue, TypeScript, Babel, Node...
Unit Testing Best Practices
– Alles innerhalb des Tests definieren
– Jeder Test muss eigenständig sein
– Testdateien neben den zu testenden Dateien anlegen
– Code testbar machen:
– So wenig Geschäftslogik wie möglich innerhalb von Komponenten
– So viele pure Funktionen wie möglich
– Dependency Inversion
– Schwieriges Test-Setup indiziert schlechtes Code Design
– Tests müssen Teil von Code Review und CI Builds sein
Das Orakelproblem
Camillo Miola (Biacca) (Italian (Neapolitan), 1840 - 1919)The Oracle, 1880, Oil on canvas108 × 142.9 cm (42 1/2 × 56 1/4 in.), 72.PA.32The J. Paul Getty Museum, Los Angeles
http
s://m
ediu
m.co
m/y
ld-b
log/
the-
orac
le-p
robl
em-c
c02b
42a1
f44
Property-Based Testing
– Testfälle per Zufallsgenerator erstellen
– Anhand von allgemein gültigen Eigenschaften prüfen
– Knackpunkt: unveränderliche Eigenschaften ableiten
Beispiel: Zahlenarray aufsteigend sortieren
Code Coverage
– Prüfen, ob ein Pull Request die Coverage verbessert oder verschlechtert
– Sicherstellen, dass Tests tatsächlich die ganze Funktionalität abdecken
Istanbul.js
Component Testing
Jest Snapshots
Enzyme
– Test-Utility, mit der man den Output von Komponenten untersuchen, manipulieren und durchqueren kann
– Nur kompatibel mit React
– Kann mit verschiedenen Test Runners verwendet werden (z.B. Jest)
– Kann
– Klick-Events etc. simulieren
– Komponentenfehler simulieren
– Lifecycle-Events auslösen
– Props, State und Context verändern
Storybook
– UI-Entwicklungs- und Testumgebung
– Komponenten isoliert darstellen und mit ihnen interagieren
– Stories beschreiben die jeweiligen Use Cases der Komponenten
– Ökosystem mit vielfältigen Add-Ons
– Demo: https://storybooks-official.netlify.com/?path=/story/ui-notifications-item--simple
Component Testing Best Practices
– Brüchige Selektoren vermeiden
– Tests für Textinhalte nur schreiben, wenn es wichtig ist, dass sich der Text nicht ändert
End-to-EndTesting
Cypress
– Test Runner für E2E-Tests
– Wie ein Nutzer mit der App interagieren
– Framework-agnostisch (React, Angular, Vue…)
– Unterstützt (vorerst) nur Chrome
– Basiert nicht auf Selenium
– Tests werden ausschließlich in JavaScript geschrieben
Selenium
– “Selenium automates browsers.”
– Chrome, Firefox, IE7+, Edge, Safari, Opera
– Browser Testing mit Browserstack
E2E-Testing Best Practices
– Externe Webseiten nicht im Test besuchen (OAuth, Email…)
– Besser mehrere Assertions in einem Test zusammenfassen
– Anwendungsstatus vor statt nach dem Ausführen eines Tests wiederherstellen
Visual Regression Testing
– Unerwartete Änderungen in der UI entdecken und überprüfen
– Responsive Tests
– Cross-Browser Tests
– z.B. mit percy.io
http
s://b
log.
perc
y.io/
rede
signi
ng-w
ith-c
onfid
ence
-d117
9984
5ecb
Zusammenfassung
– Unit Tests
– Jest
– Property-based testing mit testcheck
– Component Tests
– Jest Snapshots
– Enzyme
– Storybook
– End-to-end Tests
– Cypress
– Selenium
Und nu?
– Tests für behobene Bugs
– Tests für Änderungen/neue Features
© chemmedia AG
Fragen?
Was habt ihr für euch mitgenommen?
Werdet ihr zukünftig etwas anders machen?
Literatur– Jest
– https://jestjs.io/docs/en/getting-started– https://facebook.github.io/create-react-app/docs/running-tests– https://jestjs.io/docs/en/next/architecture– https://medium.com/yld-blog/the-oracle-problem-cc02b42a1f44– http://www0.cs.ucl.ac.uk/staff/m.harman/tse-oracle.pdf
– Property-based testing– http://leebyron.com/testcheck-js/– http://jsverify.github.io/– https://www.propertesting.com/book_what_is_a_property.html
– Snapshot testing– https://jestjs.io/docs/en/snapshot-testing– https://benmccormick.org/2016/09/19/testing-with-jest-snapshots-first-impressions/
– Enzyme– https://airbnb.io/enzyme/– https://jestjs.io/docs/en/tutorial-react#enzyme
– Storybook– https://storybook.js.org/– https://github.com/storybooks/storybook/tree/master/addons/storyshots/storyshots-core– https://github.com/mthuret/storybook-addon-specifications
– Cypress– https://www.cypress.io/– https://youtu.be/Fj4Vm9m95Io?t=6087
© chemmedia AG
Vielen Dank für eure Aufmerksamkeit.
chemmedia AGParkstraße 35D-09120 Chemnitz
Vorstandsvorsitzender Dipl.-Wirt.-Inf. Lars Faßmann
Vorsitzende des Aufsichtsrates: Sandra Deyringer
Telefon: +49 371 49370 0Fax: +49 371 49370 201E-Mail: info@chemmedia.de
top related