Integration Test with @testing-library

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