Add tests for events

Author: spalmurray

src/pages/LoginPage/LoginButton.test.jsx

@@ -1,10 +1,13 @@
-import { render, screen } from '@testing-library/react'
+import { act, render, screen } from '@testing-library/react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
+import { eventTracker } from 'services/events/events'
 import { ThemeContextProvider } from 'shared/ThemeContext'
 
 import LoginButton from './LoginButton'
 
+vi.mock('services/events/events')
+
 const wrapper =
   ({ initialEntries, path }) =>
   ({ children }) => (
@@ -73,4 +76,27 @@ describe('LoginButton', () => {
       expect(sentry).toBeInTheDocument()
     })
   })
+
+  it('emits event on click', () => {
+    render(<LoginButton provider="gh" />, {
+      wrapper: wrapper({
+        initialEntries: '/login/gh',
+        path: '/login/:provider',
+      }),
+    })
+
+    const github = screen.getByText(/Login with GitHub/i)
+    expect(github).toBeInTheDocument()
+
+    act(() => github.click())
+
+    expect(eventTracker().track).toHaveBeenCalledWith({
+      type: 'Button Clicked',
+      properties: {
+        buttonName: 'Login',
+        buttonLocation: 'Login Page',
+        loginProvider: 'GitHub',
+      },
+    })
+  })
 })

src/pages/SyncProviderPage/SyncButton.test.tsx

@@ -1,8 +1,12 @@
-import { render, screen } from '@testing-library/react'
+import { act, render, screen } from '@testing-library/react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
+import { eventTracker } from 'services/events/events'
+
 import SyncButton from './SyncButton'
 
+vi.mock('services/events/events')
+
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <MemoryRouter initialEntries={['/sync']}>
     <Route path="/sync">{children}</Route>
@@ -87,4 +91,22 @@ describe('SyncButton', () => {
       expect(link).toHaveAttribute('href', `/login/bbs?to=${expectedRedirect}`)
     })
   })
+
+  it('emits event on click', () => {
+    console.error = () => {} // silence error about navigation on click
+    render(<SyncButton provider="gh" />, { wrapper })
+
+    const link = screen.getByRole('link', { name: /Sync with GitHub/ })
+
+    act(() => link.click())
+
+    expect(eventTracker().track).toHaveBeenCalledWith({
+      type: 'Button Clicked',
+      properties: {
+        buttonName: 'Sync',
+        buttonLocation: 'Sync Provider Page',
+        loginProvider: 'GitHub',
+      },
+    })
+  })
 })

src/pages/TermsOfService/TermsOfService.test.tsx

@@ -11,11 +11,13 @@ import config from 'config'
 
 import { SentryBugReporter } from 'sentry'
 
+import { eventTracker } from 'services/events/events'
 import { InternalUserData } from 'services/user/useInternalUser'
 
 import TermsOfService from './TermsOfService'
 
 vi.mock('config')
+vi.mock('services/events/events')
 
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
@@ -228,7 +230,7 @@ describe('TermsOfService', () => {
 
     // Into the realm of testing implementation details, but I want to make sure
     // that the correct inputs are being sent to the server.
-    it('Sign TOS, sends the correct inputs to the server', async () => {
+    it('Sign TOS, sends the correct inputs to the server, emits event', async () => {
       const { user, mockMutationVariables } = setup({
         internalUserData: {
           email: '[email protected]',
@@ -264,6 +266,14 @@ describe('TermsOfService', () => {
           },
         })
       )
+
+      expect(eventTracker().track).toHaveBeenCalledWith({
+        type: 'Button Clicked',
+        properties: {
+          buttonName: 'Continue',
+          buttonLocation: 'Terms of Service',
+        },
+      })
     })
   })