element-plus/packages/table/__tests__/table.spec.ts

A Component Library for Vue3.0

import { mount as _mount, VueWrapper } from '@vue/test-utils'
import { ComponentPublicInstance, nextTick } from 'vue'
import ElTable from '../src/table.vue'
import ElTableColumn from '../src/table-column/index'
import sinon from 'sinon'

const testDataArr = []
const toArray = function(obj) {
  return [].slice.call(obj)
}

const mount = (opt: any) =>
  _mount(opt, {
    attachTo: 'body',
  })

const triggerEvent = function(elm, name, ...opts) {
  let eventName

  if (/^mouse|click/.test(name)) {
    eventName = 'MouseEvents'
  } else if (/^key/.test(name)) {
    eventName = 'KeyboardEvent'
  } else {
    eventName = 'HTMLEvents'
  }
  const evt = document.createEvent(eventName)

  evt.initEvent(name, ...opts)
  elm.dispatchEvent ? elm.dispatchEvent(evt) : elm.fireEvent('on' + name, evt)

  return elm
}
const getTestData = function() {
  return [
    {
      id: 1,
      name: 'Toy Story',
      release: '1995-11-22',
      director: 'John Lasseter',
      runtime: 80,
    },
    {
      id: 2,
      name: "A Bug's Life",
      release: '1998-11-25',
      director: 'John Lasseter',
      runtime: 95,
    },
    {
      id: 3,
      name: 'Toy Story 2',
      release: '1999-11-24',
      director: 'John Lasseter',
      runtime: 92,
    },
    {
      id: 4,
      name: 'Monsters, Inc.',
      release: '2001-11-2',
      director: 'Peter Docter',
      runtime: 92,
    },
    {
      id: 5,
      name: 'Finding Nemo',
      release: '2003-5-30',
      director: 'Andrew Stanton',
      runtime: 100,
    },
  ]
}

getTestData().forEach(cur => {
  Object.keys(cur).forEach(prop => {
    testDataArr.push(cur[prop].toString())
  })
})

function equalArray(list: unknown[], arr: unknown[]) {
  arr.forEach(item => {
    expect(list).toContain(item)
  })
}

