fix(pou): show return type selector for graphical function POUs

src/frontend/components/_organisms/variables-editor/__tests__/return-type-visibility.test.tsx

@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react'
+
+// The variables code editor pulls in Monaco, which cannot run in jsdom.
+vi.mock('@root/frontend/components/_organisms/variables-code-editor', () => ({
+  VariablesCodeEditor: () => <div data-testid='variables-code-editor' />,
+}))
+
+import { useOpenPLCStore } from '../../../../store'
+import { VariablesEditor } from '../index'
+
+const createPou = (
+  name: string,
+  type: 'program' | 'function' | 'function-block',
+  language: 'st' | 'fbd' | 'ld' | 'sfc',
+) => {
+  const result = useOpenPLCStore.getState().pouActions.create({ type, name, language })
+  expect(result.ok).toBe(true)
+}
+
+// https://github.com/Autonomy-Logic/openplc-editor/issues/696
+describe('VariablesEditor return type selector', () => {
+  it('shows the return type selector for a function written in FBD', () => {
+    createPou('FbdFunction', 'function', 'fbd')
+    render(<VariablesEditor name='FbdFunction' />)
+    expect(screen.getByText('Return type :')).toBeTruthy()
+  })
+
+  it('shows the return type selector for a function written in LD', () => {
+    createPou('LdFunction', 'function', 'ld')
+    render(<VariablesEditor name='LdFunction' />)
+    expect(screen.getByText('Return type :')).toBeTruthy()
+  })
+
+  it('shows the return type selector for a function written in SFC', () => {
+    createPou('SfcFunction', 'function', 'sfc')
+    render(<VariablesEditor name='SfcFunction' />)
+    expect(screen.getByText('Return type :')).toBeTruthy()
+  })
+
+  it('associates the return type label with its select trigger', () => {
+    createPou('LabeledFunction', 'function', 'fbd')
+    render(<VariablesEditor name='LabeledFunction' />)
+    const trigger = screen.getByLabelText('Return type :')
+    expect(trigger.id).toBe('return-type')
+  })
+
+  it('shows the return type selector for a function written in ST', () => {
+    createPou('StFunction', 'function', 'st')
+    render(<VariablesEditor name='StFunction' />)
+    expect(screen.getByText('Return type :')).toBeTruthy()
+  })
+
+  it('does not show the return type selector for an FBD program', () => {
+    createPou('FbdProgram', 'program', 'fbd')
+    render(<VariablesEditor name='FbdProgram' />)
+    expect(screen.queryByText('Return type :')).toBeNull()
+  })
+
+  it('does not show the return type selector for an FBD function block', () => {
+    createPou('FbdBlock', 'function-block', 'fbd')
+    render(<VariablesEditor name='FbdBlock' />)
+    expect(screen.queryByText('Return type :')).toBeNull()
+  })
+})

src/frontend/components/_organisms/variables-editor/index.tsx

@@ -1052,17 +1052,17 @@ const VariablesEditor = ({ name: propName, isActive: _isActive = true }: Variabl
         <div aria-label='Variables editor actions' className='relative flex h-8 w-full gap-4'>
           {editorVariables.display === 'table' && (
             <div aria-label='Variables editor table actions container' className='flex h-full w-full select-none gap-4'>
-              {editor.type === 'plc-textual' && editor.meta.pouType === 'function' && (
+              {(editor.type === 'plc-textual' || editor.type === 'plc-graphical') && editor.meta.pouType === 'function' && (
                 <div className='flex h-full max-w-lg flex-1 items-center gap-2'>
                   <label
-                    htmlFor='return type'
+                    htmlFor='return-type'
                     className='w-fit text-nowrap text-xs font-medium text-neutral-1000 dark:text-neutral-300'
                   >
                     Return type :
                   </label>
                   <Select value={returnType} onValueChange={handleReturnTypeChange}>
                     <SelectTrigger
-                      id='class-filter'
+                      id='return-type'
                       placeholder={returnType}
                       withIndicator
                       className='group flex h-full w-full items-center justify-between rounded-lg border border-neutral-500 px-2 font-caption text-cp-sm font-medium text-neutral-850 outline-none dark:border-neutral-850 dark:text-neutral-300'