diff --git a/src/composables/LayoutMain.ts b/src/composables/LayoutMain.ts
index 2070008444a5343086614e9f3ffd42ab3282c9b2..8e579ab2babd06ee35a67632fa8bff1fd51c7158 100644
--- a/src/composables/LayoutMain.ts
+++ b/src/composables/LayoutMain.ts
@@ -9,7 +9,7 @@ import { GraphStyleProperties } from "@metabohub/viz-core/src/types/GraphStylePr
// Composable imports
import { putDuplicatedSideCompoundAside, reinsertionSideCompounds } from "./LayoutManageSideCompounds";
-import { vizLayout } from "./LayoutSugiyamaForce";
+import { vizLayout } from "./LayoutSugiyama";
import { chooseReversibleReaction, duplicateReversibleReactions } from "./LayoutReversibleReactions";
import { addDirectedCycleToSubgraphNetwork } from "./LayoutFindCycle";
import { BFSWithSources } from "./AlgorithmBFS";
diff --git a/src/composables/LayoutSugiyamaForce.ts b/src/composables/LayoutSugiyama.ts
similarity index 100%
rename from src/composables/LayoutSugiyamaForce.ts
rename to src/composables/LayoutSugiyama.ts
diff --git a/src/composables/__tests__/LayoutSugiyama.test.ts b/src/composables/__tests__/LayoutSugiyama.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0b00a2255d5315148e368ea1bbfaeea8c3386fae
--- /dev/null
+++ b/src/composables/__tests__/LayoutSugiyama.test.ts
@@ -0,0 +1,173 @@
+// Type imports
+import { Network } from '@metabohub/viz-core/src/types/Network';
+import { Node } from '@metabohub/viz-core/src/types/Node';
+import { Link } from '@metabohub/viz-core/src/types/Link';
+import { GraphStyleProperties } from '@metabohub/viz-core/src/types/GraphStyleProperties';
+import { SubgraphNetwork } from '../../types/SubgraphNetwork';
+
+
+// Composable imports
+import * as LayoutSugiyama from '../LayoutSugiyama';
+import * as ConvertFromNetwork from '../ConvertFromNetwork';
+import * as ConvertToNetwork from '../ConvertToNetwork';
+import * as CalculateSize from "../CalculateSize";
+
+
+// General imports
+import { instance } from "@viz-js/viz";
+import { JsonViz } from '../../types/FormatJsonViz';
+
+
+
+// MOCK VIZ and DATA for mock
+
+const jsonViz:JsonViz ={
+ directed: true,
+ objects: [
+ {
+ name: 'node1',
+ pos: '12.6,12.6',
+ },
+ {
+ name: 'node2',
+ pos: '12.6,325.8',
+ },
+ {
+ name: 'node3',
+ pos: '12.6,639',
+ },
+ {
+ name: 'node4',
+ pos: '12.6,952.2',
+ },
+ {
+ name: 'node5',
+ pos: '12.6,1265.4',
+ }
+ ],
+ edges: []
+ };
+
+const DOT:string=`strict digraph G {
+ graph [rankdir="BT", newrank="true", compound="true", splines="false", ranksep="4", nodesep="4", dpi="72"]
+ node1 [height="0.35", width="0.35", fixedsize="true"];
+ node2 [height="0.35", width="0.35", fixedsize="true"];
+ node3 [height="0.35", width="0.35", fixedsize="true"];
+ node4 [height="0.35", width="0.35", fixedsize="true"];
+ node5 [height="0.35", width="0.35", fixedsize="true"];
+ node1 -> node2;
+ node2 -> node3;
+ node3 -> node4;
+ node4 -> node5;
+}`;
+
+jest.mock('@viz-js/viz', () => ({
+ instance: jest.fn(
+ async() => ({
+ renderJSON: jest.fn(
+ (dot) => {
+ if (dot === DOT) {
+ return jsonViz
+ }else{
+ throw new Error('No right input renderJSON');
+ }
+ }
+ )
+ }))
+}));
+
+
+
+describe('LayoutSugiyama', () => {
+
+ // DATA
+
+ const networkStyle: GraphStyleProperties = {};
+
+ const nodes:{[key:string]:Node}= {
+ node1: { id: 'node1', x:1, y:2 },
+ node2: { id: 'node2', x:3, y:4 },
+ node3: { id: 'node3', x:5, y:6 },
+ node4: { id: 'node4', x:7, y:8 },
+ node5: { id: 'node5', x:9, y:10 },
+ };
+ const links:Link[]= [
+ { id: 'link', source: nodes.node1 , target:nodes.node2 },
+ { id: 'link', source: nodes.node2 , target:nodes.node3 },
+ { id: 'link', source: nodes.node3 , target:nodes.node4 },
+ { id: 'link', source: nodes.node4 , target:nodes.node5 },
+ ]
+ const network :Network= {
+ id: 'network',
+ nodes: nodes,
+ links: links,
+ };
+ const subgraphNetwork:SubgraphNetwork = {
+ network: network,
+ networkStyle: networkStyle,
+ };
+
+ const nodesViz:{[key:string]:Node}= {
+ node1: { id: 'node1', x: 12.6, y: 12.6 },
+ node2: { id: 'node2', x: 12.6, y: 325.8 },
+ node3: { id: 'node3', x: 12.6, y: 639 },
+ node4: { id: 'node4', x: 12.6, y: 952.2 },
+ node5: { id: 'node5', x: 12.6, y: 1265.4 }
+ };
+ const linksViz:Link[] = [
+ { id: 'link', source: nodesViz.node1 , target:nodesViz.node2 },
+ { id: 'link', source: nodesViz.node2 , target:nodesViz.node3 },
+ { id: 'link', source: nodesViz.node3 , target:nodesViz.node4 },
+ { id: 'link', source: nodesViz.node4 , target:nodesViz.node5 },
+ ];
+ const networkViz:Network = {
+ id: 'network',
+ nodes: nodesViz,
+ links: linksViz
+ };
+
+
+ // MOCK
+
+ const getSepAttributesInchesMock = jest.spyOn(CalculateSize, 'getSepAttributesInches');
+ getSepAttributesInchesMock.mockReturnValue(Promise.resolve({rankSep: 4, nodeSep: 4}));
+
+ const networkToDOTMock = jest.spyOn(ConvertFromNetwork, 'networkToDOT');
+ networkToDOTMock.mockReturnValue(DOT);
+
+ const changeNetworkFromVizMock = jest.spyOn(ConvertToNetwork, 'changeNetworkFromViz');
+ changeNetworkFromVizMock.mockImplementation(async(json,subgraphNetwork,assignRank)=>{
+ if (JSON.stringify(json) === JSON.stringify(jsonViz)) {
+ const network = subgraphNetwork.network;
+ network.nodes.node1.x = 12.6;
+ network.nodes.node1.y = 12.6;
+ network.nodes.node2.x = 12.6;
+ network.nodes.node2.y = 325.8;
+ network.nodes.node3.x = 12.6;
+ network.nodes.node3.y = 639;
+ network.nodes.node4.x = 12.6;
+ network.nodes.node4.y = 952.2;
+ network.nodes.node5.x = 12.6;
+ network.nodes.node5.y = 1265.4;
+ }else{
+ throw new Error('No right input');
+ }
+ return subgraphNetwork;
+ });
+
+
+ test('vizLayout with default parameters', async () => {
+
+ // TEST
+ await LayoutSugiyama.vizLayout(subgraphNetwork);
+
+ // EXPECT
+ expect(getSepAttributesInchesMock).toHaveBeenCalledTimes(1);
+ expect(networkToDOTMock).toHaveBeenCalledTimes(1);
+ expect(changeNetworkFromVizMock).toHaveBeenCalledTimes(1);
+ expect(subgraphNetwork.network).toEqual(networkViz);
+
+ });
+
+
+});
\ No newline at end of file