Merge pull request #2612 from cpoftea/fix/clickable-analytics-event

Fix issue when analytics not being sent when `href` prop used
epam · Nov 8, 2024 · f398eb0 · f398eb0
2 parents 222cf69 + f84f9b8
commit f398eb0
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 2 deletions.
diff --git a/changelog.md b/changelog.md
@@ -15,6 +15,14 @@
 * [RTE]: fixed working of old iframe data structure with 'src' prop
 * [VerticalTabButton]: reverted paddings & gaps to previous values for all sizes
 * [RTE]: fixed migration of old table element data.cellSizes to the new colSizes format
+* [Anchor]: fixed `clickAnalyticsEvent` not being sent when `href` property used
+* [Badge]: fixed `clickAnalyticsEvent` not being sent when `href` property used
+* [Button]: fixed `clickAnalyticsEvent` not being sent when `href` property used
+* [LinkButton]: fixed `clickAnalyticsEvent` not being sent when `href` property used
+* [IconButton]: fixed `clickAnalyticsEvent` not being sent when `href` property used
+* [MainMenuButton]: fixed `clickAnalyticsEvent` not being sent when `href` property used
+* [TabButton]: fixed `clickAnalyticsEvent` not being sent when `href` property used
+* [Tag]: fixed `clickAnalyticsEvent` not being sent when `href` property used
 
 # 5.10.2 - 24.10.2024
 

diff --git a/uui-components/src/widgets/Clickable.tsx b/uui-components/src/widgets/Clickable.tsx
@@ -21,7 +21,7 @@ export const Clickable = React.forwardRef<ClickableForwardedRef, PropsWithChildr
     const context = useUuiContext();
     const isAnchor = Boolean(props.href || props.link || props.type === 'anchor');
     const isButton = Boolean(!isAnchor && (props.onClick || props.type === 'button'));
-    const hasClick = Boolean(!props.isDisabled && (props.link || props.onClick));
+    const hasClick = Boolean(!props.isDisabled && (props.link || props.onClick || props.clickAnalyticsEvent));
     const getIsLinkActive = () => {
         if (props.isLinkActive !== undefined) {
             return props.isLinkActive;

diff --git a/uui-components/src/widgets/__tests__/Clickable.test.tsx b/uui-components/src/widgets/__tests__/Clickable.test.tsx
@@ -134,7 +134,7 @@ describe('Clickable', () => {
         expect(mockRedirect).not.toHaveBeenCalled();
     });
 
-    it('calls sendEvent when Clickable is clicked', async () => {
+    it('calls sendEvent when Clickable with onClick is clicked', async () => {
         const mockSendEvent = jest.fn();
         jest.spyOn(React, 'useContext').mockImplementation(
             () => ({
@@ -149,6 +149,42 @@ describe('Clickable', () => {
         expect(mockSendEvent).toHaveBeenCalledWith({ name: 'click' });
     });
 
+    it('calls sendEvent when Clickable with href is clicked', async () => {
+        const mockSendEvent = jest.fn();
+        jest.spyOn(React, 'useContext').mockImplementation(
+            () => ({
+                uuiAnalytics: {
+                    sendEvent: mockSendEvent,
+                },
+            }),
+        );
+        await renderWithContextAsync(<Clickable href="#" clickAnalyticsEvent={ { name: 'click' } } />);
+        fireEvent.click(screen.getByRole('link'));
+        expect(mockSendEvent).toHaveBeenCalledTimes(1);
+        expect(mockSendEvent).toHaveBeenCalledWith({ name: 'click' });
+    });
+
+    it('calls sendEvent when Clickable with link is clicked', async () => {
+        const pathname = '#';
+        const mockRedirect = jest.fn();
+        const mockSendEvent = jest.fn();
+        const mockCreateHref = jest.fn().mockReturnValue(pathname);
+        jest.spyOn(React, 'useContext').mockImplementation(() => ({
+            uuiRouter: {
+                redirect: mockRedirect,
+                isActive: jest.fn(),
+                createHref: mockCreateHref,
+            },
+            uuiAnalytics: {
+                sendEvent: mockSendEvent,
+            },
+        }));
+        await renderWithContextAsync(<Clickable link={ { pathname } } clickAnalyticsEvent={ { name: 'click' } } />);
+        fireEvent.click(screen.getByRole('link'));
+        expect(mockSendEvent).toHaveBeenCalledTimes(1);
+        expect(mockSendEvent).toHaveBeenCalledWith({ name: 'click' });
+    });
+
     it('triggers form submission when type is "submit"', async () => {
         const mockOnSubmit = jest.fn();
         await renderWithContextAsync(