chore: Apply funnel name data attribute to mobile breadcrumbs

Desktop viewport breadcrumbs has a data attribute for to identify a potential funnel name. In a mobile viewport a different node is rendered and this data attribute was missing.
cloudscape-design · Oct 13, 2023 · 73ce333 · 73ce333
1 parent 8ad798a
commit 73ce333
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 22 deletions.
diff --git a/src/breadcrumb-group/__integ__/breadcrumb-group.test.ts b/src/breadcrumb-group/__integ__/breadcrumb-group.test.ts
@@ -31,12 +31,12 @@ class BreadcrumbGroupPage extends BasePageObject {
     return this.click(dropdownWrapper.findItems().get(index).toSelector());
   }
 }
-const setupTest = (testFn: (page: BreadcrumbGroupPage) => Promise<void>) => {
+const setupTest = (testFn: (page: BreadcrumbGroupPage, browser: WebdriverIO.Browser) => Promise<void>) => {
   return useBrowser(async browser => {
     const page = new BreadcrumbGroupPage(browser);
     await browser.url(`#/light/breadcrumb-group/events`);
     await page.waitForVisible(breadcrumbGroupWrapper.toSelector());
-    await testFn(page);
+    await testFn(page, browser);
   });
 };
 describe('BreadcrumbGroup', () => {
@@ -107,4 +107,13 @@ describe('BreadcrumbGroup', () => {
       );
     })
   );
+
+  test(
+    'Attachs funnel name attribute to last breadcrumb item',
+    setupTest(async (page, browser) => {
+      await page.setMobileViewport();
+      const funnelName = await browser.$('[data-analytics-funnel-key="funnel-name"]').getText();
+      expect(funnelName).toBe('Sixth that is very very very very very very long long long text');
+    })
+  );
 });
