From ba595132005e7e97e39ee54f7276e7b3c507f41b Mon Sep 17 00:00:00 2001 From: Jay Nguyen <51756861+nguyenami@users.noreply.github.com> Date: Wed, 2 Oct 2019 22:25:26 +0100 Subject: [PATCH] Fix: Update test with .toMatchSnapshot to test UI (#243) * update test * Use .toEqual for small assertions. Remove arguments from .toMatchSnapshot calls --- .../__snapshots__/graph.builder.spec.js.snap | 103 ++++++ .../__snapshots__/graph.helper.spec.js.snap | 297 ++++++++++++++++++ test/graph/graph.builder.spec.js | 84 +---- test/graph/graph.helper.spec.js | 14 +- 4 files changed, 410 insertions(+), 88 deletions(-) create mode 100644 test/graph/__snapshots__/graph.builder.spec.js.snap create mode 100644 test/graph/__snapshots__/graph.helper.spec.js.snap diff --git a/test/graph/__snapshots__/graph.builder.spec.js.snap b/test/graph/__snapshots__/graph.builder.spec.js.snap new file mode 100644 index 000000000..cab2f2795 --- /dev/null +++ b/test/graph/__snapshots__/graph.builder.spec.js.snap @@ -0,0 +1,103 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Graph Helper #buildNodeProps when node to build is the highlightedLink target (or source) and highlight degree is 0 should properly build node props () 1`] = ` +Object { + "className": "node", + "color": "green", + "cursor": "pointer", + "cx": 1, + "cy": 2, + "dx": 11.5, + "fill": "green", + "fontColor": "black", + "fontSize": 8, + "fontWeight": "normal", + "highlighted": false, + "id": "id", + "label": "id", + "onClickNode": undefined, + "onMouseOut": undefined, + "onMouseOverNode": undefined, + "onRightClickNode": undefined, + "opacity": undefined, + "overrideGlobalViewGenerator": undefined, + "renderLabel": true, + "size": 200, + "stroke": "none", + "strokeWidth": 1.5, + "svg": "file.svg", + "symbolType": undefined, + "type": "circle", + "viewGenerator": null, + "x": 1, + "y": 2, +} +`; + +exports[`Graph Helper #buildNodeProps when node to build is the highlightedLink target (or source) and highlight degree is bigger then 0 should properly build node props 1`] = ` +Object { + "className": "node", + "color": "green", + "cursor": "pointer", + "cx": 1, + "cy": 2, + "dx": 11.5, + "fill": "green", + "fontColor": "black", + "fontSize": 8, + "fontWeight": "normal", + "highlighted": false, + "id": "id", + "label": "id", + "onClickNode": undefined, + "onMouseOut": undefined, + "onMouseOverNode": undefined, + "onRightClickNode": undefined, + "opacity": undefined, + "overrideGlobalViewGenerator": undefined, + "renderLabel": true, + "size": 200, + "stroke": "none", + "strokeWidth": 1.5, + "svg": "file.svg", + "symbolType": undefined, + "type": "circle", + "viewGenerator": null, + "x": 1, + "y": 2, +} +`; + +exports[`Graph Helper #buildNodeProps when node to build is the highlightedNode should return node props with proper highlight values 1`] = ` +Object { + "className": "node", + "color": "green", + "cursor": "pointer", + "cx": 1, + "cy": 2, + "dx": 15.5, + "fill": "red", + "fontColor": "black", + "fontSize": 12, + "fontWeight": "bold", + "highlighted": true, + "id": "id", + "label": "id", + "onClickNode": undefined, + "onMouseOut": undefined, + "onMouseOverNode": undefined, + "onRightClickNode": undefined, + "opacity": 1, + "overrideGlobalViewGenerator": undefined, + "renderLabel": true, + "size": 200, + "stroke": "yellow", + "strokeWidth": 2, + "svg": "file.svg", + "symbolType": undefined, + "type": "circle", + "viewGenerator": null, + "x": 1, + "y": 2, +} +`; diff --git a/test/graph/__snapshots__/graph.helper.spec.js.snap b/test/graph/__snapshots__/graph.helper.spec.js.snap new file mode 100644 index 000000000..14e70da4b --- /dev/null +++ b/test/graph/__snapshots__/graph.helper.spec.js.snap @@ -0,0 +1,297 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Graph Helper #initializeGraphState when valid graph data is provided and received state is empty should create new graph structure with nodes and links 1`] = ` +Object { + "0": Object { + "highlighted": false, + "id": "A", + "x": 0, + "y": 0, + }, + "1": Object { + "highlighted": false, + "id": "B", + "x": 0, + "y": 0, + }, + "2": Object { + "highlighted": false, + "id": "C", + "x": 0, + "y": 0, + }, +} +`; + +exports[`Graph Helper #initializeGraphState when valid graph data is provided and received state is empty should create new graph structure with nodes and links 2`] = ` +Object { + "0": Object { + "source": "A", + "target": "B", + }, + "1": Object { + "source": "C", + "target": "A", + }, +} +`; + +exports[`Graph Helper #initializeGraphState when valid graph data is provided and received state was already initialized and the new state has nodes removed should create graph structure preserving subset of original structure 1`] = ` +Object { + "0": Object { + "highlighted": false, + "id": "B", + "x": 40, + "y": 60, + }, + "1": Object { + "highlighted": false, + "id": "C", + "x": 60, + "y": 80, + }, +} +`; + +exports[`Graph Helper #initializeGraphState when valid graph data is provided and received state was already initialized and the new state has nodes removed should create graph structure preserving subset of original structure 2`] = ` +Object { + "0": Object { + "index": 2, + "isHidden": false, + "source": Object { + "highlighted": false, + "id": "B", + }, + "target": Object { + "highlighted": false, + "id": "C", + }, + }, +} +`; + +exports[`Graph Helper #initializeGraphState when valid graph data is provided and received state was already initialized should create graph structure absorbing stored nodes and links behavior 1`] = ` +Object { + "0": Object { + "highlighted": false, + "id": "A", + "x": 20, + "y": 40, + }, + "1": Object { + "highlighted": false, + "id": "B", + "x": 40, + "y": 60, + }, + "2": Object { + "highlighted": false, + "id": "C", + "x": 0, + "y": 0, + }, +} +`; + +exports[`Graph Helper #initializeGraphState when valid graph data is provided and received state was already initialized should create graph structure absorbing stored nodes and links behavior 2`] = ` +Object { + "0": Object { + "index": 0, + "source": Object { + "highlighted": false, + "id": "A", + }, + "target": Object { + "highlighted": false, + "id": "B", + }, + }, + "1": Object { + "index": 1, + "source": Object { + "highlighted": false, + "id": "C", + }, + "target": Object { + "highlighted": false, + "id": "A", + }, + }, +} +`; + +exports[`Graph Helper #initializeGraphState when valid graph data is provided should return proper state object for given inputs 1`] = ` +Object { + "config": Object { + "config": "config", + }, + "configUpdated": false, + "d3Links": Array [ + Object { + "index": 0, + "source": Object { + "highlighted": false, + "id": "A", + }, + "target": Object { + "highlighted": false, + "id": "B", + }, + }, + Object { + "index": 1, + "source": Object { + "highlighted": false, + "id": "C", + }, + "target": Object { + "highlighted": false, + "id": "A", + }, + }, + ], + "d3Nodes": Array [ + Object { + "highlighted": false, + "id": "A", + "x": 20, + "y": 40, + }, + Object { + "highlighted": false, + "id": "B", + "x": 40, + "y": 60, + }, + Object { + "highlighted": false, + "id": "C", + "x": 0, + "y": 0, + }, + ], + "draggedNode": null, + "highlightedNode": "", + "id": "id", + "links": Object { + "A": Object { + "B": 1, + "C": 1, + }, + "B": Object { + "A": 1, + }, + "C": Object { + "A": 1, + }, + }, + "newGraphElements": false, + "nodes": Object { + "A": Object { + "highlighted": false, + "id": "A", + "x": 20, + "y": 40, + }, + "B": Object { + "highlighted": false, + "id": "B", + "x": 40, + "y": 60, + }, + "C": Object { + "highlighted": false, + "id": "C", + "x": 0, + "y": 0, + }, + }, + "simulation": Object { + "force": [MockFunction] { + "calls": Array [ + Array [ + "charge", + 10, + ], + Array [ + "x", + 10, + ], + Array [ + "y", + 10, + ], + ], + "results": Array [ + Object { + "type": "return", + "value": Object { + "force": [MockFunction] { + "calls": Array [ + Array [ + "charge", + 10, + ], + Array [ + "x", + 10, + ], + Array [ + "y", + 10, + ], + ], + "results": [Circular], + }, + }, + }, + Object { + "type": "return", + "value": Object { + "force": [MockFunction] { + "calls": Array [ + Array [ + "charge", + 10, + ], + Array [ + "x", + 10, + ], + Array [ + "y", + 10, + ], + ], + "results": [Circular], + }, + }, + }, + Object { + "type": "return", + "value": Object { + "force": [MockFunction] { + "calls": Array [ + Array [ + "charge", + 10, + ], + Array [ + "x", + 10, + ], + Array [ + "y", + 10, + ], + ], + "results": [Circular], + }, + }, + }, + ], + }, + }, + "transform": 1, +} +`; diff --git a/test/graph/graph.builder.spec.js b/test/graph/graph.builder.spec.js index 35a15f9e9..c52afb104 100644 --- a/test/graph/graph.builder.spec.js +++ b/test/graph/graph.builder.spec.js @@ -101,33 +101,7 @@ describe("Graph Helper", () => { }); const props = graphHelper.buildNodeProps(that.node, that.config, undefined, "id", undefined, 1); - expect(props).toEqual({ - ...that.node, - className: "node", - cursor: "pointer", - cx: 1, - cy: 2, - dx: 15.5, - fill: "red", - fontSize: 12, - fontWeight: "bold", - fontColor: "black", - id: "id", - label: "id", - onClickNode: undefined, - onRightClickNode: undefined, - onMouseOut: undefined, - onMouseOverNode: undefined, - opacity: 1, - renderLabel: true, - size: 200, - stroke: "yellow", - strokeWidth: 2, - svg: "file.svg", - type: "circle", - viewGenerator: null, - overrideGlobalViewGenerator: undefined, - }); + expect(props).toMatchSnapshot(); }); }); describe("when node to build is the highlightedLink target (or source)", () => { @@ -147,33 +121,7 @@ describe("Graph Helper", () => { 1 ); - expect(props).toEqual({ - ...that.node, - className: "node", - cursor: "pointer", - cx: 1, - cy: 2, - dx: 11.5, - fill: "green", - fontSize: 8, - fontWeight: "normal", - fontColor: "black", - id: "id", - label: "id", - onClickNode: undefined, - onRightClickNode: undefined, - onMouseOut: undefined, - onMouseOverNode: undefined, - opacity: undefined, - renderLabel: true, - size: 200, - stroke: "none", - strokeWidth: 1.5, - svg: "file.svg", - type: "circle", - viewGenerator: null, - overrideGlobalViewGenerator: undefined, - }); + expect(props).toMatchSnapshot(); }); }); describe("and highlight degree is bigger then 0", () => { @@ -192,33 +140,7 @@ describe("Graph Helper", () => { 1 ); - expect(props).toEqual({ - ...that.node, - className: "node", - cursor: "pointer", - cx: 1, - cy: 2, - dx: 11.5, - fill: "green", - fontSize: 8, - fontWeight: "normal", - fontColor: "black", - id: "id", - label: "id", - onClickNode: undefined, - onRightClickNode: undefined, - onMouseOut: undefined, - onMouseOverNode: undefined, - opacity: undefined, - renderLabel: true, - size: 200, - stroke: "none", - strokeWidth: 1.5, - svg: "file.svg", - type: "circle", - viewGenerator: null, - overrideGlobalViewGenerator: undefined, - }); + expect(props).toMatchSnapshot(); }); }); }); diff --git a/test/graph/graph.helper.spec.js b/test/graph/graph.helper.spec.js index d95fef9bf..0b4afab8c 100644 --- a/test/graph/graph.helper.spec.js +++ b/test/graph/graph.helper.spec.js @@ -49,7 +49,7 @@ describe("Graph Helper", () => { const newState = graphHelper.initializeGraphState({ data, id: "id", config: {} }, state); - expect(newState.d3Nodes).toEqual([ + expect(newState.d3Nodes).toMatchSnapshot([ { highlighted: false, id: "A", @@ -69,7 +69,7 @@ describe("Graph Helper", () => { y: 0, }, ]); - expect(newState.d3Links).toEqual([ + expect(newState.d3Links).toMatchSnapshot([ { index: 0, source: { @@ -152,7 +152,7 @@ describe("Graph Helper", () => { const newState = graphHelper.initializeGraphState({ data, id: "id", config: {} }, state); - expect(newState.d3Nodes).toEqual([ + expect(newState.d3Nodes).toMatchSnapshot([ { highlighted: false, id: "B", @@ -166,7 +166,7 @@ describe("Graph Helper", () => { y: 80, }, ]); - expect(newState.d3Links).toEqual([ + expect(newState.d3Links).toMatchSnapshot([ { index: 2, isHidden: false, @@ -194,7 +194,7 @@ describe("Graph Helper", () => { const newState = graphHelper.initializeGraphState({ data, id: "id", config: {} }, state); - expect(newState.d3Nodes).toEqual([ + expect(newState.d3Nodes).toMatchSnapshot([ { highlighted: false, id: "A", @@ -214,7 +214,7 @@ describe("Graph Helper", () => { y: 0, }, ]); - expect(newState.d3Links).toEqual([ + expect(newState.d3Links).toMatchSnapshot([ { source: "A", target: "B", @@ -257,7 +257,7 @@ describe("Graph Helper", () => { const newState = graphHelper.initializeGraphState({ data, id: "id", config: undefined }, state); - expect(newState).toEqual({ + expect(newState).toMatchSnapshot({ config: { config: "config", },