#49 feat: desplegable en seccion de provenance con leyenda de colores y titulo sin historia

tests/unit/components/provenance/ProvenanceGraph.spec.js

@@ -44,7 +44,7 @@ function visChart (wrapper) {
 }
 
 function checkbox (wrapper, label) {
-  return wrapper.findAllComponents({ name: 'VCheckbox' }).find(cb => cb.props('label') === label)
+  return wrapper.findAllComponents({ name: 'VCheckbox' }).find(cb => cb.text().trim() === label)
 }
 
 async function setKinds (wrapper, kinds) {
@@ -75,10 +75,20 @@ describe('ProvenanceGraph', () => {
   it('muestra un checkbox por cada nivel con productos y proveedores activos', () => {
     const wrapper = mountGraph()
 
-    const labels = wrapper.findAllComponents({ name: 'VCheckbox' }).map(cb => cb.props('label'))
+    const labels = wrapper.findAllComponents({ name: 'VCheckbox' }).map(cb => cb.text().trim())
     expect(labels).toEqual(['Productos', 'Proveedores', 'Organizaciones', 'Municipios', 'Departamentos', 'País'])
   })
 
+  it('dibuja un círculo de color junto a cada checkbox como leyenda', () => {
+    const wrapper = mountGraph()
+
+    const dots = wrapper.findAll('.legend-dot')
+    expect(dots).toHaveLength(6)
+    expect(dots[0].element.style.backgroundColor).toBe('rgb(38, 166, 154)')
+    expect(dots[1].element.style.backgroundColor).toBe('rgb(66, 165, 245)')
+    expect(dots[2].element.style.backgroundColor).toBe('rgb(255, 183, 77)')
+  })
+
   it('al activar municipios agrega nodos de municipio y la arista proveedor→municipio', async () => {
     const wrapper = mountGraph()
 

tests/unit/components/provenance/ProvenanceSection.spec.js

@@ -8,7 +8,7 @@ vi.mock('@/components/graph/VisChart.vue', () => ({
   default: {
     name: 'VisChart',
     template: '<div class="vis-chart-stub" />',
-    props: ['nodes', 'edges', 'height', 'options'],
+    props: ['nodes', 'edges', 'height', 'options', 'minVerticalSpacing'],
   },
 }))
 
@@ -47,16 +47,41 @@ describe('ProvenanceSection', () => {
     expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(false)
   })
 
-  it('muestra el gráfico unificado con su título cuando hay provenance', () => {
+  it('muestra el título y oculta el gráfico por defecto', () => {
     const wrapper = mountSection()
 
-    expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(true)
-    expect(wrapper.text()).toContain('Origen e historia de los productos')
+    expect(wrapper.text()).toContain('Origen de los productos')
+    expect(wrapper.text()).not.toContain('historia')
+    expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(false)
   })
 
-  it('pasa el provenance al gráfico', () => {
+  it('muestra el gráfico al hacer clic en el título y lo oculta al volver a hacer clic', async () => {
     const wrapper = mountSection()
 
+    await wrapper.find('[data-test="provenance-toggle"]').trigger('click')
+    expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(true)
+
+    await wrapper.find('[data-test="provenance-toggle"]').trigger('click')
+    expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(false)
+  })
+
+  it('también despliega y repliega con el botón de chevron', async () => {
+    const wrapper = mountSection()
+
+    const button = wrapper.find('[data-test="provenance-toggle-button"]')
+    expect(button.exists()).toBe(true)
+    await button.trigger('click')
+    expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(true)
+
+    await button.trigger('click')
+    expect(wrapper.findComponent(ProvenanceGraph).exists()).toBe(false)
+  })
+
+  it('pasa el provenance al gráfico al desplegarlo', async () => {
+    const wrapper = mountSection()
+
+    await wrapper.find('[data-test="provenance-toggle"]').trigger('click')
+
     expect(wrapper.findComponent(ProvenanceGraph).props('provenance')).toStrictEqual(provenance)
   })
 })