import { shallow, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import RegisterTable from '@/registry/components/RegisterTable'
import { FETCH_DRILLER_LIST } from '@/registry/store/actions.types'

const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(VueRouter)

describe('RegisterTable.vue', () => {
  let store
  let getters
  let actions

  beforeEach(() => {
    getters = {
      user: () => {},
      loading: () => false,
      listError: () => null,
      drillers: () => {
        return {
          next: 'http://www.example.com/api/?limit=30&offset=60',
          previous: 'http://www.example.com/api/?limit=30&offset=0',
          results: [
            {
              person_guid: '1',
              first_name: 'Bob',
              surname: 'Driller'
            },
            {
              person_guid: '2',
              first_name: 'Rob',
              surname: 'Well'
            }
          ]
        }
      }
    }
    actions = {
      [FETCH_DRILLER_LIST]: jest.fn()
    }
    store = new Vuex.Store({ getters, actions })
  })

  it('has a row for every person', () => {
    const wrapper = shallow(RegisterTable, {
      store,
      localVue,
      stubs: ['router-link', 'router-view']
    })
    expect(wrapper.findAll('#registry-table-row').length)
      .toEqual(2)
  })

  it('has the right people in each row', () => {
    const wrapper = shallow(RegisterTable, {
      store,
      localVue,
      stubs: ['router-link', 'router-view']
    })
    // first row
    expect(wrapper.findAll('#registry-table-row').at(0).text())
      .toContain('Driller')
    expect(wrapper.findAll('#registry-table-row').at(0).text())
      .not.toContain('Well')
    expect(wrapper.findAll('#registry-table-row').at(1).text())
      .toContain('Well')
    expect(wrapper.findAll('#registry-table-row').at(1).text())
      .not.toContain('Driller')
  })
  it('shows the pagination button for next page when a link is returned by API', () => {
    const wrapper = shallow(RegisterTable, {
      store,
      localVue,
      stubs: ['router-link', 'router-view']
    })
    expect(wrapper.find('#table-pagination-next').text()).toEqual('Next')
  })
  it('shows the pagination button for previous page when a link is returned by API', () => {
    const wrapper = shallow(RegisterTable, {
      store,
      localVue,
      stubs: ['router-link', 'router-view']
    })
    expect(wrapper.find('#table-pagination-prev').text()).toEqual('Previous')
  })
  it('dispatches fetch driller list with correct querystring when pagination next clicked', () => {
    const wrapper = shallow(RegisterTable, {
      store,
      localVue,
      stubs: ['router-link', 'router-view']
    })
    wrapper.find('#table-pagination-next').trigger('click')
    expect(actions.fetchDrillers.mock.calls[0][1]).toEqual({limit: '30', offset: '60'})
  })
  it('dispatches fetch driller list with correct querystring when pagination prev clicked', () => {
    const wrapper = shallow(RegisterTable, {
      store,
      localVue,
      stubs: ['router-link', 'router-view']
    })
    wrapper.find('#table-pagination-prev').trigger('click')
    expect(actions.fetchDrillers.mock.calls[0][1]).toEqual({limit: '30', offset: '0'})
  })
  it('emits the column code (e.g. surname) to be sorted when column sort button clicked', () => {
    const wrapper = shallow(RegisterTable, {
      store,
      localVue,
      stubs: ['router-link', 'router-view']
    })
    wrapper.find('th i').trigger('click')
    expect(wrapper.emitted('sort')).toEqual([['surname']])
  })
  it('has the right columns when searching for drillers', () => {
    const wrapper = shallow(RegisterTable, {
      store,
      localVue,
      stubs: ['router-link', 'router-view']
    })
    wrapper.setProps({ activity: 'DRILL' })
    const tableHeaders = wrapper.findAll('th')
    const expectedHeaders = [
      'Name',
      'Company Name',
      'Company Address',
      'Contact Information',
      'Qualified to Drill',
      'Certificate Issued By'
    ]
    expect(tableHeaders.length).toEqual(6)
    for (let i = 0; i < tableHeaders.length; i++) {
      expect(tableHeaders.wrappers[i].text()).toEqual(expectedHeaders[i])
    }
  })
  it('has the right columns when searching for well pump installers', () => {
    const wrapper = shallow(RegisterTable, {
      store,
      localVue,
      stubs: ['router-link', 'router-view']
    })
    wrapper.setProps({ activity: 'PUMP' })
    const tableHeaders = wrapper.findAll('th')
    const expectedHeaders = [
      'Name',
      'Company Name',
      'Company Address',
      'Contact Information',
      'Certificate Issued By'
    ]
    expect(tableHeaders.length).toEqual(5)
    for (let i = 0; i < tableHeaders.length; i++) {
      expect(tableHeaders.wrappers[i].text()).toEqual(expectedHeaders[i])
    }
  })
})

@@ -756,16 +756,51 @@
 guid: '1
+e252dca-ccb9-439a-a6ec-aeec0f7e4a03
 ',%0A     
@@ -859,16 +859,339 @@
 Driller'
+,%0A              organization_name: null,%0A              street_address: null,%0A              city: null,%0A              province_state: null,%0A              contact_tel: null,%0A              contact_email: null,%0A              activity: 'Well Driller',%0A              status: 'Active',%0A              registration_no: 'WD 08315530'
 %0A       
@@ -1240,16 +1240,51 @@
 _guid: '
+1e252dca-ccb9-439a-a6ec-aeec0f7e4a0
 2',%0A    
@@ -1341,16 +1341,339 @@
 : 'Well'
+,%0A              organization_name: null,%0A              street_address: null,%0A              city: null,%0A              province_state: null,%0A              contact_tel: null,%0A              contact_email: null,%0A              activity: 'Well Driller',%0A              status: 'Active',%0A              registration_no: 'WD 08315531'
 %0A       
@@ -2250,24 +2250,72 @@
 ew'%5D%0A    %7D)%0A
+    wrapper.setData(%7Bactivity: 'Well Driller'%7D)%0A
     // first

add better fake data (driller list)