Add numbered pagination and redesign the IT/EN language switch
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.
This commit is contained in:
@@ -0,0 +1,32 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { mountSuspended, mockNuxtImport } from '@nuxt/test-utils/runtime'
|
||||
import { ref } from 'vue'
|
||||
import LanguageSwitch from '~/components/LanguageSwitch.vue'
|
||||
|
||||
const langSwitchState = ref({ available: true, fallback: '/en/blog' })
|
||||
|
||||
mockNuxtImport('useRoute', () => () => ({ path: '/blog/mio-slug' }))
|
||||
mockNuxtImport('useLocale', () => () => ref('it'))
|
||||
mockNuxtImport('useLangSwitchState', () => () => langSwitchState)
|
||||
|
||||
describe('LanguageSwitch', () => {
|
||||
it('shows the current language as non-interactive and the other as a link to /en', async () => {
|
||||
langSwitchState.value = { available: true, fallback: '/en/blog' }
|
||||
|
||||
const wrapper = await mountSuspended(LanguageSwitch)
|
||||
|
||||
expect(wrapper.find('.lang-option.is-current').text()).toBe('Italiano')
|
||||
expect(wrapper.find('.lang-option.is-current').attributes('aria-current')).toBe('true')
|
||||
|
||||
const link = wrapper.find('a.lang-option')
|
||||
expect(link.text()).toBe('English')
|
||||
expect(link.attributes('href')).toBe('/en/blog/mio-slug')
|
||||
})
|
||||
|
||||
it('falls back to the given path when the current content has no translation', async () => {
|
||||
langSwitchState.value = { available: false, fallback: '/en/blog' }
|
||||
|
||||
const wrapper = await mountSuspended(LanguageSwitch)
|
||||
expect(wrapper.find('a.lang-option').attributes('href')).toBe('/en/blog')
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user