Skip to main content

Retainer QA Process

It is imperative that we only deliver work to the highest standard to our clients, and that bugs or visual inconsistencies should be resolved before the client views the work. Once you have completed a task, before presenting it to the client the steps below should be followed:

caution

All work must be tested on real devices (using a physical device, iOS simulator, or Browserstack), not just resizing your desktop browser. (The project Readme will inform you which devices need to be supported)

General changes​

This refers to the majority of smaller changes, from minor styling changes to changes or creation of smaller components.

  • Test visual changes at all device sizes - mobile, tablet desktop, large desktop
  • Ensure that optional elements do not break the layout when both added and removed
  • Refer to the component testing document to ensure functionality meets the criteria
  • Refer to the customiser structure guidelines and ensure that all customiser settings are laid out cleanly, are appropriately labelled, have the correct types and have limits if required
  • Refer to the metafield structure guidelines and ensure metafields are laid out cleanly, are appropriately labelled, have the correct types and have limits if required
  • Ensure everything previews correctly in the customiser
  • If it’s a larger change, ensure it does not cause CLS issues and that images are correctly sized
  • If building anything that involves the customiser then populate another section once everything has been built to ensure everything functions appropriately within the customiser

Functionality changes​

This relates to more complex components, especially those with more involved JavaScript as well as more bespoke functionality.

  • Ensure that the functionality and layout don’t break when optional elements are removed
  • Ensure errors are handled gracefully and displayed to the user where necessary
  • Make sure the component doesn’t inadvertently affect other components
  • Test JS changes across all supported browsers - always test the changes with the console open, and watch for any errors
  • Ensure the solution is appropriate for the merchant
  • Ensure we do not abuse the section rendering API which can cause rate limiting errors

Checkout flow changes​

This relates to any changes that affect the checkout flow, including add to cart logic, PDP, push cart, cart or checkout changes.

info

These tests should be done in addition to the above

  • Follow the checkout process from start to finish - Request a discount code from the client for 100% discount
  • Add an item to the cart,
  • Proceed through the checkout
  • Submit a test order
  • Request order is cancelled
  • Ensure that any development specific code is removed after the QA process
  • Make sure the changes work after the checkout updated - ensure all events are bound on page:load and page:change (add a discount code and make sure your changes still work)