feat: Guardian Ideal event tracking (#944)

* wip creating guardian ideal carousel files to hardcode * Update imports * Add new component and style updates * Add tag * Add Slider type to useRef * Add Guardian Ideal option * Add settings icon * Can add Guardian Ideal widget to My Space * Can remove Guardian Ideal from My Space * Fix CSS * Update menu text * Add LD flag * Update props in storybook and tests * Add tests * Add tests * Style updates * User with 25 collections can still add Guardian Ideal * Add IdealListItem type * Add tests * Boost test coverage by updating mock data * Add aria-label for carousel arrows * Move LD flag * Refactor MySpace widget display * Add mock for LD * Update tests * Update flag checks * Update type checks * Event tracking for removing Guardian Ideal * Event tracking for adding Guardian Ideal * Event tracking for next/previous * Update modal ids * Update tests * Add test for next/previous clicks --------- Co-authored-by: Abigail Young <[email protected]>
USSF-ORBIT · Mar 13, 2023 · 02afe2d · 02afe2d
1 parent c369894
commit 02afe2d
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 6 deletions.
diff --git a/src/components/GuardianIdeal/GuardianIdealCarousel.test.tsx b/src/components/GuardianIdeal/GuardianIdealCarousel.test.tsx
@@ -12,6 +12,7 @@ import { renderWithModalRoot } from '../../testHelpers'
 import GuardianIdealCarousel from './GuardianIdealCarousel'
 import { Widget } from 'types/index'
 import { mockIdeals } from '__fixtures__/data/guardianIdeals'
+import * as analyticsHooks from 'stores/analyticsContext'
 
 const mockGuardianIdealWidget: Widget = {
   _id: ObjectId(),
@@ -80,12 +81,56 @@ describe('GuardianIdealCarousel component', () => {
       })
     )
 
-    expect(mockUpdateModalId).toHaveBeenCalledWith('removeSectionModal')
+    expect(mockUpdateModalId).toHaveBeenCalledWith(
+      'removeGuardianIdealSectionModal'
+    )
     expect(mockUpdateModalText).toHaveBeenCalledWith({
       headingText: 'Are you sure you’d like to delete this section?',
       descriptionText:
         'You can re-add it to your My Space from the Add Section menu.',
     })
     expect(mockUpdateWidget).toHaveBeenCalled()
   })
+
+  test('calls trackEvent when next/previous is clicked', async () => {
+    const user = userEvent.setup()
+    const mockTrackEvents = jest.fn()
+
+    jest.spyOn(analyticsHooks, 'useAnalytics').mockImplementation(() => {
+      return { push: jest.fn(), trackEvent: mockTrackEvents }
+    })
+
+    mockFlags({
+      guardianIdealCarousel: true,
+    })
+
+    render(
+      <GuardianIdealCarousel
+        ideals={mockIdeals}
+        widget={mockGuardianIdealWidget}
+      />
+    )
+
+    // Click previous
+    const prev = screen.getByTestId('slick-prev')
+    await user.click(prev)
+
+    expect(mockTrackEvents).toHaveBeenCalledTimes(1)
+    expect(mockTrackEvents).toHaveBeenCalledWith(
+      'Guardian Ideal Carousel',
+      'View next/previous',
+      'Click next/previous'
+    )
+
+    // Click next
+    const next = screen.getByTestId('slick-next')
+    await user.click(next)
+
+    expect(mockTrackEvents).toHaveBeenCalledTimes(2)
+    expect(mockTrackEvents).toHaveBeenCalledWith(
+      'Guardian Ideal Carousel',
+      'View next/previous',
+      'Click next/previous'
+    )
+  })
 })
diff --git a/src/components/GuardianIdeal/GuardianIdealCarousel.tsx b/src/components/GuardianIdeal/GuardianIdealCarousel.tsx
@@ -8,6 +8,7 @@ import 'slick-carousel/slick/slick-theme.css'
 import GuardianIdealItem from './GuardianIdealItem'
 import { WidgetWithSettings } from 'components/Widget/Widget'
 import { IdealListItem, Widget } from 'types'
