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

Integration Test with @testing-library

Integration Test with @testing-library

jongthechemist

October 07, 2020
Tweet

More Decks by jongthechemist

Other Decks in Programming

Transcript

  1. @JONGTHECHEMIST KUCHING, SARAWAK FULL-STACK (MOSTLY FRONTEND, MOSTLY JAVASCRIPT) 4 YEARS

    WORKING EXPERIENCE WAS A HOBBYIST DEV, NOW FULL TIME CHEMICAL ENGINEER ( 2 MONTHS) NOW AT SETEL
  2. 1. User Story - Product Manager 2. Acceptance Criteria -

    PM/Analyst 3. UI/UX Design - Designer 4. Build - Developer 5. QA Test - Tester BUILD PROCESS ACTIONS
  3. User should be able to add a new product to

    their store USER STORY PRODUCT MANAGER Photo by Andrea Piacquadio from Pexels
  4. 1. User is given ‘Add Product’ option on the product

    list screen 2. Upon clicking ‘Add Product’, user can fill up a form with these fields: a) Name of product b) Description c) Product code 3. User can click ‘Submit’ to add new product 4. On successful submission, product is added to product list 5. On failed submission, an error message is shown ACCEPTANCE CRITERIA PRODUCT MANAGER / ANALYST Photo by Andrea Piacquadio from Pexels
  5. 1. User is given ‘Add Product’ option on the product

    list screen 2. Upon clicking ‘Add Product’, user can fill up a form with these fields: a) Name of product b) Description c) Product code 3. User can click ‘Submit’ to add new product 4. On successful submission, product is added to product list 5. On failed submission, an error message is shown UI/UX DESIGN DESIGNER Product List Product A Product B Product C Add Product Product List Product A Product B Product C Add Product Name: Description: Product code: Submit Product List Product A Product B Product C Product D Add Product Product List Something went wrong Product A Product B Product C Add Product
  6. 1. User is given ‘Add Product’ option on the product

    list screen 2. Upon clicking ‘Add Product’, user can fill up a form with these fields: a) Name of product b) Description c) Product code 3. User can click ‘Submit’ to add new product 4. On successful submission, product is added to product list 5. On failed submission, an error message is shown UI/UX DESIGN DESIGNER Product List Product A Product B Product C Add Product Product List Product A Product B Product C Add Product Name: Description: Product code: Submit Product List Product A Product B Product C Product D Add Product Product List Something went wrong Product A Product B Product C Add Product
  7. 1. User is given ‘Add Product’ option on the product

    list screen 2. Upon clicking ‘Add Product’, user can fill up a form with these fields: a) Name of product b) Description c) Product code 3. User can click ‘Submit’ to add new product 4. On successful submission, product is added to product list 5. On failed submission, an error message is shown BUILD DEVELOPER Product List Product A Product B Product C Add Product Product List Product A Product B Product C Add Product Name: Description: Product code: Submit Product List Product A Product B Product C Product D Add Product Product List Something went wrong Product A Product B Product C Add Product TEST CODE
  8. QA TEST + INTEGRATION TEST TEST THE BEHAVIOUR OF THE

    APPLICATION AS A USER WITH BUSINESS CONTEXT VS. UNIT TEST -> TESTING SMALL UNITS OUTSIDE OF BUSINESS CONTEXT HUMAN MACHINE (AUTOMATED)
  9. 1. User is given ‘Add Product’ option on the product

    list screen 2. Upon clicking ‘Add Product’, user can fill up a form with these fields: a) Name of product b) Description c) Product code 3. User can click ‘Submit’ to add new product 4. On successful submission, product is added to product list 5. On failed submission, an error message is shown BUILD DEVELOPER TEST
  10. TEST 1: ELEMENT IS SHOWN 1. User is given ‘Add

    Product’ option on the product list screen .findByText() asynchronously looks for text content (1000ms timeout) https://testing-library.com/docs/dom-testing-library/api-queries • getBy • getAllBy • queryBy • queryAllBy • findBy • findAllBy • ByLabelText • ByPlaceholderText • ByText • ByAltText • ByTitle • ByDisplayValue • ByRole • ByTestId • .getBy -> sync, error if not found .queryBy -> sync, null/[] if not found .findBy -> async, reject if not found
  11. TEST 2: USER INTERACTION 2. Upon clicking ‘Add Product’, user

    can fill up a form https://github.com/testing-library/user-event fireEvent from @testing-library/react or @testing-library/user-event • click(element, eventInit, options) • dblClick(element, eventInit, options) • type(element, text, [options]) • upload(element, file, [{ clickInit, changeInit }]) • clear(element) • selectOptions(element, values) • deselectOptions(element, values) • tab({shift, focusTrap}) • hover(element) • unhover(element) • paste(element, text, eventInit, options)
  12. TEST 3: MOCKING EXTERNAL DEPENDENCY 3. User can click ‘Submit’

    to add new product What to mock? Integration test is meant to test application behavior. Avoid mocking too much. Example: Mock XHR request instead of Axios functions • nock • xhr-mock
  13. TEST 4 & 5: INTEGRATION TEST 4. On successful submission,

    product is added to product list https://testing-library.com/docs/dom-testing-library/api-queries How multiple components successfully work with each other and fulfil the requirements
  14. TEST 4 & 5: INTEGRATION TEST 5. On failed submission,

    an error message is shown https://testing-library.com/docs/dom-testing-library/api-queries How multiple components successfully work with each other and fulfil the requirements
  15. Q&A