Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Draft
wants to merge 3 commits into
base: develop
Choose a base branch
from
Draft

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6a71fa7
feat: aadd test IDs, round 1
jennifer-mullen Jan 7, 2025
94949df
fix: fix text
jennifer-mullen Jan 7, 2025
0be85e2
chore: change testId to kjbElementId
jennifer-mullen Jan 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/sage-react/lib/Accordion/Accordion.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export const Accordion = ({
children,
id,
onlyOnePanelExpanded,
kjbElementId,
...rest
}) => {
const classNames = classnames(
Expand All @@ -18,7 +19,7 @@ export const Accordion = ({
);

return (
<div className={classNames} {...rest}>
<div className={classNames} {...rest} data-kjb-element={kjbElementId}>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

{children}
</div>
);
Expand All @@ -29,11 +30,13 @@ Accordion.defaultProps = {
className: '',
id: '',
onlyOnePanelExpanded: false,
kjbElementId: null,
};

Accordion.propTypes = {
children: PropTypes.node,
className: PropTypes.string,
id: PropTypes.string,
onlyOnePanelExpanded: PropTypes.bool,
kjbElementId: PropTypes.string,
};
19 changes: 14 additions & 5 deletions packages/sage-react/lib/Accordion/Accordion.story.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,16 @@ const MultipleTemplate = () => {
};

return (
<Accordion>
<ExpandableCard name="panel-1" expanded={activePanel === 'panel-1'} onClick={handleChange('panel-1')} alignArrowRight={true} triggerLabel="Expand">
<Accordion kjbElementId="exampleSingleAccordion">
<ExpandableCard name="panel-1" expanded={activePanel === 'panel-1'} onClick={handleChange('panel-1')} alignArrowRight={true} kjbElementId="firstExamplePanel" triggerLabel="Expand">
<Checkbox
checked={false}
disabled={false}
hasError={false}
id="checkbox1-demo"
label="Grant offers"
name="checkbox1-demo"
kjbElementId="grantOffers"
/>
<Checkbox
checked={false}
Expand All @@ -33,6 +34,7 @@ const MultipleTemplate = () => {
id="checkbox2-demo"
label="Add tags"
name="checkbox2-demo"
kjbElementId="addTags"
/>
<Checkbox
checked={false}
Expand All @@ -41,16 +43,18 @@ const MultipleTemplate = () => {
id="checkbox3-demo"
label="Subscribe to emails"
name="checkbox3-demo"
kjbElementId="subscribeToEmails"
/>
</ExpandableCard>
<ExpandableCard name="panel-2" alignArrowRight={true} expanded={activePanel === 'panel-2'} onClick={handleChange('panel-2')} triggerLabel="Expand">
<ExpandableCard name="panel-2" alignArrowRight={true} expanded={activePanel === 'panel-2'} onClick={handleChange('panel-2')} kjbElementId="secondExpandablePanel" triggerLabel="Expand">
<Checkbox
checked={false}
disabled={false}
hasError={false}
id="checkbox1-demo"
label="Grant offers"
name="checkbox1-demo"
kjbElementId="grantOffers"
/>
<Checkbox
checked={false}
Expand All @@ -59,6 +63,7 @@ const MultipleTemplate = () => {
id="checkbox2-demo"
label="Add tags"
name="checkbox2-demo"
kjbElementId="addTags"
/>
<Checkbox
checked={false}
Expand All @@ -67,16 +72,18 @@ const MultipleTemplate = () => {
id="checkbox3-demo"
label="Subscribe to emails"
name="checkbox3-demo"
kjbElementId="subscribeToEmails"
/>
</ExpandableCard>
<ExpandableCard name="panel-3" alignArrowRight={true} expanded={activePanel === 'panel-3'} onClick={handleChange('panel-3')} triggerLabel="Expand">
<ExpandableCard name="panel-3" alignArrowRight={true} expanded={activePanel === 'panel-3'} onClick={handleChange('panel-3')} kjbElementId="thirdExpandablePanel" triggerLabel="Expand">
<Checkbox
checked={false}
disabled={false}
hasError={false}
id="checkbox1-demo"
label="Grant offers"
name="checkbox1-demo"
kjbElementId="grantOffers"
/>
<Checkbox
checked={false}
Expand All @@ -85,6 +92,7 @@ const MultipleTemplate = () => {
id="checkbox2-demo"
label="Add tags"
name="checkbox2-demo"
kjbElementId="addTags"
/>
<Checkbox
checked={false}
Expand All @@ -93,6 +101,7 @@ const MultipleTemplate = () => {
id="checkbox3-demo"
label="Subscribe to emails"
name="checkbox3-demo"
kjbElementId="subscribeToEmails"
/>
</ExpandableCard>
</Accordion>
Expand All @@ -101,7 +110,7 @@ const MultipleTemplate = () => {

const DefaultTemplate = () => (
<Accordion>
<ExpandableCard name="panel-1" alignArrowRight={true} triggerLabel="Expand">
<ExpandableCard name="panel-1" alignArrowRight={true} triggerLabel="Expand" kjbElementId="">
<Checkbox
checked={false}
disabled={false}
Expand Down
14 changes: 9 additions & 5 deletions packages/sage-react/lib/Alert/Alert.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import classnames from 'classnames';
import { Button } from '../Button';
import { Icon } from '../Icon';
import { ALERT_COLORS, ALERT_PRIMARY_ACTION_CLASSNAME } from './configs';
import { SageTokens } from '../configs';
import { SageTokens, KjbElementIds } from '../configs';

export const Alert = ({
actions,
Expand All @@ -15,6 +15,7 @@ export const Alert = ({
icon,
onDismiss,
small,
kjbElementId,
title,
titleAddon,
...rest
Expand Down Expand Up @@ -58,17 +59,17 @@ export const Alert = ({
};

return !selfDismissed ? (
<div className={classNames} {...rest}>
<Icon icon={icon || getDefaultIcon()} className="sage-alert__icon" />
<div className={classNames} {...rest} data-kjb-element={kjbElementId}>
<Icon icon={icon || getDefaultIcon()} className="sage-alert__icon" kjbElementId={KjbElementIds.al} />
<div className="sage-alert__copy">
{title && (
<h3 className="sage-alert__title">
<h3 className="sage-alert__title" data-kjb-element={KjbElementIds.alertTitle}>
{title}
<span className="sage-alert__title--add-on"> {titleAddon}</span>
</h3>
)}
{description && (
<p className="sage-alert__desc">{description}</p>
<p className="sage-alert__desc" data-kjb-element={KjbElementIds.alertDescription}>{description}</p>
)}
</div>
{actions && (
Expand All @@ -87,6 +88,7 @@ export const Alert = ({
value="Close"
onClick={handleDismiss}
aria-label="Close Alert"
kjbElementId="closeButton"
/>
</div>
)}
Expand All @@ -105,6 +107,7 @@ Alert.defaultProps = {
icon: null,
onDismiss: null,
small: false,
kjbElementId: null,
title: null,
titleAddon: null,
};
Expand All @@ -118,6 +121,7 @@ Alert.propTypes = {
icon: PropTypes.oneOf(Object.values(SageTokens.ICONS)),
onDismiss: PropTypes.func,
small: PropTypes.bool,
kjbElementId: PropTypes.string,
title: PropTypes.string,
titleAddon: PropTypes.string,
};
10 changes: 10 additions & 0 deletions packages/sage-react/lib/Alert/Alert.story.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,14 @@ DefaultWithActions.args = {
<Button
className={Alert.PRIMARY_ACTION_CLASSNAME}
color={Button.COLORS.PRIMARY}
kjbElementId="getUnlimitedPagesButton"
>
Get unlimited pages
</Button>
<Link
href="//example.com"
suppressDefaultClass
kjbElementId="checkUsageLink"
>
Check Usage
</Link>
Expand All @@ -66,6 +68,7 @@ DismissableAlert.args = {
description: 'Body duis rhoncus neque, sed nulla sed quis fames. Eu eu ut at odio ultrices orci varius habitant. Tempor vulputate in nisl massa eget id.',
color: Alert.COLORS.DEFAULT,
dismissable: true,
kjbElementId: 'exampleAlert',
onClickDismiss: () => console.log('clicked to dismiss'), // eslint-disable-line
};

Expand All @@ -80,11 +83,13 @@ DismissableAlertWithActions.args = {
<Button
className={Alert.PRIMARY_ACTION_CLASSNAME}
color={Button.COLORS.PRIMARY}
kjbElementId="checkUsageButton"
>
Get unlimited pages
</Button>
<Link
href="//example.com"
kjbElementId="checkUsage"
suppressDefaultClass
>
Check Usage
Expand All @@ -97,17 +102,20 @@ export const NonDismissableAlert = Template.bind({});
NonDismissableAlert.args = {
color: Alert.COLORS.APPROACHING,
description: 'Body duis rhoncus neque, sed nulla sed quis fames. Eu eu ut at odio ultrices orci varius habitant. Tempor vulputate in nisl massa eget id.',
kjbElementId: 'nonDismissableAlert',
actions: (
<>
<Button
className={Alert.PRIMARY_ACTION_CLASSNAME}
color={Button.COLORS.PRIMARY}
kjbElementId="getUnlimitedPages"
>
Get unlimited pages
</Button>
<Link
href="//example.com"
suppressDefaultClass
kjbElementId="checkUsage"
>
Check Usage
</Link>
Expand All @@ -121,11 +129,13 @@ SmallAlert.args = {
dismissable: true,
title: null,
description: 'Body duis rhoncus neque, sed nulla sed quis fames et tu odio.',
kjbElementId: 'smallAlert',
actions: (
<>
<Link
href="//example.com"
suppressDefaultClass
kjbElementId="checkUsage"
>
Check Usage
</Link>
Expand Down
4 changes: 4 additions & 0 deletions packages/sage-react/lib/Badge/Badge.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export const Badge = React.forwardRef(({
isInteractive,
isStatus,
large,
kjbElementId,
value,
...rest
}, ref) => {
Expand All @@ -32,6 +33,7 @@ export const Badge = React.forwardRef(({
return (
<span
className={classNames}
data-kjb-element={kjbElementId}
ref={ref}
{...containerAttributes}
>
Expand Down Expand Up @@ -67,6 +69,7 @@ Badge.defaultProps = {
isDropdown: false,
isStatus: false,
large: false,
kjbElementId: null,
};

Badge.propTypes = {
Expand All @@ -78,5 +81,6 @@ Badge.propTypes = {
isDropdown: PropTypes.bool,
isStatus: PropTypes.bool,
large: PropTypes.bool,
kjbElementId: PropTypes.string,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
};
9 changes: 6 additions & 3 deletions packages/sage-react/lib/Badge/Badge.story.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,8 @@ export const IndicatorBadge = Template.bind({});
IndicatorBadge.args = {
dot: (
<Dot />
)
),
kjbElementId: 'indicatorBadge',
};

export const InteractiveBadge = Template.bind({});
Expand All @@ -43,7 +44,8 @@ InteractiveBadge.args = {
isInteractive: true,
dot: (
<Dot />
)
),
kjbElementId: 'interactiveBadge',
};

export const LargeBadge = Template.bind({});
Expand All @@ -52,5 +54,6 @@ LargeBadge.args = {
large: true,
dot: (
<Dot />
)
),
kjbElementId: 'largeBadge',
};
3 changes: 3 additions & 0 deletions packages/sage-react/lib/Banner/Banner.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { BANNER_TYPES } from './configs';
export const Banner = ({
active,
bannerContext,
kjbElementId,
...rest
}) => (
(bannerContext !== null)
Expand All @@ -24,6 +25,7 @@ Banner.defaultProps = {
dismissable: true,
link: null,
onDismiss: null,
kjbElementId: null,
text: null,
type: Banner.TYPES.DEFAULT,
};
Expand All @@ -39,6 +41,7 @@ Banner.propTypes = {
target: PropTypes.string
}),
onDismiss: PropTypes.func,
kjbElementId: PropTypes.string,
text: PropTypes.string,
type: PropTypes.oneOf(Object.values(BANNER_TYPES)),
};
5 changes: 5 additions & 0 deletions packages/sage-react/lib/Breadcrumbs/Breadcrumbs.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const Breadcrumbs = ({
icon,
isProgressbar,
items,
kjbElementId,
...rest
}) => {
const classNames = classnames(
Expand Down Expand Up @@ -38,6 +39,7 @@ export const Breadcrumbs = ({
className={`sage-breadcrumbs__link ${isCurrent && 'sage-breadcrumbs__link--current'}`}
suppressDefaultClass={true}
tag={linkTag}
kjbElementId="breadcrumbListItem"
{...otherProps}
>
{(icon && items.length === 1 && i === 0) && (
Expand All @@ -59,6 +61,7 @@ export const Breadcrumbs = ({
<nav
aria-label="Breadcrumbs"
className={classNames}
data-kjb-element={kjbElementId}
{...rest}
>
{items.length > 1 ? (
Expand All @@ -81,11 +84,13 @@ Breadcrumbs.defaultProps = {
icon: SageTokens.ICONS.CARET_LEFT,
isProgressbar: false,
items: [],
kjbElementId: null,
};

Breadcrumbs.propTypes = {
className: PropTypes.string,
icon: PropTypes.oneOf(Object.values(SageTokens.ICONS)),
isProgressbar: PropTypes.bool,
items: PropTypes.arrayOf(breadcrumbItemPropTypes),
kjbElementId: PropTypes.string,
};
Loading
Loading