Cartographer Common
Include common controls, types, constants, etc for Cartographer libraries
Running (Launches Storybook)
- Run
npm run dev
Publishing
- Update version and changelog
- Run
npm run build - Run
npm publish
QA
Cartographer No Harm
Performing general no-harm testing on Cartographer is done by completing the following routines in their appropriate development environment. Testing these routines will provide insight into the health of Cartographer as it functions as widget UI for Serenity.
Load Storybook
- From the appropriate environment, via a feature branch (QA) or Master (Prod) load the story and ensure the component loads on the page and there are no errors
Interact with the component’s UI
- Clicking buttons, opening drawers, etc
Storybook Controls
Storybook Controls gives you a graphical UI to interact with a component's arguments dynamically without needing to code
- Interact with the component’s Controls as much as possible. Using these controls will update the component's UI to test different scenarios. Keep in mind that each story will have its own unique controls.
- Set booleans for different states such as Onboarding and ZeroStates
- Edit key values
Accessibility
Test component compliance with web accessibility standards
- Ensure there are no Accessibility violations in the Accessibility tab of Control. Frequently check this tab each time you update the component’s UI
- Ensure using a screen reader the content is accessible and has context
Storybook toolbar
-
Dark Mode. This toolbar item lets you change the theme and toggle between light and dark mode
- Ensure the components can be loaded in dark mode
- Ensure the components can be loaded in light mode
-
View Port. The Viewport toolbar item allows you to adjust the dimensions of the iframe
- Ensure the component is responsive and can be loaded in Small Mobile View
- Ensure the component is responsive and can be loaded in Large Mobile View
- Ensure the component is responsive and can be loaded in Tablet View
Devtools
- Check for console errors
- Check for expected console messages. Console messages serve as analytic events when buttons are clicked. NOTE: There is no need to check network requests as the UI is not connected to any MX databases. Any network request you see is being made by Storybook not the component.