Integration Test with @testing-library

Integration Test with @testing-library

89a6d3811e888ab2b7dffd34c805929d?s=128

jongthechemist

October 07, 2020
Tweet

Transcript

  1. INTEGRATION TEST WITH @TESTING-LIBRARY KHAIRUL NIZAM SAIFUL FULL-STACK DEV @

    SETEL
  2. @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
  3. HOW SOFTWARE IS BUILT?

  4. 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
  5. User should be able to add a new product to

    their store USER STORY PRODUCT MANAGER Photo by Andrea Piacquadio from Pexels
  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 ACCEPTANCE CRITERIA PRODUCT MANAGER / ANALYST Photo by Andrea Piacquadio from Pexels
  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 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
  8. 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
  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 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
  10. HOW DO YOU KNOW IT’S READY?

  11. 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)
  12. 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
  13. ENCOURAGING DEVELOPERS TO WRITE TESTS: HOW TO MAKE IT EASIER?

  14. None
  15. 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
  16. 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)
  17. 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
  18. 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
  19. 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
  20. Q&A

  21. REPOSITORIES HTTPS://GITHUB.COM/JONGTHECHEMIST/TESTING-REACT HTTPS://GITHUB.COM/JONGTHECHEMIST/TESTING-NG