@@ -480,3 +480,123 @@ export const CheckExternalAuthOnChangingVersions: Story = {
480480} ) ;
481481} ,
482482} ;
483+
484+ export const CheckPresetsWhenChangingTemplate :Story = {
485+ args :{
486+ templates :[
487+ {
488+ ...MockTemplate ,
489+ id :"claude-code" ,
490+ name :"claude-code" ,
491+ display_name :"Claude Code" ,
492+ active_version_id :"claude-code-version" ,
493+ } ,
494+ {
495+ ...MockTemplate ,
496+ id :"codex" ,
497+ name :"codex" ,
498+ display_name :"Codex" ,
499+ active_version_id :"codex-version" ,
500+ } ,
501+ ] ,
502+ } ,
503+ beforeEach :( ) => {
504+ spyOn ( API , "getTemplateVersionPresets" ) . mockImplementation ( ( versionId ) => {
505+ if ( versionId === "claude-code-version" ) {
506+ return Promise . resolve ( [
507+ {
508+ ...MockPresets [ 0 ] ,
509+ ID :"claude-code-preset-1" ,
510+ Name :"Claude Code Dev" ,
511+ } ,
512+ ] ) ;
513+ }
514+ if ( versionId === "codex-version" ) {
515+ return Promise . resolve ( [
516+ {
517+ ...MockPresets [ 0 ] ,
518+ ID :"codex-preset-1" ,
519+ Name :"Codex Dev" ,
520+ } ,
521+ ] ) ;
522+ }
523+ return Promise . resolve ( [ ] ) ;
524+ } ) ;
525+ spyOn ( API , "getTemplateVersions" ) . mockImplementation ( ( templateId ) => {
526+ if ( templateId === "claude-code" ) {
527+ return Promise . resolve ( [
528+ {
529+ ...MockTemplateVersion ,
530+ id :"claude-code-version" ,
531+ name :"claude-code-version" ,
532+ } ,
533+ ] ) ;
534+ }
535+ if ( templateId === "codex" ) {
536+ return Promise . resolve ( [
537+ {
538+ ...MockTemplateVersion ,
539+ id :"codex-version" ,
540+ name :"codex-version" ,
541+ } ,
542+ ] ) ;
543+ }
544+ return Promise . resolve ( [ ] ) ;
545+ } ) ;
546+ } ,
547+ play :async ( { canvasElement, step} ) => {
548+ const canvas = within ( canvasElement ) ;
549+ const body = within ( canvasElement . ownerDocument . body ) ;
550+
551+ await step ( "Presets are initially present" , async ( ) => {
552+ const presetSelect = await canvas . findByLabelText ( / p r e s e t / i) ;
553+ await userEvent . click ( presetSelect ) ;
554+
555+ const options = await body . findAllByRole ( "option" ) ;
556+ expect ( options ) . toHaveLength ( 1 ) ;
557+ expect ( options [ 0 ] ) . toContainHTML ( "Claude Code Dev" ) ;
558+
559+ await userEvent . click ( options [ 0 ] ) ;
560+ } ) ;
561+
562+ await step ( "Switch template" , async ( ) => {
563+ const templateSelect = await canvas . findByLabelText ( / s e l e c t t e m p l a t e / i) ;
564+ await userEvent . click ( templateSelect ) ;
565+
566+ const codexTemplateOption = await body . findByRole ( "option" , {
567+ name :/ c o d e x / i,
568+ } ) ;
569+ await userEvent . click ( codexTemplateOption ) ;
570+ } ) ;
571+
572+ await step ( "Presets are present in new template" , async ( ) => {
573+ const presetSelect = await canvas . findByLabelText ( / p r e s e t / i) ;
574+ await userEvent . click ( presetSelect ) ;
575+
576+ const options = await body . findAllByRole ( "option" ) ;
577+ expect ( options ) . toHaveLength ( 1 ) ;
578+ expect ( options [ 0 ] ) . toContainHTML ( "Codex Dev" ) ;
579+
580+ await userEvent . click ( options [ 0 ] ) ;
581+ } ) ;
582+
583+ await step ( "Switch template back" , async ( ) => {
584+ const templateSelect = await canvas . findByLabelText ( / s e l e c t t e m p l a t e / i) ;
585+ await userEvent . click ( templateSelect ) ;
586+
587+ const codexTemplateOption = await body . findByRole ( "option" , {
588+ name :/ c l a u d e c o d e / i,
589+ } ) ;
590+ await userEvent . click ( codexTemplateOption ) ;
591+ } ) ;
592+
593+ await step ( "Presets are present in original template" , async ( ) => {
594+ const presetSelect = await canvas . findByLabelText ( / p r e s e t / i) ;
595+ await userEvent . click ( presetSelect ) ;
596+
597+ const options = await body . findAllByRole ( "option" ) ;
598+ expect ( options ) . toHaveLength ( 1 ) ;
599+ expect ( options [ 0 ] ) . toContainHTML ( "Claude Code Dev" ) ;
600+ } ) ;
601+ } ,
602+ } ;