import { createAppLocalVue, waitNT } from '@/../tests/utils' // should be the first to implement default mocks
import loginForm from '../landing/components/LoginForm'
import { mount } from '@vue/test-utils'
import flushPromises from 'flush-promises'
import { loggedOutStore } from '@/../tests/factories/auth-store'
import store from '@/store'
import router from '@/router'

const localVue = createAppLocalVue()

describe('Login - Landing - Login Form', () => {
  it('Should load languages', async () => {
    let loadAllLanguages = jest.fn()
    let updateSelectedLanguage = jest.fn()
    let languages = [
      { text: 'Lang1', value: 'l1' },
      { text: 'Lang2', value: 'l2' },
      { text: 'Lang3', value: 'l3' },
    ]
    let getAllLanguages = jest.fn().mockReturnValue(languages)

    const wrapper = mount(loginForm, {
      localVue,
      store,
      router,
      computed: {
        getAllLanguages,
      },
      methods: {
        loadAllLanguages,
        updateSelectedLanguage,
      },
    })

    await flushPromises()
    expect(loadAllLanguages).toHaveBeenCalled()

    expect(wrapper.find('#language').vm.$props.options).toBe(languages)
    // change the language
    wrapper
      .find('#language')
      .findAll('option')
      .at(1)
      .setSelected()

    await waitNT(wrapper.vm)

    expect(updateSelectedLanguage).toBeCalledWith('l2')

    expect(wrapper.element).toMatchSnapshot()
    expect(wrapper.isVueInstance()).toBeTruthy()
  })

  it('Should route to enrolment page', async () => {
    const wrapper = mount(loginForm, {
      localVue,
      store,
      router,
      methods: {
        loadAllLanguages: jest.fn(),
      },
    })

    await flushPromises()

    // change the language
    wrapper
      .find({
        ref: 'getStarted',
      })
      .trigger('click')

    await waitNT(wrapper.vm)

    expect(wrapper.vm.$route.name).toMatch('Enrolment')
  })

  it('Should validate fields on submit', async () => {
    let loginUser = jest.fn()

    const wrapper = mount(loginForm, {
      localVue,
      store,
      router,
      methods: {
        loadAllLanguages: jest.fn(),
        loginUser,
      },
    })

    await flushPromises()

    // change the language
    wrapper
      .find({
        ref: 'submitButton',
      })
      .trigger('click')

    await waitNT(wrapper.vm)

    expect(wrapper.vm.$validator.errors.any()).toBe(true)
    expect(loginUser).not.toBeCalled()
  })

  it('Should submit on valid fields', async () => {
    let loginUser = jest.fn()

    const wrapper = mount(loginForm, {
      localVue,
      store,
      router,
      methods: {
        loadAllLanguages: jest.fn(),
        loginUser,
      },
    })

    // change the language
    wrapper.find({ ref: 'email' }).setValue('hs.moosa@elken.com')

    wrapper.find({ ref: 'password' }).setValue('Elken1200')

    wrapper.find({ ref: 'submitButton' }).trigger('click')

    await flushPromises()

    expect(wrapper.vm.$validator.errors.any()).toBe(false)
    expect(loginUser.mock.calls[0][0]['email']).toBe('hs.moosa@elken.com')
    expect(loginUser.mock.calls[0][0]['password']).toBe('Elken1200')
  })
})