diff --git a/src/breadcrumb-group/__tests__/breadcrumb-group.test.tsx b/src/breadcrumb-group/__tests__/breadcrumb-group.test.tsx
@@ -11,7 +11,7 @@ import createWrapper, { BreadcrumbGroupWrapper } from '../../../lib/components/t
 
 const renderBreadcrumbGroup = (props: BreadcrumbGroupProps) => {
   const renderResult = render(<BreadcrumbGroup {...props} />);
-  return createWrapper(renderResult.container).findBreadcrumbGroup(`.${styles['breadcrumb-group']}`)!;
+  return createWrapper(renderResult.container).findBreadcrumbGroup()!;
 };
 
 describe('BreadcrumbGroup Component', () => {

diff --git a/src/breadcrumb-group/__tests__/breadcrumb-item.test.tsx b/src/breadcrumb-group/__tests__/breadcrumb-item.test.tsx
@@ -4,15 +4,13 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
 
-import styles from '../../../lib/components/breadcrumb-group/styles.css.js';
-
 import BreadcrumbGroup, { BreadcrumbGroupProps } from '../../../lib/components/breadcrumb-group';
 import createWrapper, { BreadcrumbGroupWrapper } from '../../../lib/components/test-utils/dom';
 import { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_FUNNEL_NAME } from '../../../lib/components/internal/analytics/selectors';
 
 const renderBreadcrumbGroup = (props: BreadcrumbGroupProps) => {
-  const renderResult = render(<BreadcrumbGroup {...props} />);
-  return createWrapper(renderResult.container).findBreadcrumbGroup(`.${styles['breadcrumb-group']}`)!;
+  const { container } = render(<BreadcrumbGroup {...props} />);
+  return createWrapper(container).findBreadcrumbGroup()!;
 };
 
 const items = [
@@ -38,6 +36,7 @@ describe('BreadcrumbGroup Item', () => {
       wrapper = renderBreadcrumbGroup({ items });
       links = wrapper.findBreadcrumbLinks();
     });
+
     test('text property displays content within rendered breadcrumb item element when non-empty', () => {
       expect(links[0].getElement()).toHaveTextContent(items[0].text);
     });
@@ -64,6 +63,7 @@ describe('BreadcrumbGroup Item', () => {
     let links: Array<ElementWrapper>;
     let onClickSpy: jest.Mock;
     let onFollowSpy: jest.Mock;
+
     beforeEach(() => {
       onClickSpy = jest.fn();
       onFollowSpy = jest.fn();
@@ -101,6 +101,7 @@ describe('BreadcrumbGroup Item', () => {
     let lastLink: ElementWrapper;
     const onClickSpy = jest.fn();
     const onFollowSpy = jest.fn();
+
     beforeEach(() => {
       wrapper = renderBreadcrumbGroup({ items, onClick: onClickSpy, onFollow: onFollowSpy });
       const links = wrapper.findBreadcrumbLinks();
@@ -123,8 +124,10 @@ describe('BreadcrumbGroup Item', () => {
       expect(onFollowSpy).not.toHaveBeenCalled();
     });
 
-    test('should add a data-analytics attribute for the funnel name', () => {
-      expect(lastLink.getElement()).toHaveAttribute(DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_FUNNEL_NAME);
+    test('should add a data-analytics attribute for the funnel name to the last item', () => {
+      const expectedFunnelName = items[items.length - 1].text;
+      const element = wrapper.find(`[${DATA_ATTR_FUNNEL_KEY}="${FUNNEL_KEY_FUNNEL_NAME}"]`)!.getElement();
+      expect(element.innerHTML).toBe(expectedFunnelName);
     });
   });
 });
diff --git a/src/breadcrumb-group/internal.tsx b/src/breadcrumb-group/internal.tsx
@@ -98,15 +98,17 @@ export default function InternalBreadcrumbGroup<T extends BreadcrumbGroupProps.I
   const isMobile = useMobile();
 
   let breadcrumbItems = items.map((item, index) => {
+    const isLast = index === items.length - 1;
+
     return (
       <li className={styles.item} key={index}>
         <BreadcrumbItem
           item={item}
           onClick={onClick}
           onFollow={onFollow}
           isCompressed={isMobile}
-          isLast={index === items.length - 1}
-          isDisplayed={!isMobile || index === items.length - 1 || index === 0}
+          isLast={isLast}
+          isDisplayed={!isMobile || isLast || index === 0}
         />
       </li>
     );

diff --git a/src/breadcrumb-group/item/item.tsx b/src/breadcrumb-group/item/item.tsx
@@ -19,12 +19,14 @@ type BreadcrumbItemWithPopoverProps<T extends BreadcrumbGroupProps.Item> = React
   item: T;
   isLast: boolean;
   anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+  funnelAttributes: Record<string, string>;
 };
 
 const BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({
   item,
   isLast,
   anchorAttributes,
+  funnelAttributes,
   ...itemAttributes
 }: BreadcrumbItemWithPopoverProps<T>) => {
   const [showPopover, setShowPopover] = useState(false);
@@ -99,7 +101,7 @@ const BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({
         onMouseLeave={() => setShowPopover(false)}
         anchorAttributes={anchorAttributes}
       >
-        <span className={styles.text} ref={textRef}>
+        <span {...funnelAttributes} className={styles.text} ref={textRef}>
           {item.text}
         </span>
         <span className={styles['virtual-item']} ref={virtualTextRef}>
@@ -112,17 +114,14 @@ const BreadcrumbItemWithPopover = <T extends BreadcrumbGroupProps.Item>({
 };
 
 type ItemProps = React.HTMLAttributes<HTMLElement> & {
-  dataAttributes?: React.DataHTMLAttributes<HTMLElement>;
   anchorAttributes: React.AnchorHTMLAttributes<HTMLAnchorElement>;
   isLast: boolean;
 };
-const Item = ({ anchorAttributes, dataAttributes, children, isLast, ...itemAttributes }: ItemProps) =>
+const Item = ({ anchorAttributes, children, isLast, ...itemAttributes }: ItemProps) =>
   isLast ? (
-    <span {...itemAttributes} {...dataAttributes}>
-      {children}
-    </span>
+    <span {...itemAttributes}>{children}</span>
   ) : (
-    <a {...itemAttributes} {...anchorAttributes} {...dataAttributes}>
+    <a {...itemAttributes} {...anchorAttributes}>
       {children}
     </a>
   );
@@ -151,9 +150,9 @@ export function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({
     onClick: isLast ? preventDefault : onClickHandler,
   };
 
-  const dataAttibutes: Record<string, string> = {};
+  const funnelAttributes: Record<string, string> = {};
   if (isLast) {
-    dataAttibutes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;
+    funnelAttributes[DATA_ATTR_FUNNEL_KEY] = FUNNEL_KEY_FUNNEL_NAME;
   }
 
   return (
@@ -163,11 +162,14 @@ export function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({
           item={item}
           isLast={isLast}
           anchorAttributes={anchorAttributes}
+          funnelAttributes={funnelAttributes}
           {...itemAttributes}
         />
       ) : (
-        <Item isLast={isLast} anchorAttributes={anchorAttributes} {...itemAttributes} {...dataAttibutes}>
-          <span className={styles.text}>{item.text}</span>
+        <Item isLast={isLast} anchorAttributes={anchorAttributes} {...itemAttributes}>
+          <span {...funnelAttributes} className={styles.text}>
+            {item.text}
+          </span>
         </Item>
       )}
       {!isLast ? (