diff --git a/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx b/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx index d2958a515d..9bb03ada8b 100644 --- a/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx +++ b/services/web/frontend/js/features/settings/components/linking/integration-widget.tsx @@ -3,6 +3,11 @@ import { useTranslation } from 'react-i18next' import AccessibleModal from '../../../../shared/components/accessible-modal' import { Button, Modal } from 'react-bootstrap' import getMeta from '../../../../utils/meta' +import { sendMB } from '../../../../infrastructure/event-tracking' + +function trackUpgradeClick() { + sendMB('settings-upgrade-click') +} type IntegrationLinkingWidgetProps = { logo: ReactNode @@ -66,7 +71,6 @@ export function IntegrationLinkingWidget({
void linkPath: string @@ -95,7 +98,6 @@ type ActionButtonProps = { function ActionButton({ hasFeature, - upgradePath, linked, handleUnlinkClick, linkPath, @@ -105,7 +107,11 @@ function ActionButton({ if (!hasFeature) { return ( - ) diff --git a/services/web/test/frontend/features/settings/components/linking/integration-widget.test.tsx b/services/web/test/frontend/features/settings/components/linking/integration-widget.test.tsx index 861527925b..5fd7180036 100644 --- a/services/web/test/frontend/features/settings/components/linking/integration-widget.test.tsx +++ b/services/web/test/frontend/features/settings/components/linking/integration-widget.test.tsx @@ -1,6 +1,8 @@ import { expect } from 'chai' +import sinon from 'sinon' import { screen, fireEvent, render, waitFor } from '@testing-library/react' import { IntegrationLinkingWidget } from '../../../../../../frontend/js/features/settings/components/linking/integration-widget' +import * as eventTracking from '../../../../../../frontend/js/infrastructure/event-tracking' describe('', function () { const defaultProps = { @@ -15,18 +17,28 @@ describe('', function () { } describe('when the feature is not available', function () { + let sendMBSpy: sinon.SinonSpy beforeEach(function () { + sendMBSpy = sinon.spy(eventTracking, 'sendMB') render() }) + afterEach(function () { + sendMBSpy.restore() + }) + it("should render 'Premium feature' label", function () { screen.getByText('Premium feature') }) - it('should render a link to upgrade the account', function () { - expect( - screen.getByRole('link', { name: 'Upgrade' }).getAttribute('href') - ).to.equal('/user/subscription/plans') + it('should render an upgrade link and track clicks', function () { + const upgradeLink = screen.getByRole('link', { name: 'Upgrade' }) + expect(upgradeLink.getAttribute('href')).to.equal( + '/user/subscription/plans' + ) + fireEvent.click(upgradeLink) + expect(sendMBSpy).to.be.calledOnce + expect(sendMBSpy).calledWith('settings-upgrade-click') }) })