From 73ce333aa6aeee360c1119b1e1d57549e905d112 Mon Sep 17 00:00:00 2001 From: Michael Dowse Date: Thu, 12 Oct 2023 10:28:14 +0000 Subject: [PATCH] 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. --- .../__integ__/breadcrumb-group.test.ts | 13 ++++++++-- .../__tests__/breadcrumb-group.test.tsx | 2 +- .../__tests__/breadcrumb-item.test.tsx | 15 +++++++----- src/breadcrumb-group/internal.tsx | 6 +++-- src/breadcrumb-group/item/item.tsx | 24 ++++++++++--------- 5 files changed, 38 insertions(+), 22 deletions(-) diff --git a/src/breadcrumb-group/__integ__/breadcrumb-group.test.ts b/src/breadcrumb-group/__integ__/breadcrumb-group.test.ts index d3fe9ce8bc..227d369129 100644 --- 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) => { +const setupTest = (testFn: (page: BreadcrumbGroupPage, browser: WebdriverIO.Browser) => Promise) => { 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 index 27736b3804..fe194015b6 100644 --- 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(); - 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 index b034ef22d8..33beae237e 100644 --- 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(); - return createWrapper(renderResult.container).findBreadcrumbGroup(`.${styles['breadcrumb-group']}`)!; + const { container } = render(); + 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; 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 index cc75b1fb0e..bc674e9d7e 100644 --- a/src/breadcrumb-group/internal.tsx +++ b/src/breadcrumb-group/internal.tsx @@ -98,6 +98,8 @@ export default function InternalBreadcrumbGroup { + const isLast = index === items.length - 1; + return (
    • ); diff --git a/src/breadcrumb-group/item/item.tsx b/src/breadcrumb-group/item/item.tsx index 438d31408d..838e59261d 100644 --- a/src/breadcrumb-group/item/item.tsx +++ b/src/breadcrumb-group/item/item.tsx @@ -19,12 +19,14 @@ type BreadcrumbItemWithPopoverProps = React item: T; isLast: boolean; anchorAttributes: React.AnchorHTMLAttributes; + funnelAttributes: Record; }; const BreadcrumbItemWithPopover = ({ item, isLast, anchorAttributes, + funnelAttributes, ...itemAttributes }: BreadcrumbItemWithPopoverProps) => { const [showPopover, setShowPopover] = useState(false); @@ -99,7 +101,7 @@ const BreadcrumbItemWithPopover = ({ onMouseLeave={() => setShowPopover(false)} anchorAttributes={anchorAttributes} > - + {item.text} @@ -112,17 +114,14 @@ const BreadcrumbItemWithPopover = ({ }; type ItemProps = React.HTMLAttributes & { - dataAttributes?: React.DataHTMLAttributes; anchorAttributes: React.AnchorHTMLAttributes; isLast: boolean; }; -const Item = ({ anchorAttributes, dataAttributes, children, isLast, ...itemAttributes }: ItemProps) => +const Item = ({ anchorAttributes, children, isLast, ...itemAttributes }: ItemProps) => isLast ? ( - - {children} - + {children} ) : ( - + {children} ); @@ -151,9 +150,9 @@ export function BreadcrumbItem({ onClick: isLast ? preventDefault : onClickHandler, }; - const dataAttibutes: Record = {}; + const funnelAttributes: Record = {}; 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({ item={item} isLast={isLast} anchorAttributes={anchorAttributes} + funnelAttributes={funnelAttributes} {...itemAttributes} /> ) : ( - - {item.text} + + + {item.text} + )} {!isLast ? (