test: high coverage for all UI tests
This commit is contained in:
JobvAlewijk
committed by
Gerla, J. (Justin)
Gerla, J. (Justin)
parent
c639a37dfc
commit
086caea737
@@ -0,0 +1,744 @@
|
||||
import { describe, it, beforeEach } from '@jest/globals';
|
||||
import { screen, waitFor } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { renderWithProviders } from '../.././/./../../test-utils/test-utils';
|
||||
import NormNode, { NormReduce, NormConnects, type NormNodeData } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode'
|
||||
import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores';
|
||||
import type { Node } from '@xyflow/react';
|
||||
import '@testing-library/jest-dom'
|
||||
|
||||
|
||||
|
||||
describe('NormNode', () => {
|
||||
let user: ReturnType<typeof userEvent.setup>;
|
||||
|
||||
beforeEach(() => {
|
||||
user = userEvent.setup();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render the norm node with default data', () => {
|
||||
const mockNode: Node = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Test Norm',
|
||||
droppable: true,
|
||||
norm: '',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
renderWithProviders(
|
||||
<NormNode
|
||||
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.getByPlaceholderText('Pepper should ...')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render with pre-populated norm text', () => {
|
||||
const mockNode: Node = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Test Norm',
|
||||
droppable: true,
|
||||
norm: 'Be respectful to humans',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
renderWithProviders(
|
||||
<NormNode
|
||||
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('Be respectful to humans');
|
||||
expect(input).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render with selected state', () => {
|
||||
const mockNode: Node<NormNodeData> = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Test Norm',
|
||||
droppable: true,
|
||||
norm: '',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
renderWithProviders(
|
||||
<NormNode
|
||||
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 norm = screen.getByText("Norm :")
|
||||
expect(norm).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render with dragging state', () => {
|
||||
const mockNode: Node = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Test Norm',
|
||||
droppable: true,
|
||||
norm: 'Dragged norm',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
renderWithProviders(
|
||||
<NormNode
|
||||
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('Dragged norm');
|
||||
expect(input).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('User Interactions', () => {
|
||||
it('should update norm text when user types in the input field', async () => {
|
||||
const mockNode: Node = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Test Norm',
|
||||
droppable: true,
|
||||
norm: '',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
useFlowStore.setState({
|
||||
nodes: [mockNode],
|
||||
edges: [],
|
||||
});
|
||||
|
||||
renderWithProviders(
|
||||
<NormNode
|
||||
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('Pepper should ...');
|
||||
await user.type(input, 'Be polite to guests{enter}');
|
||||
|
||||
await waitFor(() => {
|
||||
const state = useFlowStore.getState();
|
||||
const updatedNode = state.nodes.find(n => n.id === 'norm-1');
|
||||
expect(updatedNode?.data.norm).toBe('Be polite to guests');
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle clearing the norm text', async () => {
|
||||
const mockNode: Node = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Test Norm',
|
||||
droppable: true,
|
||||
norm: 'Initial norm text',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
useFlowStore.setState({
|
||||
nodes: [mockNode],
|
||||
edges: [],
|
||||
});
|
||||
|
||||
renderWithProviders(
|
||||
<NormNode
|
||||
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('Initial norm text') as HTMLInputElement;
|
||||
|
||||
// clearing the norm text is the same as just deleting all characters one by one
|
||||
// TODO: FIGURE OUT A MORE EFFICIENT WAY, I"M SORRY, user.clear() just doesn't work:/
|
||||
for (let a = 0; a < 'Initial norm text'.length; a++){
|
||||
await user.type(input, '{backspace}')
|
||||
}
|
||||
await user.type(input,'{enter}')
|
||||
|
||||
await waitFor(() => {
|
||||
const state = useFlowStore.getState();
|
||||
const updatedNode = state.nodes.find(n => n.id === 'norm-1');
|
||||
expect(updatedNode?.data.norm).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
it('should update norm text multiple times', async () => {
|
||||
const mockNode: Node = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Test Norm',
|
||||
droppable: true,
|
||||
norm: '',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
useFlowStore.setState({
|
||||
nodes: [mockNode],
|
||||
edges: [],
|
||||
});
|
||||
|
||||
renderWithProviders(
|
||||
<NormNode
|
||||
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('Pepper should ...');
|
||||
await user.type(input, 'First norm{enter}');
|
||||
await waitFor(() => {
|
||||
expect(useFlowStore.getState().nodes[0].data.norm).toBe('First norm');
|
||||
});
|
||||
|
||||
|
||||
// TODO: FIGURE OUT A MORE EFFICIENT WAY, I"M SORRY, user.clear() just doesn't work:/
|
||||
for (let a = 0; a < 'First norm'.length; a++){
|
||||
await user.type(input, '{backspace}')
|
||||
}
|
||||
|
||||
await user.type(input, 'Second norm{enter}');
|
||||
await waitFor(() => {
|
||||
expect(useFlowStore.getState().nodes[0].data.norm).toBe('Second norm');
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle special characters in norm text', async () => {
|
||||
const mockNode: Node = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Test Norm',
|
||||
droppable: true,
|
||||
norm: '',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
useFlowStore.setState({
|
||||
nodes: [mockNode],
|
||||
edges: [],
|
||||
});
|
||||
|
||||
renderWithProviders(
|
||||
<NormNode
|
||||
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('Pepper should ...');
|
||||
await user.type(input, "Don't harm & be nice!{enter}" );
|
||||
|
||||
await waitFor(() => {
|
||||
expect(useFlowStore.getState().nodes[0].data.norm).toBe("Don't harm & be nice!");
|
||||
});
|
||||
});
|
||||
|
||||
it('should handle long norm text', async () => {
|
||||
const longText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
|
||||
const mockNode: Node = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Test Norm',
|
||||
droppable: true,
|
||||
norm: '',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
useFlowStore.setState({
|
||||
nodes: [mockNode],
|
||||
edges: [],
|
||||
});
|
||||
|
||||
renderWithProviders(
|
||||
<NormNode
|
||||
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('Pepper should ...');
|
||||
await user.type(input, longText);
|
||||
await user.type(input, "{enter}")
|
||||
|
||||
await waitFor(() => {
|
||||
expect(useFlowStore.getState().nodes[0].data.norm).toBe(longText);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('NormReduce Function', () => {
|
||||
it('should reduce a norm node to its essential data', () => {
|
||||
const normNode: Node = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Safety Norm',
|
||||
droppable: true,
|
||||
norm: 'Never harm humans',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
const allNodes: Node[] = [normNode];
|
||||
const result = NormReduce(normNode, allNodes);
|
||||
|
||||
expect(result).toEqual({
|
||||
id: 'norm-1',
|
||||
label: 'Safety Norm',
|
||||
norm: 'Never harm humans',
|
||||
});
|
||||
});
|
||||
|
||||
it('should reduce multiple norm nodes independently', () => {
|
||||
const norm1: Node = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Norm 1',
|
||||
droppable: true,
|
||||
norm: 'Be helpful',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
const norm2: Node = {
|
||||
id: 'norm-2',
|
||||
type: 'norm',
|
||||
position: { x: 100, y: 0 },
|
||||
data: {
|
||||
label: 'Norm 2',
|
||||
droppable: true,
|
||||
norm: 'Be honest',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
const allNodes: Node[] = [norm1, norm2];
|
||||
|
||||
const result1 = NormReduce(norm1, allNodes);
|
||||
const result2 = NormReduce(norm2, allNodes);
|
||||
|
||||
expect(result1.id).toBe('norm-1');
|
||||
expect(result1.norm).toBe('Be helpful');
|
||||
expect(result2.id).toBe('norm-2');
|
||||
expect(result2.norm).toBe('Be honest');
|
||||
});
|
||||
|
||||
it('should handle empty norm text', () => {
|
||||
const normNode: Node = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Empty Norm',
|
||||
droppable: true,
|
||||
norm: '',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
const result = NormReduce(normNode, [normNode]);
|
||||
|
||||
expect(result.norm).toBe('');
|
||||
expect(result.id).toBe('norm-1');
|
||||
});
|
||||
|
||||
it('should preserve node label in reduction', () => {
|
||||
const normNode: Node = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Custom Label',
|
||||
droppable: false,
|
||||
norm: 'Test norm',
|
||||
hasReduce: false,
|
||||
},
|
||||
};
|
||||
|
||||
const result = NormReduce(normNode, [normNode]);
|
||||
|
||||
expect(result.label).toBe('Custom Label');
|
||||
});
|
||||
});
|
||||
|
||||
describe('NormConnects Function', () => {
|
||||
it('should handle connection without errors', () => {
|
||||
const normNode: Node = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Test Norm',
|
||||
droppable: true,
|
||||
norm: 'Test',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
const phaseNode: Node = {
|
||||
id: 'phase-1',
|
||||
type: 'phase',
|
||||
position: { x: 100, y: 0 },
|
||||
data: {
|
||||
label: 'Phase 1',
|
||||
droppable: true,
|
||||
children: [],
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
expect(() => {
|
||||
NormConnects(normNode, phaseNode, true);
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
it('should handle connection when norm is target', () => {
|
||||
const normNode: Node = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Test Norm',
|
||||
droppable: true,
|
||||
norm: 'Test',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
const phaseNode: Node = {
|
||||
id: 'phase-1',
|
||||
type: 'phase',
|
||||
position: { x: 100, y: 0 },
|
||||
data: {
|
||||
label: 'Phase 1',
|
||||
droppable: true,
|
||||
children: [],
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
expect(() => {
|
||||
NormConnects(normNode, phaseNode, false);
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
it('should handle self-connection', () => {
|
||||
const normNode: Node = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Test Norm',
|
||||
droppable: true,
|
||||
norm: 'Test',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
expect(() => {
|
||||
NormConnects(normNode, normNode, true);
|
||||
}).not.toThrow();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Integration with Store', () => {
|
||||
it('should properly update the store when editing norm text', async () => {
|
||||
const mockNode: Node = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Test Norm',
|
||||
droppable: true,
|
||||
norm: '',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
useFlowStore.setState({
|
||||
nodes: [mockNode],
|
||||
edges: [],
|
||||
});
|
||||
|
||||
renderWithProviders(
|
||||
<NormNode
|
||||
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('Pepper should ...');
|
||||
|
||||
// TODO: FIGURE OUT A MORE EFFICIENT WAY, I"M SORRY, user.clear() just doesn't work:/
|
||||
for (let a = 0; a < 20; a++){
|
||||
await user.type(input, '{backspace}')
|
||||
}
|
||||
await user.type(input, 'New norm value{enter}');
|
||||
|
||||
await waitFor(() => {
|
||||
const state = useFlowStore.getState();
|
||||
expect(state.nodes).toHaveLength(1);
|
||||
expect(state.nodes[0].id).toBe('norm-1');
|
||||
expect(state.nodes[0].data.norm).toBe('New norm value');
|
||||
});
|
||||
});
|
||||
|
||||
it('should not affect other nodes when updating one norm node', async () => {
|
||||
const norm1: Node = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Norm 1',
|
||||
droppable: true,
|
||||
norm: 'Original norm 1',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
const norm2: Node = {
|
||||
id: 'norm-2',
|
||||
type: 'norm',
|
||||
position: { x: 100, y: 0 },
|
||||
data: {
|
||||
label: 'Norm 2',
|
||||
droppable: true,
|
||||
norm: 'Original norm 2',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
useFlowStore.setState({
|
||||
nodes: [norm1, norm2],
|
||||
edges: [],
|
||||
});
|
||||
|
||||
renderWithProviders(
|
||||
<NormNode
|
||||
id={norm1.id}
|
||||
type={norm1.type as string}
|
||||
data={norm1.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('Original norm 1') as HTMLInputElement;
|
||||
|
||||
|
||||
// TODO: FIGURE OUT A MORE EFFICIENT WAY, I"M SORRY, user.clear() just doesn't work:/
|
||||
for (let a = 0; a < 20; a++){
|
||||
await user.type(input, '{backspace}')
|
||||
}
|
||||
await user.type(input, 'Updated norm 1{enter}');
|
||||
|
||||
await waitFor(() => {
|
||||
const state = useFlowStore.getState();
|
||||
const updatedNorm1 = state.nodes.find(n => n.id === 'norm-1');
|
||||
const unchangedNorm2 = state.nodes.find(n => n.id === 'norm-2');
|
||||
|
||||
expect(updatedNorm1?.data.norm).toBe('Updated norm 1');
|
||||
expect(unchangedNorm2?.data.norm).toBe('Original norm 2');
|
||||
});
|
||||
});
|
||||
|
||||
it('should maintain data consistency with multiple rapid updates', async () => {
|
||||
const mockNode: Node = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Test Norm',
|
||||
droppable: true,
|
||||
norm: 'haa haa fuyaaah - link',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
useFlowStore.setState({
|
||||
nodes: [mockNode],
|
||||
edges: [],
|
||||
});
|
||||
|
||||
renderWithProviders(
|
||||
<NormNode
|
||||
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('Pepper should ...');
|
||||
|
||||
await user.type(input, 'a');
|
||||
await waitFor(() => {
|
||||
expect(useFlowStore.getState().nodes[0].data.norm).toBe('haa haa fuyaaah - link');
|
||||
});
|
||||
|
||||
await user.type(input, 'b');
|
||||
await waitFor(() => {
|
||||
expect(useFlowStore.getState().nodes[0].data.norm).toBe('haa haa fuyaaah - link');
|
||||
});
|
||||
|
||||
await user.type(input, 'c');
|
||||
await waitFor(() => {
|
||||
expect(useFlowStore.getState().nodes[0].data.norm).toBe('haa haa fuyaaah - link');
|
||||
}, { timeout: 3000 });
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,98 @@
|
||||
import { describe, it } from '@jest/globals';
|
||||
import '@testing-library/jest-dom';
|
||||
import { screen } from '@testing-library/react';
|
||||
import type { Node } from '@xyflow/react';
|
||||
import { renderWithProviders } from '../.././/./../../test-utils/test-utils';
|
||||
import StartNode, { StartReduce, StartConnects } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/StartNode';
|
||||
|
||||
|
||||
describe('StartNode', () => {
|
||||
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('renders the StartNode correctly', () => {
|
||||
const mockNode: Node = {
|
||||
id: 'start-1',
|
||||
type: 'start', // TypeScript now knows this is a string
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Start Node',
|
||||
droppable: false,
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
renderWithProviders(
|
||||
<StartNode
|
||||
id={mockNode.id}
|
||||
type={mockNode.type!} // <--- fix here
|
||||
data={mockNode.data as any}
|
||||
selected={false}
|
||||
isConnectable={true}
|
||||
zIndex={0}
|
||||
dragging={false}
|
||||
selectable={true}
|
||||
deletable={false}
|
||||
draggable={true}
|
||||
positionAbsoluteX={0}
|
||||
positionAbsoluteY={0}
|
||||
/>
|
||||
);
|
||||
|
||||
|
||||
expect(screen.getByText('Start')).toBeInTheDocument();
|
||||
|
||||
// The handle should exist in the DOM
|
||||
expect(document.querySelector('[data-handleid="source"]')).toBeInTheDocument();
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
describe('StartReduce Function', () => {
|
||||
it('reduces the StartNode to its minimal structure', () => {
|
||||
const mockNode: Node = {
|
||||
id: 'start-1',
|
||||
type: 'start',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Start Node',
|
||||
droppable: false,
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
const result = StartReduce(mockNode, [mockNode]);
|
||||
expect(result).toEqual({ id: 'start-1' });
|
||||
});
|
||||
});
|
||||
|
||||
describe('StartConnects Function', () => {
|
||||
it('handles connections without throwing', () => {
|
||||
const startNode: Node = {
|
||||
id: 'start-1',
|
||||
type: 'start',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Start Node',
|
||||
droppable: false,
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
const otherNode: Node = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 100, y: 0 },
|
||||
data: {
|
||||
label: 'Norm Node',
|
||||
droppable: true,
|
||||
norm: 'test',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
expect(() => StartConnects(startNode, otherNode, true)).not.toThrow();
|
||||
expect(() => StartConnects(startNode, otherNode, false)).not.toThrow();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,246 @@
|
||||
import { describe, it, beforeEach } from '@jest/globals';
|
||||
import { screen, waitFor } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { renderWithProviders } from '../.././/./../../test-utils/test-utils';
|
||||
import TriggerNode, { TriggerReduce, TriggerConnects, TriggerNodeCanConnect, type TriggerNodeData } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/nodes/TriggerNode';
|
||||
import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores';
|
||||
import type { Node } from '@xyflow/react';
|
||||
import '@testing-library/jest-dom';
|
||||
|
||||
describe('TriggerNode', () => {
|
||||
let user: ReturnType<typeof userEvent.setup>;
|
||||
|
||||
beforeEach(() => {
|
||||
user = userEvent.setup();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render TriggerNode with keywords type', () => {
|
||||
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,
|
||||
},
|
||||
};
|
||||
|
||||
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(/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);
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
describe('TriggerReduce Function', () => {
|
||||
it('should reduce a trigger node to its essential data', () => {
|
||||
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,
|
||||
},
|
||||
};
|
||||
|
||||
const allNodes: Node[] = [triggerNode];
|
||||
const result = TriggerReduce(triggerNode, allNodes);
|
||||
|
||||
expect(result).toEqual({
|
||||
id: 'trigger-1',
|
||||
type: 'keywords',
|
||||
label: 'Keyword Trigger',
|
||||
keywords: [{ id: 'kw1', keyword: 'hello' }],
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('TriggerConnects Function', () => {
|
||||
it('should handle connection without errors', () => {
|
||||
const node1: Node = {
|
||||
id: 'trigger-1',
|
||||
type: 'trigger',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: 'Trigger 1',
|
||||
droppable: true,
|
||||
triggerType: 'keywords',
|
||||
triggers: [],
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
const node2: Node = {
|
||||
id: 'norm-1',
|
||||
type: 'norm',
|
||||
position: { x: 100, y: 0 },
|
||||
data: {
|
||||
label: 'Norm 1',
|
||||
droppable: true,
|
||||
norm: 'test',
|
||||
hasReduce: true,
|
||||
},
|
||||
};
|
||||
|
||||
expect(() => {
|
||||
TriggerConnects(node1, node2, true);
|
||||
TriggerConnects(node1, node2, false);
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
it('should return true for TriggerNodeCanConnect if connection exists', () => {
|
||||
const connection = { source: 'trigger-1', target: 'norm-1' };
|
||||
expect(TriggerNodeCanConnect(connection as any)).toBe(true);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,151 @@
|
||||
import { describe, beforeEach } from '@jest/globals';
|
||||
import { screen } from '@testing-library/react';
|
||||
import { renderWithProviders } from '../.././/./../../test-utils/test-utils';
|
||||
import type { XYPosition } from '@xyflow/react';
|
||||
import { NodeTypes, NodeDefaults, NodeConnects, NodeReduces, NodesInPhase } from '../../../../../src/pages/VisProgPage/visualProgrammingUI/NodeRegistry';
|
||||
import '@testing-library/jest-dom'
|
||||
import { createElement } from 'react';
|
||||
import useFlowStore from '../../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores';
|
||||
|
||||
|
||||
describe('NormNode', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
function createNode(id: string, type: string, position: XYPosition, data: Record<string, unknown>, deletable?: boolean) {
|
||||
const defaultData = NodeDefaults[type as keyof typeof NodeDefaults]
|
||||
const newData = {
|
||||
id: id,
|
||||
type: type,
|
||||
position: position,
|
||||
data: data,
|
||||
deletable: deletable,
|
||||
}
|
||||
return {...defaultData, ...newData}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Reduces the graph into its phases' information and recursively calls their reducing function
|
||||
*/
|
||||
function graphReducer() {
|
||||
const { nodes } = useFlowStore.getState();
|
||||
return nodes
|
||||
.filter((n) => n.type == 'phase')
|
||||
.map((n) => {
|
||||
const reducer = NodeReduces['phase'];
|
||||
return reducer(n, nodes)
|
||||
});
|
||||
}
|
||||
|
||||
function getAllTypes() {
|
||||
return Object.entries(NodeTypes).map(([t])=>t)
|
||||
}
|
||||
|
||||
describe('Rendering', () => {
|
||||
test.each(getAllTypes())('it should render %s node with the default data', (nodeType) => {
|
||||
const lengthBefore = screen.getAllByText(/.*/).length;
|
||||
|
||||
const newNode = createNode(nodeType + "1", nodeType, {x: 200, y:200}, {});
|
||||
|
||||
const found = Object.entries(NodeTypes).find(([t]) => t === nodeType);
|
||||
const uiElement = found ? found[1] : null;
|
||||
|
||||
expect(uiElement).not.toBeNull();
|
||||
const props = {
|
||||
id: newNode.id,
|
||||
type: newNode.type as string,
|
||||
data: newNode.data as any,
|
||||
selected: false,
|
||||
isConnectable: true,
|
||||
zIndex: 0,
|
||||
dragging: false,
|
||||
selectable: true,
|
||||
deletable: true,
|
||||
draggable: true,
|
||||
positionAbsoluteX: 0,
|
||||
positionAbsoluteY: 0,
|
||||
};
|
||||
|
||||
renderWithProviders(createElement(uiElement as React.ComponentType<any>, props));
|
||||
const lengthAfter = screen.getAllByText(/.*/).length;
|
||||
|
||||
expect(lengthBefore + 1 === lengthAfter);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
describe('Connecting', () => {
|
||||
test.each(getAllTypes())('it should call the connect function when %s node is connected', (nodeType) => {
|
||||
// Create two nodes - one of the current type and one to connect to
|
||||
const sourceNode = createNode('source-1', nodeType, {x: 100, y: 100}, {});
|
||||
const targetNode = createNode('target-1', 'end', {x: 300, y: 100}, {});
|
||||
|
||||
// Add nodes to store
|
||||
useFlowStore.setState({ nodes: [sourceNode, targetNode] });
|
||||
|
||||
// Spy on the connect functions
|
||||
const sourceConnectSpy = jest.spyOn(NodeConnects, nodeType as keyof typeof NodeConnects);
|
||||
const targetConnectSpy = jest.spyOn(NodeConnects, 'end');
|
||||
|
||||
// Simulate connection
|
||||
useFlowStore.getState().onConnect({
|
||||
source: 'source-1',
|
||||
target: 'target-1',
|
||||
sourceHandle: null,
|
||||
targetHandle: null,
|
||||
});
|
||||
|
||||
// Verify the connect functions were called
|
||||
expect(sourceConnectSpy).toHaveBeenCalledWith(sourceNode, targetNode, true);
|
||||
expect(targetConnectSpy).toHaveBeenCalledWith(targetNode, sourceNode, false);
|
||||
|
||||
sourceConnectSpy.mockRestore();
|
||||
targetConnectSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Reducing', () => {
|
||||
test.each(getAllTypes())('it should correctly call/ not call the reduce function when %s node is in a phase', (nodeType) => {
|
||||
// Create a phase node and a node of the current type
|
||||
const phaseNode = createNode('phase-1', 'phase', {x: 200, y: 100}, { label: 'Test Phase', children: [] });
|
||||
const testNode = createNode('node-1', nodeType, {x: 100, y: 100}, {});
|
||||
|
||||
// Add the test node as a child of the phase
|
||||
(phaseNode.data as any).children.push(testNode.id);
|
||||
|
||||
// Add nodes to store
|
||||
useFlowStore.setState({ nodes: [phaseNode, testNode] });
|
||||
|
||||
// Spy on the reduce functions
|
||||
const phaseReduceSpy = jest.spyOn(NodeReduces, 'phase');
|
||||
const nodeReduceSpy = jest.spyOn(NodeReduces, nodeType as keyof typeof NodeReduces);
|
||||
|
||||
// Simulate reducing - using the graphReducer
|
||||
const result = graphReducer();
|
||||
|
||||
// Verify the reduce functions were called
|
||||
expect(phaseReduceSpy).toHaveBeenCalledWith(phaseNode, [phaseNode, testNode]);
|
||||
// Check if this node type is in NodesInPhase and returns false
|
||||
const nodesInPhaseFunc = NodesInPhase[nodeType as keyof typeof NodesInPhase];
|
||||
if (nodesInPhaseFunc && nodesInPhaseFunc() === false && nodeType !== 'phase') {
|
||||
// Node is NOT in phase, so it should NOT be called
|
||||
expect(nodeReduceSpy).not.toHaveBeenCalled();
|
||||
} else {
|
||||
// Node IS in phase, so it SHOULD be called
|
||||
expect(nodeReduceSpy).toHaveBeenCalled();
|
||||
}
|
||||
|
||||
// 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');
|
||||
|
||||
// Restore mocks
|
||||
phaseReduceSpy.mockRestore();
|
||||
nodeReduceSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user