import { expect } from 'chai'
import sinon from 'sinon'
import { shallowMount } from '@vue/test-utils'
import { createStore } from 'vuex'
import App from '@/App'
import storedInquiries from '@/lib/storedInquiries'
import mutations from '@/store/mutations'
import { nextTick } from 'vue'

describe('App.vue', () => {
  afterEach(() => {
    sinon.restore()
  })

  it('Gets inquiries', () => {
    sinon.stub(storedInquiries, 'getStoredInquiries').returns([
      { id: 1 }, { id: 2 }, { id: 3 }
    ])
    const state = {
      predefinedInquiries: [],
      inquiries: []
    }
    const store = createStore({ state, mutations })
    shallowMount(App, {
      global: { 
        stubs: ['router-view'],
        plugins: [store]
      }
    })

    expect(state.inquiries).to.eql([{ id: 1 }, { id: 2 }, { id: 3 }])
  })

  it('Updates inquiries when they change in store', async () => {
    sinon.stub(storedInquiries, 'getStoredInquiries').returns([
      { id: 1, name: 'foo' }, { id: 2, name: 'baz' }, { id: 3, name: 'bar' }
    ])
    sinon.spy(storedInquiries, 'updateStorage')

    const state = {
      predefinedInquiries: [],
      inquiries: []
    }
    const store = createStore({ state, mutations })
    shallowMount(App, {
      global: { stubs: ['router-view'],
      plugins: [store] }
    })

    store.state.inquiries.splice(0, 1, { id: 1, name: 'new foo name' })
    await nextTick()

    expect(storedInquiries.updateStorage.calledTwice).to.equal(true)

    expect(storedInquiries.updateStorage.args[1][0]).to.eql([
      { id: 1, name: 'new foo name' },
      { id: 2, name: 'baz' },
      { id: 3, name: 'bar' }
    ])
  })
})