QA Docs

Common set of passing criteria for FE field components.

Onethread

Button

Save button should rename as update while editing something.

Save, update, cancel button should appears in a sticky modal always.

Save button should be disable in edit. It will be enabled if user changes something.

Save button should have a loading animation.

Always show a message in tooltip when max limit reached:

https://prnt.sc/HEw_t7CGXwL-⁠

Every toggle button should have a background shade in off state.

Bad Practice:

https://prnt.sc/yJZr8pxOtdDh⁠

Good Practice:

https://prnt.sc/qG8tZmOZNIbU⁠

Always show a tooltip when you are making a button disable.

Form

Error message convention for required field: “fieldName” field is required. Example:

https://prnt.sc/s8aEvYcMnQp9⁠

⁠

Error message convention for max char reached: “fieldName” can have at most 32 characters long.

Required field should have red asterisk symbol (*).

If user missed any required field in create and edit, that field should appears with red border and error message. Example:

https://prnt.sc/wpbVA-7ilNLW⁠

Every single field should have a placeholder text. placeholder must show example

Don’t show clear button in dropdown when dropdown is already empty:

https://prnt.sc/8doJ4--TPu_S⁠

Currency and country should never select with default value by default.

Unless there’s a cropping mechanism required, file upload should allow multiple file selection and upload.

If user try to save a form and he missed a required field, save button should be enabled. Upon clicking on save button user should scroll to that required field.

Always show client email with client name in dropdown. Example:

https://prnt.sc/jI4i8ViHTBnV⁠

⁠

Always show orderId with Service name in dropdown

Accepted File type should show everywhere in a tooltip in every option of file upload

Form will always autosave.

Filter (sort)

Every implemented filter and sort should have an option to save state. (Need to call custom hook which handles user settings API and connect filter component. See already implemented component for reference.)

Import / Export

While exporting anything, file name convention is: “workspaceName-moduleName-exportDate”. Example:

https://prnt.sc/OKiodcmfOUu2⁠

Assignee will never have an option to import, export.

Import and Export flow will be same for all upcoming features. Check section teams export functionality.

Table / Board / Card View

Those who don’t have edit and delete access and access to view only, they shouldn’t get checkbox and three dot in row and also should have a margin in left. Example of expected margin:

https://prnt.sc/eAfLNglG4Po8⁠

⁠

Should show boring avatar everywhere if there is no DP added by user. Expected:

https://prnt.sc/1-UZKdTMgP5i⁠

Bad Practice:

https://prnt.sc/EcK7c8Sd_2g_⁠

Modal design should be like this: Bad Design:

https://prnt.sc/z7cwOPVnCYus⁠

Good Design:

https://prnt.sc/IqIWCrx-qOXt⁠

New created thing should at the top of the list, card, board

Always remove this extra space from footer:

https://prnt.sc/ecnhVtu6xruO⁠

Never use dashboard in any breadcrumb:

https://prnt.sc/4UwKU3Qz0yAa⁠

⁠

Header must be sticky - cross reference with OT UI

Large text should show with 12 Char after that ... Example:

https://prnt.sc/_Zk-0a9QOu4g⁠

⁠

9. Always ask for empty states from UX

Global

Whatever text is getting rendered, make sure the translation setup is done.

Import color from theme instead of hardcoding, so that color changes when theme is changed. There’s a custom hook for importing the color.

There should be a unique ID in the components, so that QA can target those elements in automation

Some create/edit in modal but some in page, needs to be consistent.

Performance

Make sure to test and improve feature branch with lighthouse or GTMetrix

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.