pepperplus/pepperplus-ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merging dev into main #49

Merged
8464960 merged 260 commits from dev into main 2026-01-28 10:48:52 +00:00
Conversation 3 Commits 260 Files Changed 145 +1696 -149
11 changed files with 1696 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit bb7d24b7be - Show all commits

41
src/pages/VisProgPage/VisProg.module.css
View File

@@ -19,7 +19,28 @@
.node-text-input {
border: 1px solid transparent;
border-radius: 5pt;
padding: 4px 8px;
outline: none;
background-color: white;
transition: border-color 0.2s, box-shadow 0.2s;
cursor: text;
}
.node-text-input:focus {
border-color: gainsboro;
}
.node-text-input:read-only {
cursor: pointer;
background-color: whitesmoke;
}
.node-text-input:read-only:hover {
border-color: gainsboro;
}
.dnd-panel {
margin-inline-start: auto;
@@ -63,34 +84,22 @@
filter: drop-shadow(0 0 0.75rem black);
}
.default-node-norm {
padding: 10px 15px;
background-color: canvas;
border-radius: 5pt;
.node-norm {
outline: forestgreen solid 2pt;
filter: drop-shadow(0 0 0.25rem forestgreen);
}
.default-node-phase {
padding: 10px 15px;
background-color: canvas;
border-radius: 5pt;
.node-phase {
outline: dodgerblue solid 2pt;
filter: drop-shadow(0 0 0.25rem dodgerblue);
}
.default-node-start {
padding: 10px 15px;
background-color: canvas;
border-radius: 5pt;
.node-start {
outline: orange solid 2pt;
filter: drop-shadow(0 0 0.25rem orange);
}
.default-node-end {
padding: 10px 15px;
background-color: canvas;
border-radius: 5pt;
.node-end {
outline: red solid 2pt;
filter: drop-shadow(0 0 0.25rem red);
}

24
src/pages/VisProgPage/VisProg.tsx
View File

@@ -10,12 +10,13 @@ import '@xyflow/react/dist/style.css';
import {useShallow} from 'zustand/react/shallow';
import {
StartNode,
EndNode,
PhaseNode,
NormNode
StartNodeComponent,
EndNodeComponent,
PhaseNodeComponent,
NormNodeComponent
} from './visualProgrammingUI/components/NodeDefinitions.tsx';
import {DndToolbar} from './visualProgrammingUI/components/DragDropSidebar.tsx';
import graphReducer from "./visualProgrammingUI/GraphReducer.ts";
import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
import styles from './VisProg.module.css'
@@ -26,10 +27,10 @@ import styles from './VisProg.module.css'
* contains the types of all nodes that are available in the editor
*/
const NODE_TYPES = {
start: StartNode,
end: EndNode,
phase: PhaseNode,
norm: NormNode
start: StartNodeComponent,
end: EndNodeComponent,
phase: PhaseNodeComponent,
norm: NormNodeComponent
};
/**
@@ -123,6 +124,12 @@ function VisualProgrammingUI() {
);
}
// currently outputs the prepared program to the console
function runProgram() {
const program = graphReducer();
console.log(program);
}
/**
* houses the entire page, so also UI elements
* that are not a part of the Visual Programming UI
@@ -132,6 +139,7 @@ function VisProgPage() {
return (
<>
<VisualProgrammingUI/>
<button onClick={runProgram}>run program</button>
</>
)
}

188
src/pages/VisProgPage/visualProgrammingUI/GraphReducer.ts Normal file
View File

@@ -0,0 +1,188 @@
import {
type Edge,
getIncomers,
getOutgoers
} from '@xyflow/react';
import useFlowStore from "./VisProgStores.tsx";
import type {
BehaviorProgram,
GoalData,
GoalReducer,
GraphPreprocessor,
NormData,
NormReducer,
OrderedPhases,
Phase,
PhaseReducer,
PreparedGraph,
PreparedPhase
} from "./GraphReducerTypes.ts";
import type {
AppNode,
GoalNode,
NormNode,
PhaseNode
} from "./VisProgTypes.tsx";
/**
* Reduces the current graph inside the visual programming editor into a BehaviorProgram
*
* @param {GraphPreprocessor} graphPreprocessor
* @param {PhaseReducer} phaseReducer
* @param {NormReducer} normReducer
* @param {GoalReducer} goalReducer
* @returns {BehaviorProgram}
*/
export default function graphReducer(
graphPreprocessor: GraphPreprocessor = defaultGraphPreprocessor,
phaseReducer: PhaseReducer = defaultPhaseReducer,
normReducer: NormReducer = defaultNormReducer,
goalReducer: GoalReducer = defaultGoalReducer
) : BehaviorProgram {
const nodes: AppNode[] = useFlowStore.getState().nodes;
const edges: Edge[] = useFlowStore.getState().edges;
const preparedGraph: PreparedGraph = graphPreprocessor(nodes, edges);
return preparedGraph.map((preparedPhase: PreparedPhase) : Phase =>
phaseReducer(
preparedPhase,
normReducer,
goalReducer
));
};
/**
* reduces a single preparedPhase to a Phase object
* the Phase object describes a single phase in a BehaviorProgram
*
* @param {PreparedPhase} phase
* @param {NormReducer} normReducer
* @param {GoalReducer} goalReducer
* @returns {Phase}
*/
export function defaultPhaseReducer(
phase: PreparedPhase,
normReducer: NormReducer = defaultNormReducer,
goalReducer: GoalReducer = defaultGoalReducer
) : Phase {
return {
id: phase.phaseNode.id,
name: phase.phaseNode.data.label,
nextPhaseId: phase.nextPhaseId,
phaseData: {
norms: phase.connectedNorms.map(normReducer),
goals: phase.connectedGoals.map(goalReducer)
}
}
}
/**
* the default implementation of the goalNode reducer function
*
* @param {GoalNode} node
* @returns {GoalData}
*/
function defaultGoalReducer(node: GoalNode) : GoalData {
return {
id: node.id,
name: node.data.label,
value: node.data.value
}
}
/**
* the default implementation of the normNode reducer function
*
* @param {NormNode} node
* @returns {NormData}
*/
function defaultNormReducer(node: NormNode) :NormData {
return {
id: node.id,
name: node.data.label,
value: node.data.value
}
}
// Graph preprocessing functions:
/**
* Preprocesses the provide state of the behavior editor graph, preparing it for further processing in
* the graphReducer function
*
* @param {AppNode[]} nodes
* @param {Edge[]} edges
* @returns {PreparedGraph}
*/
export function defaultGraphPreprocessor(nodes: AppNode[], edges: Edge[]) : PreparedGraph {
const norms : NormNode[] = nodes.filter((node) => node.type === 'norm') as NormNode[];
const goals : GoalNode[] = nodes.filter((node) => node.type === 'goal') as GoalNode[];
const orderedPhases : OrderedPhases = orderPhases(nodes, edges);
return orderedPhases.phaseNodes.map((phase: PhaseNode) : PreparedPhase => {
const nextPhase = orderedPhases.connections.get(phase.id);
return {
phaseNode: phase,
nextPhaseId: nextPhase as string,
connectedNorms: getIncomers({id: phase.id}, norms,edges),
connectedGoals: getIncomers({id: phase.id}, goals,edges)
};
});
}
/**
* orderPhases takes the state of the graph created by the editor and turns it into an OrderedPhases object.
*
* @param {AppNode[]} nodes
* @param {Edge[]} edges
* @returns {OrderedPhases}
*/
export function orderPhases(nodes: AppNode[],edges: Edge[]) : OrderedPhases {
// find the first Phase node
const phaseNodes : PhaseNode[] = nodes.filter((node) => node.type === 'phase') as PhaseNode[];
const startNodeIndex = nodes.findIndex((node : AppNode):boolean => {return (node.type === 'start');});
const firstPhaseNode = getOutgoers({ id: nodes[startNodeIndex].id },phaseNodes,edges);
// recursively adds the phase nodes to a list in the order they are connected in the graph
const nextPhase = (
currentIndex: number,
{ phaseNodes: phases, connections: connections} : OrderedPhases
) : OrderedPhases => {
// get the current phase and the next phases;
const currentPhase = phases[currentIndex];
const nextPhaseNodes = getOutgoers(currentPhase,phaseNodes,edges);
const nextNodes = getOutgoers(currentPhase,nodes, edges);
// handles adding of the next phase to the chain, and error handle if an invalid state is received
if (nextPhaseNodes.length === 1 && nextNodes.length === 1) {
connections.set(currentPhase.id, nextPhaseNodes[0].id);
return nextPhase(phases.push(nextPhaseNodes[0] as PhaseNode) - 1, {phaseNodes: phases, connections: connections});
} else {
// handle erroneous states
if (nextNodes.length === 0){
throw new Error(`| INVALID PROGRAM | the source handle of "${currentPhase.id}" doesn't have any outgoing connections`);
} else {
if (nextNodes.length > 1) {
throw new Error(`| INVALID PROGRAM | the source handle of "${currentPhase.id}" connects to too many targets`);
} else {
if (nextNodes[0].type === "end"){
connections.set(currentPhase.id, "end");
// returns the final output of the function
return { phaseNodes: phases, connections: connections};
} else {
throw new Error(`| INVALID PROGRAM | the node "${nextNodes[0].id}" that "${currentPhase.id}" connects to is not a phase or end node`);
}
}
}
}
}
// initializes the Map describing the connections between phase nodes
// we need this Map to make sure we preserve this information,
// so we don't need to do checks on the entire set of edges in further stages of the reduction algorithm
const connections : Map<string, string> = new Map();
// returns an empty list if no phase nodes are present, otherwise returns an ordered list of phaseNodes
if (firstPhaseNode.length > 0) {
return nextPhase(0, {phaseNodes: [firstPhaseNode[0] as PhaseNode], connections: connections})
} else { return {phaseNodes: [], connections: connections} }
}

106
src/pages/VisProgPage/visualProgrammingUI/GraphReducerTypes.ts Normal file
View File

@@ -0,0 +1,106 @@
import type {Edge} from "@xyflow/react";
import type {AppNode, GoalNode, NormNode, PhaseNode} from "./VisProgTypes.tsx";
/**
* defines how a norm is represented in the simplified behavior program
*/
export type NormData = {
id: string;
name: string;
value: string;
};
/**
* defines how a goal is represented in the simplified behavior program
*/
export type GoalData = {
id: string;
name: string;
value: string;
};
/**
* definition of a PhaseData object, it contains all phaseData that is relevant
* for further processing and execution of a phase.
*/
export type PhaseData = {
norms: NormData[];
goals: GoalData[];
};
/**
* Describes a single phase within the simplified representation of a behavior program,
*
* Contains:
* - the id of the described phase,
* - the name of the described phase,
* - the id of the next phase in the user defined behavior program
* - the data property of the described phase node
*
* @NOTE at the moment the type definitions do not support branching programs,
* if branching of phases is to be supported in the future, the type definition for Phase has to be updated
*/
export type Phase = {
id: string;
name: string;
nextPhaseId: string;
phaseData: PhaseData;
};
/**
* Describes a simplified behavior program as a list of Phase objects
*/
export type BehaviorProgram = Phase[];
export type NormReducer = (node: NormNode) => NormData;
export type GoalReducer = (node: GoalNode) => GoalData;
export type PhaseReducer = (
preparedPhase: PreparedPhase,
normReducer: NormReducer,
goalReducer: GoalReducer
) => Phase;
/**
* contains:
*
* - list of phases, sorted based on position in chain between the start and end node
* - a dictionary containing all outgoing connections,
* to other phase or end nodes, for each phase node uses the id of the source node as key
* and the id of the target node as value
*
*/
export type OrderedPhases = {
phaseNodes: PhaseNode[];
connections: Map<string, string>;
};
/**
* A single prepared phase,
* contains:
* - the described phaseNode,
* - the id of the next phaseNode or "end" for the end node
* - a list of the normNodes that are connected to the described phase
* - a list of the goalNodes that are connected to the described phase
*/
export type PreparedPhase = {
phaseNode: PhaseNode;
nextPhaseId: string;
connectedNorms: NormNode[];
connectedGoals: GoalNode[];
};
/**
* a list of PreparedPhase objects,
* describes the preprocessed state of a program,
* before the contents of the node
*/
export type PreparedGraph = PreparedPhase[];
export type GraphPreprocessor = (nodes: AppNode[], edges: Edge[]) => PreparedGraph;

145
src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx
View File

@@ -6,7 +6,7 @@ import {
reconnectEdge, type Edge, type Connection
} from '@xyflow/react';
import {type FlowState} from './VisProgTypes.tsx';
import {type AppNode, type FlowState} from './VisProgTypes.tsx';
/**
* contains the nodes that are created when the editor is loaded,
@@ -20,7 +20,7 @@ const initialNodes = [
data: {label: 'start'}
},
{
id: 'genericPhase',
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 1},
@@ -38,9 +38,14 @@ const initialNodes = [
*/
const initialEdges = [
{
id: 'start-end',
id: 'start-phase-1',
source: 'start',
target: 'end'
target: 'phase-1',
},
{
id: 'phase-1-end',
source: 'phase-1',
target: 'end',
}
];
@@ -50,61 +55,87 @@ const initialEdges = [
* and use any implemented functionality
*/
const useFlowStore = create<FlowState>((set, get) => ({
nodes: initialNodes,
edges: initialEdges,
edgeReconnectSuccessful: true,
onNodesChange: (changes) => {
nodes: initialNodes,
edges: initialEdges,
edgeReconnectSuccessful: true,
onNodesChange: (changes) => {
set({
nodes: applyNodeChanges(changes, get().nodes)
});
},
onEdgesChange: (changes) => {
set({
edges: applyEdgeChanges(changes, get().edges)
});
},
// handles connection of newly created edges
onConnect: (connection) => {
set({
edges: addEdge(connection, get().edges)
});
},
// handles attempted reconnections of a previously disconnected edge
onReconnect: (oldEdge: Edge, newConnection: Connection) => {
get().edgeReconnectSuccessful = true;
set({
edges: reconnectEdge(oldEdge, newConnection, get().edges)
});
},
// Handles initiation of reconnection of edges that are manually disconnected from a node
onReconnectStart: () => {
set({
edgeReconnectSuccessful: false
});
},
// Drops the edge from the set of edges, removing it from the flow, if no successful reconnection occurred
onReconnectEnd: (_: unknown, edge: { id: string; }) => {
if (!get().edgeReconnectSuccessful) {
set({
nodes: applyNodeChanges(changes, get().nodes)
edges: get().edges.filter((e) => e.id !== edge.id),
});
},
onEdgesChange: (changes) => {
set({
edges: applyEdgeChanges(changes, get().edges)
});
},
// handles connection of newly created edges
onConnect: (connection) => {
set({
edges: addEdge(connection, get().edges)
});
},
// handles attempted reconnections of a previously disconnected edge
onReconnect: (oldEdge: Edge, newConnection: Connection) => {
get().edgeReconnectSuccessful = true;
set({
edges: reconnectEdge(oldEdge, newConnection, get().edges)
});
},
// Handles initiation of reconnection of edges that are manually disconnected from a node
onReconnectStart: () => {
set({
edgeReconnectSuccessful: false
});
},
// Drops the edge from the set of edges, removing it from the flow, if no successful reconnection occurred
onReconnectEnd: (_: unknown, edge: { id: string; }) => {
if (!get().edgeReconnectSuccessful) {
set({
edges: get().edges.filter((e) => e.id !== edge.id),
});
}
set({
edgeReconnectSuccessful: true
});
},
deleteNode: (nodeId: string) => {
set({
nodes: get().nodes.filter((n) => n.id !== nodeId),
edges: get().edges.filter((e) => e.source !== nodeId && e.target !== nodeId)
});
},
setNodes: (nodes) => {
set({nodes});
},
setEdges: (edges) => {
set({edges});
},
}
set({
edgeReconnectSuccessful: true
});
},
deleteNode: (nodeId: string) => {
set({
nodes: get().nodes.filter((n) => n.id !== nodeId),
edges: get().edges.filter((e) => e.source !== nodeId && e.target !== nodeId)
});
},
setNodes: (nodes) => {
set({nodes});
},
setEdges: (edges) => {
set({edges});
},
/**
* handles updating the data component of a node,
* if the provided data object contains entries that aren't present in the updated node's data component
* those entries are added to the data component,
* entries that do exist within the node's data component,
* are simply updated to contain the new value
*
* the data object
* @param {string} nodeId
* @param {object} data
*/
updateNodeData: (nodeId: string, data) => {
set({
nodes: get().nodes.map((node) : AppNode => {
if (node.id === nodeId) {
return {
...node,
data: {
...node.data,
...data
}
};
} else { return node; }
})
});
}
}),
);

15
src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx
View File

@@ -7,12 +7,24 @@ import {
type OnReconnect,
} from '@xyflow/react';
type defaultNodeData = {
label: string;
};
export type StartNode = Node<defaultNodeData, 'start'>;
export type EndNode = Node<defaultNodeData, 'end'>;
export type GoalNode = Node<defaultNodeData & { value: string; }, 'goal'>;
export type NormNode = Node<defaultNodeData & { value: string; }, 'norm'>;
export type PhaseNode = Node<defaultNodeData & { number: number; }, 'phase'>;
/**
* a type meant to house different node types, currently not used
* but will allow us to more clearly define nodeTypes when we implement
* computation of the Graph inside the ReactFlow editor
*/
export type AppNode = Node;
export type AppNode = Node | StartNode | EndNode | NormNode | GoalNode | PhaseNode;
/**
@@ -31,4 +43,5 @@ export type FlowState = {
deleteNode: (nodeId: string) => void;
setNodes: (nodes: AppNode[]) => void;
setEdges: (edges: Edge[]) => void;
updateNodeData: (nodeId: string, data: object) => void;
};

35
src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx
View File

@@ -11,6 +11,8 @@ import {
} from 'react';
import useFlowStore from "../VisProgStores.tsx";
import styles from "../../VisProg.module.css"
import type {AppNode, PhaseNode, NormNode} from "../VisProgTypes.tsx";
/**
@@ -68,28 +70,45 @@ function DraggableNode({className, children, nodeType, onDrop}: DraggableNodePro
// eslint-disable-next-line react-refresh/only-export-components
export function addNode(nodeType: string, position: XYPosition) {
const {setNodes} = useFlowStore.getState();
const nds = useFlowStore.getState().nodes;
const nds : AppNode[] = useFlowStore.getState().nodes;
const newNode = () => {
switch (nodeType) {
case "phase":
{
const phaseNumber = nds.filter((node) => node.type === 'phase').length;
return {
const phaseNodes= nds.filter((node) => node.type === 'phase');
let phaseNumber;
if (phaseNodes.length > 0) {
const finalPhaseId : number = +(phaseNodes[phaseNodes.length - 1].id.split('-')[1]);
phaseNumber = finalPhaseId + 1;
} else {
phaseNumber = 1;
}
const phaseNode : PhaseNode = {
id: `phase-${phaseNumber}`,
type: nodeType,
position,
data: {label: 'new', number: phaseNumber},
};
}
return phaseNode;
}
case "norm":
{
const normNumber = nds.filter((node) => node.type === 'norm').length;
return {
const normNodes= nds.filter((node) => node.type === 'norm');
let normNumber
if (normNodes.length > 0) {
const finalNormId : number = +(normNodes[normNodes.length - 1].id.split('-')[1]);
normNumber = finalNormId + 1;
} else {
normNumber = 1;
}
const normNode : NormNode = {
id: `norm-${normNumber}`,
type: nodeType,
position,
data: {label: `new norm node`},
};
data: {label: `new norm node`, value: "Pepper should be formal"},
}
return normNode;
}
default: {
throw new Error(`Node ${nodeType} not found`);

173
src/pages/VisProgPage/visualProgrammingUI/components/NodeDefinitions.tsx
View File

@@ -1,32 +1,37 @@
import {Handle, NodeToolbar, Position} from '@xyflow/react';
import {
Handle,
type NodeProps,
NodeToolbar,
Position
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import styles from '../../VisProg.module.css';
import useFlowStore from "../VisProgStores.tsx";
import type {
StartNode,
EndNode,
PhaseNode,
NormNode
} from "../VisProgTypes.tsx";
// Contains the datatypes for the data inside our NodeTypes
// this has to be improved or adapted to suit our implementation for computing the graph
// into a format that is useful for the Control Backend
type defaultNodeData = {
label: string;
};
type startNodeData = defaultNodeData;
type endNodeData = defaultNodeData;
type normNodeData = defaultNodeData;
type phaseNodeData = defaultNodeData & {
number: number;
};
export type nodeData = defaultNodeData | startNodeData | phaseNodeData | endNodeData;
// Node Toolbar definition, contains node delete functionality
//Toolbar definitions
type ToolbarProps = {
nodeId: string;
allowDelete: boolean;
};
/**
* Node Toolbar definition:
* handles: node deleting functionality
* can be added to any custom node component as a React component
*
* @param {string} nodeId
* @param {boolean} allowDelete
* @returns {React.JSX.Element}
* @constructor
*/
export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
const {deleteNode} = useFlowStore();
@@ -39,21 +44,72 @@ export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
</NodeToolbar>);
}
// Renaming component
/**
* Adds a component that can be used to edit a node's label entry inside its Data
* can be added to any custom node that has a label inside its Data
*
* @param {string} nodeLabel
* @param {string} nodeId
* @returns {React.JSX.Element}
* @constructor
*/
export function EditableName({nodeLabel = "new node", nodeId} : { nodeLabel : string, nodeId: string}) {
const {updateNodeData} = useFlowStore();
const updateData = (event: React.FocusEvent<HTMLInputElement>) => {
const input = event.target.value;
updateNodeData(nodeId, {label: input});
event.currentTarget.setAttribute("readOnly", "true");
window.getSelection()?.empty();
event.currentTarget.classList.replace("nodrag", "drag"); // enable dragging of the node with cursor on the input box
};
const updateOnEnter = (event: React.KeyboardEvent<HTMLInputElement>) => { if (event.key === "Enter") (event.target as HTMLInputElement).blur(); };
const enableEditing = (event: React.MouseEvent<HTMLInputElement>) => {
if(event.currentTarget.hasAttribute("readOnly")) {
event.currentTarget.removeAttribute("readOnly"); // enable editing
event.currentTarget.select(); // select the text input
window.getSelection()?.collapseToEnd(); // move the caret to the end of the current value
event.currentTarget.classList.replace("drag", "nodrag"); // disable dragging using input box
}
}
return (
<div className={styles.NodeTextBar }>
<label>name: </label>
<input
className={`drag ${styles.nodeTextInput}`} // prevents dragging the component when user has focused the text input
type={"text"}
defaultValue={nodeLabel}
onKeyDown={updateOnEnter}
onBlur={updateData}
onClick={enableEditing}
maxLength={25}
readOnly
/>
</div>
)
}
// Definitions of Nodes
// Start Node definition:
type StartNodeProps = {
id: string;
data: startNodeData;
};
export const StartNode = ({id, data}: StartNodeProps) => {
/**
* Start Node definition:
*
* @param {string} id
* @param {defaultNodeData} data
* @returns {React.JSX.Element}
* @constructor
*/
export const StartNodeComponent = ({id, data}: NodeProps<StartNode>) => {
return (
<>
<Toolbar nodeId={id} allowDelete={false}/>
<div className={styles.defaultNodeStart}>
<div className={`${styles.defaultNode} ${styles.nodeStart}`}>
<div> data test {data.label} </div>
<Handle type="source" position={Position.Right} id="start"/>
</div>
@@ -62,18 +118,19 @@ export const StartNode = ({id, data}: StartNodeProps) => {
};
// End node definition:
type EndNodeProps = {
id: string;
data: endNodeData;
};
export const EndNode = ({id, data}: EndNodeProps) => {
/**
* End node definition:
*
* @param {string} id
* @param {defaultNodeData} data
* @returns {React.JSX.Element}
* @constructor
*/
export const EndNodeComponent = ({id, data}: NodeProps<EndNode>) => {
return (
<>
<Toolbar nodeId={id} allowDelete={false}/>
<div className={styles.defaultNodeEnd}>
<div className={`${styles.defaultNode} ${styles.nodeEnd}`}>
<div> {data.label} </div>
<Handle type="target" position={Position.Left} id="end"/>
</div>
@@ -82,19 +139,20 @@ export const EndNode = ({id, data}: EndNodeProps) => {
};
// Phase node definition:
type PhaseNodeProps = {
id: string;
data: phaseNodeData;
};
export const PhaseNode = ({id, data}: PhaseNodeProps) => {
/**
* Phase node definition:
*
* @param {string} id
* @param {defaultNodeData & {number: number}} data
* @returns {React.JSX.Element}
* @constructor
*/
export const PhaseNodeComponent = ({id, data}: NodeProps<PhaseNode>) => {
return (
<>
<Toolbar nodeId={id} allowDelete={true}/>
<div className={styles.defaultNodePhase}>
<div> phase {data.number} {data.label} </div>
<div className={`${styles.defaultNode} ${styles.nodePhase}`}>
<EditableName nodeLabel={data.label} nodeId={id}/>
<Handle type="target" position={Position.Left} id="target"/>
<Handle type="target" position={Position.Bottom} id="norms"/>
<Handle type="source" position={Position.Right} id="source"/>
@@ -104,19 +162,20 @@ export const PhaseNode = ({id, data}: PhaseNodeProps) => {
};
// Norm node definition:
type NormNodeProps = {
id: string;
data: normNodeData;
};
export const NormNode = ({id, data}: NormNodeProps) => {
/**
* Norm node definition:
*
* @param {string} id
* @param {defaultNodeData & {value: string}} data
* @returns {React.JSX.Element}
* @constructor
*/
export const NormNodeComponent = ({id, data}: NodeProps<NormNode>) => {
return (
<>
<Toolbar nodeId={id} allowDelete={true}/>
<div className={styles.defaultNodeNorm}>
<div> Norm {data.label} </div>
<div className={`${styles.defaultNode} ${styles.nodeNorm}`}>
<EditableName nodeLabel={data.label} nodeId={id}/>
<Handle type="source" position={Position.Right} id="NormSource"/>
</div>
</>

986
test/pages/visProgPage/visualProgrammingUI/GraphReducer.test.ts Normal file
View File

@@ -0,0 +1,986 @@
import type {Edge} from "@xyflow/react";
import graphReducer, {
defaultGraphPreprocessor, defaultPhaseReducer,
orderPhases
} from "../../../../src/pages/VisProgPage/visualProgrammingUI/GraphReducer.ts";
import type {PreparedPhase} from "../../../../src/pages/VisProgPage/visualProgrammingUI/GraphReducerTypes.ts";
import useFlowStore from "../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx";
import type {AppNode} from "../../../../src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx";
// sets of default values for nodes and edges to be used for test cases
type FlowState = {
name: string;
nodes: AppNode[];
edges: Edge[];
};
// predefined graphs for testing:
const onlyOnePhase : FlowState = {
name: "onlyOnePhase",
nodes: [
{
id: 'start',
type: 'start',
position: {x: 0, y: 0},
data: {label: 'start'}
},
{
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 1},
},
{
id: 'end',
type: 'end',
position: {x: 0, y: 300},
data: {label: 'End'}
}
],
edges:[
{
id: 'start-phase-1',
source: 'start',
target: 'phase-1',
},
{
id: 'phase-1-end',
source: 'phase-1',
target: 'end',
}
]
};
const onlyThreePhases : FlowState = {
name: "onlyThreePhases",
nodes: [
{
id: 'start',
type: 'start',
position: {x: 0, y: 0},
data: {label: 'start'}
},
{
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 1},
},
{
id: 'phase-3',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 3},
},
{
id: 'phase-2',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 2},
},
{
id: 'end',
type: 'end',
position: {x: 0, y: 300},
data: {label: 'End'}
}
],
edges:[
{
id: 'start-phase-1',
source: 'start',
target: 'phase-1',
},
{
id: 'phase-1-phase-2',
source: 'phase-1',
target: 'phase-2',
},
{
id: 'phase-2-phase-3',
source: 'phase-2',
target: 'phase-3',
},
{
id: 'phase-3-end',
source: 'phase-3',
target: 'end',
}
]
};
const onlySingleEdgeNorms : FlowState = {
name: "onlySingleEdgeNorms",
nodes: [
{
id: 'start',
type: 'start',
position: {x: 0, y: 0},
data: {label: 'start'}
},
{
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 1},
},
{
id: 'norm-1',
type: 'norm',
position: {x: 0, y: 150},
data: {label: 'Generic Norm', value: "generic"},
},
{
id: 'norm-2',
type: 'norm',
position: {x: 0, y: 150},
data: {label: 'Generic Norm', value: "generic"},
},
{
id: 'phase-3',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 3},
},
{
id: 'phase-2',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 2},
},
{
id: 'end',
type: 'end',
position: {x: 0, y: 300},
data: {label: 'End'}
}
],
edges:[
{
id: 'start-phase-1',
source: 'start',
target: 'phase-1',
},
{
id: 'norm-1-phase-2',
source: 'norm-1',
target: 'phase-2',
},
{
id: 'phase-1-phase-2',
source: 'phase-1',
target: 'phase-2',
},
{
id: 'phase-2-phase-3',
source: 'phase-2',
target: 'phase-3',
},
{
id: 'norm-2-phase-3',
source: 'norm-2',
target: 'phase-3',
},
{
id: 'phase-3-end',
source: 'phase-3',
target: 'end',
}
]
};
const multiEdgeNorms : FlowState = {
name: "multiEdgeNorms",
nodes: [
{
id: 'start',
type: 'start',
position: {x: 0, y: 0},
data: {label: 'start'}
},
{
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 1},
},
{
id: 'norm-1',
type: 'norm',
position: {x: 0, y: 150},
data: {label: 'Generic Norm', value: "generic"},
},
{
id: 'norm-2',
type: 'norm',
position: {x: 0, y: 150},
data: {label: 'Generic Norm', value: "generic"},
},
{
id: 'phase-3',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 3},
},
{
id: 'norm-3',
type: 'norm',
position: {x: 0, y: 150},
data: {label: 'Generic Norm', value: "generic"},
},
{
id: 'phase-2',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 2},
},
{
id: 'end',
type: 'end',
position: {x: 0, y: 300},
data: {label: 'End'}
}
],
edges:[
{
id: 'start-phase-1',
source: 'start',
target: 'phase-1',
},
{
id: 'norm-1-phase-2',
source: 'norm-1',
target: 'phase-2',
},
{
id: 'norm-1-phase-3',
source: 'norm-1',
target: 'phase-3',
},
{
id: 'phase-1-phase-2',
source: 'phase-1',
target: 'phase-2',
},
{
id: 'norm-3-phase-1',
source: 'norm-3',
target: 'phase-1',
},
{
id: 'phase-2-phase-3',
source: 'phase-2',
target: 'phase-3',
},
{
id: 'norm-2-phase-3',
source: 'norm-2',
target: 'phase-3',
},
{
id: 'norm-2-phase-2',
source: 'norm-2',
target: 'phase-2',
},
{
id: 'phase-3-end',
source: 'phase-3',
target: 'end',
}
]
};
const onlyStartEnd : FlowState = {
name: "onlyStartEnd",
nodes: [
{
id: 'start',
type: 'start',
position: {x: 0, y: 0},
data: {label: 'start'}
},
{
id: 'end',
type: 'end',
position: {x: 0, y: 300},
data: {label: 'End'}
}
],
edges:[
{
id: 'start-end',
source: 'start',
target: 'end',
},
]
};
// states that contain invalid programs for testing if correct errors are thrown:
const phaseConnectsToInvalidNodeType : FlowState = {
name: "phaseConnectsToInvalidNodeType",
nodes: [
{
id: 'start',
type: 'start',
position: {x: 0, y: 0},
data: {label: 'start'}
},
{
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 1},
},
{
id: 'default-1',
type: 'default',
position: {x: 0, y: 150},
data: {label: 'Generic Norm'},
},
{
id: 'end',
type: 'end',
position: {x: 0, y: 300},
data: {label: 'End'}
}
],
edges:[
{
id: 'start-phase-1',
source: 'start',
target: 'phase-1',
},
{
id: 'phase-1-default-1',
source: 'phase-1',
target: 'default-1',
},
]
};
const phaseHasNoOutgoingConnections : FlowState = {
name: "phaseHasNoOutgoingConnections",
nodes: [
{
id: 'start',
type: 'start',
position: {x: 0, y: 0},
data: {label: 'start'}
},
{
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 1},
},
{
id: 'phase-2',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 2},
},
{
id: 'end',
type: 'end',
position: {x: 0, y: 300},
data: {label: 'End'}
}
],
edges:[
{
id: 'start-phase-1',
source: 'start',
target: 'phase-1',
},
]
};
const phaseHasTooManyOutgoingConnections : FlowState = {
name: "phaseHasTooManyOutgoingConnections",
nodes: [
{
id: 'start',
type: 'start',
position: {x: 0, y: 0},
data: {label: 'start'}
},
{
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 1},
},
{
id: 'phase-2',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 2},
},
{
id: 'end',
type: 'end',
position: {x: 0, y: 300},
data: {label: 'End'}
}
],
edges:[
{
id: 'start-phase-1',
source: 'start',
target: 'phase-1',
},
{
id: 'phase-1-phase-2',
source: 'phase-1',
target: 'phase-2',
},
{
id: 'phase-1-end',
source: 'phase-1',
target: 'end',
},
{
id: 'phase-2-end',
source: 'phase-2',
target: 'end',
},
]
};
describe('Graph Reducer Tests', () => {
describe('defaultGraphPreprocessor', () => {
test.each([
{
state: onlyOnePhase,
expected: [
{
phaseNode: {
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 1},
},
nextPhaseId: 'end',
connectedNorms: [],
connectedGoals: [],
}]
},
{
state: onlyThreePhases,
expected: [
{
phaseNode: {
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 1},
},
nextPhaseId: 'phase-2',
connectedNorms: [],
connectedGoals: [],
},
{
phaseNode: {
id: 'phase-2',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 2},
},
nextPhaseId: 'phase-3',
connectedNorms: [],
connectedGoals: [],
},
{
phaseNode: {
id: 'phase-3',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 3},
},
nextPhaseId: 'end',
connectedNorms: [],
connectedGoals: [],
}]
},
{
state: onlySingleEdgeNorms,
expected: [
{
phaseNode: {
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 1},
},
nextPhaseId: 'phase-2',
connectedNorms: [],
connectedGoals: [],
},
{
phaseNode: {
id: 'phase-2',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 2},
},
nextPhaseId: 'phase-3',
connectedNorms: [{
id: 'norm-1',
type: 'norm',
position: {x: 0, y: 150},
data: {label: 'Generic Norm', value: "generic"},
}],
connectedGoals: [],
},
{
phaseNode: {
id: 'phase-3',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 3},
},
nextPhaseId: 'end',
connectedNorms: [{
id: 'norm-2',
type: 'norm',
position: {x: 0, y: 150},
data: {label: 'Generic Norm', value: "generic"},
}],
connectedGoals: [],
}]
},
{
state: multiEdgeNorms,
expected: [
{
phaseNode: {
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 1},
},
nextPhaseId: 'phase-2',
connectedNorms: [{
id: 'norm-3',
type: 'norm',
position: {x: 0, y: 150},
data: {label: 'Generic Norm', value: "generic"},
}],
connectedGoals: [],
},
{
phaseNode: {
id: 'phase-2',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 2},
},
nextPhaseId: 'phase-3',
connectedNorms: [{
id: 'norm-1',
type: 'norm',
position: {x: 0, y: 150},
data: {label: 'Generic Norm', value: "generic"},
},
{
id: 'norm-2',
type: 'norm',
position: {x: 0, y: 150},
data: {label: 'Generic Norm', value: "generic"},
}],
connectedGoals: [],
},
{
phaseNode: {
id: 'phase-3',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 3},
},
nextPhaseId: 'end',
connectedNorms: [{
id: 'norm-1',
type: 'norm',
position: {x: 0, y: 150},
data: {label: 'Generic Norm', value: "generic"},
},
{
id: 'norm-2',
type: 'norm',
position: {x: 0, y: 150},
data: {label: 'Generic Norm', value: "generic"},
}],
connectedGoals: [],
}]
},
{
state: onlyStartEnd,
expected: [],
}
])(`tests state: $state.name`, ({state, expected}) => {
const output = defaultGraphPreprocessor(state.nodes, state.edges);
expect(output).toEqual(expected);
});
});
describe("orderPhases", () => {
test.each([
{
state: onlyOnePhase,
expected: {
phaseNodes: [{
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 1},
}],
connections: new Map<string,string>([["phase-1","end"]])
}
},
{
state: onlyThreePhases,
expected: {
phaseNodes: [
{
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 1},
},
{
id: 'phase-2',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 2},
},
{
id: 'phase-3',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 3},
}],
connections: new Map<string,string>([
["phase-1","phase-2"],
["phase-2","phase-3"],
["phase-3","end"]
])
}
},
{
state: onlySingleEdgeNorms,
expected: {
phaseNodes: [
{
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 1},
},
{
id: 'phase-2',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 2},
},
{
id: 'phase-3',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 3},
}],
connections: new Map<string,string>([
["phase-1","phase-2"],
["phase-2","phase-3"],
["phase-3","end"]
])
}
},
{
state: onlyStartEnd,
expected: {
phaseNodes: [],
connections: new Map<string,string>()
}
}
])(`tests state: $state.name`, ({state, expected}) => {
const output = orderPhases(state.nodes, state.edges);
expect(output.phaseNodes).toEqual(expected.phaseNodes);
expect(output.connections).toEqual(expected.connections);
});
test.each([
{
state: phaseConnectsToInvalidNodeType,
expected: new Error('| INVALID PROGRAM | the node "default-1" that "phase-1" connects to is not a phase or end node')
},
{
state: phaseHasNoOutgoingConnections,
expected: new Error('| INVALID PROGRAM | the source handle of "phase-1" doesn\'t have any outgoing connections')
},
{
state: phaseHasTooManyOutgoingConnections,
expected: new Error('| INVALID PROGRAM | the source handle of "phase-1" connects to too many targets')
}
])(`tests erroneous state: $state.name`, ({state, expected}) => {
const testForError = () => {
orderPhases(state.nodes, state.edges);
};
expect(testForError).toThrow(expected);
})
})
describe("defaultPhaseReducer", () => {
test("phaseReducer handles empty norms and goals without failing", () => {
const input : PreparedPhase = {
phaseNode: {
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 1},
},
nextPhaseId: 'end',
connectedNorms: [],
connectedGoals: [],
}
const output = defaultPhaseReducer(input);
expect(output).toEqual({
id: 'phase-1',
name: 'Generic Phase',
nextPhaseId: 'end',
phaseData: {
norms: [],
goals: []
}
});
});
test("defaultNormReducer reduces norms correctly", () => {
const input : PreparedPhase = {
phaseNode: {
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 1},
},
nextPhaseId: 'end',
connectedNorms: [{
id: 'norm-1',
type: 'norm',
position: {x: 0, y: 150},
data: {label: 'Generic Norm', value: "generic"},
}],
connectedGoals: [],
}
const output = defaultPhaseReducer(input);
expect(output).toEqual({
id: 'phase-1',
name: 'Generic Phase',
nextPhaseId: 'end',
phaseData: {
norms: [{
id: 'norm-1',
name: 'Generic Norm',
value: "generic"
}],
goals: []
}
});
});
test("defaultGoalReducer reduces goals correctly", () => {
const input : PreparedPhase = {
phaseNode: {
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 1},
},
nextPhaseId: 'end',
connectedNorms: [],
connectedGoals: [{
id: 'goal-1',
type: 'goal',
position: {x: 0, y: 150},
data: {label: 'Generic Goal', value: "generic"},
}],
}
const output = defaultPhaseReducer(input);
expect(output).toEqual({
id: 'phase-1',
name: 'Generic Phase',
nextPhaseId: 'end',
phaseData: {
norms: [],
goals: [{
id: 'goal-1',
name: 'Generic Goal',
value: "generic"
}]
}
});
});
})
describe("GraphReducer", () => {
test.each([
{
state: onlyOnePhase,
expected: [
{
id: 'phase-1',
name: 'Generic Phase',
nextPhaseId: 'end',
phaseData: {
norms: [],
goals: []
}
}]
},
{
state: onlyThreePhases,
expected: [
{
id: 'phase-1',
name: 'Generic Phase',
nextPhaseId: 'phase-2',
phaseData: {
norms: [],
goals: []
}
},
{
id: 'phase-2',
name: 'Generic Phase',
nextPhaseId: 'phase-3',
phaseData: {
norms: [],
goals: []
}
},
{
id: 'phase-3',
name: 'Generic Phase',
nextPhaseId: 'end',
phaseData: {
norms: [],
goals: []
}
}]
},
{
state: onlySingleEdgeNorms,
expected: [
{
id: 'phase-1',
name: 'Generic Phase',
nextPhaseId: 'phase-2',
phaseData: {
norms: [],
goals: []
}
},
{
id: 'phase-2',
name: 'Generic Phase',
nextPhaseId: 'phase-3',
phaseData: {
norms: [
{
id: 'norm-1',
name: 'Generic Norm',
value: "generic"
}
],
goals: []
}
},
{
id: 'phase-3',
name: 'Generic Phase',
nextPhaseId: 'end',
phaseData: {
norms: [{
id: 'norm-2',
name: 'Generic Norm',
value: "generic"
}],
goals: []
}
}]
},
{
state: multiEdgeNorms,
expected: [
{
id: 'phase-1',
name: 'Generic Phase',
nextPhaseId: 'phase-2',
phaseData: {
norms: [{
id: 'norm-3',
name: 'Generic Norm',
value: "generic"
}],
goals: []
}
},
{
id: 'phase-2',
name: 'Generic Phase',
nextPhaseId: 'phase-3',
phaseData: {
norms: [
{
id: 'norm-1',
name: 'Generic Norm',
value: "generic"
},
{
id: 'norm-2',
name: 'Generic Norm',
value: "generic"
}
],
goals: []
}
},
{
id: 'phase-3',
name: 'Generic Phase',
nextPhaseId: 'end',
phaseData: {
norms: [{
id: 'norm-1',
name: 'Generic Norm',
value: "generic"
},
{
id: 'norm-2',
name: 'Generic Norm',
value: "generic"
}],
goals: []
}
}]
},
{
state: onlyStartEnd,
expected: [],
}
])(`tests state: $state.name`, ({state, expected}) => {
useFlowStore.setState({nodes: state.nodes, edges: state.edges});
const output = graphReducer(); // uses default reducers
expect(output).toEqual(expected);
})
// we run the test for correct error handling for the entire graph reducer as well,
// to make sure no errors occur before we intend to handle the errors ourselves
test.each([
{
state: phaseConnectsToInvalidNodeType,
expected: new Error('| INVALID PROGRAM | the node "default-1" that "phase-1" connects to is not a phase or end node')
},
{
state: phaseHasNoOutgoingConnections,
expected: new Error('| INVALID PROGRAM | the source handle of "phase-1" doesn\'t have any outgoing connections')
},
{
state: phaseHasTooManyOutgoingConnections,
expected: new Error('| INVALID PROGRAM | the source handle of "phase-1" connects to too many targets')
}
])(`tests erroneous state: $state.name`, ({state, expected}) => {
useFlowStore.setState({nodes: state.nodes, edges: state.edges});
const testForError = () => {
graphReducer();
};
expect(testForError).toThrow(expected);
})
})
});

