@financial-times/cp-content-pipeline-ui 6.12.0 → 6.13.0-beta.0

package/src/components/Topper/client/flourish-tracking.ts

@@ -0,0 +1,83 @@
+class FlourishTopperTracker {
+  private startTime: number
+  private totalVisibleTime: number
+  private timeElapsedSeconds: number | null
+  private component: Element | null
+  private id: string | null
+  private observer: IntersectionObserver | null
+
+  constructor() {
+    this.startTime = 0
+    this.totalVisibleTime = 0
+    this.timeElapsedSeconds = null
+    this.component = document.querySelector(
+      '[data-component-type="flourish-topper"]'
+    )
+    this.id = this.component?.getAttribute('data-component-id') || null
+    this.observer = null
+  }
+
+  init(): void {
+    if (!window.IntersectionObserver || !this.component) {
+      return
+    }
+
+    if (this.component) {
+      this.dispatchEvent('mount')
+    }
+
+    this.observer = new IntersectionObserver(this.onChange.bind(this), {
+      threshold: [1.0],
+    })
+    this.observer.observe(this.component)
+  }
+
+  private dispatchEvent(action: string): void {
+    let component: object = {
+      name: 'flourish-topper',
+      id: this.id,
+    }
+    if (this.timeElapsedSeconds) {
+      component = { ...component, timeElapsedSeconds: this.timeElapsedSeconds }
+    }
+    const event = new CustomEvent('oTracking.event', {
+      detail: {
+        category: 'component',
+        action: action,
+        component,
+      },
+      bubbles: true,
+    })
+    document.body.dispatchEvent(event)
+  }
+
+  private onChange(changes: IntersectionObserverEntry[]): void {
+    changes.forEach((change) => {
+      if (change.target !== this.component) {
+        return
+      }
+      if (change.isIntersecting || change.intersectionRatio >= 1) {
+        this.dispatchEvent('view')
+        this.startTime = performance.now()
+      }
+      if (!change.isIntersecting || change.intersectionRatio === 0) {
+        this.totalVisibleTime = performance.now() - this.startTime
+        this.timeElapsedSeconds = parseFloat(
+          (this.totalVisibleTime / 1000).toFixed(2)
+        )
+        this.dispatchEvent('stop-view')
+        this.totalVisibleTime = 0
+        this.timeElapsedSeconds = null
+      }
+    })
+  }
+
+  disconnect(): void {
+    if (this.observer && this.component) {
+      this.observer.unobserve(this.component)
+      this.observer.disconnect()
+    }
+  }
+}
+
+export { FlourishTopperTracker }

package/src/components/Topper/client/index.ts

@@ -0,0 +1,3 @@
+import { FlourishTopperTracker } from './flourish-tracking'
+
+export { FlourishTopperTracker }

package/src/components/Topper/test/client/flourish-tracking.spec.ts

@@ -0,0 +1,135 @@
+import { FlourishTopperTracker } from '../../client'
+
+// const CustomEventMock = jest.fn()
+// global.CustomEvent = CustomEventMock
+
+describe('FlourishTopperTracker', () => {
+  let mockIntersectionObserver: jest.Mock
+  let mockObserve: jest.Mock
+  let mockUnobserve: jest.Mock
+  let mockDisconnect: jest.Mock
+  let mockComponent: HTMLElement
+  let dispatchEventSpy: jest.SpyInstance
+
+  beforeEach(() => {
+    mockObserve = jest.fn()
+    mockUnobserve = jest.fn()
+    mockDisconnect = jest.fn()
+
+    mockIntersectionObserver = jest.fn(() => {
+      return {
+        observe: mockObserve,
+        unobserve: mockUnobserve,
+        disconnect: mockDisconnect,
+      }
+    })
+
+    window.IntersectionObserver = mockIntersectionObserver
+
+    mockComponent = document.createElement('div')
+    mockComponent.setAttribute('data-component-type', 'flourish-topper')
+    mockComponent.setAttribute('data-component-id', 'test-id')
+    document.body.appendChild(mockComponent)
+
+    jest.spyOn(document, 'querySelector').mockReturnValue(mockComponent)
+    jest
+      .spyOn(performance, 'now')
+      .mockImplementationOnce(() => 1)
+      .mockImplementationOnce(() => 12344)
+    dispatchEventSpy = jest.spyOn(document.body, 'dispatchEvent')
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+    document.body.removeChild(mockComponent)
+  })
+
+  it('should initialise and observe the component', () => {
+    const tracker = new FlourishTopperTracker()
+    tracker.init()
+
+    expect(mockIntersectionObserver).toHaveBeenCalled()
+    expect(mockObserve).toHaveBeenCalledWith(mockComponent)
+  })
+
+  it('should dispatch a mount event on intialisation', () => {
+    const tracker = new FlourishTopperTracker()
+    tracker.init()
+
+    const mountEvent = dispatchEventSpy.mock.calls[0][0] as CustomEvent
+    expect(mountEvent.type).toBe('oTracking.event')
+    expect(mountEvent.detail).toEqual({
+      category: 'component',
+      action: 'mount',
+      component: {
+        name: 'flourish-topper',
+        id: 'test-id',
+      },
+    })
+  })
+
+  it('should handle component visibility changes', () => {
+    const tracker = new FlourishTopperTracker()
+    tracker.init()
+
+    const mockChanges: IntersectionObserverEntry[] = [
+      {
+        target: mockComponent,
+        isIntersecting: true,
+        intersectionRatio: 1.0,
+        boundingClientRect: {} as DOMRectReadOnly,
+        intersectionRect: {} as DOMRectReadOnly,
+        rootBounds: null,
+        time: 1,
+      },
+    ]
+
+    tracker['onChange'](mockChanges)
+
+    const viewEvent = dispatchEventSpy.mock.calls[1][0] as CustomEvent
+    expect(viewEvent.type).toBe('oTracking.event')
+    expect(viewEvent.detail).toEqual({
+      category: 'component',
+      action: 'view',
+      component: {
+        name: 'flourish-topper',
+        id: 'test-id',
+      },
+    })
+
+    const mockChangesAfter: IntersectionObserverEntry[] = [
+      {
+        target: mockComponent,
+        isIntersecting: false,
+        intersectionRatio: 0.0,
+        boundingClientRect: {} as DOMRectReadOnly,
+        intersectionRect: {} as DOMRectReadOnly,
+        rootBounds: null,
+        time: 12.3444,
+      },
+    ]
+
+    tracker['onChange'](mockChangesAfter)
+
+    const stopViewEvent = dispatchEventSpy.mock.calls[2][0] as CustomEvent
+    expect(stopViewEvent.type).toBe('oTracking.event')
+    expect(stopViewEvent.detail).toEqual({
+      category: 'component',
+      action: 'stop-view',
+      component: {
+        name: 'flourish-topper',
+        id: 'test-id',
+        timeElapsedSeconds: 12.34,
+      },
+    })
+  })
+
+  it('should disconnect the observer', () => {
+    const tracker = new FlourishTopperTracker()
+    tracker.init()
+    tracker.disconnect()
+
+    expect(mockUnobserve).toHaveBeenCalledWith(mockComponent)
+    expect(mockDisconnect).toHaveBeenCalled()
+  })
+})