import { flushSync, track } from 'ripple';
describe('head elements', () => {
let originalTitle: string;
beforeEach(() => {
// Store original title to restore later
originalTitle = document.title;
});
afterEach(() => {
// Restore original title
document.title = originalTitle;
});
it('renders static title element', () => {
function App() {
return <>
{'Static Test Title'}
{'Content'}
;
}
render(App);
expect(document.title).toBe('Static Test Title');
expect(container.querySelector('div').textContent).toBe('Content');
});
it('renders reactive title element', () => {
function App() {
return <>
let &[title] = track('Initial Title');
{title}
{title}
;
}
render(App);
expect(document.title).toBe('Initial Title');
expect(container.querySelector('span').textContent).toBe('Initial Title');
const button = container.querySelector('button');
button.click();
flushSync();
expect(document.title).toBe('Updated Title');
expect(container.querySelector('span').textContent).toBe('Updated Title');
});
it('renders title with template literal', () => {
function App() {
return <>
let &[name] = track('World');
{`Hello ${name}!`}
;
}
render(App);
expect(document.title).toBe('Hello World!');
const button = container.querySelector('button');
button.click();
flushSync();
expect(document.title).toBe('Hello Ripple!');
});
it('renders title with computed value', () => {
function App() {
return <>
let &[count] = track(0);
let prefix = 'Count: ';
{prefix + count}
{count}
;
}
render(App);
expect(document.title).toBe('Count: 0');
const button = container.querySelector('button');
button.click();
flushSync();
expect(document.title).toBe('Count: 1');
expect(container.querySelector('span').textContent).toBe('1');
});
it('handles multiple title updates', () => {
function App() {
return <>
let &[step] = track(1);
{`Step ${step} of 3`}
;
}
render(App);
expect(document.title).toBe('Step 1 of 3');
const button = container.querySelector('button');
button.click();
flushSync();
expect(document.title).toBe('Step 2 of 3');
button.click();
flushSync();
expect(document.title).toBe('Step 3 of 3');
button.click();
flushSync();
expect(document.title).toBe('Step 1 of 3');
});
it('renders empty title', () => {
function App() {
return <>
{''}
{'Empty title test'}
;
}
render(App);
expect(document.title).toBe('');
});
it('renders title with conditional content', () => {
function App() {
return <>
let &[showPrefix] = track(true);
let &[title] = track('Main Page');
{showPrefix ? 'App - ' + title : title}
;
}
render(App);
expect(document.title).toBe('App - Main Page');
const buttons = container.querySelectorAll('button');
// Toggle prefix off
buttons[0].click();
flushSync();
expect(document.title).toBe('Main Page');
// Change page
buttons[1].click();
flushSync();
expect(document.title).toBe('Settings');
// Toggle prefix back on
buttons[0].click();
flushSync();
expect(document.title).toBe('App - Settings');
});
});