import cookie from 'js-cookie'
import { waitFor } from '@testing-library/dom'
import { Analytics } from '../../../core/analytics'
import { ddFormTracking } from '..'
import { SegmentioSettings } from '../../segmentio'
import { logger } from '../../logger'
const setupHTML = (html: string) => {
const div = document.createElement('div')
div.innerHTML = html
document.querySelector('body')?.appendChild(div)
}
describe('FormTracking HTML Plugin', () => {
let analytics: Analytics
let settings: SegmentioSettings
let logSpy: jest.SpyInstance
let identifySpy: jest.SpyInstance
let trackSpy: jest.SpyInstance
beforeEach(() => {
jest.resetAllMocks()
jest.restoreAllMocks()
settings = { apiKey: 'foo' }
analytics = new Analytics({ writeKey: settings.apiKey })
logSpy = jest.spyOn(logger, 'debugError').mockReturnValue(undefined)
identifySpy = jest.spyOn(analytics, 'identify')
trackSpy = jest.spyOn(analytics, 'track')
})
afterEach(() => {
analytics.reset()
Object.keys(cookie.get()).map((k) => cookie.remove(k))
window.localStorage.clear()
document.documentElement.innerHTML = ''
})
it('should call identify and track on form submission', async () => {
setupHTML(`
`)
await analytics.register(
ddFormTracking({
identifyFromEmail: false,
html: {},
})
)
const form = document.querySelector('form')
form?.dispatchEvent(new Event('submit'))
await waitFor(() => expect(identifySpy).toHaveBeenCalledTimes(1))
await waitFor(() => expect(trackSpy).toHaveBeenCalledTimes(1))
await waitFor(() => expect(trackSpy.mock.calls[0][0]).toBe('form-submit'))
})
it('should use form id as track name if enabled', async () => {
setupHTML(`
`)
await analytics.register(
ddFormTracking({
identifyFromEmail: false,
html: {
useFormIdAsEventName: true,
},
})
)
const form = document.querySelector('form')
form?.dispatchEvent(new Event('submit'))
await waitFor(() => expect(trackSpy).toHaveBeenCalledTimes(1))
await waitFor(() =>
expect(trackSpy.mock.calls[0][0]).toBe('my-test-form-id')
)
})
it('should use form name as track name if enabled', async () => {
setupHTML(`
`)
await analytics.register(
ddFormTracking({
identifyFromEmail: false,
html: {
useFormNameAsEventName: true,
},
})
)
const form = document.querySelector('form')
form?.dispatchEvent(new Event('submit'))
await waitFor(() => expect(trackSpy).toHaveBeenCalledTimes(1))
await waitFor(() => expect(trackSpy.mock.calls[0][0]).toBe('my-test-form'))
})
it('should not identify if no valid email', async () => {
setupHTML(`
`)
await analytics.register(
ddFormTracking({
identifyFromEmail: false,
html: {},
})
)
const form = document.querySelector('form')
form?.dispatchEvent(new Event('submit'))
expect(logSpy).toHaveBeenCalledTimes(1)
expect(logSpy.mock.calls[0][0]).toContain('Unable to find any email')
await waitFor(() => expect(identifySpy).toHaveBeenCalledTimes(0))
await waitFor(() => expect(trackSpy).toHaveBeenCalledTimes(0))
})
it('should set dd attribute on handled forms', async () => {
setupHTML(`
`)
await analytics.register(
ddFormTracking({
identifyFromEmail: false,
html: {},
})
)
const form = document.querySelector('form')
expect(form?.getAttribute('dd-html')).toBe('true')
})
})