From 588a8a3ba909da4b0d8876f19ac444dbe2c892bb Mon Sep 17 00:00:00 2001
From: Isabella Mitchell <i.mitchell.0707@gmail.com>
Date: Fri, 20 Dec 2024 11:26:49 +0000
Subject: [PATCH] Transcript: Adds view tracking

---
 src/app/components/Transcript/index.test.tsx | 13 +++++++++++++
 src/app/components/Transcript/index.tsx      |  4 +++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/app/components/Transcript/index.test.tsx b/src/app/components/Transcript/index.test.tsx
index 3a0b7f1a5df..577ae6d03d1 100644
--- a/src/app/components/Transcript/index.test.tsx
+++ b/src/app/components/Transcript/index.test.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { render } from '../react-testing-library-with-providers';
 import transcriptFixture from './fixture.json';
 import Transcript from './index';
+import * as viewTracking from '../../hooks/useViewTracker';
 
 describe('Transcript Component', () => {
   it('should match snapshot (temp)', () => {
@@ -58,4 +59,16 @@ describe('Transcript Component', () => {
     const details = container.querySelector('details');
     expect(details).not.toBeInTheDocument();
   });
+
+  describe('view tracking', () => {
+    const viewTrackerSpy = jest.spyOn(viewTracking, 'default');
+
+    it('should register view tracking', () => {
+      render(<Transcript transcript={transcriptFixture} title="My Title" />);
+
+      expect(viewTrackerSpy).toHaveBeenCalledWith({
+        componentName: 'Transcript',
+      });
+    });
+  });
 });
diff --git a/src/app/components/Transcript/index.tsx b/src/app/components/Transcript/index.tsx
index 15af1b690ed..9dd40128c0e 100644
--- a/src/app/components/Transcript/index.tsx
+++ b/src/app/components/Transcript/index.tsx
@@ -1,6 +1,7 @@
 /** @jsx jsx */
 /* eslint-disable jsx-a11y/aria-role */
 import { jsx } from '@emotion/react';
+import useViewTracker from '#app/hooks/useViewTracker';
 import styles from './index.styles';
 import Text from '../Text';
 import TranscriptTimestamp from './TranscriptTimestamp';
@@ -28,6 +29,7 @@ const Transcript = ({
   transcript: TranscriptBlock;
   title?: string;
 }) => {
+  const viewRef = useViewTracker({ componentName: 'Transcript' });
   const transcriptItems = transcript?.model?.blocks;
   if (!transcriptItems) {
     return null;
@@ -47,7 +49,7 @@ const Transcript = ({
           {title && <VisuallyHiddenText>{formattedTitle}</VisuallyHiddenText>}
         </span>
       </summary>
-      <ul css={styles.ul} role="list">
+      <ul css={styles.ul} role="list" ref={viewRef}>
         {/*  eslint-disable-next-line @typescript-eslint/no-unused-vars */}
         {transcriptItems.map((item, _index) => (
           <TranscriptListItem