Integration Test with @testing-library

Transcript

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

   View Slide

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
   

   View Slide

3. HOW SOFTWARE IS
   BUILT?
   

   View Slide

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
   

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

10. HOW DO YOU KNOW
    IT’S READY?
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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

    View Slide

14. View Slide

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
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

20. Q&A
    

    View Slide

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

    View Slide