Upgrade to Pro — share decks privately, control downloads, hide ads and more …

It's a (testing) trap! - Common testing pitfalls and how to solve them

It's a (testing) trap! - Common testing pitfalls and how to solve them

“It’s a trap” - a call or feeling we all might be familiar with, not only when it comes to Star Wars. It’s signalizing a sudden moment of noticing imminent danger. This situation is a nice allegory for an unpleasant realization in testing. Imagine having the best intentions when it comes to testing, but still ending up with tests failing to deliver you any value at all? Tests who are feeling like a pain to deal with?

When writing frontend tests, there are lots of pitfalls on the way. In sum, they can lead to bad maintainability, slow execution time, and - in the worst-case - tests you cannot trust. But it doesn’t have to be that way. In this session, I will talk about the common mistakes developers make, at least from my experience. And of course, on how to avoid them. Testing doesn’t need to be painful, after all.

36751965e79dca4618cccc3c08efc912?s=128

Ramona Schwering

June 08, 2021
Tweet

Transcript

  1. Common Testing Pitfalls and How to Solve Them

  2. None
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. It’s a trap! // Jest describe('deprecated.plugin', () => { it('should

    throw error',() => { const component = createComponent(); expect(component.vm).toBeTruthy(); }); });
  17. „Three part“ rule // Jest describe('deprecated.plugin', () => { it('Property:

    Should throw an error if the deprecated prop is used', () => { const component = createComponent(); expect(global.console.warn) .toBeCalled(); }); });
  18. None
  19. AAA pattern // Jest code It’s a trap! // Jest

    describe('Context menu', () => { it('should open the context menu on click', async () => { const wrapper = createWrapper(); expect(wrapper.vm).toBeTruthy(); await wrapper.trigger('click'); const selector = '.sw-context-menu'; expect(wrapper.find(selector).isVisible()).toBeTruthy(); }); });
  20. AAA pattern // Jest code AAA-Pattern // Jest describe('Context menu',

    () => { it('should open the context menu on click', () => { // Arrange const wrapper = createWrapper(); const selector = '.sw-context-menu'; // Act await wrapper.trigger('click'); // Assert expect(wrapper.vm).toBeTruthy(); expect(wrapper.find(selector).isVisible()).toBeTruthy(); }); });
  21. None
  22. Isolated test data // Cypress describe('Customer login', () => {

    let customer = {}; beforeEach(() => { // Set application to clean state cy.setInitialState() .then(() => { // Create test data return cy.setFixture('customer'); }) }): // … tests will start below })
  23. None
  24. It’s a trap! AAA pattern // Jest code Realistic test

    data // Cypress it('should create and read product', () => { // Open module to add product cy.get('a[href="#/sw/product/create"]').click(); // Add basic data to product cy.get('.sw-field—product-name').type('T-Shirt Ackbar'); cy.get('.sw-select-product__select_manufacturer') .type('Space Company'); // … test continues … });
  25. It’s a trap! AAA pattern // Jest code It’s a

    trap // Cypress it('should create and read product', () => { // Open module to add product cy.get('a[href="#/sw/product/create"]').click(); // Add basic data to product cy.get('.sw-field—product-name').type('T-Shirt Ackbar'); cy.get('.sw-select-product__select_manufacturer') .type('Space Company'); // … test continues … });
  26. None
  27. cy.contains('text of your site')

  28. None
  29. cy.get('data-cy="submit"')

  30. None
  31. It’s a trap! // Cypress Cypress.Commands.add('typeSingleSelect', { prevSubject: 'element', },

    (subject, value, selector) => { cy.wrap(subject).should('be.visible'); cy.wrap(subject).click(); cy.wait(500); cy.get(`${selector} input`) .type(value); });
  32. None
  33. cy.get('data-cy="submit"') .should('be.visible')

  34. None
  35. cy.wait('@request') .its('response.statusCode') .should('equal', 200);

  36. None
  37. None
  38. None
  39. None
  40. None
  41. It’s a trap! AAA pattern // Jest code One more

    thing … Resources https://github.com/goldbergyoni/javascript-testing-best-practices https://kentcdodds.com/blog/testing-implementation-details https://osherove.com/blog/2005/4/3/naming-standards-for-unit-tests.html