feat: fix a lot of small changes to match cb, add functionality for all plans, add tests for the new plan editor. even more i dont really know anymore.

ref: N25B-412
This commit is contained in:
Björn Otgaar
2025-12-17 15:51:50 +01:00
parent c1ef924be1
commit 444e8b0289
16 changed files with 884 additions and 561 deletions

View File

@@ -0,0 +1,450 @@
// PlanEditorDialog.test.tsx
import { describe, it, beforeEach, jest } from '@jest/globals';
import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { renderWithProviders } from '../../../../test-utils/test-utils.tsx';
import PlanEditorDialog from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/PlanEditor';
import type { Plan } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/Plan';
import '@testing-library/jest-dom';
// Mock crypto.randomUUID for consistent IDs in tests
const mockUUID = 'test-uuid-123';
Object.defineProperty(globalThis, 'crypto', {
value: {
randomUUID: () => mockUUID,
},
writable: true,
});
// Mock structuredClone
(globalThis as any).structuredClone = jest.fn((val) => JSON.parse(JSON.stringify(val)));
// Mock HTMLDialogElement methods
const mockDialogMethods = {
showModal: jest.fn(),
close: jest.fn(),
};
describe('PlanEditorDialog', () => {
let user: ReturnType<typeof userEvent.setup>;
const mockOnSave = jest.fn();
beforeEach(() => {
user = userEvent.setup();
jest.clearAllMocks();
// Mock dialog element methods
HTMLDialogElement.prototype.showModal = mockDialogMethods.showModal;
HTMLDialogElement.prototype.close = mockDialogMethods.close;
});
const defaultPlan: Plan = {
id: 'plan-1',
name: 'Test Plan',
steps: [],
};
const planWithSteps: Plan = {
id: 'plan-2',
name: 'Existing Plan',
steps: [
{ id: 'step-1', text: 'Hello world', type: 'speech' as const },
{ id: 'step-2', gesture: 'Wave', type: 'gesture' as const },
],
};
const renderDialog = (props: Partial<React.ComponentProps<typeof PlanEditorDialog>> = {}) => {
const defaultProps = {
plan: undefined,
onSave: mockOnSave,
description: undefined,
};
return renderWithProviders(<PlanEditorDialog {...defaultProps} {...props} />);
};
describe('Rendering', () => {
it('should show "Create Plan" button when no plan is provided', () => {
renderDialog();
// The button should be visible
expect(screen.getByRole('button', { name: 'Create Plan' })).toBeInTheDocument();
// The dialog content should NOT be visible initially
expect(screen.queryByText(/Add Action/i)).not.toBeInTheDocument();
});
it('should show "Edit Plan" button when a plan is provided', () => {
renderDialog({ plan: defaultPlan });
expect(screen.getByRole('button', { name: 'Edit Plan' })).toBeInTheDocument();
});
it('should not show "Create Plan" button when a plan exists', () => {
renderDialog({ plan: defaultPlan });
// Query for the button text specifically, not dialog title
expect(screen.queryByRole('button', { name: 'Create Plan' })).not.toBeInTheDocument();
});
});
describe('Dialog Interactions', () => {
it('should open dialog with "Create Plan" title when creating new plan', async () => {
renderDialog();
await user.click(screen.getByRole('button', { name: 'Create Plan' }));
expect(mockDialogMethods.showModal).toHaveBeenCalled();
// One for button, one for dialog.
expect(screen.getAllByText('Create Plan').length).toEqual(2);
});
it('should open dialog with "Edit Plan" title when editing existing plan', async () => {
renderDialog({ plan: defaultPlan });
await user.click(screen.getByRole('button', { name: 'Edit Plan' }));
expect(mockDialogMethods.showModal).toHaveBeenCalled();
// One for button, one for dialog
expect(screen.getAllByText('Edit Plan').length).toEqual(2);
});
it('should pre-fill plan name when editing', async () => {
renderDialog({ plan: defaultPlan });
await user.click(screen.getByRole('button', { name: 'Edit Plan' }));
const nameInput = screen.getByPlaceholderText('Plan name') as HTMLInputElement;
expect(nameInput.value).toBe(defaultPlan.name);
});
it('should close dialog when cancel button is clicked', async () => {
renderDialog();
await user.click(screen.getByRole('button', { name: 'Create Plan' }));
await user.click(screen.getByText('Cancel'));
expect(mockDialogMethods.close).toHaveBeenCalled();
});
});
describe('Plan Creation', () => {
it('should create a new plan with default values', async () => {
renderDialog();
await user.click(screen.getByRole('button', { name: 'Create Plan' }));
// One for the button, one for the dialog
expect(screen.getAllByText('Create Plan').length).toEqual(2);
const nameInput = screen.getByPlaceholderText('Plan name');
expect(nameInput).toBeInTheDocument();
});
it('should auto-fill with description when provided', async () => {
const description = 'Achieve world peace';
renderDialog({ description });
await user.click(screen.getByRole('button', { name: 'Create Plan' }));
// Check if plan name is pre-filled with description
const nameInput = screen.getByPlaceholderText('Plan name') as HTMLInputElement;
expect(nameInput.value).toBe(description);
// Check if action type is set to LLM
const actionTypeSelect = screen.getByLabelText(/Action Type/i) as HTMLSelectElement;
expect(actionTypeSelect.value).toBe('llm');
// Check if suggestion text is shown
expect(screen.getByText('Filled in as a suggestion!')).toBeInTheDocument();
expect(screen.getByText('Feel free to change!')).toBeInTheDocument();
});
it('should allow changing plan name', async () => {
renderDialog();
await user.click(screen.getByRole('button', { name: 'Create Plan' }));
const nameInput = screen.getByPlaceholderText('Plan name') as HTMLInputElement;
const newName = 'My Custom Plan';
// Instead of clear(), select all text and type new value
await user.click(nameInput);
await user.keyboard('{Control>}a{/Control}'); // Select all (Ctrl+A)
await user.keyboard(newName);
expect(nameInput.value).toBe(newName);
});
});
describe('Action Management', () => {
it('should add a speech action to the plan', async () => {
renderDialog({ plan: defaultPlan });
await user.click(screen.getByRole('button', { name: 'Edit Plan' }));
const actionTypeSelect = screen.getByLabelText(/Action Type/i);
const actionValueInput = screen.getByPlaceholderText("Speech text")
const addButton = screen.getByText('Add Step');
// Set up a speech action
await user.selectOptions(actionTypeSelect, 'speech');
await user.type(actionValueInput, 'Hello there!');
await user.click(addButton);
// Check if step was added
expect(screen.getByText('speech:')).toBeInTheDocument();
expect(screen.getByText('Hello there!')).toBeInTheDocument();
});
it('should add a gesture action to the plan', async () => {
renderDialog({ plan: defaultPlan });
await user.click(screen.getByRole('button', { name: 'Edit Plan' }));
const actionTypeSelect = screen.getByLabelText(/Action Type/i);
const addButton = screen.getByText('Add Step');
// Set up a gesture action
await user.selectOptions(actionTypeSelect, 'gesture');
// Find the input field after type change
const gestureInput = screen.getByPlaceholderText(/Gesture name|text/i);
await user.type(gestureInput, 'Wave hand');
await user.click(addButton);
// Check if step was added
expect(screen.getByText('gesture:')).toBeInTheDocument();
expect(screen.getByText('Wave hand')).toBeInTheDocument();
});
it('should add an LLM action to the plan', async () => {
renderDialog({ plan: defaultPlan });
await user.click(screen.getByRole('button', { name: 'Edit Plan' }));
const actionTypeSelect = screen.getByLabelText(/Action Type/i);
const addButton = screen.getByText('Add Step');
// Set up an LLM action
await user.selectOptions(actionTypeSelect, 'llm');
// Find the input field after type change
const llmInput = screen.getByPlaceholderText(/LLM goal|text/i);
await user.type(llmInput, 'Generate a story');
await user.click(addButton);
// Check if step was added
expect(screen.getByText('llm:')).toBeInTheDocument();
expect(screen.getByText('Generate a story')).toBeInTheDocument();
});
it('should disable "Add Step" button when action value is empty', async () => {
renderDialog({ plan: defaultPlan });
await user.click(screen.getByRole('button', { name: 'Edit Plan' }));
const addButton = screen.getByText('Add Step');
expect(addButton).toBeDisabled();
});
it('should reset action form after adding a step', async () => {
renderDialog({ plan: defaultPlan });
await user.click(screen.getByRole('button', { name: 'Edit Plan' }));
const actionValueInput = screen.getByPlaceholderText("Speech text")
const addButton = screen.getByText('Add Step');
await user.type(actionValueInput, 'Test speech');
await user.click(addButton);
// Action value should be cleared
expect(actionValueInput).toHaveValue('');
// Action type should be reset to speech (default)
const actionTypeSelect = screen.getByLabelText(/Action Type/i) as HTMLSelectElement;
expect(actionTypeSelect.value).toBe('speech');
});
});
describe('Step Management', () => {
it('should show existing steps when editing a plan', async () => {
renderDialog({ plan: planWithSteps });
await user.click(screen.getByRole('button', { name: 'Edit Plan' }));
// Check if existing steps are shown
expect(screen.getByText('speech:')).toBeInTheDocument();
expect(screen.getByText('Hello world')).toBeInTheDocument();
expect(screen.getByText('gesture:')).toBeInTheDocument();
expect(screen.getByText('Wave')).toBeInTheDocument();
});
it('should show "No steps yet" message when plan has no steps', async () => {
renderDialog({ plan: defaultPlan });
await user.click(screen.getByRole('button', { name: 'Edit Plan' }));
expect(screen.getByText('No steps yet')).toBeInTheDocument();
});
it('should remove a step when clicked', async () => {
renderDialog({ plan: planWithSteps });
await user.click(screen.getByRole('button', { name: 'Edit Plan' }));
// Initially have 2 steps
expect(screen.getByText('speech:')).toBeInTheDocument();
expect(screen.getByText('gesture:')).toBeInTheDocument();
// Click on the first step to remove it
await user.click(screen.getByText('Hello world'));
// First step should be removed
expect(screen.queryByText('Hello world')).not.toBeInTheDocument();
// Second step should still exist
expect(screen.getByText('Wave')).toBeInTheDocument();
});
});
describe('Save Functionality', () => {
it('should call onSave with new plan when creating', async () => {
renderDialog();
await user.click(screen.getByRole('button', { name: 'Create Plan' }));
// Set plan name
const nameInput = screen.getByPlaceholderText('Plan name') as HTMLInputElement;
await user.click(nameInput);
await user.keyboard('{Control>}a{/Control}');
await user.keyboard('My New Plan');
// Add a step
const actionValueInput = screen.getByPlaceholderText(/text/i);
await user.type(actionValueInput, 'First step');
await user.click(screen.getByText('Add Step'));
// Save the plan
await user.click(screen.getByText('Create'));
expect(mockOnSave).toHaveBeenCalledWith({
id: mockUUID,
name: 'My New Plan',
steps: [
{
id: mockUUID,
text: 'First step',
type: 'speech',
},
],
});
expect(mockDialogMethods.close).toHaveBeenCalled();
});
it('should call onSave with updated plan when editing', async () => {
renderDialog({ plan: defaultPlan });
await user.click(screen.getByRole('button', { name: 'Edit Plan' }));
// Change plan name
const nameInput = screen.getByPlaceholderText('Plan name') as HTMLInputElement;
await user.click(nameInput);
await user.keyboard('{Control>}a{/Control}');
await user.keyboard('Updated Plan Name');
// Add a step
const actionValueInput = screen.getByPlaceholderText(/text/i);
await user.type(actionValueInput, 'New speech action');
await user.click(screen.getByText('Add Step'));
// Save the plan
await user.click(screen.getByText('Confirm'));
expect(mockOnSave).toHaveBeenCalledWith({
id: defaultPlan.id,
name: 'Updated Plan Name',
steps: [
{
id: mockUUID,
text: 'New speech action',
type: 'speech',
},
],
});
expect(mockDialogMethods.close).toHaveBeenCalled();
});
it('should call onSave with undefined when reset button is clicked', async () => {
renderDialog({ plan: defaultPlan });
await user.click(screen.getByRole('button', { name: 'Edit Plan' }));
await user.click(screen.getByText('Reset'));
expect(mockOnSave).toHaveBeenCalledWith(undefined);
expect(mockDialogMethods.close).toHaveBeenCalled();
});
it('should disable save button when no draft plan exists', async () => {
renderDialog();
await user.click(screen.getByRole('button', { name: 'Create Plan' }));
// The save button should be enabled since draftPlan exists after clicking Create Plan
const saveButton = screen.getByText('Create');
expect(saveButton).not.toBeDisabled();
});
});
describe('Step Indexing', () => {
it('should show correct step numbers', async () => {
renderDialog({ plan: defaultPlan });
await user.click(screen.getByRole('button', { name: 'Edit Plan' }));
// Add multiple steps
const actionValueInput = screen.getByPlaceholderText(/text/i);
const addButton = screen.getByText('Add Step');
await user.type(actionValueInput, 'First');
await user.click(addButton);
await user.type(actionValueInput, 'Second');
await user.click(addButton);
await user.type(actionValueInput, 'Third');
await user.click(addButton);
// Check step numbers
expect(screen.getByText('1.')).toBeInTheDocument();
expect(screen.getByText('2.')).toBeInTheDocument();
expect(screen.getByText('3.')).toBeInTheDocument();
});
});
describe('Action Type Switching', () => {
it('should update placeholder text when action type changes', async () => {
renderDialog();
await user.click(screen.getByRole('button', { name: 'Create Plan' }));
const actionTypeSelect = screen.getByLabelText(/Action Type/i);
// Check speech placeholder
await user.selectOptions(actionTypeSelect, 'speech');
// The placeholder might be set dynamically, so we need to check the input
const speechInput = screen.getByPlaceholderText(/text/i);
expect(speechInput).toBeInTheDocument();
// Check gesture placeholder
await user.selectOptions(actionTypeSelect, 'gesture');
const gestureInput = screen.getByPlaceholderText(/Gesture|text/i);
expect(gestureInput).toBeInTheDocument();
// Check LLM placeholder
await user.selectOptions(actionTypeSelect, 'llm');
const llmInput = screen.getByPlaceholderText(/LLM|text/i);
expect(llmInput).toBeInTheDocument();
});
});
});

