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

Transcript

14. describe('deprecated.plugin', () => { it('should throw error',() => { … }); });
15. describe('deprecated.plugin', () => { it('Property: Should throw an error if the deprecated prop is used', () => { … }); });
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(); }); });
18. describe('Context menu', () => { it('should open the context menu on click', () => { }); });
19. describe('Context menu', () => { it('should open the context menu on click', () => { }); }); // Arrange const wrapper = createWrapper(); const selector = '.sw-context-menu';
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');
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();
24. “…arrange my test == what I’m given.”
25. “…arrange my test == what I’m given.” “…act in my test == when something happens.”
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.”
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.”
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); }); });
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’); … });
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’); … });
36. Cypress.Commands.add('typeSingleSelect', { prevSubject: 'element', }, (subject, value, selector) => { … cy.wait(500); cy.get(`${selector} input`) .type(value); });