The slides of my session "Front End & Back End in Sync with Pact CDC Tests" given at the Agile Test @Munich Meetup on 25.10.2018. How can we test that the REST calls from the front end and their respective back end endpoints work correctly together? Of course browser tests against the deployed application cover that. But their feedback is very slow and finding the root cause for a test failure takes ages. Thus the Testing Pyramid suggests to complement those with more isolated tests. In the last few years Consumer-Driven Contract (CDCs) Tests have become an elegant solution to keep a consumer and a provider service in sync in a decoupled fashion. So why not transfer this idea to the interactions between back end and front end? So we tried to use the Pact CDC library to assure our Angular front end and our Spring Boot back end do fit together. Nice by-product: the front end and back end tests are logically connected but can be executed isolated and decoupled from each other. In the session I will explain the approach, show you the code of an example project and tell you about our experiences with it. You can find a full example project in this github repository: https://github.com/davidvoelkel/angular-spring-boot-pact

1. PACT CDC Tests
Front End & Back End
In Sync
David Völkel
Agile Testing @Munich Meetup

2. codecentric
Software Craft Meetup
#TDD
@davidvoelkel

3. PACT CDC TestsOur PAIN
Back End <=> Front End

4. Consumer Driven Contracts
(CDCs)
?

5. Pact CDCs
Producer
Consumer
Request ResponseInteraction
Pact
File

6. Projects
Consumer
/ Client
Request Response
Mock
Server
Pact
File
Consumer
Test
Producer /
Service
Producer
Test
Consumer Producer

7. Our Approach
Consumer is Front End
Pact Web for Angular Services

8. PACT CDC TestsDemo
Project
https://github.com/davidvoelkel/angular-spring-boot-pact/

9. Trade Offs

10. Diff-Job vs. Pact Broker
?

11. Consumer vs. Producer first
?

12. Couple Deployments
?

13. Back End Tests
black box
white box mocking
below controller vs. at system boundary

14. Assessment

15. Alternatives
?
Angular Mocks
Integration test with deployed server
Selenium like Tests -

16. Pact JS
Cumbersome Nice Tests
+-

17. +
Pact JVM
Spring Boot Tests
Slow Tests Usability
-

18. The Approach
?
Worth the quirks
Nice Dev Flow & Tests
Front End & Backend in Sync
+

19. Q&A

20. License
Creative Commons-ShareAlike 3.0