import { describe, it, expect, vi, beforeEach } from 'vitest'
import { mount, flushPromises } from '@vue/test-utils'
import { createRouter, createMemoryHistory } from 'vue-router'
import ElementPlus from 'element-plus'
import LoginView from '../src/views/LoginView.vue'
import axios from 'axios'

vi.mock('axios', () => ({
  default: {
    post: vi.fn(),
  },
}))

const mockedAxios = axios

const makeRouter = () =>
  createRouter({
    history: createMemoryHistory(),
    routes: [
      { path: '/', name: 'login', component: LoginView },
      { path: '/welcome', name: 'welcome', component: LoginView },
    ],
  })

describe('LoginView enter submit', () => {
  beforeEach(() => {
    localStorage.clear()
    vi.clearAllMocks()
  })

  it('submits login on form submit', async () => {
    mockedAxios.post.mockResolvedValue({
      data: { token: 'token-123', user: { id: 'u1' } },
    })

    const router = makeRouter()
    router.push('/')
    await router.isReady()

    const wrapper = mount(LoginView, {
      global: {
        plugins: [router, ElementPlus],
      },
    })

    const emailInput = wrapper.find('input[autocomplete="email"]')
    const passwordInput = wrapper.find(
      'input[autocomplete="current-password"]'
    )
    await emailInput.setValue('user@example.com')
    await passwordInput.setValue('password')

    await wrapper.find('form').trigger('submit')
    await flushPromises()

    expect(mockedAxios.post).toHaveBeenCalledWith(
      'http://localhost:8000/api/login',
      { email: 'user@example.com', password: 'password' }
    )
    expect(router.currentRoute.value.name).toBe('welcome')
  })
})