zynfly/sqliteviz
1
0
Fork 0
mirror of https://github.com/lana-k/sqliteviz.git synced 2026-02-04 07:28:55 +08:00
Code Issues Projects Releases Wiki Activity

tests

Browse Source
This commit is contained in:
lana-k
2025-12-07 19:56:16 +01:00
parent 68221cba6d
commit d28968e539
13 changed files with 1270 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Graph/EdgeColorSettings.vue
View File

@@ -1,18 +1,21 @@
<template>
<Field label="Color">
<Field label="Color" fieldContainerClassName="test_edge_color">
<RadioBlocks
:options="edgeColorTypeOptions"
:activeOption="modelValue.type"
@option-change="updateColorType"
/>
<Field v-if="modelValue.type === 'constant'">
<Field
v-if="modelValue.type === 'constant'"
fieldContainerClassName="test_edge_color_value"
>
<ColorPicker
:selectedColor="modelValue.value"
@color-change="updateSettings('value', $event)"
/>
</Field>
<template v-else>
<Field>
<Field fieldContainerClassName="test_edge_color_value">
<Dropdown
v-if="modelValue.type === 'variable'"
:options="keyOptions"
@@ -21,7 +24,7 @@
/>
</Field>
<Field>
<Field fieldContainerClassName="test_edge_color_mapping_mode">
<RadioBlocks
:options="colorSourceUsageOptions"
:activeOption="modelValue.sourceUsage"
@@ -42,6 +45,7 @@
<Field
v-if="modelValue.type !== 'constant' && modelValue.sourceUsage === 'map_to'"
label="Color as"
fieldContainerClassName="test_edge_color_as"
>
<RadioBlocks
:options="сolorAsOptions"
@@ -53,6 +57,7 @@
<Field
v-if="modelValue.type !== 'constant' && modelValue.sourceUsage === 'map_to'"
label="Colorscale direction"
fieldContainerClassName="test_edge_color_colorscale_direction"
>
<RadioBlocks
:options="сolorscaleDirections"

8
src/components/Graph/EdgeSizeSettings.vue
View File

@@ -1,12 +1,12 @@
<template>
<Field label="Size">
<Field label="Size" fieldContainerClassName="test_edge_size">
<RadioBlocks
:options="edgeSizeTypeOptions"
:activeOption="modelValue.type"
@option-change="updateSizeType"
/>
<Field>
<Field fieldContainerClassName="test_edge_size_value">
<NumericInput
v-if="modelValue.type === 'constant'"
:value="modelValue.value"
@@ -23,14 +23,14 @@
</Field>
<template v-if="modelValue.type !== 'constant'">
<Field label="Size scale">
<Field label="Size scale" fieldContainerClassName="test_edge_size_scale">
<NumericInput
:value="modelValue.scale"
@update="updateSettings('scale', $event)"
/>
</Field>
<Field label="Minimum size">
<Field label="Minimum size" fieldContainerClassName="test_edge_size_min">
<NumericInput
:value="modelValue.min"
@update="updateSettings('min', $event)"

19
src/views/MainView/Workspace/Tabs/Tab/DataView/Graph/GraphEditor.vue → src/components/Graph/GraphEditor.vue
View File

