ngfrontend/tests/unit/ui-refactor/productDetails.spec.js

/* eslint-env jest */
import Vue from 'vue'
import ElementUI from 'element-ui'
import path from 'path'
import { load } from '@/ui-refactor/views/purchase/__tests__/loadComponent'

jest.mock('@/utils/usersInfo', () => ({}))
Vue.use(ElementUI)
const ProductDetails = load(path.resolve('src/ui-refactor/components/ProductDetailsDialog.vue'))
const product = Object.freeze({
  GOODS_NO: 'SKU-1', GOODS_NAME: 'Sample product', COVER: 'sample.png',
  SELL_PRICE: '38000', MARKET_PRICE: 42000, PRICE_PV: 1200, TAX_RATE: 7.5,
  taxAmount: 1234.5, STORE_NUMS: 0
})
const instances = []

function mount() {
  const closed = jest.fn()
  const vm = new Vue({
    data: () => ({ visible: true, product }),
    render(h) {
      return h(ProductDetails, {
        props: { visible: this.visible, product: this.product, currency: 'NGN' },
        on: { 'update:visible': value => { this.visible = value; closed(value) } }
      })
    }
  }).$mount()
  document.body.appendChild(vm.$el)
  instances.push(vm)
  return { vm, closed }
}

async function settle() {
  await Vue.nextTick()
  jest.advanceTimersByTime(350)
  await Vue.nextTick()
}

beforeEach(() => jest.useFakeTimers())
afterEach(() => {
  instances.splice(0).forEach(vm => { vm.$destroy(); vm.$el.remove() })
  jest.clearAllTimers()
  jest.useRealTimers()
})

it('preserves the original product fields and supplied tax amount with shared number formatting', async() => {
  const { vm } = mount()
  await settle()
  const values = Array.from(vm.$el.querySelectorAll('.el-descriptions-item__content'), node => node.textContent.trim())
  expect(values).toEqual(['SKU-1', 'NGN 38,000', 'NGN 42,000', '1,200', '0.075', 'NGN 1,234.5', '0'])
  expect(vm.$el.querySelector('.el-dialog__title').textContent).toBe('SKU-1')
  expect(vm.$el.querySelector('.el-descriptions__title').textContent).toBe('Sample product')
  expect(vm.$children[0].product).toBe(product)
})

it.each(['.el-dialog__headerbtn', '.el-dialog__footer button'])('updates the parent visible state once when closing with %s', async selector => {
  const { vm, closed } = mount()
  await settle()
  vm.$el.querySelector(selector).click()
  await settle()
  expect(vm.visible).toBe(false)
  expect(closed).toHaveBeenCalledTimes(1)
  expect(closed).toHaveBeenCalledWith(false)
})

it('shows the next product when the parent reopens the dialog', async() => {
  const { vm } = mount()
  vm.visible = false
  await settle()
  vm.product = Object.freeze({ ...product, GOODS_NO: 'SKU-2', GOODS_NAME: 'Next product', SELL_PRICE: 0, taxAmount: 0 })
  vm.visible = true
  await settle()
  expect(vm.$el.querySelector('.el-dialog__title').textContent).toBe('SKU-2')
  expect(vm.$el.querySelector('.el-descriptions__title').textContent).toBe('Next product')
  const values = Array.from(vm.$el.querySelectorAll('.el-descriptions-item__content'), node => node.textContent.trim())
  expect(values[1]).toBe('NGN 0')
  expect(values[5]).toBe('NGN 0')
})