OneTeam/don_confiao_frontend
16
0
Fork 0
Code Issues 6 Pull Requests 2 Actions Packages Projects Releases 8 Wiki Activity

#49 feat: gráficos de provenance (proveedores-organizaciones y territorios) en el resumen público

Browse Source
This commit is contained in:
monomono
2026-08-15 17:27:53 -05:00
parent efa666dcb3
commit 4ecfb64118
13 changed files with 725 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/PublicOrderSummary.vue
View File

@@ -40,6 +40,10 @@
<OrderLines :lines="purchase.lines" />
<v-divider class="my-3" />
<OrderTotal :total="calculateTotal(purchase.lines)" />
<ProvenanceSection
v-if="purchase.product_provenance?.length"
:provenance="purchase.product_provenance"
/>
</v-card-text>
</v-card>
</div>
@@ -51,6 +55,7 @@
import OrderLines from '@/components/order/OrderLines.vue'
import OrderPayment from '@/components/order/OrderPayment.vue'
import OrderTotal from '@/components/order/OrderTotal.vue'
import ProvenanceSection from '@/components/provenance/ProvenanceSection.vue'
defineProps({
purchase: {

95
src/components/provenance/ProductSupplierOrganizationChart.vue Normal file
View File

@@ -0,0 +1,95 @@
<template>
<div>
<v-alert
v-if="!hasRelations"
class="my-4"
type="info"
variant="tonal"
>
La información de proveedores y organizaciones de este pedido estará
disponible próximamente.
</v-alert>
<CytoscapeChart
v-else
data-test="supplier-org-chart"
:elements="elements"
:height="height"
:layout="layout"
:styles="styles"
@select="onSelect"
/>
<ProvenanceDetailModal
:selected="selected"
:visible="modalVisible"
@update:visible="modalVisible = $event"
/>
</div>
</template>
<script setup>
import { computed, ref } from 'vue'
import CytoscapeChart from '@/components/graph/CytoscapeChart.vue'
import { toCytoscapeElements } from '@/services/graph/graph-layout'
import ProvenanceDetailModal from './ProvenanceDetailModal.vue'
import { buildSupplierOrganizationGraph, hasAnySupplier } from './provenance-graph'
const props = defineProps({
provenance: {
type: Array,
default: () => [],
},
})
const graph = computed(() => buildSupplierOrganizationGraph(props.provenance))
const hasRelations = computed(() => hasAnySupplier(props.provenance))
const elements = computed(() => toCytoscapeElements(graph.value))
const height = computed(() => graph.value.height + 60)
const selected = ref(null)
const modalVisible = ref(false)
const styles = [
{
selector: 'node',
style: {
'background-color': '#cfd8dc',
'border-color': '#90a4ae',
'border-width': 1,
color: '#263238',
'font-size': 12,
'font-family': 'sans-serif',
'text-valign': 'bottom',
'text-halign': 'center',
'text-wrap': 'wrap',
'text-max-width': 110,
shape: 'round-rectangle',
width: 120,
height: 40,
padding: 6,
},
},
{ selector: 'node.product', style: { 'background-color': '#26a69a', 'border-color': '#00796b' } },
{ selector: 'node.supplier', style: { 'background-color': '#42a5f5', 'border-color': '#1565c0' } },
{ selector: 'node.organization', style: { 'background-color': '#ffb74d', 'border-color': '#e65100' } },
{ selector: 'node.has-image', style: { 'background-image': 'data(image)', 'background-fit': 'cover', 'background-clip': 'none' } },
{
selector: 'edge',
style: {
'curve-style': 'bezier',
'target-arrow-shape': 'triangle',
'target-arrow-color': '#90a4ae',
'line-color': '#90a4ae',
width: 2,
},
},
]
const layout = { name: 'preset' }
function onSelect (nodeData) {
selected.value = nodeData
modalVisible.value = true
}
</script>

97
src/components/provenance/ProductTerritoryChart.vue Normal file
View File

@@ -0,0 +1,97 @@
<template>
<div>
<v-alert
v-if="!hasRelations"
class="my-4"
type="info"
variant="tonal"
>
La información de municipio, departamento y país de este pedido estará
disponible próximamente.
</v-alert>
<CytoscapeChart
v-else
data-test="territory-chart"
:elements="elements"
:height="height"
:layout="layout"
:styles="styles"
@select="onSelect"
/>
<ProvenanceDetailModal
:selected="selected"
:visible="modalVisible"
@update:visible="modalVisible = $event"
/>
</div>
</template>
<script setup>
import { computed, ref } from 'vue'
import CytoscapeChart from '@/components/graph/CytoscapeChart.vue'
import { toCytoscapeElements } from '@/services/graph/graph-layout'
import ProvenanceDetailModal from './ProvenanceDetailModal.vue'
import { buildTerritoryGraph, hasAnyTerritory } from './provenance-graph'
const props = defineProps({
provenance: {
type: Array,
default: () => [],
},
})
const graph = computed(() => buildTerritoryGraph(props.provenance))
const hasRelations = computed(() => hasAnyTerritory(props.provenance))
const elements = computed(() => toCytoscapeElements(graph.value))
const height = computed(() => graph.value.height + 60)
const selected = ref(null)
const modalVisible = ref(false)
const styles = [
{
selector: 'node',
style: {
'background-color': '#cfd8dc',
'border-color': '#90a4ae',
'border-width': 1,
color: '#263238',
'font-size': 12,
'font-family': 'sans-serif',
'text-valign': 'bottom',
'text-halign': 'center',
'text-wrap': 'wrap',
'text-max-width': 110,
shape: 'round-rectangle',
width: 120,
height: 40,
padding: 6,
},
},
{ selector: 'node.product', style: { 'background-color': '#26a69a', 'border-color': '#00796b' } },
{ selector: 'node.supplier', style: { 'background-color': '#42a5f5', 'border-color': '#1565c0' } },
{ selector: 'node.municipality', style: { 'background-color': '#66bb6a', 'border-color': '#2e7d32' } },
{ selector: 'node.department', style: { 'background-color': '#5c6bc0', 'border-color': '#283593' } },
{ selector: 'node.country', style: { 'background-color': '#ab47bc', 'border-color': '#6a1b9a' } },
{ selector: 'node.has-image', style: { 'background-image': 'data(image)', 'background-fit': 'cover', 'background-clip': 'none' } },
{
selector: 'edge',
style: {
'curve-style': 'bezier',
'target-arrow-shape': 'triangle',
'target-arrow-color': '#90a4ae',
'line-color': '#90a4ae',
width: 2,
},
},
]
const layout = { name: 'preset' }
function onSelect (nodeData) {
selected.value = nodeData
modalVisible.value = true
}
</script>

108
src/components/provenance/ProvenanceDetailModal.vue Normal file
View File

@@ -0,0 +1,108 @@
<template>
<v-dialog
max-width="520"
:model-value="visible"
@update:model-value="onUpdateVisible"
>
<v-card v-if="selected">
<v-card-title class="d-flex align-center">
<v-icon class="mr-2" :color="kindColor" :icon="kindIcon" />
<span class="font-weight-bold">{{ kindLabel }}</span>
</v-card-title>
<v-divider />
<v-card-text>
<img
v-if="selected.image"
alt="Imagen del producto"
class="provenance-image rounded-lg border mb-3"
:src="selected.image"
>
<div class="text-h6 mb-2">{{ selected.label }}</div>
<v-list v-if="hasDetails" density="compact">
<v-list-item v-if="description">
<v-list-item-title>Descripción</v-list-item-title>
<v-list-item-subtitle>{{ description }}</v-list-item-subtitle>
</v-list-item>
<v-list-item v-if="website">
<v-list-item-title>Sitio web</v-list-item-title>
<v-list-item-subtitle>
<a :href="website" rel="noopener" target="_blank">{{ website }}</a>
</v-list-item-subtitle>
</v-list-item>
<v-list-item v-if="contactEmail">
<v-list-item-title>Correo de contacto</v-list-item-title>
<v-list-item-subtitle>{{ contactEmail }}</v-list-item-subtitle>
</v-list-item>
<v-list-item v-if="contactPhone">
<v-list-item-title>Teléfono de contacto</v-list-item-title>
<v-list-item-subtitle>{{ contactPhone }}</v-list-item-subtitle>
</v-list-item>
</v-list>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn variant="text" @click="close">Cerrar</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
visible: {
type: Boolean,
default: false,
},
selected: {
type: Object,
default: null,
},
})
const emit = defineEmits(['update:visible'])
const KIND_INFO = {
product: { label: 'Producto', icon: 'mdi-package-variant', color: 'teal' },
supplier: { label: 'Proveedor', icon: 'mdi-truck', color: 'blue' },
organization: { label: 'Organización', icon: 'mdi-domain', color: 'orange' },
municipality: { label: 'Municipio', icon: 'mdi-map-marker', color: 'green' },
department: { label: 'Departamento', icon: 'mdi-map', color: 'indigo' },
country: { label: 'País', icon: 'mdi-earth', color: 'purple' },
}
const kindInfo = computed(() => {
return KIND_INFO[props.selected?.kind] || KIND_INFO.product
})
const kindLabel = computed(() => kindInfo.value.label)
const kindIcon = computed(() => kindInfo.value.icon)
const kindColor = computed(() => kindInfo.value.color)
const entity = computed(() => props.selected?.entity || {})
const description = computed(() => entity.value.description || '')
const website = computed(() => entity.value.website || '')
const contactEmail = computed(() => entity.value.contact_email || '')
const contactPhone = computed(() => entity.value.contact_phone || '')
const hasDetails = computed(() => {
return description.value || website.value || contactEmail.value || contactPhone.value
})
function onUpdateVisible (value) {
emit('update:visible', value)
}
function close () {
emit('update:visible', false)
}
</script>
<style scoped>
.provenance-image {
display: block;
max-height: 220px;
max-width: 100%;
object-fit: contain;
}
</style>

29
src/components/provenance/ProvenanceSection.vue Normal file
View File

@@ -0,0 +1,29 @@
<template>
<div v-if="provenance && provenance.length > 0">
<v-divider class="my-4" />
<h3 class="text-h6 font-weight-bold mb-1">Origen e historia de los productos</h3>
<p class="text-body-2 text-medium-emphasis mb-4">
Conoce quiénes producen los productos que compras y de qué territorios provienen.
</p>
<h4 class="text-subtitle-1 font-weight-medium mb-2">Proveedores y organizaciones</h4>
<ProductSupplierOrganizationChart :provenance="provenance" />
<v-divider class="my-4" />
<h4 class="text-subtitle-1 font-weight-medium mb-2">Departamento y municipio</h4>
<ProductTerritoryChart :provenance="provenance" />
</div>
</template>
<script setup>
import ProductSupplierOrganizationChart from './ProductSupplierOrganizationChart.vue'
import ProductTerritoryChart from './ProductTerritoryChart.vue'
defineProps({
provenance: {
type: Array,
default: null,
},
})
</script>

25
src/services/graph/graph-layout.js
View File

@@ -51,17 +51,20 @@ export function computeColumnLayout (nodes, edges, options = {}) {
export function toCytoscapeElements ({ nodes, edges }) {
return [
...nodes.map(node => ({
data: {
id: node.id,
kind: node.kind,
label: node.label,
image: node.image || null,
entity: node.entity || null,
},
classes: [node.kind],
position: { x: node.x, y: node.y },
})),
...nodes.map(node => {
const classes = node.image ? [node.kind, 'has-image'] : [node.kind]
return {
data: {
id: node.id,
kind: node.kind,
label: node.label,
image: node.image || null,
entity: node.entity || null,
},
classes,
position: { x: node.x, y: node.y },
}
}),
...edges.map(edge => ({
data: {
id: `edge:${edge.from}:${edge.to}`,

36
tests/unit/components/PublicOrderSummary.spec.js
View File

@@ -6,8 +6,15 @@ import OrderCustomer from '@/components/order/OrderCustomer.vue'
import OrderLines from '@/components/order/OrderLines.vue'
import OrderTotal from '@/components/order/OrderTotal.vue'
import OrderPayment from '@/components/order/OrderPayment.vue'
import ProvenanceSection from '@/components/provenance/ProvenanceSection.vue'
import vuetify from '@/plugins/vuetify'
const ProvenanceSectionStub = {
name: 'ProvenanceSection',
props: ['provenance'],
template: '<div data-test="provenance-section" />',
}
const saleData = {
id: 5,
code: 'abc123',
@@ -33,7 +40,10 @@ const catalogData = {
function mountSummary (props) {
return mount(PublicOrderSummary, {
props,
global: { plugins: [vuetify] },
global: {
plugins: [vuetify],
stubs: { ProvenanceSection: ProvenanceSectionStub },
},
})
}
@@ -87,4 +97,28 @@ describe('PublicOrderSummary', () => {
expect(wrapper.text()).not.toContain('Camilo')
expect(wrapper.findComponent(OrderLines).exists()).toBe(false)
})
it('no renderiza la sección de provenance cuando la respuesta no la incluye', () => {
const wrapper = mountSummary({ purchase: saleData })
expect(wrapper.findComponent(ProvenanceSection).exists()).toBe(false)
})
it('renderiza la sección de provenance cuando el resumen la incluye', () => {
const withProvenance = {
...saleData,
product_provenance: [
{
product: { id: 10, name: 'Panela' },
suppliers: [{ supplier: { id: 5, name: 'La Mesa' }, organization: { id: 3, name: 'Red' }, municipality: { id: 7, name: 'La Mesa' }, department: { id: 2, name: 'Cundinamarca' }, country: { id: 1, name: 'Colombia', code: 'CO' } }],
},
],
}
const wrapper = mountSummary({ purchase: withProvenance })
expect(wrapper.findComponent(ProvenanceSection).exists()).toBe(true)
expect(wrapper.findComponent(ProvenanceSection).props('provenance')).toEqual(
withProvenance.product_provenance
)
})
})

3
tests/unit/components/graph/CytoscapeChart.spec.js
View File

@@ -1,3 +1,4 @@
import cytoscape from 'cytoscape'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import CytoscapeChart from '@/components/graph/CytoscapeChart.vue'
@@ -17,8 +18,6 @@ vi.mock('cytoscape', () => ({
default: vi.fn(() => cy),
}))
import cytoscape from 'cytoscape'
const elements = [
{ data: { id: 'product:1', kind: 'product', label: 'Panela' }, position: { x: 100, y: 100 } },
{ data: { id: 'supplier:5', kind: 'supplier', label: 'La Mesa' }, position: { x: 320, y: 100 } },

87
tests/unit/components/provenance/ProductSupplierOrganizationChart.spec.js Normal file
View File

@@ -0,0 +1,87 @@
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import CytoscapeChart from '@/components/graph/CytoscapeChart.vue'
import ProvenanceDetailModal from '@/components/provenance/ProvenanceDetailModal.vue'
import ProductSupplierOrganizationChart from '@/components/provenance/ProductSupplierOrganizationChart.vue'
import vuetify from '@/plugins/vuetify'
const cy = {
on: vi.fn(),
elements: vi.fn(() => ({ remove: vi.fn() })),
add: vi.fn(),
layout: vi.fn(() => ({ run: vi.fn() })),
destroy: vi.fn(),
}
vi.mock('cytoscape', () => ({
default: vi.fn(() => cy),
}))
const provenance = [
{
product: {
id: 1,
name: 'Panela regional por Kg',
catalogue_images: ['http://localhost/media/panela.jpg'],
},
suppliers: [
{
supplier: { id: 5, name: 'Asociación Agropecuaria La Mesa', description: 'Cooperativa' },
organization: { id: 3, name: 'Red de Economía Solidaria', description: 'Red' },
municipality: null,
department: null,
country: null,
},
],
},
]
function mountChart (props = {}) {
return mount(ProductSupplierOrganizationChart, {
props: { provenance, ...props },
global: { plugins: [vuetify] },
})
}
describe('ProductSupplierOrganizationChart', () => {
beforeEach(() => {
vi.clearAllMocks()
})
it('renderiza el gráfico con los elementos de productos, proveedores y organizaciones', () => {
const wrapper = mountChart()
const chart = wrapper.findComponent(CytoscapeChart)
expect(chart.exists()).toBe(true)
const elements = chart.props('elements')
const nodeIds = elements.filter(e => e.data.source === undefined).map(e => e.data.id)
expect(nodeIds).toContain('product:1')
expect(nodeIds).toContain('supplier:5')
expect(nodeIds).toContain('organization:3')
})
it('no muestra mensaje de próximamente cuando existen relaciones', () => {
const wrapper = mountChart()
expect(wrapper.text()).not.toContain('próximamente')
})
it('muestra mensaje de próximamente cuando ningún producto tiene proveedores', () => {
const wrapper = mountChart({
provenance: [{ product: { id: 1, name: 'Panela' }, suppliers: [] }],
})
expect(wrapper.findComponent(CytoscapeChart).exists()).toBe(false)
expect(wrapper.text()).toContain('próximamente')
})
it('abre el modal de detalle al seleccionar un nodo', async () => {
const wrapper = mountChart()
const chart = wrapper.findComponent(CytoscapeChart)
await chart.vm.$emit('select', { kind: 'supplier', label: 'Asociación Agropecuaria La Mesa', entity: { kind: 'supplier' } })
expect(wrapper.findComponent(ProvenanceDetailModal).props('visible')).toBe(true)
expect(document.body.textContent).toContain('Asociación Agropecuaria La Mesa')
})
})

84
tests/unit/components/provenance/ProductTerritoryChart.spec.js Normal file
View File

@@ -0,0 +1,84 @@
import { beforeEach, describe, expect, it, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import CytoscapeChart from '@/components/graph/CytoscapeChart.vue'
import ProvenanceDetailModal from '@/components/provenance/ProvenanceDetailModal.vue'
import ProductTerritoryChart from '@/components/provenance/ProductTerritoryChart.vue'
import vuetify from '@/plugins/vuetify'
const cy = {
on: vi.fn(),
elements: vi.fn(() => ({ remove: vi.fn() })),
add: vi.fn(),
layout: vi.fn(() => ({ run: vi.fn() })),
destroy: vi.fn(),
}
vi.mock('cytoscape', () => ({
default: vi.fn(() => cy),
}))
const provenance = [
{
product: { id: 1, name: 'Panela regional por Kg' },
suppliers: [
{
supplier: { id: 5, name: 'Asociación Agropecuaria La Mesa' },
organization: null,
municipality: { id: 7, name: 'La Mesa' },
department: { id: 2, name: 'Cundinamarca' },
country: { id: 1, name: 'Colombia', code: 'CO' },
},
],
},
]
function mountChart (props = {}) {
return mount(ProductTerritoryChart, {
props: { provenance, ...props },
global: { plugins: [vuetify] },
})
}
describe('ProductTerritoryChart', () => {
beforeEach(() => {
vi.clearAllMocks()
})
it('renderiza el gráfico con municipio, departamento y país', () => {
const wrapper = mountChart()
const chart = wrapper.findComponent(CytoscapeChart)
expect(chart.exists()).toBe(true)
const elements = chart.props('elements')
const nodeIds = elements.filter(e => e.data.source === undefined).map(e => e.data.id)
expect(nodeIds).toContain('product:1')
expect(nodeIds).toContain('supplier:5')
expect(nodeIds).toContain('municipality:7')
expect(nodeIds).toContain('department:2')
expect(nodeIds).toContain('country:1')
})
it('muestra mensaje de próximamente cuando ningún proveedor tiene territorio', () => {
const wrapper = mountChart({
provenance: [
{
product: { id: 1, name: 'Panela' },
suppliers: [{ supplier: { id: 5, name: 'La Mesa' }, municipality: null, department: null, country: null }],
},
],
})
expect(wrapper.findComponent(CytoscapeChart).exists()).toBe(false)
expect(wrapper.text()).toContain('próximamente')
})
it('abre el modal de detalle al seleccionar un municipio', async () => {
const wrapper = mountChart()
const chart = wrapper.findComponent(CytoscapeChart)
await chart.vm.$emit('select', { kind: 'municipality', label: 'La Mesa', entity: { kind: 'municipality', name: 'La Mesa' } })
expect(wrapper.findComponent(ProvenanceDetailModal).props('visible')).toBe(true)
expect(document.body.textContent).toContain('La Mesa')
})
})

88
tests/unit/components/provenance/ProvenanceDetailModal.spec.js Normal file
View File

@@ -0,0 +1,88 @@
import { describe, expect, it } from 'vitest'
import { mount } from '@vue/test-utils'
import ProvenanceDetailModal from '@/components/provenance/ProvenanceDetailModal.vue'
import vuetify from '@/plugins/vuetify'
const supplier = {
id: 'supplier:5',
kind: 'supplier',
label: 'Asociación Agropecuaria La Mesa',
image: null,
entity: {
id: 5,
name: 'Asociación Agropecuaria La Mesa',
description: 'Cooperativa de campesinos',
website: 'https://agro.example.org',
contact_email: 'contacto@agro.example.org',
contact_phone: '300 123 4567',
kind: 'supplier',
},
}
const product = {
id: 'product:1',
kind: 'product',
label: 'Panela regional por Kg',
image: 'http://localhost/media/panela.jpg',
entity: { id: 1, name: 'Panela regional por Kg', kind: 'product' },
}
function mountModal (props) {
return mount(ProvenanceDetailModal, {
props,
global: { plugins: [vuetify] },
})
}
function bodyText () {
return document.body.textContent
}
describe('ProvenanceDetailModal', () => {
it('muestra la información detallada del proveedor seleccionado', () => {
mountModal({ visible: true, selected: supplier })
expect(bodyText()).toContain('Proveedor')
expect(bodyText()).toContain('Asociación Agropecuaria La Mesa')
expect(bodyText()).toContain('Cooperativa de campesinos')
expect(bodyText()).toContain('https://agro.example.org')
expect(bodyText()).toContain('contacto@agro.example.org')
expect(bodyText()).toContain('300 123 4567')
})
it('muestra la imagen del producto cuando existe', () => {
mountModal({ visible: true, selected: product })
expect(document.querySelector('img').getAttribute('src')).toBe(
'http://localhost/media/panela.jpg'
)
})
it('no muestra contenido cuando no hay entidad seleccionada', () => {
mountModal({ visible: true, selected: null })
expect(bodyText()).not.toContain('Proveedor')
expect(bodyText()).not.toContain('Asociación')
})
it('no muestra el diálogo cuando visible es false', () => {
mountModal({ visible: false, selected: supplier })
expect(bodyText()).not.toContain('Asociación Agropecuaria La Mesa')
})
it('omite los campos vacíos', () => {
const minimal = {
id: 'country:1',
kind: 'country',
label: 'Colombia',
image: null,
entity: { id: 1, name: 'Colombia', kind: 'country' },
}
mountModal({ visible: true, selected: minimal })
expect(bodyText()).toContain('Colombia')
expect(bodyText()).not.toContain('Descripción')
expect(bodyText()).not.toContain('Sitio web')
})
})

72
tests/unit/components/provenance/ProvenanceSection.spec.js Normal file
View File

@@ -0,0 +1,72 @@
import { describe, expect, it, vi } from 'vitest'
import { mount } from '@vue/test-utils'
import ProductSupplierOrganizationChart from '@/components/provenance/ProductSupplierOrganizationChart.vue'
import ProductTerritoryChart from '@/components/provenance/ProductTerritoryChart.vue'
import ProvenanceSection from '@/components/provenance/ProvenanceSection.vue'
import vuetify from '@/plugins/vuetify'
const cy = {
on: vi.fn(),
elements: vi.fn(() => ({ remove: vi.fn() })),
add: vi.fn(),
layout: vi.fn(() => ({ run: vi.fn() })),
destroy: vi.fn(),
}
vi.mock('cytoscape', () => ({
default: vi.fn(() => cy),
}))
const provenance = [
{
product: { id: 1, name: 'Panela regional por Kg' },
suppliers: [
{
supplier: { id: 5, name: 'Asociación La Mesa' },
organization: { id: 3, name: 'Red de Economía Solidaria' },
municipality: { id: 7, name: 'La Mesa' },
department: { id: 2, name: 'Cundinamarca' },
country: { id: 1, name: 'Colombia', code: 'CO' },
},
],
},
]
function mountSection (props = {}) {
return mount(ProvenanceSection, {
props: { provenance, ...props },
global: { plugins: [vuetify] },
})
}
describe('ProvenanceSection', () => {
it('no renderiza nada cuando no hay provenance', () => {
const wrapper = mountSection({ provenance: null })
expect(wrapper.findComponent(ProductSupplierOrganizationChart).exists()).toBe(false)
expect(wrapper.findComponent(ProductTerritoryChart).exists()).toBe(false)
})
it('no renderiza nada cuando provenance es una lista vacía', () => {
const wrapper = mountSection({ provenance: [] })
expect(wrapper.findComponent(ProductSupplierOrganizationChart).exists()).toBe(false)
expect(wrapper.findComponent(ProductTerritoryChart).exists()).toBe(false)
})
it('muestra los dos gráficos con sus títulos cuando hay provenance', () => {
const wrapper = mountSection()
expect(wrapper.findComponent(ProductSupplierOrganizationChart).exists()).toBe(true)
expect(wrapper.findComponent(ProductTerritoryChart).exists()).toBe(true)
expect(wrapper.text()).toContain('Proveedores y organizaciones')
expect(wrapper.text()).toContain('Departamento y municipio')
})
it('pasa el provenance a ambos gráficos', () => {
const wrapper = mountSection()
expect(wrapper.findComponent(ProductSupplierOrganizationChart).props('provenance')).toStrictEqual(provenance)
expect(wrapper.findComponent(ProductTerritoryChart).props('provenance')).toStrictEqual(provenance)
})
})

10
tests/unit/services/graph/graph-layout.spec.js
View File

@@ -87,4 +87,14 @@ describe('toCytoscapeElements', () => {
expect(elements[0].data.entity).toEqual({ name: 'Panela', price: 3000 })
})
it('agrega la clase has-image a los nodos con imagen', () => {
const withImage = [
{ id: 'product:1', kind: 'product', label: 'Panela', image: 'http://x/panela.jpg' },
]
const layout = computeColumnLayout(withImage, [], { columnOf, columnWidth: 200, rowHeight: 80, padding: 20 })
const elements = toCytoscapeElements(layout)
expect(elements[0].classes).toContain('has-image')
})
})