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

@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 

HOW SOFTWARE IS BUILT? 

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 

User should be able to add a new product to their store USER STORY PRODUCT MANAGER Photo by Andrea Piacquadio from Pexels 

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 

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 

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 

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 

HOW DO YOU KNOW IT’S READY? 

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) 

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 

ENCOURAGING DEVELOPERS TO WRITE TESTS: HOW TO MAKE IT EASIER? 

No content

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 

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) 

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 

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 

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 

Q&A 

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