@@ -11,10 +11,11 @@
documentation</a
>.
</Field>
<Field label="Object type">
<Field label="Object type" ref="objectTypeField">
<Dropdown
:options="keysOptions"
:value="settings.structure.objectType"
className="test_object_type_select"
@change="updateStructure('objectType', $event)"
/>
<Field>
@@ -27,6 +28,7 @@
<Dropdown
:options="keysOptions"
:value="settings.structure.nodeId"
className="test_node_id_select"
@change="updateStructure('nodeId', $event)"
/>
<Field> A field keeping unique node identifier. </Field>
@@ -36,6 +38,7 @@
<Dropdown
:options="keysOptions"
:value="settings.structure.edgeSource"
className="test_edge_source_select"
@change="updateStructure('edgeSource', $event)"
/>
<Field>
@@ -47,6 +50,7 @@
<Dropdown
:options="keysOptions"
:value="settings.structure.edgeTarget"
className="test_edge_target_select"
@change="updateStructure('edgeTarget', $event)"
/>
<Field>
@@ -71,6 +75,7 @@
<Dropdown
:options="keysOptions"
:value="settings.style.nodes.label.source"
className="test_label_select"
@change="updateNodes('label.source', $event)"
/>
</Field>
@@ -97,7 +102,10 @@
<Panel group="Style" name="Edges">
<Fold name="Edges">
<Field label="Direction">
<Field
label="Direction"
fieldContainerClassName="test_edge_direction"
>
<RadioBlocks
:options="visibilityOptions"
:activeOption="settings.style.edges.showDirection"
@@ -109,6 +117,7 @@
<Dropdown
:options="keysOptions"
:value="settings.style.edges.label.source"
className="test_edge_label_select"
@change="updateEdges('label.source', $event)"
/>
</Field>
@@ -139,6 +148,7 @@
<Dropdown
:options="layoutOptions"
:value="settings.layout.type"
:clearable="false"
@change="updateLayout($event)"
/>
</Field>
@@ -183,6 +193,7 @@
<div
ref="graph"
class="test_graph_output"
:style="{
height: '100%',
width: '100%',
@@ -416,9 +427,7 @@ export default {
this.updateLayout(this.settings.layout.type)
this.renderer = new Sigma(this.graph, this.$refs.graph, {
renderEdgeLabels: true,
allowInvalidContainer: true,
labelColor: { attribute: 'labelColor', color: '#444444' },
edgeLabelColor: { attribute: 'labelColor', color: '#a2b1c6' }
allowInvalidContainer: true
})
if (this.settings.layout.type === 'forceAtlas2') {
this.autoRunFA2Layout()

17
src/components/Graph/NodeColorSettings.vue
View File

@@ -1,18 +1,21 @@
<template>
<Field label="Color">
<Field label="Color" fieldContainerClassName="test_node_color">
<RadioBlocks
:options="nodeColorTypeOptions"
:activeOption="modelValue.type"
@option-change="updateColorType"
/>
<Field v-if="modelValue.type === 'constant'">
<Field
v-if="modelValue.type === 'constant'"
fieldContainerClassName="test_node_color_value"
>
<ColorPicker
:selectedColor="modelValue.value"
@color-change="updateSettings('value', $event)"
/>
</Field>
<template v-else>
<Field>
<Field fieldContainerClassName="test_node_color_value">
<Dropdown
v-if="modelValue.type === 'variable'"
:options="keyOptions"
@@ -23,11 +26,15 @@
v-if="modelValue.type === 'calculated'"
:options="nodeCalculatedColorMethodOptions"
:value="modelValue.method"
:clearable="false"
@change="updateSettings('method', $event)"
/>
</Field>
<Field v-if="modelValue.type === 'variable'">
<Field
v-if="modelValue.type === 'variable'"
fieldContainerClassName="test_node_color_mapping_mode"
>
<RadioBlocks
:options="colorSourceUsageOptions"
:activeOption="modelValue.sourceUsage"
@@ -55,6 +62,7 @@
modelValue.sourceUsage === 'map_to' || modelValue.type === 'calculated'
"
label="Color as"
fieldContainerClassName="test_node_color_as"
>
<RadioBlocks
:options="сolorAsOptions"
@@ -68,6 +76,7 @@
modelValue.sourceUsage === 'map_to' || modelValue.type === 'calculated'
"
label="Colorscale direction"
fieldContainerClassName="test_node_color_colorscale_direction"
>
<RadioBlocks
:options="сolorscaleDirections"

12
src/components/Graph/NodeSizeSettings.vue
View File

@@ -1,16 +1,17 @@
<template>
<Field label="Size">
<Field label="Size" fieldContainerClassName="test_node_size">
<RadioBlocks
:options="nodeSizeTypeOptions"
:activeOption="modelValue.type"
@option-change="updateSizeType"
/>
<Field>
<Field fieldContainerClassName="test_node_size_value">
<NumericInput
v-if="modelValue.type === 'constant'"
:value="modelValue.value"
:min="1"
class="test_node_size_value"
@update="updateSettings('value', $event)"
/>
<Dropdown
@@ -23,20 +24,21 @@
v-if="modelValue.type === 'calculated'"
:options="nodeCalculatedSizeMethodOptions"
:value="modelValue.method"
:clearable="false"
@change="updateSettings('method', $event)"
/>
</Field>
</Field>
<template v-if="modelValue.type !== 'constant'">
<Field label="Size scale">
<Field label="Size scale" fieldContainerClassName="test_node_size_scale">
<NumericInput
:value="modelValue.scale"
@update="updateSettings('scale', $event)"
/>
</Field>
<Field label="Size mode">
<Field label="Size mode" fieldContainerClassName="test_node_size_mode">
<RadioBlocks
:options="nodeSizeModeOptions"
:activeOption="modelValue.mode"
@@ -44,7 +46,7 @@
/>
</Field>
<Field label="Minimum size">
<Field label="Minimum size" fieldContainerClassName="test_node_size_min">
<NumericInput
:value="modelValue.min"
@update="updateSettings('min', $event)"

6
src/views/MainView/Workspace/Tabs/Tab/DataView/Chart/index.vue
View File

@@ -120,8 +120,8 @@ export default {
this.resizeObserver.observe(this.$refs.chartContainer)
if (this.dataSources) {
dereference.default(this.state.data, this.dataSources)
this.updatePlotly()
}
this.handleResize()
},
activated() {
this.useResizeHandler = true
@@ -134,6 +134,10 @@ export default {
},
methods: {
async handleResize() {
// Call updatePlotly twice because there is a small gap (for scrolling?)
// on right and bottom of the plot.
// After the second call it's good.
this.updatePlotly()
this.updatePlotly()
},
onRender() {

21
src/views/MainView/Workspace/Tabs/Tab/DataView/Graph/index.vue
View File

@@ -1,10 +1,13 @@
<template>
<div ref="graphContainer" class="graph-container">
<div v-show="!dataSources" class="warning data-view-warning">
<div v-show="!dataSources" class="warning data-view-warning no-data">
There is no data to build a graph. Run your SQL query and make sure the
result is not empty.
</div>
<div v-show="!dataSourceIsValid" class="warning data-view-warning">
<div
v-show="!dataSourceIsValid"
class="warning data-view-warning invalid-data"
>
Result set is invalid for graph visualisation. Learn more in
<a href="https://sqliteviz.com/docs/graph/" target="_blank">
documentation</a
@@ -30,7 +33,7 @@
<script>
import 'react-chart-editor/lib/react-chart-editor.css'
import GraphEditor from './GraphEditor.vue'
import GraphEditor from '@/components/Graph/GraphEditor.vue'
import { dataSourceIsValid } from '@/lib/graphHelper'
export default {
@@ -47,6 +50,8 @@ export default {
emits: [
'update:exportToSvgEnabled',
'update:exportToHtmlEnabled',
'update:exportToPngEnabled',
'update:exportToClipboardEnabled',
'update',
'loadingImageCompleted'
],
@@ -58,6 +63,8 @@ export default {
created() {
this.$emit('update:exportToSvgEnabled', false)
this.$emit('update:exportToHtmlEnabled', false)
this.$emit('update:exportToPngEnabled', !!this.dataSources)
this.$emit('update:exportToClipboardEnabled', !!this.dataSources)
},
mounted() {
this.resizeObserver = new ResizeObserver(this.handleResize)
@@ -70,6 +77,10 @@ export default {
async showViewSettings() {
await this.$nextTick()
this.handleResize()
},
dataSources() {
this.$emit('update:exportToPngEnabled', !!this.dataSources)
this.$emit('update:exportToClipboardEnabled', !!this.dataSources)
}
},
computed: {
@@ -85,8 +96,8 @@ export default {
await this.$refs.graphEditor.saveAsPng()
this.$emit('loadingImageCompleted')
},
async prepareCopy() {
return await this.$refs.graphEditor.prepareCopy()
prepareCopy() {
return this.$refs.graphEditor.prepareCopy()
},
async handleResize() {
const renderer = this.$refs.graphEditor.renderer

6
src/views/MainView/Workspace/Tabs/Tab/DataView/Pivot/index.vue
View File

@@ -227,12 +227,12 @@ export default {
async prepareCopy() {
if (this.viewCustomChart) {
return await this.$refs.customChart.prepareCopy()
return this.$refs.customChart.prepareCopy()
}
if (this.viewStandartChart) {
return await chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'png')
return chartHelper.getImageDataUrl(this.$refs.pivotOutput, 'png')
}
return await pivotHelper.getPivotCanvas(this.$refs.pivotOutput)
return pivotHelper.getPivotCanvas(this.$refs.pivotOutput)
},
async saveAsSvg() {

4
src/views/MainView/Workspace/Tabs/Tab/DataView/index.vue
View File

@@ -7,6 +7,7 @@
v-model:exportToPngEnabled="exportToPngEnabled"
v-model:exportToSvgEnabled="exportToSvgEnabled"
v-model:exportToHtmlEnabled="exportToHtmlEnabled"
v-model:exportToClipboardEnabled="exportToClipboardEnabled"
:initOptions="initOptionsByMode[mode]"
:data-sources="dataSource"
:showViewSettings="showViewSettings"
@@ -88,6 +89,7 @@
</icon-button>
<icon-button
ref="copyToClipboardBtn"
:disabled="!exportToClipboardEnabled"
:loading="copyingImage"
tooltip="Copy visualisation to clipboard"
tooltipPosition="top-left"
@@ -159,6 +161,7 @@ export default {
exportToPngEnabled: true,
exportToSvgEnabled: true,
exportToHtmlEnabled: true,
exportToClipboardEnabled: true,
loadingImage: false,
copyingImage: false,
preparingCopy: false,
@@ -181,6 +184,7 @@ export default {
mode(newMode, oldMode) {
this.$emit('update')
this.exportToPngEnabled = true
this.exportToClipboardEnabled = true
this.initOptionsByMode[oldMode] = this.getOptionsForSave()
}
},

892
tests/components/Graph/GraphEditor.spec.js Normal file
View File

@@ -0,0 +1,892 @@
import { expect } from 'chai'
import { mount } from '@vue/test-utils'
import GraphEditor from '@/components/Graph/GraphEditor.vue'
import { nextTick } from 'vue'
const defaultInitOptions = {
structure: {
nodeId: null,
objectType: null,
edgeSource: null,
edgeTarget: null
},
style: {
backgroundColor: 'white',
nodes: {
size: {
type: 'constant',
value: 10
},
color: {
type: 'constant',
value: '#1F77B4'
},
label: {
source: null,
color: '#444444'
}
},
edges: {
showDirection: true,
size: {
type: 'constant',
value: 2
},
color: {
type: 'constant',
value: '#a2b1c6'
},
label: {
source: null,
color: '#a2b1c6'
}
}
},
layout: {
type: 'circular',
options: null
}
}
describe('GraphEditor', () => {
it('sets graph structure', async () => {
const wrapper = mount(GraphEditor, {
attachTo: document.body,
props: {
dataSources: {
doc: [
'{"object_type": 0, "node_id": 1}',
'{"object_type": 0, "node_id": 2}',
'{"object_type": 1, "source": 1, "target": 2}'
]
},
showViewSettings: true
},
global: {
provide: {
tabLayout: { dataView: 'above' }
}
}
})
const graph = wrapper.vm.graph
await wrapper
.find('.test_object_type_select.dropdown-container .Select__indicator')
.wrapperElement.dispatchEvent(
new MouseEvent('mousedown', { bubbles: true })
)
let options = wrapper.findAll('.Select__menu .Select__option')
expect(options.length).to.equal(4)
expect(wrapper.find('.Select__menu').text()).to.contain(
'object_type' + 'node_id' + 'source' + 'target'
)
await options[0].trigger('click')
expect(graph.export().nodes.length).to.equal(0)
expect(graph.export().edges.length).to.equal(0)
await wrapper
.find('.test_node_id_select.dropdown-container .Select__indicator')
.wrapperElement.dispatchEvent(
new MouseEvent('mousedown', { bubbles: true })
)
options = wrapper.findAll('.Select__menu .Select__option')
await options[1].trigger('click')
expect(graph.export().nodes.length).to.equal(2)
expect(graph.export().edges.length).to.equal(0)
await wrapper
.find('.test_edge_source_select.dropdown-container .Select__indicator')
.wrapperElement.dispatchEvent(
new MouseEvent('mousedown', { bubbles: true })
)
options = wrapper.findAll('.Select__menu .Select__option')
await options[2].trigger('click')
await wrapper
.find('.test_edge_target_select.dropdown-container .Select__indicator')
.wrapperElement.dispatchEvent(
new MouseEvent('mousedown', { bubbles: true })
)
options = wrapper.findAll('.Select__menu .Select__option')
await options[3].trigger('click')
expect(graph.export().nodes.length).to.equal(2)
expect(graph.export().edges.length).to.equal(1)
wrapper.unmount()
})
it('changes background color', async () => {
const wrapper = mount(GraphEditor, {
attachTo: document.body,
props: {
dataSources: {
doc: []
},
showViewSettings: true
},
global: {
provide: {
tabLayout: { dataView: 'above' }
},
stubs: {
ColorPicker: true
}
}
})
const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
await styleMenuItem.trigger('click')
const generalMenuItem = wrapper.findAll('.sidebar__item')[1]
await generalMenuItem.trigger('click')
await wrapper
.findComponent({ name: 'ColorPicker' })
.vm.$emit('colorChange', '#ff00ff')
expect(
wrapper.find('.test_graph_output').wrapperElement.style.backgroundColor
).to.equal('rgb(255, 0, 255)')
wrapper.unmount()
})
it('sets node labels', async () => {
const wrapper = mount(GraphEditor, {
attachTo: document.body,
props: {
dataSources: {
doc: [
'{"object_type": 0, "node_id": 1, "name": "foo"}',
'{"object_type": 0, "node_id": 2, "name": "bar"}',
'{"object_type": 1, "source": 1, "target": 2}'
]
},
initOptions: {
...defaultInitOptions,
structure: {
nodeId: 'node_id',
objectType: 'object_type',
edgeSource: 'source',
edgeTarget: 'target'
}
},
showViewSettings: true
},
global: {
provide: {
tabLayout: { dataView: 'above' }
}
}
})
const graph = wrapper.vm.graph
const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
await styleMenuItem.trigger('click')
const nodesMenuItem = wrapper.findAll('.sidebar__item')[2]
await nodesMenuItem.trigger('click')
await wrapper
.find('.test_label_select.dropdown-container .Select__indicator')
.wrapperElement.dispatchEvent(
new MouseEvent('mousedown', { bubbles: true })
)
await wrapper.findAll('.Select__menu .Select__option')[2].trigger('click')
expect(graph.export().nodes[0].attributes.label).to.equal('foo')
expect(graph.export().nodes[1].attributes.label).to.equal('bar')
wrapper.unmount()
})
it('sets node label color', async () => {
const wrapper = mount(GraphEditor, {
attachTo: document.body,
props: {
dataSources: {
doc: [
'{"object_type": 0, "node_id": 1, "name": "foo"}',
'{"object_type": 0, "node_id": 2, "name": "bar"}',
'{"object_type": 1, "source": 1, "target": 2}'
]
},
initOptions: {
...defaultInitOptions,
structure: {
nodeId: 'node_id',
objectType: 'object_type',
edgeSource: 'source',
edgeTarget: 'target'
}
},
showViewSettings: true
},
global: {
provide: {
tabLayout: { dataView: 'above' }
},
stubs: {
ColorPicker: true
}
}
})
const graph = wrapper.vm.graph
const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
await styleMenuItem.trigger('click')
const nodesMenuItem = wrapper.findAll('.sidebar__item')[2]
await nodesMenuItem.trigger('click')
await wrapper
.findComponent({ name: 'ColorPicker' })
.vm.$emit('colorChange', '#ff00ff')
expect(graph.export().nodes[0].attributes.labelColor).to.equal('#ff00ff')
expect(graph.export().nodes[1].attributes.labelColor).to.equal('#ff00ff')
wrapper.unmount()
})
it('sets node size', async () => {
const wrapper = mount(GraphEditor, {
attachTo: document.body,
props: {
dataSources: {
doc: [
'{"object_type": 0, "node_id": 1, "points": 32}',
'{"object_type": 0, "node_id": 2, "points": 8}',
'{"object_type": 1, "source": 1, "target": 2}',
'{"object_type": 1, "source": 1, "target": 2}',
'{"object_type": 1, "source": 1, "target": 2}',
'{"object_type": 1, "source": 1, "target": 2}',
'{"object_type": 1, "source": 2, "target": 1}'
]
},
initOptions: {
...defaultInitOptions,
structure: {
nodeId: 'node_id',
objectType: 'object_type',
edgeSource: 'source',
edgeTarget: 'target'
}
},
showViewSettings: true
},
global: {
provide: {
tabLayout: { dataView: 'above' }
}
}
})
const graph = wrapper.vm.graph
const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
await styleMenuItem.trigger('click')
const nodesMenuItem = wrapper.findAll('.sidebar__item')[2]
await nodesMenuItem.trigger('click')
// Set constant size = 50
const sizeInput = wrapper.find('.test_node_size_value input')
await sizeInput.setValue(50)
sizeInput.wrapperElement.dispatchEvent(new Event('blur', { bubbles: true }))
// Call nextTick after setting number input,
// otherwise the value will be changed beck to initial for some reason
await nextTick()
expect(graph.export().nodes[0].attributes.size).to.equal(50)
expect(graph.export().nodes[1].attributes.size).to.equal(50)
// Switch to Variable
const variable = wrapper.findAll('.test_node_size .radio-block__option')[1]
await variable.trigger('click')
// Select points as size source
await wrapper
.find('.test_node_size_value .dropdown-container .Select__indicator')
.wrapperElement.dispatchEvent(
new MouseEvent('mousedown', { bubbles: true })
)
await wrapper.findAll('.Select__menu .Select__option')[2].trigger('click')
expect(graph.export().nodes[0].attributes.size).to.equal(16)
expect(graph.export().nodes[1].attributes.size).to.equal(4)
// Set size scale
const sizeScale = wrapper.find('.test_node_size_scale input')
sizeScale.wrapperElement.value = 4
sizeScale.wrapperElement.dispatchEvent(new Event('blur', { bubbles: true }))
await nextTick()
expect(graph.export().nodes[0].attributes.size).to.equal(64)
expect(graph.export().nodes[1].attributes.size).to.equal(16)
// Switch to Area
const mode = wrapper.findAll('.test_node_size_mode .radio-block__option')[0]
await mode.trigger('click')
expect(graph.export().nodes[0].attributes.size).to.equal(8)
expect(graph.export().nodes[1].attributes.size).to.equal(4)
// Set min
const sizeMin = wrapper.find('.test_node_size_min input')
await sizeMin.setValue(12)
sizeMin.wrapperElement.dispatchEvent(new Event('blur', { bubbles: true }))
await nextTick()
expect(graph.export().nodes[0].attributes.size).to.equal(8)
expect(graph.export().nodes[1].attributes.size).to.equal(6)
// Switch to Calculated
const calculated = wrapper.findAll(
'.test_node_size .radio-block__option'
)[2]
await calculated.trigger('click')
expect(graph.export().nodes[0].attributes.size).to.equal(2.5)
expect(graph.export().nodes[1].attributes.size).to.equal(2.5)
await nextTick()
// Choose in-degree
await wrapper
.find('.test_node_size_value .dropdown-container .Select__indicator')
.wrapperElement.dispatchEvent(
new MouseEvent('mousedown', { bubbles: true })
)
await wrapper.findAll('.Select__menu .Select__option')[1].trigger('click')
expect(graph.export().nodes[0].attributes.size).to.equal(0.5)
expect(graph.export().nodes[1].attributes.size).to.equal(2)
// Switch to Variable
await variable.trigger('click')
// The latest settings from variable mode are applied
expect(graph.export().nodes[0].attributes.size).to.equal(8)
expect(graph.export().nodes[1].attributes.size).to.equal(6)
// Switch to Constant
const constant = wrapper.findAll('.test_node_size .radio-block__option')[0]
await constant.trigger('click')
// The latest settings from constant mode are applied
expect(graph.export().nodes[0].attributes.size).to.equal(50)
expect(graph.export().nodes[1].attributes.size).to.equal(50)
wrapper.unmount()
})
it('sets node color', async () => {
const wrapper = mount(GraphEditor, {
attachTo: document.body,
props: {
dataSources: {
doc: [
'{"type": 0, "node_id": 1, "color": "#ff0000", "points": 5}',
'{"type": 0, "node_id": 2, "color": "#abcdff", "points": 15}',
'{"type": 0, "node_id": 3, "color": "#123456", "points": 10}',
'{"type": 1, "source": 2, "target": 3}'
]
},
initOptions: {
...defaultInitOptions,
structure: {
nodeId: 'node_id',
objectType: 'type',
edgeSource: 'source',
edgeTarget: 'target'
}
},
showViewSettings: true
},
global: {
provide: {
tabLayout: { dataView: 'above' }
},
stubs: {
ColorPicker: true
}
}
})
const graph = wrapper.vm.graph
const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
await styleMenuItem.trigger('click')
const nodesMenuItem = wrapper.findAll('.sidebar__item')[2]
await nodesMenuItem.trigger('click')
// Set constant color
await wrapper
.findAllComponents({ name: 'ColorPicker' })[1]
.vm.$emit('colorChange', '#ff00ff')
expect(graph.export().nodes[0].attributes.color).to.equal('#ff00ff')
expect(graph.export().nodes[1].attributes.color).to.equal('#ff00ff')
expect(graph.export().nodes[2].attributes.color).to.equal('#ff00ff')
// Switch to Variable
const variable = wrapper.findAll('.test_node_color .radio-block__option')[1]
await variable.trigger('click')
// Select "color" as color source
await wrapper
.find('.test_node_color_value .dropdown-container .Select__indicator')
.wrapperElement.dispatchEvent(
new MouseEvent('mousedown', { bubbles: true })
)
await wrapper.findAll('.Select__menu .Select__option')[2].trigger('click')
expect(graph.export().nodes[0].attributes.color).to.equal('#fafa6e')
expect(graph.export().nodes[1].attributes.color).to.equal('#bdea75')
expect(graph.export().nodes[2].attributes.color).to.equal('#86d780')
// Select Direct mapping
await wrapper
.find('.test_node_color_mapping_mode .radio-block__option')
.trigger('click')
expect(graph.export().nodes[0].attributes.color).to.equal('#ff0000')
expect(graph.export().nodes[1].attributes.color).to.equal('#abcdff')
expect(graph.export().nodes[2].attributes.color).to.equal('#123456')
// Switch to Calculated
const calculated = wrapper.findAll(
'.test_node_color .radio-block__option'
)[2]
await calculated.trigger('click')
expect(graph.export().nodes[0].attributes.color).to.equal('#fafa6e')
expect(graph.export().nodes[1].attributes.color).to.equal('#2a4858')
expect(graph.export().nodes[2].attributes.color).to.equal('#2a4858')
await nextTick()
// Choose in-degree
await wrapper
.find('.test_node_color_value .dropdown-container .Select__indicator')
.wrapperElement.dispatchEvent(
new MouseEvent('mousedown', { bubbles: true })
)
await wrapper.findAll('.Select__menu .Select__option')[1].trigger('click')
expect(graph.export().nodes[0].attributes.color).to.equal('#fafa6e')
expect(graph.export().nodes[1].attributes.color).to.equal('#fafa6e')
expect(graph.export().nodes[2].attributes.color).to.equal('#2a4858')
await nextTick()
// Set Color as to Categorical
await wrapper
.findAll('.test_node_color_as .radio-block__option')[1]
.trigger('click')
expect(graph.export().nodes[0].attributes.color).to.equal('#fafa6e')
expect(graph.export().nodes[1].attributes.color).to.equal('#fafa6e')
expect(graph.export().nodes[2].attributes.color).to.equal('#bdea75')
await nextTick()
// Change colorscale direction
await wrapper
.findAll('.test_node_color_colorscale_direction .radio-block__option')[1]
.trigger('click')
expect(graph.export().nodes[0].attributes.color).to.equal('#2a4858')
expect(graph.export().nodes[1].attributes.color).to.equal('#2a4858')
expect(graph.export().nodes[2].attributes.color).to.equal('#1f5f70')
await nextTick()
// Switch to Variable
await variable.trigger('click')
// The latest settings from variable mode are applied
expect(graph.export().nodes[0].attributes.color).to.equal('#ff0000')
expect(graph.export().nodes[1].attributes.color).to.equal('#abcdff')
expect(graph.export().nodes[2].attributes.color).to.equal('#123456')
// Switch to Constant
const constant = wrapper.findAll('.test_node_color .radio-block__option')[0]
await constant.trigger('click')
// The latest settings from constant mode are applied
expect(graph.export().nodes[0].attributes.color).to.equal('#ff00ff')
expect(graph.export().nodes[1].attributes.color).to.equal('#ff00ff')
expect(graph.export().nodes[2].attributes.color).to.equal('#ff00ff')
wrapper.unmount()
})
it('shows and hide arrows', async () => {
const wrapper = mount(GraphEditor, {
attachTo: document.body,
props: {
dataSources: {
doc: [
'{"object_type": 0, "node_id": 1}',
'{"object_type": 0, "node_id": 2}',
'{"object_type": 1, "source": 1, "target": 2}'
]
},
initOptions: {
...defaultInitOptions,
structure: {
nodeId: 'node_id',
objectType: 'object_type',
edgeSource: 'source',
edgeTarget: 'target'
}
},
showViewSettings: true
},
global: {
provide: {
tabLayout: { dataView: 'above' }
}
}
})
const graph = wrapper.vm.graph
expect(graph.export().edges[0].attributes.type).to.equal('arrow')
const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
await styleMenuItem.trigger('click')
const edgesMenuItem = wrapper.findAll('.sidebar__item')[3]
await edgesMenuItem.trigger('click')
// Switch showing direction
const variable = wrapper.findAll(
'.test_edge_direction .radio-block__option'
)[1]
await variable.trigger('click')
expect(graph.export().edges[0].attributes.type).to.equal('line')
})
it('sets edge labels', async () => {
const wrapper = mount(GraphEditor, {
attachTo: document.body,
props: {
dataSources: {
doc: [
'{"object_type": 0, "node_id": 1}',
'{"object_type": 0, "node_id": 2}',
'{"object_type": 1, "source": 1, "target": 2, "name": "bar"}'
]
},
initOptions: {
...defaultInitOptions,
structure: {
nodeId: 'node_id',
objectType: 'object_type',
edgeSource: 'source',
edgeTarget: 'target'
}
},
showViewSettings: true
},
global: {
provide: {
tabLayout: { dataView: 'above' }
}
}
})
const graph = wrapper.vm.graph
expect(graph.export().edges[0].attributes.label).to.equal('')
const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
await styleMenuItem.trigger('click')
const edgesMenuItem = wrapper.findAll('.sidebar__item')[3]
await edgesMenuItem.trigger('click')
await wrapper
.find('.test_edge_label_select.dropdown-container .Select__indicator')
.wrapperElement.dispatchEvent(
new MouseEvent('mousedown', { bubbles: true })
)
await wrapper.findAll('.Select__menu .Select__option')[4].trigger('click')
expect(graph.export().edges[0].attributes.label).to.equal('bar')
wrapper.unmount()
})
it('sets edge label color', async () => {
const wrapper = mount(GraphEditor, {
attachTo: document.body,
props: {
dataSources: {
doc: [
'{"object_type": 0, "node_id": 1, "name": "foo"}',
'{"object_type": 0, "node_id": 2, "name": "bar"}',
'{"object_type": 1, "source": 1, "target": 2}'
]
},
initOptions: {
...defaultInitOptions,
structure: {
nodeId: 'node_id',
objectType: 'object_type',
edgeSource: 'source',
edgeTarget: 'target'
}
},
showViewSettings: true
},
global: {
provide: {
tabLayout: { dataView: 'above' }
},
stubs: {
ColorPicker: true
}
}
})
const graph = wrapper.vm.graph
const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
await styleMenuItem.trigger('click')
const edgesMenuItem = wrapper.findAll('.sidebar__item')[3]
await edgesMenuItem.trigger('click')
await wrapper
.findComponent({ name: 'ColorPicker' })
.vm.$emit('colorChange', '#ff00ff')
expect(graph.export().edges[0].attributes.labelColor).to.equal('#ff00ff')
wrapper.unmount()
})
it('sets edge size', async () => {
const wrapper = mount(GraphEditor, {
attachTo: document.body,
props: {
dataSources: {
doc: [
'{"object_type": 0, "node_id": 1}',
'{"object_type": 0, "node_id": 2}',
'{"object_type": 1, "source": 1, "target": 2, "weight": 1}',
'{"object_type": 1, "source": 2, "target": 1, "weight": 15}'
]
},
initOptions: {
...defaultInitOptions,
structure: {
nodeId: 'node_id',
objectType: 'object_type',
edgeSource: 'source',
edgeTarget: 'target'
}
},
showViewSettings: true
},
global: {
provide: {
tabLayout: { dataView: 'above' }
}
}
})
const graph = wrapper.vm.graph
const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
await styleMenuItem.trigger('click')
const edgeMenuItem = wrapper.findAll('.sidebar__item')[3]
await edgeMenuItem.trigger('click')
// Set constant size = 50
const sizeInput = wrapper.find('.test_edge_size_value input')
await sizeInput.setValue(50)
sizeInput.wrapperElement.dispatchEvent(new Event('blur', { bubbles: true }))
// Call nextTick after setting number input,
// otherwise the value will be changed beck to initial for some reason
await nextTick()
expect(graph.export().edges[0].attributes.size).to.equal(50)
expect(graph.export().edges[1].attributes.size).to.equal(50)
// Switch to Variable
const variable = wrapper.findAll('.test_edge_size .radio-block__option')[1]
await variable.trigger('click')
// Select points as size source
await wrapper
.find('.test_edge_size_value .dropdown-container .Select__indicator')
.wrapperElement.dispatchEvent(
new MouseEvent('mousedown', { bubbles: true })
)
await wrapper.findAll('.Select__menu .Select__option')[4].trigger('click')
expect(graph.export().edges[0].attributes.size).to.equal(1)
expect(graph.export().edges[1].attributes.size).to.equal(15)
// Set size scale
const sizeScale = wrapper.find('.test_edge_size_scale input')
sizeScale.wrapperElement.value = 4
sizeScale.wrapperElement.dispatchEvent(new Event('blur', { bubbles: true }))
await nextTick()
expect(graph.export().edges[0].attributes.size).to.equal(4)
expect(graph.export().edges[1].attributes.size).to.equal(60)
// Set min
const sizeMin = wrapper.find('.test_edge_size_min input')
await sizeMin.setValue(12)
sizeMin.wrapperElement.dispatchEvent(new Event('blur', { bubbles: true }))
await nextTick()
expect(graph.export().edges[0].attributes.size).to.equal(12)
expect(graph.export().edges[1].attributes.size).to.equal(60)
// Switch to Constant
const constant = wrapper.findAll('.test_edge_size .radio-block__option')[0]
await constant.trigger('click')
// The latest settings from constant mode are applied
expect(graph.export().edges[0].attributes.size).to.equal(50)
expect(graph.export().edges[1].attributes.size).to.equal(50)
wrapper.unmount()
})
it('sets edge color', async () => {
const wrapper = mount(GraphEditor, {
attachTo: document.body,
props: {
dataSources: {
doc: [
'{"type": 0, "node_id": 1}',
'{"type": 0, "node_id": 2}',
'{"type": 0, "node_id": 3}',
'{"type": 1, "source": 1, "target": 3, "color": "#ff0000", "weight": 1}',
'{"type": 1, "source": 2, "target": 3, "color": "#abcdff", "weight": 5}',
'{"type": 1, "source": 1, "target": 2, "color": "#123456", "weight": 10}'
]
},
initOptions: {
...defaultInitOptions,
structure: {
nodeId: 'node_id',
objectType: 'type',
edgeSource: 'source',
edgeTarget: 'target'
}
},
showViewSettings: true
},
global: {
provide: {
tabLayout: { dataView: 'above' }
},
stubs: {
ColorPicker: true
}
}
})
const graph = wrapper.vm.graph
const styleMenuItem = wrapper.findAll('.sidebar__group__title')[1]
await styleMenuItem.trigger('click')
const edgesMenuItem = wrapper.findAll('.sidebar__item')[3]
await edgesMenuItem.trigger('click')
// Set constant color
await wrapper
.findAllComponents({ name: 'ColorPicker' })[1]
.vm.$emit('colorChange', '#ff00ff')
expect(graph.export().edges[0].attributes.color).to.equal('#ff00ff')
expect(graph.export().edges[1].attributes.color).to.equal('#ff00ff')
expect(graph.export().edges[2].attributes.color).to.equal('#ff00ff')
// Switch to Variable
const variable = wrapper.findAll('.test_edge_color .radio-block__option')[1]
await variable.trigger('click')
// Select "weight" as color source
await wrapper
.find('.test_edge_color_value .dropdown-container .Select__indicator')
.wrapperElement.dispatchEvent(
new MouseEvent('mousedown', { bubbles: true })
)
await wrapper.findAll('.Select__menu .Select__option')[5].trigger('click')
expect(graph.export().edges[0].attributes.color).to.equal('#fafa6e')
expect(graph.export().edges[1].attributes.color).to.equal('#bdea75')
expect(graph.export().edges[2].attributes.color).to.equal('#86d780')
// Set Color as to Continious
await wrapper
.findAll('.test_edge_color_as .radio-block__option')[0]
.trigger('click')
expect(graph.export().edges[0].attributes.color).to.equal('#fafa6e')
expect(graph.export().edges[1].attributes.color).to.equal('#39b48d')
expect(graph.export().edges[2].attributes.color).to.equal('#2a4858')
await nextTick()
// Change colorscale direction
await wrapper
.findAll('.test_edge_color_colorscale_direction .radio-block__option')[1]
.trigger('click')
expect(graph.export().edges[0].attributes.color).to.equal('#2a4858')
expect(graph.export().edges[1].attributes.color).to.equal('#139f8e')
expect(graph.export().edges[2].attributes.color).to.equal('#fafa6e')
await nextTick()
// Clear color source
await wrapper
.find('.test_edge_color_value .dropdown-container .Select__indicator')
.wrapperElement.dispatchEvent(
new MouseEvent('mousedown', { bubbles: true })
)
// Select "color" as color source
await wrapper
.find('.test_edge_color_value .dropdown-container .Select__indicator')
.wrapperElement.dispatchEvent(
new MouseEvent('mousedown', { bubbles: true })
)
await wrapper.findAll('.Select__menu .Select__option')[4].trigger('click')
// Select Direct mapping
await wrapper
.find('.test_edge_color_mapping_mode .radio-block__option')
.trigger('click')
expect(graph.export().edges[0].attributes.color).to.equal('#ff0000')
expect(graph.export().edges[1].attributes.color).to.equal('#abcdff')
expect(graph.export().edges[2].attributes.color).to.equal('#123456')
// Switch to Constant
const constant = wrapper.findAll('.test_edge_color .radio-block__option')[0]
await constant.trigger('click')
// The latest settings from constant mode are applied
expect(graph.export().edges[0].attributes.color).to.equal('#ff00ff')
expect(graph.export().edges[1].attributes.color).to.equal('#ff00ff')
expect(graph.export().edges[2].attributes.color).to.equal('#ff00ff')
wrapper.unmount()
})
})

7
tests/views/MainView/Workspace/Tabs/Tab/DataView/Chart/Chart.spec.js
View File

@@ -210,7 +210,8 @@ describe('Chart.vue', () => {
const wrapper = mount(Chart, {
attachTo: document.body,
props: {
dataSources: null
dataSources: null,
showViewSettings: false
},
global: {
mocks: { $store }
@@ -222,7 +223,7 @@ describe('Chart.vue', () => {
await nextTick()
const plot = wrapper.find('.svg-container').wrapperElement
await flushPromises()
const initialPlotWidth = plot.scrollWidth
const initialPlotHeight = plot.scrollHeight
@@ -235,7 +236,7 @@ describe('Chart.vue', () => {
await flushPromises()
expect(plot.scrollWidth).not.to.equal(initialPlotWidth)
expect(plot.scrollHeight).not.to.equal(initialPlotHeight)
expect(plot.scrollHeight).to.equal(initialPlotHeight)
expect(wrapper.find('.plotly_editor .editor_controls').exists()).to.equal(
true
)

5
tests/views/MainView/Workspace/Tabs/Tab/DataView/DataView.spec.js
View File

@@ -195,6 +195,11 @@ describe('DataView.vue', () => {
const graphBtn = wrapper.findComponent({ ref: 'graphBtn' })
await graphBtn.trigger('click')
// Save as png is disabled because there is no data
expect(pngBtn.attributes('disabled')).to.not.equal(undefined)
await wrapper.setProps({ dataSource: { doc: [] } })
// Find graph and stub the method
const graph = wrapper.findComponent({ name: 'graph' }).vm
sinon.stub(graph, 'saveAsPng').callsFake(() => {

294
tests/views/MainView/Workspace/Tabs/Tab/DataView/Graph/Graph.spec.js Normal file
View File

@@ -0,0 +1,294 @@
import { expect } from 'chai'
import sinon from 'sinon'
import { mount, flushPromises } from '@vue/test-utils'
import Graph from '@/views/MainView/Workspace/Tabs/Tab/DataView/Graph/index.vue'
describe('Graph.vue', () => {
const $store = { state: { isWorkspaceVisible: true } }
afterEach(() => {
sinon.restore()
})
it('shows message when no data', () => {
const wrapper = mount(Graph, {
global: {
stubs: {
GraphEditor: true
}
},
attachTo: document.body
})
expect(wrapper.find('.no-data').isVisible()).to.equal(true)
expect(wrapper.find('.invalid-data').isVisible()).to.equal(false)
wrapper.unmount()
})
it('shows message when data is invalid', () => {
const wrapper = mount(Graph, {
props: {
dataSources: {
column1: ['value1', 'value2']
}
},
global: {
stubs: {
GraphEditor: true
}
},
attachTo: document.body
})
expect(wrapper.find('.no-data').isVisible()).to.equal(false)
expect(wrapper.find('.invalid-data').isVisible()).to.equal(true)
wrapper.unmount()
})
it('emits update when graph editor updates', async () => {
const wrapper = mount(Graph, {
global: {
stubs: {
GraphEditor: true
}
}
})
wrapper.findComponent({ ref: 'graphEditor' }).vm.$emit('update')
expect(wrapper.emitted('update')).to.have.lengthOf(1)
})
it('the graph resizes when the container resizes', async () => {
const wrapper = mount(Graph, {
attachTo: document.body,
props: {
dataSources: {
doc: [
'{"object_type":0,"node_id":"Gryffindor"}',
'{"object_type":0,"node_id":"Hufflepuff"}'
]
},
initOptions: {
structure: {
nodeId: 'node_id',
objectType: 'object_type',
edgeSource: 'source',
edgeTarget: 'target'
},
style: {
backgroundColor: 'white',
nodes: {
size: {
type: 'constant',
value: 10
},
color: {
type: 'constant',
value: '#1F77B4'
},
label: {
source: null,
color: '#444444'
}
},
edges: {
showDirection: true,
size: {
type: 'constant',
value: 2
},
color: {
type: 'constant',
value: '#a2b1c6'
},
label: {
source: null,
color: '#a2b1c6'
}
}
},
layout: {
type: 'circular',
options: null
}
}
},
global: {
mocks: { $store },
provide: {
tabLayout: { dataView: 'above' }
}
}
})
const container =
wrapper.find('.graph-container').wrapperElement.parentElement
const canvas = wrapper.find('canvas.sigma-nodes').wrapperElement
const initialContainerWidth = container.scrollWidth
const initialContainerHeight = container.scrollHeight
const initialCanvasWidth = canvas.scrollWidth
const initialCanvasHeight = canvas.scrollHeight
const newContainerWidth = initialContainerWidth * 2 || 1000
const newContainerHeight = initialContainerHeight * 2 || 2000
container.style.width = `${newContainerWidth}px`
container.style.height = `${newContainerHeight}px`
await flushPromises()
expect(canvas.scrollWidth).not.to.equal(initialCanvasWidth)
expect(canvas.scrollHeight).not.to.equal(initialCanvasHeight)
wrapper.unmount()
})
it('saveAsPng', async () => {
const wrapper = mount(Graph, {
props: {
dataSources: {
doc: [
'{"object_type":0,"node_id":"Gryffindor"}',
'{"object_type":0,"node_id":"Hufflepuff"}'
]
},
initOptions: {
structure: {
nodeId: 'node_id',
objectType: 'object_type',
edgeSource: 'source',
edgeTarget: 'target'
},
style: {
backgroundColor: 'white',
nodes: {
size: {
type: 'constant',
value: 10
},
color: {
type: 'constant',
value: '#1F77B4'
},
label: {
source: null,
color: '#444444'
}
},
edges: {
showDirection: true,
size: {
type: 'constant',
value: 2
},
color: {
type: 'constant',
value: '#a2b1c6'
},
label: {
source: null,
color: '#a2b1c6'
}
}
},
layout: {
type: 'circular',
options: null
}
}
},
global: {
mocks: { $store },
provide: {
tabLayout: { dataView: 'above' }
}
}
})
sinon.stub(wrapper.vm.$refs.graphEditor, 'saveAsPng')
await wrapper.vm.saveAsPng()
expect(wrapper.emitted().loadingImageCompleted.length).to.equal(1)
})
it('hides and shows controls depending on showViewSettings and resizes the graph', async () => {
const wrapper = mount(Graph, {
attachTo: document.body,
props: {
dataSources: {
doc: [
'{"object_type":0,"node_id":"Gryffindor"}',
'{"object_type":0,"node_id":"Hufflepuff"}'
]
},
initOptions: {
structure: {
nodeId: 'node_id',
objectType: 'object_type',
edgeSource: 'source',
edgeTarget: 'target'
},
style: {
backgroundColor: 'white',
nodes: {
size: {
type: 'constant',
value: 10
},
color: {
type: 'constant',
value: '#1F77B4'
},
label: {
source: null,
color: '#444444'
}
},
edges: {
showDirection: true,
size: {
type: 'constant',
value: 2
},
color: {
type: 'constant',
value: '#a2b1c6'
},
label: {
source: null,
color: '#a2b1c6'
}
}
},
layout: {
type: 'circular',
options: null
}
}
},
global: {
mocks: { $store },
provide: {
tabLayout: { dataView: 'above' }
}
}
})
const canvas = wrapper.find('canvas.sigma-nodes').wrapperElement
const initialPlotWidth = canvas.scrollWidth
const initialPlotHeight = canvas.scrollHeight
expect(
wrapper.find('.plotly_editor .editor_controls').isVisible()
).to.equal(false)
await wrapper.setProps({ showViewSettings: true })
await flushPromises()
expect(canvas.scrollWidth).not.to.equal(initialPlotWidth)
expect(canvas.scrollHeight).to.equal(initialPlotHeight)
expect(
wrapper.find('.plotly_editor .editor_controls').isVisible()
).to.equal(true)
wrapper.unmount()
})
})