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
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
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
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
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
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
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
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
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