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.