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

Transcript

1. View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. View Slide

13. View Slide

14. describe('deprecated.plugin', () => {
    
    
    it('should throw error',() => {
    
    
    …
    
    
    });
    
    
    });
    
    
    

    View Slide

15. describe('deprecated.plugin', () => {
    
    
    it('Property: Should throw an error
    
    
    if the deprecated prop is used',
    () => {
    
    
    …
    
    
    });
    
    
    });
    

    View Slide

16. View Slide

17. 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();
    
    
    });
    
    
    });
    

    View Slide

18. describe('Context menu', () => {
    
    
    it('should open the context menu on click', () => {
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    });
    
    
    });
    

    View Slide

19. describe('Context menu', () => {
    
    
    it('should open the context menu on click', () => {
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    });
    
    
    });
    // Arrange
    
    
    const wrapper = createWrapper();
    
    
    const selector = '.sw-context-menu';
    
    
    

    View Slide

20. 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');
    
    
    

    View Slide

21. 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();
    

    View Slide

22. View Slide

23. View Slide

24. “…arrange my test == what I’m given.”
    

    View Slide

25. “…arrange my test == what I’m given.”
    “…act in my test == when something happens.”
    

    View Slide

26. “…arrange my test == what I’m given.”
    “…act in my test == when something happens.”
    “…assert the results == something happens
    
    
    then this is what I expect as the outcome.”
    

    View Slide

27. “…arrange my test == what I’m given.”
    “…act in my test == when something happens.”
    “…assert the results == something happens
    
    
    then this is what I expect as the outcome.”
    

    View Slide

28. describe('Context menu', () => {
    
    
    it('should open the context menu on click', () => {
    
    
    // Given
    
    
    const contextButtonSelector = 'sw-context-button';
    
    
    const contextMenuSelector = '.sw-context-menu';
    
    
    // When
    
    
    let contextMenu = wrapper.find(contextMenuSelector);
    
    
    expect(contextMenu.isVisible()).toBe(false);
    
    
    const contextButton = wrapper.find(contextButtonSelector);
    
    
    await contextButton.trigger('click');
    
    
    // Then
    
    
    contextMenu = wrapper.find(contextMenuSelector);
    
    
    expect(contextMenu.isVisible()).toBe(true);
    
    
    });
    
    
    });
    
    
    

    View Slide

29. View Slide

30. View Slide

31. it('should create and read product', () => {
    
    
    …
    
    
    cy.get('.sw-field—product-name').type('T-Shirt Ackbar');
    
    
    cy.get('.sw-select-product__select_manufacturer')
    
    
    .type('Space Company’);
    
    
    …
    
    
    });
    

    View Slide

32. it('should create and read product', () => {
    
    
    …
    
    
    cy.get('.sw-field—product-name').type('T-Shirt Ackbar');
    
    
    cy.get('.sw-select-product__select_manufacturer')
    
    
    .type('Space Company’);
    
    
    …
    
    
    });
    

    View Slide

33. View Slide

34. View Slide

35. View Slide

36. Cypress.Commands.add('typeSingleSelect', {
    
    
    prevSubject: 'element',
    
    
    },
    
    
    (subject, value, selector) => {
    
    
    …
    
    
    cy.wait(500);
    
    
    cy.get(`${selector} input`)
    
    
    .type(value);
    
    
    });
    
    
    
    

    View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide