import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import uiPlugin from '@nuxt/ui/vue-plugin'
import AuthShell from '../AuthShell.vue'

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 renders its notice and footer slots', () => {
	it('renders the notice slot in an alert above 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 alertDescription = wrapper.find('[data-slot="description"]')
		expect(alertDescription.text()).toBe('Your session expired.')

		const html = wrapper.html()
		expect(html.indexOf('Your session expired.')).toBeLessThan(html.indexOf('<h1'))

		const footerLink = wrapper.find('a[href="/register/reset/request"]')
		expect(footerLink.exists()).toBe(true)
		expect(footerLink.text()).toBe('Forgot password?')
	})
})