bootstrap-vue/src/components/table/table-item-formatter.spec.js

With more than 85 components, over 45 available plugins, several directives, and 1000+ icons, BootstrapVue provides one of the most comprehensive implementations of the Bootstrap v4 component and grid system available for Vue.js v2.6, complete with extens

import { wrapWithMethods } from '../../../tests/utils'
import { mount } from '@vue/test-utils'
import { BTable } from './table'

describe('table > field-formatter', () => {
  it('item field formatter as function works', async () => {
    const wrapper = mount(BTable, {
      propsData: {
        items: [{ a: 1, b: 2 }],
        fields: [
          {
            key: 'a',
            formatter(value, key, item) {
              return item.a + item.b
            }
          },
          'b'
        ]
      }
    })

    expect(wrapper).toBeDefined()
    expect(wrapper.findAll('tbody > tr').length).toBe(1)
    expect(wrapper.findAll('tbody > tr > td').length).toBe(2)
    const $tds = wrapper.findAll('tbody > tr > td')
    expect($tds.at(0).text()).toBe('3')
    expect($tds.at(1).text()).toBe('2')

    wrapper.destroy()
  })

  it('item field formatter as string works', async () => {
    const wrapper = mount(
      wrapWithMethods(BTable, {
        formatter(value, key, item) {
          return item.a + item.b
        }
      }),
      {
        propsData: {
          items: [{ a: 1, b: 2 }],
          fields: [{ key: 'a', formatter: 'formatter' }, 'b']
        }
      }
    )

    expect(wrapper).toBeDefined()
    expect(wrapper.findAll('tbody > tr').length).toBe(1)
    expect(wrapper.findAll('tbody > tr > td').length).toBe(2)
    const $tds = wrapper.findAll('tbody > tr > td')
    expect($tds.at(0).text()).toBe('3')
    expect($tds.at(1).text()).toBe('2')

    wrapper.destroy()
  })
})