Files
don_confiao_frontend/tests/unit/components/provenance/admin/SupplierLinkDialog.spec.js

73 lines
2.6 KiB
JavaScript

import { describe, expect, it, vi } from 'vitest'
import { flushPromises, mount } from '@vue/test-utils'
import SupplierLinkDialog from '@/components/provenance/admin/SupplierLinkDialog.vue'
import vuetify from '@/plugins/vuetify'
import { clickBody } from './helpers'
const suppliers = [
{ id: 5, name: 'Asociación Agropecuaria La Mesa' },
{ id: 9, name: 'Finca El Paraíso' },
{ id: 12, name: 'Cooperativa del Valle' },
]
function mockApi () {
return {
getSuppliers: vi.fn().mockResolvedValue(suppliers),
getProduct: vi.fn().mockResolvedValue({ id: 1, name: 'Panela regional por Kg', suppliers: [5] }),
updateProduct: vi.fn().mockResolvedValue({}),
}
}
function mountDialog (api, props = {}) {
return mount(SupplierLinkDialog, {
props: { visible: true, product: { id: 1, name: 'Panela regional por Kg' }, ...props },
global: { plugins: [vuetify], provide: { api } },
})
}
describe('SupplierLinkDialog', () => {
it('carga los proveedores y los suppliers actuales del producto al abrir', async () => {
const api = mockApi()
mountDialog(api)
await flushPromises()
expect(api.getSuppliers).toHaveBeenCalled()
expect(api.getProduct).toHaveBeenCalledWith(1)
expect(document.body.textContent).toContain('Panela regional por Kg')
})
it('permite cambiar la selección y guarda los proveedores', async () => {
const api = mockApi()
const wrapper = mountDialog(api)
await flushPromises()
const autocomplete = wrapper.findAllComponents({ name: 'VAutocomplete' })
.find(component => component.props('items').some(item => item.id === 5))
await autocomplete.vm.$emit('update:modelValue', [5, 9])
expect(document.body.textContent).toContain('Seleccionados (2)')
clickBody('[data-testid="supplier-link-save"]')
await flushPromises()
expect(api.updateProduct).toHaveBeenCalledWith(1, { suppliers: [5, 9] })
})
it('mantiene los proveedores seleccionados aunque el filtro no los incluya', async () => {
const api = mockApi()
const wrapper = mountDialog(api)
await flushPromises()
const autocomplete = wrapper.findAllComponents({ name: 'VAutocomplete' })
.find(component => component.props('items').some(item => item.id === 5))
await autocomplete.vm.$emit('update:modelValue', [5, 12])
await autocomplete.vm.$emit('update:search', 'Finca')
const items = autocomplete.props('items')
expect(items.some(item => item.id === 5)).toBe(true)
expect(items.some(item => item.id === 12)).toBe(true)
expect(items.some(item => item.id === 9)).toBe(true)
expect(items.some(item => item.id === 7)).toBe(false)
})
})