@@ -473,6 +473,24 @@ function requireElement(container: Element, selector: string, label: string): El
473473 return element ;
474474}
475475
476+ function getTalkSelectOptionValues ( container : Element , name : string ) : string [ ] {
477+ return Array . from (
478+ container . querySelectorAll < HTMLButtonElement > (
479+ `[data-talk-select="${ name } "] [data-talk-select-option]` ,
480+ ) ,
481+ ) . map ( ( option ) => option . dataset . talkSelectOption ?? "" ) ;
482+ }
483+
484+ function clickTalkSelectOption ( container : Element , name : string , value : string ) : void {
485+ const option = container . querySelector < HTMLButtonElement > (
486+ `[data-talk-select="${ name } "] [data-talk-select-option="${ value } "]` ,
487+ ) ;
488+ if ( option === null ) {
489+ throw new Error ( `expected Talk ${ name } option ${ value } ` ) ;
490+ }
491+ option . dispatchEvent ( new MouseEvent ( "click" , { bubbles : true , cancelable : true } ) ) ;
492+ }
493+
476494function renderChatView ( overrides : Partial < Parameters < typeof renderChat > [ 0 ] > = { } ) {
477495 const container = document . createElement ( "div" ) ;
478496 render (
@@ -845,26 +863,13 @@ describe("chat voice controls", () => {
845863 const model = container . querySelector < HTMLInputElement > (
846864 '.agent-chat__talk-options-primary input[placeholder="Auto"]' ,
847865 ) ;
848- const voice = container . querySelector < HTMLElement > ( '[data-talk-select="voice"]' ) ;
849- const sensitivity = container . querySelector < HTMLElement > ( '[data-talk-select="sensitivity"]' ) ;
850- const voiceOptions = Array . from (
851- container . querySelectorAll < HTMLOptionElement > (
852- '[data-talk-select="voice"] [data-talk-select-option]' ,
853- ) ,
854- ) . map ( ( option ) => option . dataset . talkSelectOption ?? "" ) ;
855- const reasoningOptions = Array . from (
856- container . querySelectorAll < HTMLOptionElement > (
857- '[data-talk-select="reasoning"] [data-talk-select-option]' ,
858- ) ,
859- ) . map ( ( option ) => option . dataset . talkSelectOption ?? "" ) ;
866+ const sensitivityLabel = requireElement (
867+ container ,
868+ '[data-talk-select="sensitivity"] .agent-chat__talk-select-label' ,
869+ "Talk sensitivity selected label" ,
870+ ) ;
860871
861- if ( voice === null ) {
862- throw new Error ( "expected Talk voice select" ) ;
863- }
864- if ( sensitivity === null ) {
865- throw new Error ( "expected Talk sensitivity select" ) ;
866- }
867- expect ( voiceOptions ) . toEqual ( [
872+ expect ( getTalkSelectOptionValues ( container , "voice" ) ) . toEqual ( [
868873 "" ,
869874 "alloy" ,
870875 "ash" ,
@@ -877,15 +882,21 @@ describe("chat voice controls", () => {
877882 "marin" ,
878883 "cedar" ,
879884 ] ) ;
880- expect (
881- sensitivity . querySelector < HTMLElement > ( '[aria-selected="true"]' ) ?. dataset . talkSelectOption ,
882- ) . toBe ( "__custom" ) ;
883- expect (
884- Array . from ( sensitivity . querySelectorAll < HTMLElement > ( "[data-talk-select-option]" ) ) . map (
885- ( option ) => option . dataset . talkSelectOption ?? "" ,
886- ) ,
887- ) . toEqual ( [ "" , "0.65" , "0.5" , "0.35" , "__custom" ] ) ;
888- expect ( reasoningOptions ) . toEqual ( [ "" , "minimal" , "low" , "medium" , "high" ] ) ;
885+ expect ( sensitivityLabel . textContent ) . toBe ( "Custom" ) ;
886+ expect ( getTalkSelectOptionValues ( container , "sensitivity" ) ) . toEqual ( [
887+ "" ,
888+ "0.65" ,
889+ "0.5" ,
890+ "0.35" ,
891+ "__custom" ,
892+ ] ) ;
893+ expect ( getTalkSelectOptionValues ( container , "reasoning" ) ) . toEqual ( [
894+ "" ,
895+ "minimal" ,
896+ "low" ,
897+ "medium" ,
898+ "high" ,
899+ ] ) ;
889900 expect ( container . textContent ) . toContain ( "Sensitivity" ) ;
890901 expect ( container . textContent ) . toContain ( "Advanced" ) ;
891902 expect ( container . textContent ) . toContain ( "Pause before send" ) ;
@@ -894,19 +905,10 @@ describe("chat voice controls", () => {
894905 if ( model === null ) {
895906 throw new Error ( "expected Talk model input" ) ;
896907 }
897- const chooseOption = ( root : HTMLElement , value : string ) => {
898- const option = Array . from (
899- root . querySelectorAll < HTMLButtonElement > ( "[data-talk-select-option]" ) ,
900- ) . find ( ( button ) => button . dataset . talkSelectOption === value ) ;
901- if ( ! option ) {
902- throw new Error ( `expected Talk option ${ value } ` ) ;
903- }
904- option . click ( ) ;
905- } ;
906908 model . value = "gpt-realtime-mini" ;
907909 model . dispatchEvent ( new Event ( "input" , { bubbles : true } ) ) ;
908- chooseOption ( sensitivity , "0.35" ) ;
909- chooseOption ( sensitivity , "" ) ;
910+ clickTalkSelectOption ( container , " sensitivity" , "0.35" ) ;
911+ clickTalkSelectOption ( container , " sensitivity" , "" ) ;
910912
911913 expect ( onRealtimeTalkOptionsChange ) . toHaveBeenCalledWith ( { model : "gpt-realtime-mini" } ) ;
912914 expect ( onRealtimeTalkOptionsChange ) . toHaveBeenCalledWith ( { vadThreshold : "0.35" } ) ;
@@ -926,18 +928,18 @@ describe("chat voice controls", () => {
926928 } ,
927929 onRealtimeTalkOptionsChange,
928930 } ) ;
929- const defaultSensitivity = defaultContainer . querySelector < HTMLElement > (
930- '[data-talk-select="sensitivity"]' ,
931+ const defaultSensitivityLabel = requireElement (
932+ defaultContainer ,
933+ '[data-talk-select="sensitivity"] .agent-chat__talk-select-label' ,
934+ "default Talk sensitivity selected label" ,
931935 ) ;
932- expect (
933- defaultSensitivity ?. querySelector < HTMLElement > ( '[aria-selected="true"]' ) ?. dataset
934- . talkSelectOption ,
935- ) . toBe ( "" ) ;
936- expect (
937- Array . from (
938- defaultSensitivity ?. querySelectorAll < HTMLElement > ( "[data-talk-select-option]" ) ?? [ ] ,
939- ) . map ( ( option ) => option . dataset . talkSelectOption ?? "" ) ,
940- ) . toEqual ( [ "" , "0.65" , "0.5" , "0.35" ] ) ;
936+ expect ( defaultSensitivityLabel . textContent ) . toBe ( "Default" ) ;
937+ expect ( getTalkSelectOptionValues ( defaultContainer , "sensitivity" ) ) . toEqual ( [
938+ "" ,
939+ "0.65" ,
940+ "0.5" ,
941+ "0.35" ,
942+ ] ) ;
941943 } ) ;
942944
943945 it ( "renders composer and Talk labels from the active locale" , async ( ) => {
0 commit comments