+import { useAnalytics } from 'stores/analyticsContext'
 import { useModalContext } from 'stores/modalContext'
 
 const CustomEllipse = ({ onClick }: any) => {
@@ -32,6 +33,7 @@ const GuardianIdealCarousel = ({
 }) => {
   const { updateModalId, updateModalText, modalRef, updateWidget } =
     useModalContext()
+  const { trackEvent } = useAnalytics()
 
   const sliderRef = useRef<Slider>(null)
 
@@ -55,6 +57,11 @@ const GuardianIdealCarousel = ({
             aria-label="previous guardian ideal"
             data-testid="slick-prev"
             onClick={() => {
+              trackEvent(
+                'Guardian Ideal Carousel',
+                'View next/previous',
+                'Click next/previous'
+              )
               if (sliderRef.current) {
                 return sliderRef.current.slickPrev()
               }
@@ -74,6 +81,11 @@ const GuardianIdealCarousel = ({
             aria-label="next guardian ideal"
             data-testid="slick-next"
             onClick={() => {
+              trackEvent(
+                'Guardian Ideal Carousel',
+                'View next/previous',
+                'Click next/previous'
+              )
               if (sliderRef.current) {
                 return sliderRef.current.slickNext()
               }
@@ -87,7 +99,7 @@ const GuardianIdealCarousel = ({
   }
 
   const handleConfirmRemoveSection = () => {
-    updateModalId('removeSectionModal')
+    updateModalId('removeGuardianIdealSectionModal')
     updateModalText({
       headingText: 'Are you sure you’d like to delete this section?',
       descriptionText:

diff --git a/src/components/MySpace/MySpace.tsx b/src/components/MySpace/MySpace.tsx
@@ -70,7 +70,11 @@ const MySpace = ({ bookmarks }: { bookmarks: BookmarkRecords }) => {
   }
 
   const addGuardianIdeal = () => {
-    // trackEvent('Add section', 'Add Guardian Ideal section')
+    trackEvent(
+      'Guardian Ideal Carousel',
+      'Click on add Ideal carousel',
+      'Add Ideal'
+    )
 
     handleAddWidget({
       variables: { title: 'Ideal Title', type: AddWidgetType.GuardianIdeal },

diff --git a/src/components/NewsWidget/NewsWidget.test.tsx b/src/components/NewsWidget/NewsWidget.test.tsx
@@ -87,7 +87,7 @@ describe('NewsWidget component', () => {
       })
     )
 
-    expect(mockUpdateModalId).toHaveBeenCalledWith('removeSectionModal')
+    expect(mockUpdateModalId).toHaveBeenCalledWith('removeNewsSectionModal')
     expect(mockUpdateModalText).toHaveBeenCalledWith({
       headingText: 'Are you sure you’d like to delete this section?',
       descriptionText:

diff --git a/src/components/NewsWidget/NewsWidget.tsx b/src/components/NewsWidget/NewsWidget.tsx
@@ -32,7 +32,7 @@ const NewsWidget = (widget: NewsWidgetProps) => {
   /** Remove section */
   // Show confirmation modal
   const handleConfirmRemoveSection = () => {
-    updateModalId('removeSectionModal')
+    updateModalId('removeNewsSectionModal')
     updateModalText({
       headingText: 'Are you sure you’d like to delete this section?',
       descriptionText:

diff --git a/src/stores/modalContext.tsx b/src/stores/modalContext.tsx
@@ -180,14 +180,26 @@ export const ModalProvider = ({ children }: { children: React.ReactNode }) => {
 
   const onDelete = () => {
     switch (modalId) {
-      case 'removeSectionModal':
+      case 'removeNewsSectionModal':
         trackEvent('Section settings', 'Remove this section', 'News')
         handleRemoveWidget({
           variables: { _id: widgetState?._id },
           refetchQueries: [`getMySpace`],
         })
         closeModal()
         break
+      case 'removeGuardianIdealSectionModal':
+        trackEvent(
+          'Guardian Ideal Carousel',
+          'Click on remove Ideal carousel',
+          'Remove Ideal'
+        )
+        handleRemoveWidget({
+          variables: { _id: widgetState?._id },
+          refetchQueries: [`getMySpace`],
+        })
+        closeModal()
+        break
       case 'removeCustomCollectionModal':
         trackEvent(
           'Collection settings',