import { track } from 'ripple';
describe('head elements', () => {
it('renders static title element', async () => {
function App() {
return <>
{'Static Test Title'}
{'Content'}
;
}
const { head, body } = await render(App);
const { document } = parseAsFullHtml(head, body);
expect(document.title).toBe('Static Test Title');
expect(document.querySelector('div').textContent).toBe('Content');
});
it('renders reactive title element', async () => {
function App() {
return <>
let &[title] = track('Initial Title');
{title}
{title}
;
}
const { head, body } = await render(App);
const { document } = parseAsFullHtml(head, body);
expect(document.title).toBe('Initial Title');
expect(document.querySelector('span').textContent).toBe('Initial Title');
});
it('renders title with template literal', async () => {
function App() {
return <>
let &[name] = track('World');
{`Hello ${name}!`}
;
}
const { head, body } = await render(App);
const { document } = parseAsFullHtml(head, body);
expect(document.title).toBe('Hello World!');
});
it('renders title with computed value', async () => {
function App() {
return <>
let &[count] = track(0);
let prefix = 'Count: ';
{prefix + count}
{count}
;
}
const { head, body } = await render(App);
const { document } = parseAsFullHtml(head, body);
expect(document.title).toBe('Count: 0');
});
it('renders empty title', async () => {
function App() {
return <>
{''}
{'Empty title test'}
;
}
const { head, body } = await render(App);
const { document } = parseAsFullHtml(head, body);
expect(document.title).toBe('');
});
it('renders title with conditional content', async () => {
function App() {
return <>
let &[showPrefix] = track(true);
let &[title] = track('Main Page');
{showPrefix ? 'App - ' + title : title}
;
}
const { head, body } = await render(App);
const { document } = parseAsFullHtml(head, body);
expect(document.title).toBe('App - Main Page');
});
});