View File

@@ -425,7 +425,6 @@ describe('NormNode', () => {
label: 'Safety Norm',
norm: 'Never harm humans',
critical: false,
basic_beliefs: [],
});
});
@@ -917,17 +916,8 @@ describe('NormNode', () => {
}
};
const mockBelief2: Node = {
id: 'basic_belief-2',
type: 'basic_belief',
position: {x:300, y:300},
data: {
...JSON.parse(JSON.stringify(BasicBeliefNodeDefaults))
}
};
useFlowStore.setState({
nodes: [mockNode, mockBelief1, mockBelief2],
nodes: [mockNode, mockBelief1],
edges: [],
});
@@ -938,16 +928,11 @@ describe('NormNode', () => {
sourceHandle: null,
targetHandle: null,
});
useFlowStore.getState().onConnect({
source: 'basic_belief-2',
target: 'norm-1',
sourceHandle: null,
targetHandle: null,
});
const state = useFlowStore.getState();
const updatedNorm = state.nodes.find(n => n.id === 'norm-1');
expect(updatedNorm?.data.conditions).toEqual(["basic_belief-1", "basic_belief-2"]);
expect(updatedNorm?.data.condition).toEqual("basic_belief-1");
});
});
});

View File

@@ -1,6 +1,5 @@
import { describe, it, beforeEach } from '@jest/globals';
import { screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { screen } from '@testing-library/react';
import { renderWithProviders } from '../../../../test-utils/test-utils.tsx';
import TriggerNode, {
TriggerReduce,
@@ -11,12 +10,15 @@ import TriggerNode, {
import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores';
import type { Node } from '@xyflow/react';
import '@testing-library/jest-dom';
import { TriggerNodeDefaults } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode.default.ts';
import { BasicBeliefNodeDefaults } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/BasicBeliefNode.default.ts';
import { defaultPlan } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/components/Plan.default.ts';
import { NormNodeDefaults } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.default.ts';
describe('TriggerNode', () => {
let user: ReturnType<typeof userEvent.setup>;
beforeEach(() => {
user = userEvent.setup();
jest.clearAllMocks();
});
describe('Rendering', () => {
@@ -26,11 +28,7 @@ describe('TriggerNode', () => {
type: 'trigger',
position: { x: 0, y: 0 },
data: {
label: 'Keyword Trigger',
droppable: true,
triggerType: 'keywords',
triggers: [],
hasReduce: true,
...JSON.parse(JSON.stringify(TriggerNodeDefaults)),
},
};
@@ -51,161 +49,59 @@ describe('TriggerNode', () => {
/>
);
expect(screen.getByText(/Triggers when the keyword is spoken/i)).toBeInTheDocument();
expect(screen.getByPlaceholderText('...')).toBeInTheDocument();
});
it('should render TriggerNode with emotion type', () => {
const mockNode: Node<TriggerNodeData> = {
id: 'trigger-2',
type: 'trigger',
position: { x: 0, y: 0 },
data: {
label: 'Emotion Trigger',
droppable: true,
triggerType: 'emotion',
triggers: [],
hasReduce: true,
},
};
renderWithProviders(
<TriggerNode
id={mockNode.id}
type={mockNode.type as string}
data={mockNode.data as any}
selected={false}
isConnectable={true}
zIndex={0}
dragging={false}
selectable={true}
deletable={true}
draggable={true}
positionAbsoluteX={0}
positionAbsoluteY={0}
/>
);
expect(screen.getByText(/Emotion\?/i)).toBeInTheDocument();
});
});
describe('User Interactions', () => {
it('should add a new keyword', async () => {
const mockNode: Node<TriggerNodeData> = {
id: 'trigger-1',
type: 'trigger',
position: { x: 0, y: 0 },
data: {
label: 'Keyword Trigger',
droppable: true,
triggerType: 'keywords',
triggers: [],
hasReduce: true,
},
};
useFlowStore.setState({ nodes: [mockNode], edges: [] });
renderWithProviders(
<TriggerNode
id={mockNode.id}
type={mockNode.type as string}
data={mockNode.data as any}
selected={false}
isConnectable={true}
zIndex={0}
dragging={false}
selectable={true}
deletable={true}
draggable={true}
positionAbsoluteX={0}
positionAbsoluteY={0}
/>
);
const input = screen.getByPlaceholderText('...');
await user.type(input, 'hello{enter}');
await waitFor(() => {
const node = useFlowStore.getState().nodes.find(n => n.id === 'trigger-1') as Node<TriggerNodeData> | undefined;
expect(node?.data.triggers.length).toBe(1);
expect(node?.data.triggers[0].keyword).toBe('hello');
});
});
it('should remove a keyword when cleared', async () => {
const mockNode: Node<TriggerNodeData> = {
id: 'trigger-1',
type: 'trigger',
position: { x: 0, y: 0 },
data: {
label: 'Keyword Trigger',
droppable: true,
triggerType: 'keywords',
triggers: [{ id: 'kw1', keyword: 'hello' }],
hasReduce: true,
},
};
useFlowStore.setState({ nodes: [mockNode], edges: [] });
renderWithProviders(
<TriggerNode
id={mockNode.id}
type={mockNode.type as string}
data={mockNode.data as any}
selected={false}
isConnectable={true}
zIndex={0}
dragging={false}
selectable={true}
deletable={true}
draggable={true}
positionAbsoluteX={0}
positionAbsoluteY={0}
/>
);
const input = screen.getByDisplayValue('hello');
for (let i = 0; i < 'hello'.length; i++) {
await user.type(input, '{backspace}');
}
await user.type(input, '{enter}');
await waitFor(() => {
const node = useFlowStore.getState().nodes.find(n => n.id === 'trigger-1') as Node<TriggerNodeData> | undefined;
expect(node?.data.triggers.length).toBe(0);
});
expect(screen.getByText(/Triggers when the condition is met/i)).toBeInTheDocument();
expect(screen.getByText(/Belief is currently/i)).toBeInTheDocument();
expect(screen.getByText(/Plan is currently/i)).toBeInTheDocument();
});
});
describe('TriggerReduce Function', () => {
it('should reduce a trigger node to its essential data', () => {
const conditionNode: Node = {
id: 'belief-1',
type: 'basic_belief',
position: { x: 0, y: 0 },
data: {
...JSON.parse(JSON.stringify(BasicBeliefNodeDefaults)),
},
};
const triggerNode: Node = {
id: 'trigger-1',
type: 'trigger',
position: { x: 0, y: 0 },
data: {
label: 'Keyword Trigger',
droppable: true,
triggerType: 'keywords',
triggers: [{ id: 'kw1', keyword: 'hello' }],
hasReduce: true,
...JSON.parse(JSON.stringify(TriggerNodeDefaults)),
condition: "belief-1",
plan: defaultPlan
},
};
const allNodes: Node[] = [triggerNode];
const result = TriggerReduce(triggerNode, allNodes);
useFlowStore.setState({
nodes: [conditionNode, triggerNode],
edges: [],
});
useFlowStore.getState().onConnect({
source: 'belief-1',
target: 'trigger-1',
sourceHandle: null,
targetHandle: null,
});
const result = TriggerReduce(triggerNode, useFlowStore.getState().nodes);
expect(result).toEqual({
id: 'trigger-1',
type: 'keywords',
label: 'Keyword Trigger',
keywords: [{ id: 'kw1', keyword: 'hello' }],
});
condition: {
id: "belief-1",
keyword: "help",
},
plan: {
name: "Default Plan",
id: expect.anything(),
steps: [],
},});
});
});
@@ -217,11 +113,8 @@ describe('TriggerNode', () => {
type: 'trigger',
position: { x: 0, y: 0 },
data: {
...JSON.parse(JSON.stringify(TriggerNodeDefaults)),
label: 'Trigger 1',
droppable: true,
triggerType: 'keywords',
triggers: [],
hasReduce: true,
},
};
@@ -230,10 +123,8 @@ describe('TriggerNode', () => {
type: 'norm',
position: { x: 100, y: 0 },
data: {
...JSON.parse(JSON.stringify(NormNodeDefaults)),
label: 'Norm 1',
droppable: true,
norm: 'test',
hasReduce: true,
},
};

View File

@@ -187,7 +187,7 @@ describe('Universal Nodes', () => {
// Verify the correct structure is present using NodesInPhase
expect(result).toHaveLength(nodeType !== 'phase' ? 1 : 2);
expect(result[0]).toHaveProperty('id', 'phase-1');
expect(result[0]).toHaveProperty('label', 'Test Phase');
expect(result[0]).toHaveProperty('name', 'Test Phase');
// Restore mocks
phaseReduceSpy.mockRestore();