feat: add data-kjb-element attributes for QE end-to-end tests

[jennifer-mullen]

Description

Note: this is a work in progress. My next step is to review it with Monica. I'll update the version and changelog when it's ready for final review.

This PR is for my feature feature request #2030 to add data-kjb-element attributes to Sage React components for use in the Quality Engineering team's end-to-end UI tests.

UI test automation needs to be able to locate elements based on attributes in the DOM. Currently, most of our locators are based on CSS classes. This is unreliable and makes UI automation dependent on the presentation of the app. These locators are likely to break when minor UI changes are made to the app such as changing classes, changing the types of elements, or changing the structure of a component. The best practice for UI automation is to add test ID attributes to the elements that UI tests interact with. This attribute should be used only for automated UI tests. The attribute should only change when the functionality in the app changes. This allows developers to change the presentation (styles, element tag type, etc) without breaking UI automation.

We already use the attribute data-kjb-element on Ruby components. I would like to add them to the Sage React components as well.

Please refer to this design document for additional information.

Screenshots

Before	After	Notes
		The PageHeading component appears once on a page and does not need the attribute to be customized. The E2E tests can identify the page title and other elements in the header on any page.
		Link components get individual data-kjb-element IDs for test automation to identify them

Testing in sage-lib

The changes can be tested using Storybook.

• Test that the data-kjb-element attributes are in the correct location by adding them to Storybook stories. View the component in Storybook then inspect it in the browser's dev tools. The attribute should be shown with the correct value.
• Test that the attribute is not added by not adding it to a story, then inspecting in dev tools.

Testing in kajabi-products

1. (BREAKING) Add optional kjbElementId parameters to components, allowing existing components to be used without any code changes
   • View a page that uses the components without making any code changes to it. Verify that the components load and behave properly.
2. (HIGH) Set the kjbElementId parameter for components
   • Update instances of the components with values for kjbElementId. Verify that the attribute is in the DOM and that the page loads and behaves properly.

Related

• QE's design document (open to feedback!)

[ju-Skinner]

Hello,

I know this PR is in draft, but I wanted to help prevent you from duplicating some things. In components that accept ...rest as a prop, you do not need to add kjbElementId.

You can add <Accordion data-kjb-element="exampleSingleAccordion"> when using the component. In the changes you made below with the .story.jsx you can replicate the example above and it will work as intended.

Feel free to reach out if you have any other questions or need assistance.