$30 off During Our Annual Pro Sale. View Details »

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

Ramona Schwering

June 08, 2021
Tweet

More Decks by Ramona Schwering

Other Decks in Programming

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