128
test/pages/visProgPage/visualProgrammingUI/VisProgStores.test.tsx
View File

@@ -221,4 +221,132 @@ describe('FlowStore Functionality', () => {
});
});
});
describe('ReactFlow updateNodeData', () => {
test.each([
{
state: {
name: 'updateName',
nodes: [{
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 300},
data: {label: 'name', number: '2'}
}]
},
input: {
id: 'phase-1',
changedData: {label: 'new name'}
},
expected: {
node: {
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 300},
data: {label: 'new name', number: '2'}
}
}
},
{
state: {
name: 'updateNumber',
nodes: [{
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 300},
data: {label: 'name', number: '2'}
}]
},
input: {
id: 'phase-1',
changedData: {number: '3'}
},
expected: {
node: {
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 300},
data: {label: 'name', number: '3'}
}
}
},
{
state: {
name: 'updateNameAndNumber',
nodes: [{
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 300},
data: {label: 'name', number: '2'}
}]
},
input: {
id: 'phase-1',
changedData: {label: 'new name', number: '3'}
},
expected: {
node: {
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 300},
data: {label: 'new name', number: '3'}
}
}
},
{
state: {
name: 'AddNewEntry',
nodes: [{
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 300},
data: {label: 'name', number: '2'}
}]
},
input: {
id: 'phase-1',
changedData: {newEntry: 20}
},
expected: {
node: {
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 300},
data: {label: 'name', number: '2', newEntry: 20}
}
}
},
{
state: {
name: 'AddNewEntryAndUpdateOneValue_UnorderedInput',
nodes: [{
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 300},
data: {label: 'name', number: '2'}
}]
},
input: {
id: 'phase-1',
changedData: {newEntry: 20, number: '3'}
},
expected: {
node: {
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 300},
data: {label: 'name', number: '3', newEntry: 20}
}
}
}
])(`tests state: $state.name`, ({state, input,expected}) => {
useFlowStore.setState({ nodes: state.nodes })
const {updateNodeData} = useFlowStore.getState();
act(() => {
updateNodeData(input.id, input.changedData);
})
const updatedState = useFlowStore.getState();
expect(updatedState.nodes).toHaveLength(1);
expect(updatedState.nodes[0]).toMatchObject(expected.node);
})
})
});

4
test/pages/visProgPage/visualProgrammingUI/components/DragDropSidebar.test.tsx
View File

@@ -24,8 +24,8 @@ describe('Drag-and-Drop sidebar', () => {
})
const updatedState = useFlowStore.getState();
expect(updatedState.nodes.length).toBe(2);
expect(updatedState.nodes[0].id).toBe(`${nodeType}-0`);
expect(updatedState.nodes[1].id).toBe(`${nodeType}-1`);
expect(updatedState.nodes[0].id).toBe(`${nodeType}-1`);
expect(updatedState.nodes[1].id).toBe(`${nodeType}-2`);
});
test('throws error on unexpected node type', () => {
expect(() => addNode('I do not Exist', {x:100, y:100})).toThrow("Node I do not Exist not found");