@gitlab/duo-ui 0.1.0 → 0.3.0

package/src/vendor/bootstrap-vue/src/components/table/table.spec.js

@@ -0,0 +1,692 @@
+import { mount } from '@vue/test-utils'
+import { BTable } from './table'
+import { wrapWithMethods } from '../../../tests/utils'
+
+const items1 = [{ a: 1, b: 2, c: 3 }, { a: 4, b: 5, c: 6 }]
+const fields1 = ['a', 'b', 'c']
+
+describe('table', () => {
+  it('has expected default classes', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: items1,
+        fields: fields1
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.classes()).toContain('table')
+    expect(wrapper.classes()).toContain('b-table')
+    expect(wrapper.classes().length).toBe(2)
+
+    wrapper.destroy()
+  })
+
+  it('has class "table-striped" when striped=true', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: items1,
+        fields: fields1,
+        striped: true
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.classes()).toContain('table-striped')
+    expect(wrapper.classes()).toContain('table')
+    expect(wrapper.classes()).toContain('b-table')
+    expect(wrapper.classes().length).toBe(3)
+
+    wrapper.destroy()
+  })
+
+  it('has class "table-bordered" when bordered=true', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: items1,
+        fields: fields1,
+        bordered: true
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.classes()).toContain('table-bordered')
+    expect(wrapper.classes()).toContain('table')
+    expect(wrapper.classes()).toContain('b-table')
+    expect(wrapper.classes().length).toBe(3)
+
+    wrapper.destroy()
+  })
+
+  it('has class "table-borderless" when borderless=true', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: items1,
+        fields: fields1,
+        borderless: true
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.classes()).toContain('table-borderless')
+    expect(wrapper.classes()).toContain('table')
+    expect(wrapper.classes()).toContain('b-table')
+    expect(wrapper.classes().length).toBe(3)
+
+    wrapper.destroy()
+  })
+
+  it('has class "table-hover" when hover=true', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: items1,
+        fields: fields1,
+        hover: true
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.classes()).toContain('table-hover')
+    expect(wrapper.classes()).toContain('table')
+    expect(wrapper.classes()).toContain('b-table')
+    expect(wrapper.classes().length).toBe(3)
+
+    wrapper.destroy()
+  })
+
+  it('has class "table-sm" when small=true', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: items1,
+        fields: fields1,
+        small: true
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.classes()).toContain('table-sm')
+    expect(wrapper.classes()).toContain('table')
+    expect(wrapper.classes()).toContain('b-table')
+    expect(wrapper.classes().length).toBe(3)
+
+    wrapper.destroy()
+  })
+
+  it('has class "table-dark" when dark=true', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: items1,
+        fields: fields1,
+        dark: true
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.classes()).toContain('table-dark')
+    expect(wrapper.classes()).toContain('table')
+    expect(wrapper.classes()).toContain('b-table')
+    expect(wrapper.classes().length).toBe(3)
+
+    wrapper.destroy()
+  })
+
+  it('has class "border" when outlined=true', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: items1,
+        fields: fields1,
+        outlined: true
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.classes()).toContain('border')
+    expect(wrapper.classes()).toContain('table')
+    expect(wrapper.classes()).toContain('b-table')
+    expect(wrapper.classes().length).toBe(3)
+
+    wrapper.destroy()
+  })
+
+  it('has class "b-table-fixed" when fixed=true', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: items1,
+        fields: fields1,
+        fixed: true
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.classes()).toContain('b-table-fixed')
+    expect(wrapper.classes()).toContain('table')
+    expect(wrapper.classes()).toContain('b-table')
+    expect(wrapper.classes().length).toBe(3)
+
+    wrapper.destroy()
+  })
+
+  it('has class "b-table-no-border-collapse" when no-border-collapse=true', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: items1,
+        fields: fields1,
+        noBorderCollapse: true
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.classes()).toContain('b-table-no-border-collapse')
+    expect(wrapper.classes()).toContain('table')
+    expect(wrapper.classes()).toContain('b-table')
+    expect(wrapper.classes().length).toBe(3)
+
+    wrapper.destroy()
+  })
+
+  it('has class "b-table-stacked" when stacked=true', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: items1,
+        fields: fields1,
+        stacked: true
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.classes()).toContain('b-table-stacked')
+    expect(wrapper.classes()).toContain('table')
+    expect(wrapper.classes()).toContain('b-table')
+    expect(wrapper.classes().length).toBe(3)
+
+    wrapper.destroy()
+  })
+
+  it('has class "b-table-stacked-md" when stacked=md', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: items1,
+        fields: fields1,
+        stacked: 'md'
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('TABLE')
+    expect(wrapper.classes()).toContain('b-table-stacked-md')
+    expect(wrapper.classes()).toContain('table')
+    expect(wrapper.classes()).toContain('b-table')
+    expect(wrapper.classes().length).toBe(3)
+
+    wrapper.destroy()
+  })
+
+  it('has class "b-table-sticky-header" when sticky-header=true', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: items1,
+        fields: fields1,
+        stickyHeader: true
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('b-table-sticky-header')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.find('table').classes()).toContain('table')
+    expect(wrapper.find('table').classes()).toContain('b-table')
+    expect(wrapper.find('table').classes().length).toBe(2)
+
+    wrapper.destroy()
+  })
+
+  it('has class "b-table-sticky-header" when sticky-header=100px', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: items1,
+        fields: fields1,
+        stickyHeader: '100px'
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('b-table-sticky-header')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.attributes('style')).toBeDefined()
+    expect(wrapper.attributes('style')).toContain(`max-height: 100px;`)
+    expect(wrapper.find('table').classes()).toContain('table')
+    expect(wrapper.find('table').classes()).toContain('b-table')
+    expect(wrapper.find('table').classes().length).toBe(2)
+
+    wrapper.destroy()
+  })
+
+  it('has class "table-responsive" when responsive=true', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: items1,
+        fields: fields1,
+        responsive: true
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('table-responsive')
+    expect(wrapper.classes().length).toBe(1)
+
+    const $table = wrapper.find('table')
+    expect($table.exists()).toBe(true)
+    expect($table.classes()).toContain('table')
+    expect($table.classes()).toContain('b-table')
+    expect($table.classes().length).toBe(2)
+
+    wrapper.destroy()
+  })
+
+  it('has class "table-responsive-md" when responsive=md', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: items1,
+        fields: fields1,
+        responsive: 'md'
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('table-responsive-md')
+    expect(wrapper.classes().length).toBe(1)
+
+    const $table = wrapper.find('table')
+    expect($table.exists()).toBe(true)
+    expect($table.classes()).toContain('table')
+    expect($table.classes()).toContain('b-table')
+    expect($table.classes().length).toBe(2)
+
+    wrapper.destroy()
+  })
+
+  it('stacked and responsive work together', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: items1,
+        fields: fields1,
+        stacked: true,
+        responsive: true
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('table-responsive')
+    expect(wrapper.classes().length).toBe(1)
+
+    const $table = wrapper.find('table')
+    expect($table.exists()).toBe(true)
+    expect($table.classes()).toContain('table')
+    expect($table.classes()).toContain('b-table')
+    expect($table.classes()).toContain('b-table-stacked')
+    expect($table.classes().length).toBe(3)
+
+    wrapper.destroy()
+  })
+
+  it('stacked has data-label attribute on all tbody > tr td', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: items1,
+        fields: fields1,
+        stacked: true
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.findAll('tbody > tr').length).toBe(2)
+    const $trs = wrapper.findAll('tbody > tr').wrappers
+
+    // Labels will have run through startCase
+    expect(
+      $trs[0]
+        .findAll('td')
+        .at(0)
+        .attributes('data-label')
+    ).toBe('A')
+    expect(
+      $trs[1]
+        .findAll('td')
+        .at(0)
+        .attributes('data-label')
+    ).toBe('A')
+
+    expect(
+      $trs[0]
+        .findAll('td')
+        .at(1)
+        .attributes('data-label')
+    ).toBe('B')
+    expect(
+      $trs[1]
+        .findAll('td')
+        .at(1)
+        .attributes('data-label')
+    ).toBe('B')
+
+    expect(
+      $trs[0]
+        .findAll('td')
+        .at(2)
+        .attributes('data-label')
+    ).toBe('C')
+    expect(
+      $trs[1]
+        .findAll('td')
+        .at(2)
+        .attributes('data-label')
+    ).toBe('C')
+
+    wrapper.destroy()
+  })
+
+  it('item _rowVariant works', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: [{ a: 1, _rowVariant: 'primary' }],
+        fields: ['a'],
+        dark: false
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.findAll('tbody > tr').length).toBe(1)
+    expect(wrapper.find('tbody > tr').classes()).toContain('table-primary')
+
+    await wrapper.setProps({
+      dark: true
+    })
+
+    expect(wrapper.findAll('tbody > tr').length).toBe(1)
+    expect(wrapper.find('tbody > tr').classes()).toContain('bg-primary')
+
+    wrapper.destroy()
+  })
+
+  it('item _cellVariants works', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: [{ a: 1, _cellVariants: { a: 'info' } }],
+        fields: ['a'],
+        dark: false
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.findAll('tbody > tr').length).toBe(1)
+    expect(wrapper.findAll('tbody > tr > td').length).toBe(1)
+    expect(wrapper.find('tbody > tr > td').classes()).toContain('table-info')
+
+    await wrapper.setProps({
+      dark: true
+    })
+
+    expect(wrapper.findAll('tbody > tr').length).toBe(1)
+    expect(wrapper.findAll('tbody > tr > td').length).toBe(1)
+    expect(wrapper.find('tbody > tr > td').classes()).toContain('bg-info')
+
+    wrapper.destroy()
+  })
+
+  it('changing items array works', async () => {
+    const items1 = [{ a: 1, b: 2 }, { a: 3, b: 4 }]
+    const items2 = [{ a: 3, b: 4 }]
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: items1,
+        fields: ['a', 'b']
+      }
+    })
+    expect(wrapper).toBeDefined()
+
+    expect(wrapper.findAll('tbody > tr').length).toBe(2)
+    await wrapper.setProps({
+      items: items2
+    })
+    expect(wrapper.findAll('tbody > tr').length).toBe(1)
+
+    wrapper.destroy()
+  })
+
+  it('tbody-tr-class works', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: [{ a: 1, b: 2 }, { a: 3, b: 4 }],
+        fields: ['a', 'b'],
+        tbodyTrClass: 'foobar'
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+
+    // Prop as a string
+    expect(wrapper.findAll('tbody > tr').length).toBe(2)
+    let $trs = wrapper.findAll('tbody > tr')
+    expect($trs.at(0).classes()).toContain('foobar')
+    expect($trs.at(1).classes()).toContain('foobar')
+
+    // As a function
+    await wrapper.setProps({
+      tbodyTrClass: item => {
+        return item.a === 1 ? 'foo' : 'bar'
+      }
+    })
+
+    expect(wrapper.findAll('tbody > tr').length).toBe(2)
+    $trs = wrapper.findAll('tbody > tr')
+    expect($trs.at(0).classes()).toContain('foo')
+    expect($trs.at(0).classes()).not.toContain('bar')
+    expect($trs.at(1).classes()).toContain('bar')
+    expect($trs.at(1).classes()).not.toContain('foo')
+
+    wrapper.destroy()
+  })
+
+  it('thead and tfoot variant and classes work', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: [{ a: 1, b: 2 }],
+        fields: ['a', 'b'],
+        footClone: true
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.findAll('thead > tr').length).toBe(1)
+    expect(wrapper.findAll('tfoot > tr').length).toBe(1)
+
+    expect(wrapper.find('thead').classes().length).toBe(0)
+    expect(wrapper.find('tfoot').classes().length).toBe(0)
+
+    await wrapper.setProps({
+      headVariant: 'light'
+    })
+
+    expect(wrapper.find('thead').classes()).toContain('thead-light')
+    expect(wrapper.find('tfoot').classes()).toContain('thead-light')
+
+    await wrapper.setProps({
+      footVariant: 'dark'
+    })
+
+    expect(wrapper.find('thead').classes()).toContain('thead-light')
+    expect(wrapper.find('tfoot').classes()).toContain('thead-dark')
+
+    await wrapper.setProps({
+      theadClass: 'foo',
+      tfootClass: 'bar'
+    })
+
+    expect(wrapper.find('thead').classes()).toContain('thead-light')
+    expect(wrapper.find('thead').classes()).toContain('foo')
+    expect(wrapper.find('tfoot').classes()).toContain('thead-dark')
+    expect(wrapper.find('tfoot').classes()).toContain('bar')
+
+    await wrapper.setProps({
+      theadTrClass: 'willy',
+      tfootTrClass: 'wonka'
+    })
+
+    expect(wrapper.find('thead > tr').classes()).toContain('willy')
+    expect(wrapper.find('tfoot > tr').classes()).toContain('wonka')
+
+    wrapper.destroy()
+  })
+
+  it('item field isRowHeader works', async () => {
+    const wrapper = mount(BTable, {
+      propsData: {
+        items: [{ a: 1, b: 2 }],
+        fields: [{ key: 'a', isRowHeader: true }, 'b']
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.findAll('tbody > tr').length).toBe(1)
+    expect(wrapper.findAll('tbody > tr > *').length).toBe(2)
+
+    expect(wrapper.findAll('tbody > tr > *').at(0).element.tagName).toBe('TH')
+    expect(
+      wrapper
+        .findAll('tbody > tr > *')
+        .at(0)
+        .attributes('role')
+    ).toBe('rowheader')
+    expect(
+      wrapper
+        .findAll('tbody > tr > *')
+        .at(0)
+        .attributes('scope')
+    ).toBe('row')
+
+    expect(wrapper.findAll('tbody > tr > *').at(1).element.tagName).toBe('TD')
+    expect(
+      wrapper
+        .findAll('tbody > tr > *')
+        .at(1)
+        .attributes('role')
+    ).toBe('cell')
+    expect(
+      wrapper
+        .findAll('tbody > tr > *')
+        .at(1)
+        .attributes('scope')
+    ).toBeUndefined()
+
+    wrapper.destroy()
+  })
+
+  it('item field tdAttr and tdClass works', async () => {
+    const wrapper = mount(
+      wrapWithMethods(BTable, {
+        parentTdAttrs() {
+          return { 'data-parent': 'parent' }
+        }
+      }),
+      {
+        propsData: {
+          items: [{ a: 1, b: 2, c: 3 }],
+          fields: [
+            { key: 'a', tdAttr: { 'data-foo': 'bar' } },
+            { key: 'b', tdClass: () => 'baz' },
+            { key: 'c', tdAttr: 'parentTdAttrs' }
+          ]
+        }
+      }
+    )
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.findAll('tbody > tr').length).toBe(1)
+    expect(wrapper.findAll('tbody > tr > td').length).toBe(3)
+
+    const $tds = wrapper.findAll('tbody > tr > td')
+
+    expect($tds.at(0).attributes('data-foo')).toBe('bar')
+    expect($tds.at(0).attributes('data-parent')).toBeUndefined()
+    expect($tds.at(0).classes().length).toBe(0)
+
+    expect($tds.at(1).classes()).toContain('baz')
+    expect($tds.at(1).attributes('data-foo')).toBeUndefined()
+    expect($tds.at(1).attributes('data-parent')).toBeUndefined()
+
+    expect($tds.at(2).attributes('data-parent')).toBe('parent')
+    expect($tds.at(2).attributes('data-foo')).toBeUndefined()
+    expect($tds.at(2).classes().length).toBe(0)
+
+    wrapper.destroy()
+  })
+
+  it('item field thAttr works', async () => {
+    const wrapper = mount(
+      wrapWithMethods(BTable, {
+        parentThAttrs(value, key, item, type) {
+          return { 'data-type': type }
+        }
+      }),
+      {
+        propsData: {
+          items: [{ a: 1, b: 2, c: 3 }],
+          fields: [
+            { key: 'a', thAttr: { 'data-foo': 'bar' } },
+            { key: 'b', thAttr: 'parentThAttrs', isRowHeader: true },
+            {
+              key: 'c',
+              thAttr: (v, k, i, t) => {
+                return { 'data-type': t }
+              }
+            }
+          ]
+        }
+      }
+    )
+
+    expect(wrapper).toBeDefined()
+    expect(wrapper.findAll('thead > tr').length).toBe(1)
+    expect(wrapper.findAll('thead > tr > th').length).toBe(3)
+    expect(wrapper.findAll('tbody > tr').length).toBe(1)
+    expect(wrapper.findAll('tbody > tr > td').length).toBe(2)
+    expect(wrapper.findAll('tbody > tr > th').length).toBe(1)
+
+    const $headerThs = wrapper.findAll('thead > tr > th')
+    expect($headerThs.at(0).attributes('data-foo')).toBe('bar')
+    expect($headerThs.at(0).attributes('data-type')).toBeUndefined()
+    expect($headerThs.at(0).classes().length).toBe(0)
+
+    expect($headerThs.at(1).attributes('data-foo')).toBeUndefined()
+    expect($headerThs.at(1).attributes('data-type')).toBe('head')
+    expect($headerThs.at(1).classes().length).toBe(0)
+
+    expect($headerThs.at(2).attributes('data-foo')).toBeUndefined()
+    expect($headerThs.at(2).attributes('data-type')).toBe('head')
+    expect($headerThs.at(2).classes().length).toBe(0)
+
+    const $bodyThs = wrapper.findAll('tbody > tr > th')
+
+    expect($bodyThs.at(0).attributes('data-foo')).toBeUndefined()
+    expect($bodyThs.at(0).attributes('data-type')).toBe('row')
+    expect($bodyThs.at(0).classes().length).toBe(0)
+
+    wrapper.destroy()
+  })
+})