How to make tests more resilient

Talk about making rests more resilient.
Given on 1st of July 2020 at DWX Home: https://www.developer-week.de/dwx-home/#/talk/testen-vortrag-1-tba

Transcript

1. Story time
2. Release Time!
3. Disaster!
4. The business’ footprint
5. Gregor Woiwode @GregOnNet gregor.woiwode@co-IT.eu Softwarearchitekt co-IT.eu GmbH
7. Test Internal External API API Platform False-Positives Requirements
8. Test Internal External API API Platform False-Positives Requirements
9. How can we make tests more resilient?
10. 1. Resiliency Process 2. Unit-Test Level 3. UI-Test Level
12. Run test case Identify resilience problems Identify resilience parameters Apply resilience parameters © IBM 2014
14. Adapter
15. Application Library
16. Application Library with
17. ttttttttt Application Library with
18. ttttttttt Application Library with
19. Application Library with brand new Library Are the tests still working?
20. Application Library with … using Adapter abstract your library
21. Applicationwith Library … using Adapter
22. Applicationwith Library … using Adapter
23. Applicationwith Library … using Adapter
24. Example
25. date-fns const yesterday = subDays(new Date(), 1); const tomorrow = addDays(new Date(), 1); moment.js const yesterday = moment().subtract(1, 'days').toDate(); const tomorrow = moment().add(1, 'days').toDate();
26. date-fns const yesterday = subDays(new Date(), 1); const tomorrow = addDays(new Date(), 1); moment.js const yesterday = moment().subtract(1, 'days').toDate(); const tomorrow = moment().add(1, 'days').toDate(); Library brand new Library
27. export class TimeKeeper { get yesterday() { return moment().subtract(1, 'days').toDate(); } get tomorrow() { return moment().add(1, 'days').toDate(); } } moment.js
28. export class TimeKeeper { get yesterday() { return subDays(new Date(), 1); } get tomorrow() { return addDays(new Date(), 1); } } date-fns
29. Adapter Benefits Saves time - One place of maintenance Stabilises In-App-API Simplifies faking
31. Isolated UI Tests
32. Template Level ""</> Application Level
33. <button class="btn">Save"</button> cy.get(‘.btn’) .should('exist');
34. <button class="btn">Save"</button> <button class="btn">Cancel"</button> cy.get(‘.btn’) .first() .should('exist');
35. <button class="btn">Cancel"</button> <button class="btn">Save"</button> cy.get(‘.btn’) .first() .should('exist');
36. <button class="btn">Save"</button> cy.get(‘.btn’) .should('exist');
37. <button data-testid="view"__button"--save" class="btn">Save"</button> cy .get(‘[data-testid=view"__btn—save]’ ) .should('exist');
38. <button data-testid="view"__button"--save" class="btn">Save"</button> <button class="btn">Cancel"</button> cy .get(‘[data-testid=view"__btn—save]’ ) .should('exist');
39. Application Level
40. Application /overview Testing a feature rich component
41. Application /overview Interact with data grid
42. Application /overview New requirement overlay
43. Application /products/reports/overview Clickable area is not reachable /overview
44. Application /products/reports/overview Component is moved in the app.
45. UI is fluent Widgets block test targets Test targets move
46. Application /products/reports/overview /overview
47. Application /products/reports/overview /overview Sandbox
49. Write a story about your component
50. export const primary = () "=> ({ }); Configure a story
51. export const primary = () "=> ({ "/* ""... "*/ component: DataGridComponent, }); Specify you UI component
52. export const primary = () "=> ({ "/* ""... "*/ component: DataGridComponent, props: { displayedColumns: ['position', 'name', 'weight', 'symbol'], dataSource: new MatTableDataSource([ { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' }, { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' }, { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' } ]), }, }); Provide some test data
54. describe('common-ui', () "=> { beforeEach(() "=> cy.visit('/iframe.html?id=datagridcomponent"--primary')); it('should sort by number', () "=> { cy.get('[data-testid=data-grid"__header"--number]').click(); cy.get('[data-testid=data-grid"__header"--number]').click(); cy.get('[data-testid=data-grid"__header"--number-value]') .first() .should('contain', 10); }); }); Write an UI test for your component
55. nx.dev configures & runs
56. Example
58. Isolated UI Benefits Lower complexity of UI tests Focus on specific UI parts Get rid of side effects that break tests
59. Summary Clarified the why of test stability Learned about test resiliency process Adapter pattern stabilises Unit Tests Isolated UI Tests stabilise e2e Tests
60. Gregor Woiwode @GregOnNet gregor.woiwode@co-IT.eu Softwarearchitekt co-IT.eu GmbH Zeit für Ihre Fragen…
61. Photo by Alex Wigan on Unsplash Photo by Chris Montgomery on Unsplash Photo by Bruno Martins on Unsplash Photo by Luke Stackpoole on Unsplash Photo by Steve Johnson on Unsplash Photo by Sigmund on Unsplash Image sources Photo by David Boca on Unsplash
62. Content Sources https://usersnap.com/blog/resilience-testing/ https://www.ibm.com/developerworks/websphere/techjournal/1407_col_nasser/1407_col_nasser.html https://kentcdodds.com/blog/making-your-ui-tests-resilient-to-change https://cypress.ui https://storybook.js.org https://nx.dev