describe('Table.vue', () => {
  describe('rendering data is correct', () => {
    const wrapper = mount({
      components: {
        ElTable,
        ElTableColumn,
      },
      template: `
      <el-table :data="testData">
        <el-table-column prop="id" />
        <el-table-column prop="name" label="片名" />
        <el-table-column prop="release" label="发行日期" />
        <el-table-column prop="director" label="导演" />
        <el-table-column prop="runtime" label="时长（分）" />
      </el-table>
      `,
      created() {
        this.testData = getTestData()
      },
    })
    it('head', async done => {
      await nextTick()
      const ths = toArray(wrapper.findAll('thead th'))
      equalArray(
        ths.map(node => node.text()).filter(o => o),
        ['片名', '发行日期', '导演', '时长（分）'],
      )
      done()
    })

    it('row length', () => {
      expect(
        wrapper.findAll('.el-table__body-wrapper tbody tr').length,
      ).toEqual(getTestData().length)
    })
    it('row data', () => {
      const cells = toArray(wrapper.findAll('td .cell')).map(node =>
        node.text(),
      )
      equalArray(cells, testDataArr)
      wrapper.unmount()
    })
  })
  describe('attributes', () => {
    const createTable = function(props, opts?) {
      return mount(
        Object.assign(
          {
            components: {
              ElTable,
              ElTableColumn,
            },
            template: `
          <el-table :data="testData" ${props}>
            <el-table-column prop="name" label="片名" />
            <el-table-column prop="release" label="发行日期" />
            <el-table-column prop="director" label="导演" />
            <el-table-column prop="runtime" label="时长（分）" />
          </el-table>
        `,
            created() {
              this.testData = getTestData()
            },
          },
          opts,
        ),
      )
    }

    it('height', async done => {
      const wrapper = createTable('height="134"')
      await nextTick()
      expect(wrapper.attributes('style')).toContain('height: 134px')
      wrapper.unmount()
      done()
    })

    it('height as string', async done => {
      const wrapper = createTable('height="100px"')
      await nextTick()
      expect(wrapper.attributes('style')).toContain('height: 100px')
      wrapper.unmount()
      done()
    })

    it('maxHeight', async done => {
      const wrapper = createTable('max-height="134"')
      await nextTick()
      expect(wrapper.attributes('style')).toContain('max-height: 134px')
      wrapper.unmount()
      done()
    })

    it('stripe', async done => {
      const wrapper = createTable('stripe')
      await nextTick()
      expect(wrapper.classes().includes('el-table--striped')).toBeTruthy
      wrapper.unmount()
      done()
    })

    it('border', async done => {
      const wrapper = createTable('border')
      await nextTick()
      expect(wrapper.classes().includes('el-table--border')).toBeTruthy
      wrapper.unmount()
      done()
    })

    it('fit', async done => {
      const wrapper = createTable(':fit="false"')
      await nextTick()
      expect(wrapper.classes().includes('el-table--fit')).toBeFalsy
      wrapper.unmount()
      done()
    })

    it('show-header', async done => {
      const wrapper = createTable(':show-header="false"')
      await nextTick()
      expect(wrapper.findAll('.el-table__header-wrapper').length).toEqual(0)
      wrapper.unmount()
      done()
    })

    it('tableRowClassName', async done => {
      const wrapper = createTable(':row-class-name="tableRowClassName"', {
        methods: {
          tableRowClassName({ rowIndex }) {
            if (rowIndex === 1) {
              return 'info-row'
            } else if (rowIndex === 3) {
              return 'positive-row'
            }

            return ''
          },
        },
      })
      await nextTick()
      expect(wrapper.findAll('.info-row').length).toEqual(1)
      expect(wrapper.findAll('.positive-row').length).toEqual(1)
      wrapper.unmount()
      done()
    })

    it('tableRowStyle[Object]', async done => {
      const wrapper = createTable(':row-style="{ height: \'60px\' }"', {})
      await nextTick()
      expect(wrapper.find('.el-table__body tr').attributes('style')).toContain(
        'height: 60px',
      )
      wrapper.unmount()
      done()
    })

    it('tableRowStyle[Function]', async done => {
      const wrapper = createTable(':row-style="tableRowStyle"', {
        methods: {
          tableRowStyle({ rowIndex }) {
            if (rowIndex === 1) {
              return { height: '60px', display: 'none' }
            }

            return null
          },
        },
      })

      await nextTick()
      const child1 = wrapper.find('.el-table__body tr:nth-child(1)')
      const child2 = wrapper.find('.el-table__body tr:nth-child(2)')
      expect(child1.attributes('style')).toBeUndefined
      expect(child2.attributes('style')).toContain('height: 60px')
      expect(child2.attributes('style')).toContain('display: none')
      wrapper.unmount()
      done()
    })

    it('current-row-key', async done => {
      const wrapper = mount({
        components: {
          ElTable,
          ElTableColumn,
        },
        template: `
        <el-table :data="testData" row-key="id" highlight-current-row :current-row-key="currentRowKey">
          <el-table-column prop="name" label="片名" />
          <el-table-column prop="release" label="发行日期" />
          <el-table-column prop="director" label="导演" />
          <el-table-column prop="runtime" label="时长（分）" />
        </el-table>
      `,
        created() {
          this.testData = getTestData()
        },
        data() {
          return { currentRowKey: null }
        },
      })
      await nextTick()
      wrapper.vm.currentRowKey = 1
      const tr = wrapper.find('.el-table__body-wrapper tbody tr')
      await nextTick()
      expect(tr.classes().includes('current-row')).toBeTruthy
      wrapper.vm.currentRowKey = 2

      const rows = wrapper.findAll('.el-table__body-wrapper tbody tr')
      await nextTick()
      expect(tr.classes().includes('current-row')).toBeFalsy
      expect(rows[1].classes().includes('current-row')).toBeTruthy
      wrapper.unmount()
      done()
    })
  })
  describe('filter', () => {
    let wrapper: VueWrapper<ComponentPublicInstance>

    beforeEach(async done => {
      wrapper = mount({
        components: {
          ElTable,
          ElTableColumn,
        },
        template: `
          <el-table ref="table" :data="testData" @filter-change="handleFilterChange">
            <el-table-column prop="name" label="片名" />
            <el-table-column prop="release" label="发行日期" />
            <el-table-column
              prop="director"
              column-key="director"
              :filters="[
                { text: 'John Lasseter', value: 'John Lasseter' },
                { text: 'Peter Docter', value: 'Peter Docter' },
                { text: 'Andrew Stanton', value: 'Andrew Stanton' }
              ]"
              :filter-method="filterMethod"
              label="导演" />
            <el-table-column prop="runtime" label="时长（分）" />
          </el-table>
        `,

        created() {
          this.testData = getTestData()
        },

        methods: {
          filterMethod(value, row) {
            return value === row.director
          },
          handleFilterChange(filters) {
            this.filters = filters
          },
        },
      })
      await nextTick()
      done()
    })

    afterEach(() => wrapper.unmount())

    it('render', () => {
      expect(wrapper.find('.el-table__column-filter-trigger')).not.toBeUndefined
    })

    it('click dropdown', async done => {
      const btn = wrapper.find('.el-table__column-filter-trigger')
      btn.trigger('click')
      await nextTick()
      const filter = document.body.querySelector('.el-table-filter')
      expect(filter).not.toBeUndefined
      filter.parentNode.removeChild(filter)
      done()
    })

    it('click filter', async done => {
      const btn = wrapper.find('.el-table__column-filter-trigger')

      btn.trigger('click')
      await nextTick()
      const filter = document.body.querySelector('.el-table-filter')

      triggerEvent(filter.querySelector('.el-checkbox'), 'click', true, false)
      // confrim button
      await nextTick()
      triggerEvent(
        filter.querySelector('.el-table-filter__bottom button'),
        'click',
        true,
        false,
      )
      await nextTick()
      expect(
        (wrapper.vm as ComponentPublicInstance & { filters: any; }).filters[
          'director'
        ],
      ).toEqual(['John Lasseter'])
      expect(
        wrapper.findAll('.el-table__body-wrapper tbody tr').length,
      ).toEqual(3)
      filter.parentNode.removeChild(filter)
      done()
    })

    it('click reset', async done => {
      const btn = wrapper.find('.el-table__column-filter-trigger')
      btn.trigger('click')
      await nextTick()
      const filter = document.body.querySelector('.el-table-filter')

      triggerEvent(filter.querySelector('.el-checkbox'), 'click', true, false)
      await nextTick()
      triggerEvent(
        filter.querySelectorAll('.el-table-filter__bottom button')[1],
        'click',
        true,
        false,
      )
      await nextTick()
      expect(
        (wrapper.vm as ComponentPublicInstance & { filters: any; }).filters[
          'director'
        ],
      ).toEqual([])
      expect(
        filter
          .querySelector('.el-table-filter__bottom button')
          .classList.contains('is-disabled'),
      ).toBeTruthy
      filter.parentNode.removeChild(filter)
      wrapper.unmount()
      done()
    })
  })

  describe('events', () => {
    const createTable = function(prop = '') {
      return mount({
        components: {
          ElTable,
          ElTableColumn,
        },
        template: `
          <el-table :data="testData" @${prop}="handleEvent">
            <el-table-column type="selection" />
            <el-table-column prop="name" />
            <el-table-column prop="release" />
            <el-table-column prop="director" />
            <el-table-column prop="runtime"/>
          </el-table>
        `,

        methods: {
          handleEvent(...args) {
            this.result = args
          },
        },

        data() {
          return { result: '', testData: getTestData() }
        },
      })
    }

    it('select', async done => {
      const wrapper = createTable('select')
      await nextTick()
      wrapper.findAll('.el-checkbox')[1].trigger('click')
      expect(wrapper.vm.result.length).toEqual(2)
      expect(wrapper.vm.result[1]).toHaveProperty('name')
      expect(wrapper.vm.result[1]['name']).toEqual(getTestData()[0].name)
      wrapper.unmount()
      done()
    })

    it('selection-change', async done => {
      const wrapper = createTable('selection-change')
      await nextTick()
      wrapper.findAll('.el-checkbox')[1].trigger('click')
      expect(wrapper.vm.result.length).toEqual(1)
      wrapper.unmount()
      done()
    })

    it('cell-mouse-enter', async done => {
      const wrapper = createTable('cell-mouse-enter')
      await nextTick()
      const cell = wrapper.findAll('.el-table__body .cell')[2] // first row
      triggerEvent(cell.element.parentNode, 'mouseenter')
      expect(wrapper.vm.result.length).toEqual(4) // row, column, cell, event
      expect(wrapper.vm.result[0]).toHaveProperty('name')
      expect(wrapper.vm.result[0]['name']).toEqual(getTestData()[0].name)
      wrapper.unmount()
      done()
    })

    it('cell-mouse-leave', async done => {
      const wrapper = createTable('cell-mouse-leave')
      await nextTick()
      const cell = wrapper.findAll('.el-table__body .cell')[7] // second row
      const cell2 = wrapper.findAll('.el-table__body .cell')[2] // first row

      triggerEvent(cell2.element.parentNode, 'mouseenter')
      triggerEvent(cell.element.parentNode, 'mouseleave')
      expect(wrapper.vm.result.length).toEqual(4) // row, column, cell, event
      expect(wrapper.vm.result[0]).toHaveProperty('name')
      expect(wrapper.vm.result[0]['name']).toEqual(getTestData()[0].name)
      wrapper.unmount()
      done()
    })

    it('row-click', async done => {
      const wrapper = createTable('row-click')
      await nextTick()
      const cell = wrapper.findAll('.el-table__body .cell')[2] // first row

      triggerEvent(cell.element.parentNode.parentNode, 'click')
      expect(wrapper.vm.result.length).toEqual(3) // row, event, column
      expect(wrapper.vm.result[0]).toHaveProperty('name')
      expect(wrapper.vm.result[0]['name']).toEqual(getTestData()[0].name)
      wrapper.unmount()
      done()
    })

    it('row-dblclick', async done => {
      const wrapper = createTable('row-dblclick')
      await nextTick()
      const cell = wrapper.findAll('.el-table__body .cell')[2] // first row

      triggerEvent(cell.element.parentNode.parentNode, 'dblclick')
      expect(wrapper.vm.result.length).toEqual(3) // row, event, column
      expect(wrapper.vm.result[0]).toHaveProperty('name')
      expect(wrapper.vm.result[0]['name']).toEqual(getTestData()[0].name)
      wrapper.unmount()
      done()
    })

    it('header-click', async done => {
      const wrapper = createTable('header-click')
      await nextTick()
      const cell = wrapper.findAll('.el-table__header th')[1] // header[prop='name']
      cell.trigger('click')
      expect(wrapper.vm.result.length).toEqual(2) // column, event
      expect(wrapper.vm.result[0]['name']).toBeUndefined
      wrapper.unmount()
      done()
    })
  })
  describe('column attributes', () => {
    const createTable = function(
      props1?,
      props2?,
      props3?,
      props4?,
      opts?,
      tableProps?,
    ) {
      return mount(
        Object.assign(
          {
            components: {
              ElTable,
              ElTableColumn,
            },
            template: `
          <el-table :data="testData" ${tableProps || ''}>
            <el-table-column prop="name" ${props1 || ''} />
            <el-table-column prop="release" ${props2 || ''} />
            <el-table-column prop="director" ${props3 || ''} />
            <el-table-column prop="runtime" ${props4 || ''} />
          </el-table>
        `,

            created() {
              this.testData = getTestData()
            },
          },
          opts,
        ),
      )
    }

    it('label', async done => {
      const wrapper = createTable('label="啊哈哈哈"', 'label="啊啦啦啦"')
      await nextTick()
      const ths = toArray(wrapper.findAll('thead th'))
        .map(node => node.text())
        .filter(o => o)

      expect(ths).toEqual(['啊哈哈哈', '啊啦啦啦'])
      wrapper.unmount()
      done()
    })

    it('width', async done => {
      const wrapper = createTable('width="123px"', ':width="102"', 'width="39"')
      await nextTick()
      const ths = toArray(wrapper.findAll('.el-table__header-wrapper col'))
        .map(node => node.width)
        .filter(o => o)
      expect(ths.includes('123')).toBeTruthy
      expect(ths.includes('102')).toBeTruthy
      expect(ths.includes('39')).toBeTruthy
      wrapper.unmount()
      done()
    })

    it('fixed', async done => {
      const wrapper = createTable(
        'fixed label="test1"',
        'fixed="right" label="test2"',
        'fixed="left" label="test3"',
      )
      await nextTick()
      expect(
        toArray(
          wrapper.findAll('.el-table__fixed th:not(.is-hidden)'),
        ).map(node => node.text()),
      ).toEqual(['test1', 'test3'])

      expect(
        toArray(
          wrapper.findAll('.el-table__fixed-right th:not(.is-hidden)'),
        ).map(node => node.text()),
      ).toEqual(['test2'])
      expect(wrapper.find('.el-table__body-wrapper').attributes('style'))
        .toBeFalsy
      wrapper.unmount()
      done()
    })

    it('resizable', async done => {
      const wrapper = createTable(
        'resizable',
        ':resizable="false"',
        '',
        '',
        {},
        'border',
      )
      await nextTick()
      const firstCol = wrapper.find('thead th')
      triggerEvent(firstCol.element, 'mousemove')
      triggerEvent(firstCol.element, 'mousedown')
      wrapper.unmount()
      done()
    })

    it('formatter', async done => {
      const wrapper = createTable(':formatter="renderCell"', '', '', '', {
        methods: {
          renderCell(row) {
            return `[${row.name}]`
          },
        },
      })

      await nextTick()
      const cells = toArray(
        wrapper.findAll('.el-table__body-wrapper tbody tr td:first-child'),
      )
      expect(cells.map(n => n.text())).toEqual(
        getTestData().map(o => `[${o.name}]`),
      )
      wrapper.unmount()
      done()
    })

    it('show-overflow-tooltip', async done => {
      const wrapper = createTable('show-overflow-tooltip')
      await nextTick()
      expect(wrapper.findAll('.el-tooltip').length).toEqual(5)
      wrapper.unmount()
      done()
    })

    // it('show-tooltip-when-overflow', async (done) => {
    //   // old version prop name
    //   const wrapper = createTable('show-tooltip-when-overflow')
    //   await nextTick()
    //   expect(wrapper.findAll('.el-tooltip').length).toEqual(5)
    //   wrapper.unmount()
    //   done()
    // })

    it('align', async done => {
      const wrapper = createTable(
        'align="left"',
        'align="right"',
        'align="center"',
      )
      await nextTick()
      const len = getTestData().length + 1
      expect(wrapper.findAll('.is-left').length).toEqual(len)
      expect(wrapper.findAll('.is-right').length).toEqual(len)
      expect(wrapper.findAll('.is-center').length).toEqual(len)
      wrapper.unmount()
      done()
    })

    it('class-name', async done => {
      const wrapper = createTable(
        'class-name="column-1"',
        'class-name="column-2 column-class-a"',
        'class-name="column-class-a"',
      )
      await nextTick()
      const len = getTestData().length + 1
      expect(wrapper.findAll('.column-1').length).toEqual(len)
      expect(wrapper.findAll('.column-2').length).toEqual(len)
      expect(wrapper.findAll('.column-class-a').length).toEqual(len * 2)
      wrapper.unmount()
      done()
    })

    it('selectable === false & check selectAll status', async done => {
      const wrapper = mount({
        components: {
          ElTable,
          ElTableColumn,
        },
        template: `
          <el-table :data="testData" @selection-change="change">
            <el-table-column type="selection" :selectable="filterSelect" />
            <el-table-column prop="name" label="name" />
            <el-table-column prop="release" label="release" />
            <el-table-column prop="director" label="director" />
            <el-table-column prop="runtime" label="runtime" />
          </el-table>
        `,

        data() {
          return { selected: [], testData: getTestData() }
        },

        methods: {
          change(rows) {
            this.selected = rows
          },

          filterSelect() {
            return false
          },
        },
      })

      await nextTick()
      expect(wrapper.find('.el-checkbox').attributes('checked')).toBeFalsy
      await nextTick()
      expect(wrapper.vm.selected.length).toEqual(0)
      wrapper.unmount()
      done()
    })

    describe('type', () => {
      const createTable = function(type) {
        return mount({
          components: {
            ElTable,
            ElTableColumn,
          },
          template: `
            <el-table :data="testData" @selection-change="change">
              <el-table-column type="${type}" />
              <el-table-column prop="name" label="name" />
              <el-table-column prop="release" label="release" />
              <el-table-column prop="director" label="director" />
              <el-table-column prop="runtime" label="runtime" />
            </el-table>
          `,

          created() {
            this.testData = getTestData()
          },

          data() {
            return { selected: [] }
          },

          methods: {
            change(rows) {
              this.selected = rows
            },
          },
        })
      }

      describe('= selection', () => {
        const wrapper = createTable('selection')

        it('render', async done => {
          await nextTick()
          expect(wrapper.findAll('.el-checkbox').length).toEqual(
            getTestData().length + 1,
          )
          done()
        })

        it('select all', async done => {
          wrapper.find('.el-checkbox').trigger('click')
          await nextTick()
          expect(wrapper.vm.selected.length).toEqual(5)
          wrapper.unmount()
          done()
        })

        it('select one', async done => {
          const wrapper2 = createTable('selection')

          await nextTick()
          wrapper2.findAll('.el-checkbox')[1].trigger('click')

          await nextTick()
          expect(wrapper2.vm.selected.length).toEqual(1)
          expect(wrapper2.vm.selected[0].name).toEqual(getTestData()[0].name)
          wrapper2.unmount()
          done()
        })
      })

      describe('= index', () => {
        const wrapper = createTable('index')

        it('render', async done => {
          await nextTick()
          expect(
            toArray(
              wrapper.findAll(
                '.el-table__body-wrapper tbody tr td:first-child',
              ),
            ).map(node => node.text()),
          ).toEqual(['1', '2', '3', '4', '5'])
          wrapper.unmount()
          done()
        })
      })

      describe('= expand', () => {
        const createInstance = function(extra?) {
          extra = extra || ''
          return mount({
            components: {
              ElTableColumn,
              ElTable,
            },
            template: `
            <el-table row-key="id" :data="testData" @expand-change="handleExpand" ${extra}>
              <el-table-column type="expand">
                <template #default="props">
                  <div>{{props.row.name}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="release" label="release" />
              <el-table-column prop="director" label="director" />
              <el-table-column prop="runtime" label="runtime" />
            </el-table>
          `,

            data() {
              return {
                expandCount: 0,
                expandRowKeys: [],
                testData: getTestData(),
              }
            },

            methods: {
              handleExpand() {
                this.expandCount++
              },
              refreshData() {
                this.testData = getTestData()
              },
            },
          })
        }

        it('works', async done => {
          const wrapper = createInstance()
          await nextTick()
          expect(wrapper.findAll('td.el-table__expand-column').length).toEqual(
            5,
          )
          wrapper.unmount()
          done()
        })
      })
    })

    describe('sortable', () => {
      it('render', async done => {
        const wrapper = createTable('', '', '', 'sortable')
        await nextTick()
        expect(wrapper.findAll('.caret-wrapper').length).toEqual(1)
        wrapper.unmount()
        done()
      })

      it('sortable orders', async done => {
        const wrapper = createTable(
          '',
          '',
          '',
          "sortable :sort-orders=\"['descending', 'ascending']\"",
          {},
        )

        await nextTick()
        const elm = wrapper.find('.caret-wrapper')
        elm.trigger('click')

        await nextTick()
        const lastCells = wrapper.findAll(
          '.el-table__body-wrapper tbody tr td:last-child',
        )
        expect(toArray(lastCells).map(node => node.text())).toEqual([
          '100',
          '95',
          '92',
          '92',
          '80',
        ])
        wrapper.unmount()
        done()
      })

      it('sortable method', async done => {
        const wrapper = createTable(
          'sortable :sort-method="sortMethod"',
          '',
          '',
          '',
          {
            methods: {
              sortMethod(a, b) {
                // sort method should return number
                if (a.runtime < b.runtime) {
                  return 1
                }
                if (a.runtime > b.runtime) {
                  return -1
                }
                return 0
              },
            },
          },
        )

        await nextTick()
        const elm = wrapper.find('.caret-wrapper')
        elm.trigger('click')

        await nextTick()
        const lastCells = wrapper.findAll(
          '.el-table__body-wrapper tbody tr td:last-child',
        )
        expect(toArray(lastCells).map(node => node.text())).toEqual([
          '100',
          '95',
          '92',
          '92',
          '80',
        ])
        wrapper.unmount()
        done()
      })

      it('sortable by method', async done => {
        const wrapper = createTable('sortable :sort-by="sortBy"', '', '', '', {
          methods: {
            sortBy(a) {
              return -a.runtime
            },
          },
        })

        await nextTick()
        const elm = wrapper.find('.caret-wrapper')
        elm.trigger('click')

        await nextTick()
        const lastCells = wrapper.findAll(
          '.el-table__body-wrapper tbody tr td:last-child',
        )
        expect(toArray(lastCells).map(node => node.text())).toEqual([
          '100',
          '95',
          '92',
          '92',
          '80',
        ])
        wrapper.unmount()
        done()
      })

      it('sortable by property', async done => {
        const wrapper = createTable(
          'sortable sort-by="runtime"',
          '',
          '',
          '',
          {},
        )

        await nextTick()
        const elm = wrapper.find('.caret-wrapper')
        elm.trigger('click')

        await nextTick()
        const lastCells = wrapper.findAll(
          '.el-table__body-wrapper tbody tr td:last-child',
        )
        expect(toArray(lastCells).map(node => node.text())).toEqual([
          '80',
          '92',
          '92',
          '95',
          '100',
        ])
        wrapper.unmount()
        done()
      })
    })

    describe('click sortable column', () => {
      const wrapper = createTable('', '', '', 'sortable')

      it('ascending', async done => {
        const elm = wrapper.find('.caret-wrapper')

        elm.trigger('click')
        await nextTick()
        const lastCells = wrapper.findAll(
          '.el-table__body-wrapper tbody tr td:last-child',
        )
        expect(toArray(lastCells).map(node => node.text())).toEqual([
          '80',
          '92',
          '92',
          '95',
          '100',
        ])
        done()
      })

      it('descending', async done => {
        const elm = wrapper.find('.caret-wrapper')

        elm.trigger('click')
        await nextTick()
        const lastCells = wrapper.findAll(
          '.el-table__body-wrapper tbody tr td:last-child',
        )
        expect(toArray(lastCells).map(node => node.text())).toEqual([
          '100',
          '95',
          '92',
          '92',
          '80',
        ])
        wrapper.unmount()
        done()
      })
    })

    it('change column configuration', async done => {
      const wrapper = mount({
        components: {
          ElTable,
          ElTableColumn,
        },
        template: `
          <template>
            <button
              id="addBut"
              @click="
                () => {
                  cols.push('b')
                }
              "
              >+</button>
            <button
              id="delBut"
              @click="
                () => {
                  cols.pop()
                }
              "
              >-</button>
            <el-table :data="data">
              <el-table-column
                v-for="item of cols"
                :prop="item"
                :label="item"
                :key="item"
              ></el-table-column>
            </el-table>
          </template>
        `,

        data() {
          return { cols: ['a', 'v', 'b'], data: [{ a: 1, v: 2, b: 3 }] }
        },
      })

      await nextTick()
      expect(wrapper.findAll('.el-table__header-wrapper th').length).toEqual(3)
      const addBut = wrapper.find('#addBut')
      const delBut = wrapper.find('#delBut')
      addBut.trigger('click')
      await nextTick()
      expect(wrapper.findAll('.el-table__header-wrapper th').length).toEqual(4)
      addBut.trigger('click')
      await nextTick()
      expect(wrapper.findAll('.el-table__header-wrapper th').length).toEqual(5)
      delBut.trigger('click')
      await nextTick()
      expect(wrapper.findAll('.el-table__header-wrapper th').length).toEqual(4)
      delBut.trigger('click')
      await nextTick()
      expect(wrapper.findAll('.el-table__header-wrapper th').length).toEqual(3)
      done()
    })
  })
  describe('summary row', () => {
    it('should render', async done => {
      const wrapper = mount({
        components: {
          ElTable,
          ElTableColumn,
        },
        template: `
          <el-table :data="testData" show-summary>
            <el-table-column prop="name" />
            <el-table-column prop="release"/>
            <el-table-column prop="director"/>
            <el-table-column prop="runtime"/>
          </el-table>
        `,

        created() {
          this.testData = getTestData()
        },
      })

      await nextTick()
      const footer = wrapper.find('.el-table__footer')
      expect(footer).not.toBeUndefined
      const cells = toArray(footer.findAll('.cell'))
      expect(cells[cells.length - 1].text()).toEqual('459')
      wrapper.unmount()
      done()
    })

    it('custom sum text', async done => {
      const wrapper = mount({
        components: {
          ElTable,
          ElTableColumn,
        },
        template: `
          <el-table :data="testData" show-summary sum-text="Time">
            <el-table-column prop="name" />
            <el-table-column prop="release"/>
            <el-table-column prop="director"/>
            <el-table-column prop="runtime"/>
          </el-table>
        `,

        created() {
          this.testData = getTestData()
        },
      })

      await nextTick()
      const cells = toArray(wrapper.findAll('.el-table__footer .cell'))
      expect(cells[0].text()).toEqual('Time')
      wrapper.unmount()
      done()
    })

    it('custom summary method', async done => {
      const wrapper = mount({
        components: {
          ElTable,
          ElTableColumn,
        },
        template: `
          <el-table :data="testData" show-summary :summary-method="getSummary">
            <el-table-column prop="name" />
            <el-table-column prop="release"/>
            <el-table-column prop="director"/>
            <el-table-column prop="runtime"/>
          </el-table>
        `,

        created() {
          this.testData = getTestData()
        },

        methods: {
          getSummary(param) {
            const { columns, data } = param
            const result = []
            columns.forEach(column => {
              const prop = column.property
              if (prop === 'release') {
                const dates = data.map(item => item[prop])
                const releaseYears = dates.map(date => Number(date.slice(0, 4)))
                result.push(
                  releaseYears.reduce((prev, curr) => {
                    return prev + curr
                  }),
                )
              } else {
                result.push('')
              }
            })
            return result
          },
        },
      })

      await nextTick()
      const cells = toArray(wrapper.findAll('.el-table__footer .cell'))
      expect(cells[1].text()).toEqual('9996')
      wrapper.unmount()
      done()
    })
  })
  describe('multi level column', () => {
    it('should works', async done => {
      const wrapper = mount({
        components: {
          ElTable,
          ElTableColumn,
        },
        template: `
          <el-table :data="testData">
            <el-table-column prop="name" />
            <el-table-column label="group">
              <el-table-column prop="release"/>
              <el-table-column prop="director"/>
            </el-table-column>
            <el-table-column prop="runtime"/>
          </el-table>
        `,

        created() {
          this.testData = null
        },
      })

      await nextTick()
      const trs = wrapper.findAll('.el-table__header tr')
      expect(trs.length).toEqual(2)
      const firstRowHeader = trs[0].findAll('th .cell').length
      const secondRowHeader = trs[1].findAll('th .cell').length
      expect(firstRowHeader).toEqual(3)
      expect(secondRowHeader).toEqual(2)

      expect(trs[0].find('th:first-child').attributes('rowspan')).toEqual('2')
      expect(trs[0].find('th:nth-child(2)').attributes('colspan')).toEqual('2')
      wrapper.unmount()
      done()
    })
    // TODO
    // it('should works', async done => {
    //   const wrapper = mount({
    //     components: {
    //       ElTable,
    //       ElTableColumn,
    //     },
    //     template: `
    //       <el-table :data="testData">
    //         <el-table-column prop="name" />
    //         <el-table-column label="group">
    //           <el-table-column label="group's group">
    //             <el-table-column prop="release" />
    //             <el-table-column prop="runtime"/>
    //           </el-table-column>
    //           <el-table-column prop="director" />
    //         </el-table-column>
    //         <el-table-column prop="runtime"/>
    //       </el-table>
    //     `,

    //     created() {
    //       this.testData = null
    //     },
    //   })

    //   await nextTick()
    //   const trs = wrapper.findAll('.el-table__header tr')
    //   expect(trs.length).toEqual(3)
    //   const firstRowHeader = trs[0].findAll('th .cell').length
    //   const secondRowHeader = trs[1].findAll('th .cell').length
    //   const thirdRowHeader = trs[2].findAll('th .cell').length
    //   expect(firstRowHeader).toEqual(3)
    //   expect(secondRowHeader).toEqual(2)
    //   expect(thirdRowHeader).toEqual(2)

    //   expect(trs[0].find('th:first-child').attributes('rowspan')).toEqual('3')
    //   expect(trs[0].find('th:nth-child(2)').attributes('colspan')).toEqual('3')
    //   expect(trs[1].find('th:first-child').attributes('colspan')).toEqual('2')
    //   expect(trs[1].find('th:nth-child(2)').attributes('rowspan')).toEqual('2')

    //   wrapper.unmount()
    //   done()
    // })

    it('should work in one column', async done => {
      const wrapper = mount({
        components: {
          ElTable,
          ElTableColumn,
        },
        template: `
          <el-table :data="testData">
            <el-table-column label="group">
              <el-table-column prop="release"/>
            </el-table-column>
          </el-table>
        `,

        created() {
          this.testData = null
        },
      })

      await nextTick()
      const trs = wrapper.findAll('.el-table__header tr')
      expect(trs.length).toEqual(2)
      const firstRowLength = trs[0].findAll('th .cell').length
      const secondRowLength = trs[1].findAll('th .cell').length
      expect(firstRowLength).toEqual(1)
      expect(secondRowLength).toEqual(1)

      expect(trs[0].find('th:first-child').attributes('rowspan')).toEqual('1')
      expect(trs[0].find('th:first-child').attributes('colspan')).toEqual('1')
      wrapper.unmount()
      done()
    })
  })
  describe('dynamic column attribtes', () => {
    it('label', async done => {
      const wrapper = mount({
        components: {
          ElTable,
          ElTableColumn,
        },
        template: `
          <el-table :data="testData">
            <el-table-column prop="name" :label="label"/>
            <el-table-column prop="release" />
            <el-table-column prop="director" />
            <el-table-column prop="runtime" />
          </el-table>
        `,
        data() {
          return {
            label: 'name',
          }
        },

        created() {
          this.testData = getTestData()
        },
      })

      await nextTick()
      expect(wrapper.find('.el-table__header th .cell').text()).toEqual('name')
      wrapper.vm.label = 'NAME'
      wrapper.vm.$nextTick(() => {
        expect(wrapper.find('.el-table__header th .cell').text()).toEqual(
          'NAME',
        )
        wrapper.unmount()
        done()
      })
    })

    it('align', async done => {
      const wrapper = mount({
        components: {
          ElTable,
          ElTableColumn,
        },
        template: `
          <el-table :data="testData">
            <el-table-column prop="name" :align="align"/>
          </el-table>
        `,

        data() {
          return {
            align: 'left',
          }
        },

        created() {
          this.testData = getTestData()
        },
      })

      await nextTick()
      expect(wrapper.findAll('.el-table__body td.is-right').length === 0)
        .toBeTruthy
      wrapper.vm.align = 'right'
      wrapper.vm.$nextTick(() => {
        expect(wrapper.findAll('.el-table__body td.is-right').length > 0)
          .toBeTruthy
        wrapper.unmount()
        done()
      })
    })
    it('header-align', async done => {
      const wrapper = mount({
        components: {
          ElTable,
          ElTableColumn,
        },
        template: `
          <el-table :data="testData">
            <el-table-column prop="name" :align="align" :header-align="headerAlign"/>
          </el-table>
        `,

        data() {
          return {
            align: 'left',
            headerAlign: null,
          }
        },

        created() {
          this.testData = getTestData()
        },
      })
      await nextTick()
      expect(
        wrapper.findAll('.el-table__header th.is-left').length,
      ).toBeGreaterThanOrEqual(0)
      expect(wrapper.findAll('.el-table__header th.is-center').length).toEqual(
        0,
      )
      expect(wrapper.findAll('.el-table__header th.is-right').length).toEqual(0)
      wrapper.vm.align = 'right'
      await nextTick()
      expect(wrapper.findAll('.el-table__header th.is-left').length).toEqual(0)
      expect(wrapper.findAll('.el-table__header th.is-center').length).toEqual(
        0,
      )
      expect(
        wrapper.findAll('.el-table__header th.is-right').length,
      ).toBeGreaterThanOrEqual(0)
      wrapper.vm.headerAlign = 'center'
      await nextTick()
      expect(wrapper.findAll('.el-table__header th.is-left').length).toEqual(0)
      expect(
        wrapper.findAll('.el-table__header th.is-center').length,
      ).toBeGreaterThanOrEqual(0)
      expect(wrapper.findAll('.el-table__header th.is-right').length).toEqual(0)
      wrapper.vm.headerAlign = null
      await nextTick()
      expect(wrapper.findAll('.el-table__header th.is-left').length).toEqual(0)
      expect(wrapper.findAll('.el-table__header th.is-center').length).toEqual(
        0,
      )
      expect(
        wrapper.findAll('.el-table__header th.is-right').length,
      ).toBeGreaterThanOrEqual(0)
      wrapper.unmount()
      done()
    })

    it('width', async done => {
      const wrapper = mount({
        components: {
          ElTable,
          ElTableColumn,
        },
        template: `
          <el-table :data="testData" :fit="false">
            <el-table-column prop="name" :width="width"/>
          </el-table>
        `,

        data() {
          return {
            width: 100,
          }
        },

        created() {
          this.testData = getTestData()
        },
      })

      await nextTick()
      expect(wrapper.find('.el-table__body col').attributes('width')).toEqual(
        '100',
      )
      wrapper.vm.width = 200
      await nextTick()
      expect(wrapper.find('.el-table__body col').attributes('width')).toEqual(
        '200',
      )
      wrapper.unmount()
      done()
    })

    it('min-width', async done => {
      const wrapper = mount({
        components: {
          ElTable,
          ElTableColumn,
        },
        template: `
          <el-table :data="testData" :fit="false">
            <el-table-column prop="name" :min-width="width"/>
          </el-table>
        `,

        data() {
          return {
            width: 100,
          }
        },

        created() {
          this.testData = getTestData()
        },
      })

      await nextTick()
      expect(wrapper.find('.el-table__body col').attributes('width')).toEqual(
        '100',
      )
      wrapper.vm.width = 200
      await nextTick()
      expect(wrapper.find('.el-table__body col').attributes('width')).toEqual(
        '200',
      )
      wrapper.unmount()
      done()
    })

    it('fixed', async done => {
      const wrapper = mount({
        components: {
          ElTable,
          ElTableColumn,
        },
        template: `
          <el-table :data="testData">
            <el-table-column :fixed="fixed" />
            <el-table-column prop="release" />
            <el-table-column prop="director" />
            <el-table-column prop="runtime" />
          </el-table>
        `,

        data() {
          return {
            fixed: false,
          }
        },

        created() {
          this.testData = getTestData()
        },
      })

      await nextTick()
      expect(!wrapper.find('.el-table__fixed')).toBeTruthy
      wrapper.vm.fixed = true
      await nextTick()
      expect(!!wrapper.find('.el-table__fixed')).toBeTruthy
      wrapper.unmount()
      done()
    })

    it('prop', async done => {
      const wrapper = mount({
        components: {
          ElTable,
          ElTableColumn,
        },
        template: `
          <el-table :data="testData">
            <el-table-column :prop="prop" />
            <el-table-column prop="release" />
            <el-table-column prop="director" />
            <el-table-column prop="runtime" />
          </el-table>
        `,

        data() {
          return {
            prop: 'name',
          }
        },

        created() {
          this.testData = getTestData()
        },
      })

      await nextTick()
      let firstColumnContent = wrapper.find('.el-table__body td .cell').text()
      let secondColumnContent = wrapper
        .find('.el-table__body td:nth-child(2) .cell')
        .text()
      expect(firstColumnContent !== secondColumnContent).toBeTruthy
      wrapper.vm.prop = 'release'
      await nextTick()
      firstColumnContent = wrapper.find('.el-table__body td .cell').text()
      secondColumnContent = wrapper
        .find('.el-table__body td:nth-child(2) .cell')
        .text()
      expect(firstColumnContent === secondColumnContent).toBeTruthy
      wrapper.unmount()
      done()
    })
  })
  describe('methods', () => {
    const createTable = function(prop = '') {
      return mount({
        components: {
          ElTableColumn,
          ElTable,
        },
        template: `
          <el-table ref="table" :data="testData" @${prop}="handleEvent">
            <el-table-column type="selection" />
            <el-table-column prop="name" />
            <el-table-column prop="release" />
            <el-table-column prop="director" />
            <el-table-column prop="runtime"/>
          </el-table>
        `,

        methods: {
          handleEvent(selection) {
            this.fireCount++
            this.selection = selection
          },
        },

        data() {
          return { selection: null, testData: getTestData(), fireCount: 0 }
        },
      })
    }

    it('toggleRowSelection', () => {
      const wrapper = createTable('selection-change')
      const vm = wrapper.vm
      vm.$refs.table.toggleRowSelection(vm.testData[0])
      expect(vm.selection.length).toEqual(1)
      expect(vm.fireCount).toEqual(1)

      // test use second parameter
      vm.$refs.table.toggleRowSelection(vm.testData[0])
      expect(vm.fireCount).toEqual(2)

      vm.$refs.table.toggleRowSelection(vm.testData[0], false)
      expect(vm.fireCount).toEqual(2)
      expect(vm.selection.length).toEqual(0)

      wrapper.unmount()
    })

    it('toggleAllSelection', async done => {
      const wrapper = createTable('selection-change')
      const vm = wrapper.vm
      vm.$refs.table.toggleAllSelection()
      await nextTick()
      expect(vm.selection.length).toEqual(5)

      vm.$refs.table.toggleAllSelection()
      await nextTick()
      expect(vm.selection.length).toEqual(0)
      wrapper.unmount()
      done()
    })

    it('clearSelection', () => {
      const wrapper = createTable('selection-change')
      const vm = wrapper.vm
      vm.$refs.table.toggleRowSelection(vm.testData[0])
      expect(vm.selection.length).toEqual(1)
      expect(vm.fireCount).toEqual(1)

      // clear selection
      vm.$refs.table.clearSelection()
      expect(vm.fireCount).toEqual(2)
      expect(vm.selection.length).toEqual(0)

      vm.$refs.table.clearSelection()
      expect(vm.fireCount).toEqual(2)

      wrapper.unmount()
    })
    // TODO
    it('sort', async done => {
      const wrapper = mount({
        components: {
          ElTableColumn,
          ElTable,
        },
        template: `
          <el-table ref="table" :data="testData" :default-sort = "{prop: 'runtime', order: 'ascending'}">
            <el-table-column prop="name" />
            <el-table-column prop="release" />
            <el-table-column prop="director" />
            <el-table-column prop="runtime"/>
          </el-table>
        `,
        data() {
          return { testData: getTestData() }
        },
      })

      const vm = wrapper.vm
      await nextTick()
      const lastCells = wrapper.findAll(
        '.el-table__body-wrapper tbody tr td:last-child',
      )
      equalArray(
        toArray(lastCells).map(node => node.text()),
        ['80', '95', '92', '92', '100'],
      )
      await nextTick()
      vm.testData = vm.testData.map(data =>
        Object.assign(data, { runtime: -data.runtime }),
      )
      vm.$refs.table.sort('runtime', 'ascending')
      await nextTick()
      equalArray(
        toArray(lastCells).map(node => node.text()),
        ['-100', '-95', '-92', '-92', '-80'],
      )
      wrapper.unmount()
      done()
    })

    it('sort correct change icon', async () => {
      function assertSortIconCount($el, msg, count = 1) {
        const sortIconCount = $el.querySelectorAll(
          'th.ascending, th.descending',
        ).length
        expect(sortIconCount).toEqual(count)
      }

      const wrapper = mount({
        components: {
          ElTable,
          ElTableColumn,
        },
        template: `
          <el-table ref="table" :data="testData" >
            <el-table-column prop="name" sortable />
            <el-table-column prop="release" sortable />
            <el-table-column prop="director" sortable />
            <el-table-column prop="runtime" sortable />
          </el-table>
        `,
        data() {
          return { testData: getTestData() }
        },
      })
      const vm = wrapper.vm
      await nextTick()
      assertSortIconCount(
        wrapper.element,
        'sorting icon is not empty after mount',
        0,
      )
      // manual click first column header
      const elm = wrapper.find('.caret-wrapper')
      elm.trigger('click')
      await nextTick()
      assertSortIconCount(
        wrapper.element,
        'sorting icon is not one after click header',
      )
      vm.$refs.table.sort('director', 'descending')
      await nextTick()
      assertSortIconCount(