80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
import { describe, it, expect, beforeEach } from 'vitest'
|
|
import { mount } from '@vue/test-utils'
|
|
import uiPlugin from '@nuxt/ui/vue-plugin'
|
|
import AuthShell from '../AuthShell.vue'
|
|
import { resetAuthShellNavigation } from '@/composables/useAuthShellNavigation'
|
|
|
|
beforeEach(() => {
|
|
resetAuthShellNavigation()
|
|
})
|
|
|
|
function mountShell(props: Record<string, unknown>, slots: Record<string, unknown> = {}) {
|
|
return mount(AuthShell, {
|
|
props,
|
|
slots,
|
|
global: {
|
|
plugins: [uiPlugin],
|
|
},
|
|
})
|
|
}
|
|
|
|
describe('AuthShell renders its title as the page heading and sets the document title', () => {
|
|
it('renders an h1 containing the title and sets document.title', () => {
|
|
const wrapper = mountShell({ title: 'Log in' })
|
|
|
|
const heading = wrapper.find('h1')
|
|
expect(heading.text()).toBe('Log in')
|
|
expect(heading.attributes('tabindex')).toBe('-1')
|
|
expect(document.title).toBe('Log in · RenewCMS')
|
|
})
|
|
})
|
|
|
|
describe('AuthShell with an empty title renders no heading and leaves document.title untouched', () => {
|
|
it('mounts directly with an empty title without rendering an h1 or touching document.title', () => {
|
|
document.title = 'Existing title · RenewCMS'
|
|
|
|
const wrapper = mountShell({ title: '' })
|
|
|
|
expect(wrapper.find('h1').exists()).toBe(false)
|
|
expect(document.title).toBe('Existing title · RenewCMS')
|
|
})
|
|
|
|
it('leaves document.title untouched and does not crash when the title changes to empty', async () => {
|
|
const wrapper = mountShell({ title: 'Create the owner account' })
|
|
|
|
expect(document.title).toBe('Create the owner account · RenewCMS')
|
|
|
|
await wrapper.setProps({ title: '' })
|
|
|
|
expect(wrapper.find('h1').exists()).toBe(false)
|
|
expect(document.title).toBe('Create the owner account · RenewCMS')
|
|
})
|
|
})
|
|
|
|
describe('AuthShell renders its notice and footer slots', () => {
|
|
it('renders the notice slot as-is inside the card, after the title, and the footer slot outside the card', () => {
|
|
const wrapper = mountShell(
|
|
{ title: 'Log in' },
|
|
{
|
|
notice: '<span>Your session expired.</span>',
|
|
footer: '<a href="/register/reset/request">Forgot password?</a>',
|
|
},
|
|
)
|
|
|
|
const notice = wrapper.find('span')
|
|
expect(notice.text()).toBe('Your session expired.')
|
|
expect(wrapper.findAll('[data-slot="root"][data-orientation]').length).toBe(1)
|
|
|
|
const card = wrapper.find('[data-testid="auth-card"]')
|
|
expect(card.element.contains(notice.element)).toBe(true)
|
|
|
|
const html = wrapper.html()
|
|
expect(html.indexOf('<h1')).toBeLessThan(html.indexOf('Your session expired.'))
|
|
|
|
const footerLink = wrapper.find('a[href="/register/reset/request"]')
|
|
expect(footerLink.exists()).toBe(true)
|
|
expect(footerLink.text()).toBe('Forgot password?')
|
|
expect(card.element.contains(footerLink.element)).toBe(false)
|
|
})
|
|
})
|