davide
1247a2ca07
Blog and category archives now show a numbered page list (first, last, current +/-1, collapsing gaps into an ellipsis) instead of only previous/next — see shared/utils/pagination.ts's paginationRange(). Renders page links via NuxtLink's custom/v-slot API rather than letting it render its own <a>: RouterLink's built-in active-class/aria-current detection compares only the route's path, not its query string, so every ?page=N link was incorrectly marked as the current page. The language switch now shows both "Italiano / English" at all times, with the current one as plain non-interactive text and the other as a link, moved to the header's top-right corner instead of stacked under the logo.
40 lines
1.9 KiB
TypeScript
40 lines
1.9 KiB
TypeScript
import { describe, expect, it } from 'vitest'
|
|
import { mountSuspended } from '@nuxt/test-utils/runtime'
|
|
import PaginationNav from '~/components/PaginationNav.vue'
|
|
|
|
describe('PaginationNav', () => {
|
|
it('renders nothing when there is only one page', async () => {
|
|
const wrapper = await mountSuspended(PaginationNav, { props: { page: 1, pageCount: 1, locale: 'it' } })
|
|
expect(wrapper.find('nav').exists()).toBe(false)
|
|
})
|
|
|
|
it('marks only the current page as aria-current, others as plain links', async () => {
|
|
const wrapper = await mountSuspended(PaginationNav, { props: { page: 4, pageCount: 7, locale: 'it' } })
|
|
const current = wrapper.find('.pagination-link.is-current')
|
|
expect(current.text()).toBe('4')
|
|
expect(current.attributes('aria-current')).toBe('page')
|
|
|
|
const links = wrapper.findAll('a.pagination-link')
|
|
expect(links.map((l) => l.text())).toEqual(['1', '2', '3', '5', '6', '7'])
|
|
for (const link of links) {
|
|
expect(link.attributes('aria-current')).toBeUndefined()
|
|
}
|
|
})
|
|
|
|
it('collapses far-away pages into an ellipsis', async () => {
|
|
const wrapper = await mountSuspended(PaginationNav, { props: { page: 1, pageCount: 20, locale: 'it' } })
|
|
expect(wrapper.find('.pagination-ellipsis').exists()).toBe(true)
|
|
expect(wrapper.findAll('a.pagination-link').length).toBeLessThan(20)
|
|
})
|
|
|
|
it('disables the previous arrow on the first page and the next arrow on the last', async () => {
|
|
const first = await mountSuspended(PaginationNav, { props: { page: 1, pageCount: 5, locale: 'it' } })
|
|
expect(first.find('a.pagination-arrow[rel="prev"]').exists()).toBe(false)
|
|
expect(first.find('a.pagination-arrow[rel="next"]').exists()).toBe(true)
|
|
|
|
const last = await mountSuspended(PaginationNav, { props: { page: 5, pageCount: 5, locale: 'it' } })
|
|
expect(last.find('a.pagination-arrow[rel="next"]').exists()).toBe(false)
|
|
expect(last.find('a.pagination-arrow[rel="prev"]').exists()).toBe(true)
|
|
})
|
|
})
|