import { describe, it, expect } from 'vitest'
import { mount, RouterLinkStub } from '@vue/test-utils'
import { createRouter, createWebHistory } from 'vue-router'
import BottomNav from './BottomNav.vue'

async function mountAt(path) {
  const router = createRouter({
    history: createWebHistory(),
    routes: [{ path: '/:pathMatch(.*)*', component: { template: '<div/>' } }],
  })
  router.push(path)
  await router.isReady()
  return mount(BottomNav, { global: { plugins: [router], stubs: { RouterLink: RouterLinkStub } } })
}

describe('BottomNav', () => {
  it('renders all five nav items', async () => {
    const wrapper = await mountAt('/')
    const links = wrapper.findAllComponents(RouterLinkStub)
    expect(links).toHaveLength(5)
    expect(wrapper.text()).toContain('Home')
    expect(wrapper.text()).toContain('Posts')
    expect(wrapper.text()).toContain('Stories')
    expect(wrapper.text()).toContain('News')
    expect(wrapper.text()).toContain('About')
  })

  it('marks Home active only on an exact path match', async () => {
    const wrapper = await mountAt('/')
    const links = wrapper.findAllComponents(RouterLinkStub)
    const home = links.find(l => l.props('to') === '/')
    expect(home.classes()).toContain('text-primary-600')
  })

  it('marks a non-exact section active for nested paths', async () => {
    const wrapper = await mountAt('/blog/some-post')
    const links = wrapper.findAllComponents(RouterLinkStub)
    const posts = links.find(l => l.props('to') === '/blog')
    expect(posts.classes()).toContain('text-primary-600')
  })

  it('leaves inactive items unstyled', async () => {
    const wrapper = await mountAt('/about')
    const links = wrapper.findAllComponents(RouterLinkStub)
    const home = links.find(l => l.props('to') === '/')
    expect(home.classes()).toContain('text-gray-400')
  })
})