From bc46ae9bbf267641160e62b1156fbd5397b9333f Mon Sep 17 00:00:00 2001
From: Fernando Belmonte Archetti
 <110430578+farchettiensis@users.noreply.github.com>
Date: Mon, 17 Nov 2025 21:22:45 -0300
Subject: [PATCH] test(client): add tests to build transcript function (#63822)

---
 client/src/redux/prop-types.ts                |   4 +-
 .../components/scene/scene-helpers.test.ts    | 195 ++++++++++++++++++
 .../components/scene/scene-helpers.ts         |  20 ++
 .../Challenges/components/scene/scene.tsx     |  22 +-
 4 files changed, 219 insertions(+), 22 deletions(-)
 create mode 100644 client/src/templates/Challenges/components/scene/scene-helpers.test.ts
 create mode 100644 client/src/templates/Challenges/components/scene/scene-helpers.ts

diff --git a/client/src/redux/prop-types.ts b/client/src/redux/prop-types.ts
index b895d084fab..0228787b491 100644
--- a/client/src/redux/prop-types.ts
+++ b/client/src/redux/prop-types.ts
@@ -74,7 +74,7 @@ export interface VideoLocaleIds {
 }
 
 // English types for animations
-interface Dialogue {
+export interface Dialogue {
   text: string;
   align: 'left' | 'right' | 'center';
 }
@@ -85,7 +85,7 @@ export interface CharacterPosition {
   z?: number;
 }
 
-interface SceneCommand {
+export interface SceneCommand {
   background?: string;
   character: string;
   position?: CharacterPosition;
diff --git a/client/src/templates/Challenges/components/scene/scene-helpers.test.ts b/client/src/templates/Challenges/components/scene/scene-helpers.test.ts
new file mode 100644
index 00000000000..bcac6738528
--- /dev/null
+++ b/client/src/templates/Challenges/components/scene/scene-helpers.test.ts
@@ -0,0 +1,195 @@
+import { describe, it, expect } from 'vitest';
+import { type SceneCommand } from '../../../../redux/prop-types';
+import { buildTranscript } from './scene-helpers';
+
+describe('scene-helpers', () => {
+  describe('buildTranscript', () => {
+    it('should return empty string for empty commands array', () => {
+      const commands: SceneCommand[] = [];
+      const result = buildTranscript(commands);
+      expect(result).toBe('');
+    });
+
+    it('should build transcript from single command with dialogue', () => {
+      const commands: SceneCommand[] = [
+        {
+          character: 'Naomi',
+          startTime: 1,
+          dialogue: {
+            text: 'Hello world, I have 5 cats',
+            align: 'left'
+          }
+        }
+      ];
+      const result = buildTranscript(commands);
+      expect(result).toBe(
+        '\n<strong>Naomi</strong>: Hello world, I have 5 cats\n'
+      );
+    });
+
+    it('should build transcript from multiple commands with dialogue', () => {
+      const commands: SceneCommand[] = [
+        {
+          character: 'Naomi',
+          startTime: 1,
+          dialogue: {
+            text: 'Hello',
+            align: 'left'
+          }
+        },
+        {
+          character: 'Quincy',
+          startTime: 1,
+          dialogue: {
+            text: 'Hi there, I found 3 bugs',
+            align: 'right'
+          }
+        },
+        {
+          character: 'Naomi',
+          startTime: 2,
+          dialogue: {
+            text: 'How are you?',
+            align: 'left'
+          }
+        }
+      ];
+      const result = buildTranscript(commands);
+      expect(result).toBe(
+        '\n<strong>Naomi</strong>: Hello\n' +
+          '\n<strong>Quincy</strong>: Hi there, I found 3 bugs\n' +
+          '\n<strong>Naomi</strong>: How are you?\n'
+      );
+    });
+
+    it('should skip commands without dialogue', () => {
+      const commands: SceneCommand[] = [
+        {
+          character: 'Naomi',
+          startTime: 1,
+          dialogue: {
+            text: 'Hello',
+            align: 'left'
+          }
+        },
+        {
+          character: 'Quincy',
+          startTime: 1
+          // No dialogue
+        },
+        {
+          character: 'Naomi',
+          startTime: 2,
+          dialogue: {
+            text: 'How are you?',
+            align: 'left'
+          }
+        }
+      ];
+      const result = buildTranscript(commands);
+      expect(result).toBe(
+        '\n<strong>Naomi</strong>: Hello\n' +
+          '\n<strong>Naomi</strong>: How are you?\n'
+      );
+    });
+
+    it('should handle dialogue with special characters', () => {
+      const commands: SceneCommand[] = [
+        {
+          character: 'Naomi',
+          startTime: 1,
+          dialogue: {
+            text: 'He said "I love TypeScript!" & she replied, \'I prefer Ruby! #ruby #rubyonrails\'',
+            align: 'left'
+          }
+        }
+      ];
+      const result = buildTranscript(commands);
+      expect(result).toBe(
+        '\n<strong>Naomi</strong>: He said "I love TypeScript!" & she replied, \'I prefer Ruby! #ruby #rubyonrails\'\n'
+      );
+    });
+
+    it('should handle empty dialogue text', () => {
+      const commands: SceneCommand[] = [
+        {
+          character: 'Naomi',
+          startTime: 1,
+          dialogue: {
+            text: '',
+            align: 'left'
+          }
+        }
+      ];
+      const result = buildTranscript(commands);
+      expect(result).toBe('\n<strong>Naomi</strong>: \n');
+    });
+
+    it('should handle dialogue with newlines', () => {
+      const commands: SceneCommand[] = [
+        {
+          character: 'Naomi',
+          startTime: 1,
+          dialogue: {
+            text: 'Hello\nworld',
+            align: 'left'
+          }
+        }
+      ];
+      const result = buildTranscript(commands);
+      expect(result).toBe('\n<strong>Naomi</strong>: Hello\nworld\n');
+    });
+
+    it('should handle multiple consecutive commands from same character', () => {
+      const commands: SceneCommand[] = [
+        {
+          character: 'Naomi',
+          startTime: 1,
+          dialogue: {
+            text: 'First line',
+            align: 'left'
+          }
+        },
+        {
+          character: 'Naomi',
+          startTime: 1,
+          dialogue: {
+            text: 'Second line',
+            align: 'left'
+          }
+        },
+        {
+          character: 'Naomi',
+          startTime: 2,
+          dialogue: {
+            text: 'Third line',
+            align: 'left'
+          }
+        }
+      ];
+      const result = buildTranscript(commands);
+      expect(result).toBe(
+        '\n<strong>Naomi</strong>: First line\n' +
+          '\n<strong>Naomi</strong>: Second line\n' +
+          '\n<strong>Naomi</strong>: Third line\n'
+      );
+    });
+
+    it('should preserve HTML content', () => {
+      const commands: SceneCommand[] = [
+        {
+          character: 'Naomi',
+          startTime: 1,
+          dialogue: {
+            text: 'Use <div> and <span> tags',
+            align: 'left'
+          }
+        }
+      ];
+      const result = buildTranscript(commands);
+      expect(result).toBe(
+        '\n<strong>Naomi</strong>: Use <div> and <span> tags\n'
+      );
+    });
+  });
+});
diff --git a/client/src/templates/Challenges/components/scene/scene-helpers.ts b/client/src/templates/Challenges/components/scene/scene-helpers.ts
new file mode 100644
index 00000000000..6902d6e9ea7
--- /dev/null
+++ b/client/src/templates/Challenges/components/scene/scene-helpers.ts
@@ -0,0 +1,20 @@
+import { type SceneCommand } from '../../../../redux/prop-types';
+
+export const buildTranscript = (commands: SceneCommand[]): string => {
+  let transcriptText = '';
+  commands.forEach(command => {
+    if (command.character && command.dialogue && command.startTime) {
+      transcriptText =
+        transcriptText +
+        '\n' +
+        '<strong>' +
+        command.character +
+        '</strong>:' +
+        ' ' +
+        command.dialogue.text +
+        '\n';
+    }
+  });
+
+  return transcriptText;
+};
diff --git a/client/src/templates/Challenges/components/scene/scene.tsx b/client/src/templates/Challenges/components/scene/scene.tsx
index 04bab79d8e4..f513f4c6428 100644
--- a/client/src/templates/Challenges/components/scene/scene.tsx
+++ b/client/src/templates/Challenges/components/scene/scene.tsx
@@ -17,6 +17,7 @@ import ChallengeTranscript from '../challenge-transcript';
 import { sounds, backgrounds, characterAssets } from './scene-assets';
 import Character from './character';
 import { SceneSubject } from './scene-subject';
+import { buildTranscript } from './scene-helpers';
 
 import './scene.css';
 
@@ -168,25 +169,6 @@ export function Scene({
     setSceneIsReady(true);
   };
 
-  const buildTranscript = () => {
-    let transcriptText = '';
-    commands.forEach(command => {
-      if (command.character && command.dialogue && command.startTime) {
-        transcriptText =
-          transcriptText +
-          '\n' +
-          '<strong>' +
-          command.character +
-          '</strong>:' +
-          ' ' +
-          command.dialogue.text +
-          '\n';
-      }
-    });
-
-    return transcriptText;
-  };
-
   const handlePlay = useCallback(() => {
     const pausedAt = pausedAtRef.current;
     const updateCurrentTime = () => {
@@ -369,7 +351,7 @@ export function Scene({
     };
   }, []);
 
-  const transcriptText = buildTranscript();
+  const transcriptText = buildTranscript(commands);
   return (
     <Col lg={10} lgOffset={1} md={10} mdOffset={1}>
       <div