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', () => {
component App() {
{'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', () => {
component App() {
let &[title] = track('Initial Title');
{title}
{
title = 'Updated Title';
}}
>
{'Update 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', () => {
component App() {
let &[name] = track('World');
{`Hello ${name}!`}
{
name = 'Ripple';
}}
>
{'Change 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', () => {
component App() {
let &[count] = track(0);
let prefix = 'Count: ';
{prefix + count}
{
count++;
}}
>
{'Increment'}
{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', () => {
component App() {
let &[step] = track(1);
{`Step ${step} of 3`}
{
step = step % 3 + 1;
}}
>
{'Next Step'}
}
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', () => {
component App() {
{''}
{'Empty title test'}
}
render(App);
expect(document.title).toBe('');
});
it('renders title with conditional content', () => {
component App() {
let &[showPrefix] = track(true);
let &[title] = track('Main Page');
{showPrefix ? 'App - ' + title : title}
{
showPrefix = !showPrefix;
}}
>
{'Toggle Prefix'}
{
title = title === 'Main Page' ? 'Settings' : 'Main Page';
}}
>
{'Change Page'}
}
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');
});
});