© 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