import { track } from 'ripple';
describe('head elements', () => {
it('renders static title element', async () => {
function App() @{
<>
{'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() @{
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() @{
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() @{
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() @{
<>
{''}
{'Empty title test'}
}
const { head, body } = await render(App);
const { document } = parseAsFullHtml(head, body);
expect(document.title).toBe('');
});
it('renders external scripts with src attributes from a loop', async () => {
const Head = ({ scripts }: { scripts: { src: string }[] }) => @{
@for (const script of scripts) {
}
};
function App() @{
}
const { head, body } = await render(App);
const { document } = parseAsFullHtml(head, body);
const srcs = Array.from(document.querySelectorAll('head script[src]')).map(
(node) => node.getAttribute('src'),
).sort();
expect(srcs).toEqual(['/a.js', '/b.js']);
});
it('renders an inline raw-text