@prenta/admin 2.6.1 → 2.8.0

package/dist/__tests__/views/appearance-chrome.render.test.js

@@ -0,0 +1,688 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment happy-dom
+// @vitest-environment-options {"settings":{"disableIframePageLoading":true}}
+import { act, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+const HOUR = 3_600_000;
+function schemas() {
+    const readAt = new Date(Date.now() - 2 * HOUR).toISOString();
+    const source = { repo: 'actuate/website', branch: 'main', commit: 'a41f9c2e0b1d', readAt };
+    return [
+        {
+            region: 'header',
+            component: './src/components/site/Header.astro',
+            variants: { default: 'Default', centered: 'Centered', minimal: 'Logo + CTA' },
+            fields: {
+                logo: { type: 'brand', key: 'logo', label: 'Logo' },
+                menu: {
+                    type: 'menu',
+                    default: 'main',
+                    label: 'Menu',
+                    help: 'Mobile uses the menu assigned to Mobile, or this one.',
+                },
+                cta: { type: 'link', optional: true, label: 'Call-to-action button' },
+                phone: { type: 'text', optional: true, format: 'tel', label: 'Phone number' },
+                topMenu: { type: 'menu', optional: true, label: 'Top bar' },
+                search: { type: 'boolean', default: false, label: 'Search' },
+                sticky: { type: 'boolean', default: true, label: 'Stick to the top when scrolling' },
+                ...extraHeaderFields,
+            },
+            source,
+        },
+        {
+            region: 'footer',
+            component: './src/components/site/Footer.astro',
+            variants: { columns: 'Columns', compact: 'Compact', minimal: 'Single line' },
+            fields: {
+                tone: { type: 'select', options: ['dark', 'light'], default: 'dark', label: 'Background' },
+                about: { type: 'textarea', max: 200, label: 'About text' },
+                cols: { type: 'menu', list: true, max: 3, label: 'Link columns' },
+                social: { type: 'social', label: 'Social links' },
+                legalMenu: { type: 'menu', optional: true, label: 'Legal links' },
+                copy: { type: 'text', tokens: ['{year}'], label: 'Copyright' },
+            },
+            source,
+        },
+    ];
+}
+let extraHeaderFields = {};
+let header;
+let footer;
+let announcement;
+let settings;
+let overridesStatus = 200;
+let calls = [];
+let failNext = null;
+function reset() {
+    extraHeaderFields = {};
+    header = {
+        region: 'header',
+        variant: 'default',
+        fields: {
+            menu: 'main',
+            cta: { on: true, label: 'Get a free audit', url: '/seo-audit' },
+            phone: { on: true, value: '(757) 555-0100' },
+            topMenu: { on: true, value: 'top' },
+            search: false,
+            sticky: true,
+        },
+        orphans: [{ key: 'tagline', value: 'Since 2009', orphanedAt: new Date().toISOString() }],
+        updatedBy: null,
+        updatedAt: null,
+    };
+    footer = {
+        region: 'footer',
+        variant: 'columns',
+        fields: {
+            tone: 'dark',
+            about: 'Digital marketing for growing businesses.',
+            cols: ['company'],
+            social: [{ platform: 'LinkedIn', url: 'https://linkedin.com/company/actuate' }],
+            legalMenu: { on: true, value: 'legal' },
+            copy: '© {year} Actuate Media. All rights reserved.',
+        },
+        orphans: [],
+        updatedBy: null,
+        updatedAt: null,
+    };
+    announcement = {
+        id: 'ann_1',
+        on: true,
+        text: 'Free SEO audits are back for Q4. Limited spots.',
+        link: { label: 'Book yours', url: '/seo-audit' },
+        tone: 'brand',
+        dismissible: true,
+        schedule: null,
+    };
+    settings = { revalidateUrl: 'https://actuatemedia.com/api/revalidate', previewUrl: null };
+    overridesStatus = 200;
+    calls = [];
+    failNext = null;
+}
+const MENUS = [
+    {
+        slug: 'main',
+        title: 'Main',
+        data: {
+            slug: 'main',
+            name: 'Main',
+            items: [
+                { id: 'm1', label: 'Services' },
+                { id: 'm2', label: 'Work' },
+            ],
+        },
+    },
+    {
+        slug: 'top',
+        title: 'Top',
+        data: { slug: 'top', name: 'Top bar', items: [{ id: 't1', label: 'Careers' }] },
+    },
+    {
+        slug: 'company',
+        title: 'Footer · Company',
+        data: { slug: 'company', name: 'Footer · Company', items: [{ id: 'c1', label: 'About' }] },
+    },
+    {
+        slug: 'legal',
+        title: 'Legal',
+        data: { slug: 'legal', name: 'Legal', items: [{ id: 'l1', label: 'Privacy' }] },
+    },
+];
+const OVERRIDES = {
+    pages: [
+        {
+            id: 'p1',
+            collection: 'pages',
+            title: 'Free SEO Audit',
+            path: '/seo-audit',
+            locale: null,
+            header: { variant: 'minimal' },
+        },
+        {
+            id: 'p2',
+            collection: 'pages',
+            title: 'Careers',
+            path: '/careers',
+            locale: null,
+            header: { fields: { cta: { on: false } } },
+        },
+        {
+            id: 'p3',
+            collection: 'pages',
+            title: 'Thank you',
+            path: '/thank-you',
+            locale: null,
+            footer: null,
+        },
+    ],
+    truncated: false,
+};
+function etag(name, value) {
+    return `W/"${name}-${JSON.stringify(value).length}"`;
+}
+const cmsApi = vi.fn(async (endpoint, options = {}) => {
+    const method = (options.method ?? 'GET').toUpperCase();
+    const body = options.body ? JSON.parse(options.body) : undefined;
+    calls.push({ endpoint, method, headers: options.headers ?? {}, body });
+    if (failNext && failNext.endpoint === endpoint && method !== 'GET') {
+        const { status, error } = failNext;
+        failNext = null;
+        return { error, status };
+    }
+    if (endpoint === '/chrome/schema') {
+        return {
+            data: {
+                regions: schemas(),
+                sync: {
+                    status: 'synced',
+                    source: schemas()[0].source,
+                    regions: ['header', 'footer'],
+                    fieldCount: 13,
+                },
+            },
+            status: 200,
+        };
+    }
+    if (endpoint === '/chrome/header' || endpoint === '/chrome/footer') {
+        const region = endpoint === '/chrome/header' ? 'header' : 'footer';
+        if (method === 'PUT') {
+            const next = {
+                ...(region === 'header' ? header : footer),
+                variant: body.variant,
+                fields: body.fields,
+            };
+            if (region === 'header')
+                header = next;
+            else
+                footer = next;
+        }
+        const value = region === 'header' ? header : footer;
+        return { data: value, status: 200, etag: etag(region, value) };
+    }
+    if (endpoint.startsWith('/chrome/header/orphans/') && method === 'DELETE') {
+        const key = decodeURIComponent(endpoint.split('/').pop());
+        header = { ...header, orphans: header.orphans.filter((o) => o.key !== key) };
+        return { data: header, status: 200, etag: etag('header', header) };
+    }
+    if (endpoint === '/chrome/announcement') {
+        if (method === 'PUT') {
+            const changed = body.text !== announcement.text ||
+                body.tone !== announcement.tone ||
+                JSON.stringify(body.link) !== JSON.stringify(announcement.link);
+            announcement = { ...body, id: changed ? 'ann_2' : announcement.id };
+        }
+        return { data: announcement, status: 200, etag: etag('announcement', announcement) };
+    }
+    if (endpoint === '/chrome/settings') {
+        if (method === 'PUT') {
+            const created = !settings.revalidateUrl && !!body.revalidateUrl;
+            // A key left out is left alone, as on the server.
+            settings = {
+                revalidateUrl: 'revalidateUrl' in body ? body.revalidateUrl : settings.revalidateUrl,
+                previewUrl: 'previewUrl' in body ? body.previewUrl : settings.previewUrl,
+            };
+            return { data: { ...settings, ...(created ? { secret: 'whsec_test' } : {}) }, status: 200 };
+        }
+        return { data: settings, status: 200 };
+    }
+    if (endpoint === '/chrome/overrides') {
+        return overridesStatus === 200
+            ? { data: OVERRIDES, status: 200 }
+            : { error: 'Not found', status: overridesStatus };
+    }
+    if (endpoint.startsWith('/collections/navigations')) {
+        return { data: { docs: MENUS }, status: 200 };
+    }
+    if (endpoint === '/appearance')
+        return { data: { siteTitle: 'Actuate' }, status: 200 };
+    return { error: `Unhandled ${method} ${endpoint}`, status: 404 };
+});
+vi.mock('../../lib/api.js', () => ({ cmsApi: (e, o) => cmsApi(e, o) }));
+const toast = vi.hoisted(() => Object.assign(vi.fn(), { error: vi.fn(), success: vi.fn() }));
+vi.mock('sonner', () => ({ toast }));
+const { AppearanceChrome } = await import('../../views/AppearanceChrome.js');
+const { CODE_SAMPLES } = await import('../../views/header-footer/code-samples.js');
+const navigate = vi.fn();
+const COLLECTIONS = new Map([
+    ['pages', { slug: 'pages', type: 'page' }],
+    ['navigations', { slug: 'navigations' }],
+]);
+function renderScreen(role = 'EDITOR', tab) {
+    window.history.replaceState(null, '', tab ? `/admin/appearance/header?tab=${tab}` : '/admin/appearance/header');
+    return render(_jsx(AppearanceChrome, { onNavigate: navigate, session: { user: { role } }, collections: COLLECTIONS }));
+}
+async function loaded() {
+    await screen.findByRole('heading', { name: 'Header & Footer', level: 1 });
+    await waitFor(() => expect(screen.queryByText(/Loading the header and footer/)).toBeNull());
+}
+function lastCall(endpoint, method) {
+    return [...calls].reverse().find((c) => c.endpoint === endpoint && c.method === method);
+}
+beforeEach(() => {
+    reset();
+    cmsApi.mockClear();
+    toast.mockClear();
+    toast.error.mockClear();
+    navigate.mockClear();
+});
+afterEach(() => {
+    vi.unstubAllGlobals();
+});
+describe('Header & Footer frame', () => {
+    it('shows the kit header, tabs in order and the Live badge', async () => {
+        renderScreen();
+        await loaded();
+        expect(screen.getByText(/Built by your developer in code\./)).toBeTruthy();
+        const tabs = screen.getAllByRole('tab').map((tab) => tab.textContent);
+        expect(tabs).toEqual(['Announcement barLive', 'Header', 'Footer', 'Developer']);
+        expect(screen.getByRole('tab', { name: /Announcement bar/ }).getAttribute('aria-selected')).toBe('true');
+        fireEvent.click(screen.getByRole('button', { name: 'Edit menus' }));
+        expect(navigate).toHaveBeenCalledWith('/appearance/menus');
+    });
+    it('opens the tab named in ?tab= and puts tab changes in the URL', async () => {
+        renderScreen('EDITOR', 'footer');
+        await loaded();
+        expect(screen.getByRole('tab', { name: 'Footer' }).getAttribute('aria-selected')).toBe('true');
+        fireEvent.click(screen.getByRole('tab', { name: 'Developer' }));
+        expect(navigate).toHaveBeenCalledWith('/appearance/header?tab=developer');
+    });
+});
+describe('Announcement bar tab (P-12)', () => {
+    it('renders the message with a live counter, the link, tones and switches', async () => {
+        renderScreen();
+        await loaded();
+        const message = screen.getByLabelText('Message');
+        expect(message.value).toBe(announcement.text);
+        expect(message.maxLength).toBe(110);
+        expect(screen.getByText(/· keep it to one line on mobile\./).textContent).toBe('47/110 · keep it to one line on mobile.');
+        fireEvent.change(message, { target: { value: 'Short' } });
+        expect(screen.getByText(/· keep it to one line on mobile\./).textContent).toBe('5/110 · keep it to one line on mobile.');
+        expect(screen.getByLabelText('Link text').value).toBe('Book yours');
+        expect(screen.getByLabelText('Links to').value).toBe('/seo-audit');
+        const style = screen.getByRole('radiogroup', { name: 'Style' });
+        expect(within(style)
+            .getAllByRole('radio')
+            .map((r) => r.value)).toEqual(['brand', 'dark', 'alert']);
+        expect(screen.getByText('Your site styles each tone with its own colors.')).toBeTruthy();
+        expect(screen.getByRole('switch', { name: 'Visitors can dismiss it' }).getAttribute('aria-checked')).toBe('true');
+        // The preview mock shows the draft bar.
+        expect(document.querySelector('[data-preview-announcement]')?.textContent).toContain('Short');
+    });
+    it('saves with If-Match, without an id, and a changed message gets a new id', async () => {
+        renderScreen();
+        await loaded();
+        fireEvent.change(screen.getByLabelText('Message'), { target: { value: 'New message' } });
+        fireEvent.click(screen.getByRole('radio', { name: 'Alert' }));
+        fireEvent.click(await screen.findByRole('button', { name: 'Save' }));
+        await waitFor(() => expect(toast).toHaveBeenCalledWith('Saved · site revalidated'));
+        const put = lastCall('/chrome/announcement', 'PUT');
+        expect(put.headers['If-Match']).toMatch(/^W\/"announcement-/);
+        expect(put.body).toEqual({
+            on: true,
+            text: 'New message',
+            link: { label: 'Book yours', url: '/seo-audit' },
+            tone: 'alert',
+            dismissible: true,
+            schedule: null,
+        });
+        expect(announcement.id).toBe('ann_2');
+        await waitFor(() => expect(screen.queryByRole('button', { name: 'Save' })).toBeNull());
+    });
+    it('turning the bar off greys the body, and the badge follows the save', async () => {
+        renderScreen();
+        await loaded();
+        fireEvent.click(screen.getByRole('switch', { name: 'Show announcement bar' }));
+        const body = document.querySelector('[data-off]');
+        expect(body.className).toContain('opacity-50');
+        expect(body.hasAttribute('inert')).toBe(true);
+        // Live until the change is saved.
+        expect(screen.getByRole('tab', { name: /Announcement bar/ }).textContent).toContain('Live');
+        fireEvent.click(screen.getByRole('button', { name: 'Save' }));
+        await waitFor(() => expect(screen.getByRole('tab', { name: /Announcement bar/ }).textContent).toContain('Off'));
+        expect(lastCall('/chrome/announcement', 'PUT').body.on).toBe(false);
+    });
+    it('schedules with zoned ISO times and refuses an end before the start', async () => {
+        renderScreen();
+        await loaded();
+        fireEvent.click(screen.getByRole('switch', { name: 'Schedule' }));
+        const starts = screen.getByLabelText('Starts');
+        const ends = screen.getByLabelText('Ends');
+        fireEvent.change(starts, { target: { value: '2026-11-01T09:00' } });
+        fireEvent.change(ends, { target: { value: '2026-10-31T09:00' } });
+        expect(await screen.findByText('The end has to be after the start.')).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Save' }).disabled).toBe(true);
+        fireEvent.change(ends, { target: { value: '2026-11-08T17:30' } });
+        fireEvent.click(screen.getByRole('button', { name: 'Save' }));
+        await waitFor(() => expect(lastCall('/chrome/announcement', 'PUT')).toBeTruthy());
+        const { schedule } = lastCall('/chrome/announcement', 'PUT').body;
+        expect(schedule).toEqual({
+            startsAt: new Date('2026-11-01T09:00').toISOString(),
+            endsAt: new Date('2026-11-08T17:30').toISOString(),
+        });
+        expect(schedule.startsAt).toMatch(/Z$/);
+    });
+    it('keeps the draft and says why when the save is stale', async () => {
+        renderScreen();
+        await loaded();
+        failNext = {
+            endpoint: '/chrome/announcement',
+            status: 412,
+            error: 'This changed since you opened it. Reload to see the latest, then save again.',
+        };
+        fireEvent.change(screen.getByLabelText('Message'), { target: { value: 'Mine' } });
+        fireEvent.click(screen.getByRole('button', { name: 'Save' }));
+        await waitFor(() => expect(toast.error).toHaveBeenCalledWith('Announcement bar: This changed since you opened it. Reload to see the latest, then save again.'));
+        expect(screen.getByLabelText('Message').value).toBe('Mine');
+        expect(screen.getByRole('button', { name: 'Save' })).toBeTruthy();
+    });
+});
+describe('Header tab (P-11)', () => {
+    it('shows the source, variants from the schema and a field per schema key', async () => {
+        renderScreen('EDITOR', 'header');
+        await loaded();
+        expect(screen.getByText('src/components/site/Header.astro')).toBeTruthy();
+        expect(screen.getByText('Schema in sync · actuate/website@a41f9c2 · 2 hours ago')).toBeTruthy();
+        expect(screen.getByRole('link', { name: 'View in repo ↗' }).getAttribute('href')).toBe('https://github.com/actuate/website/blob/a41f9c2e0b1d/src/components/site/Header.astro');
+        const variants = screen.getByRole('radiogroup', { name: 'header variant' });
+        expect(within(variants)
+            .getAllByRole('radio')
+            .map((r) => r.textContent)).toEqual(['Defaultdefault', 'Centeredcentered', 'Logo + CTAminimal']);
+        expect(within(variants)
+            .getByRole('radio', { name: /Default/ })
+            .getAttribute('aria-checked')).toBe('true');
+        const keys = [...document.querySelectorAll('[data-field]')].map((el) => el.getAttribute('data-field'));
+        expect(keys).toEqual(['logo', 'menu', 'cta', 'phone', 'topMenu', 'search', 'sticky']);
+        expect(screen.getByText('From brand settings')).toBeTruthy();
+        expect(screen.getByLabelText('Button text').value).toBe('Get a free audit');
+        expect(screen.getByRole('textbox', { name: 'Phone number' }).value).toBe('(757) 555-0100');
+        expect(screen
+            .getByRole('switch', { name: 'Stick to the top when scrolling' })
+            .getAttribute('aria-checked')).toBe('true');
+    });
+    it('shows a field the schema adds, with no admin change', async () => {
+        extraHeaderFields = {
+            promo: { type: 'text', label: 'Promo line', help: 'Shown beside the logo.' },
+        };
+        renderScreen('EDITOR', 'header');
+        await loaded();
+        expect(document.querySelector('[data-field="promo"]')).toBeTruthy();
+        const promo = screen.getByLabelText('Promo line');
+        expect(screen.getByText('Shown beside the logo.')).toBeTruthy();
+        fireEvent.change(promo, { target: { value: 'Now booking' } });
+        fireEvent.click(screen.getByRole('button', { name: 'Save' }));
+        await waitFor(() => expect(lastCall('/chrome/header', 'PUT')).toBeTruthy());
+        expect(lastCall('/chrome/header', 'PUT').body.fields.promo).toBe('Now booking');
+    });
+    it('saves the variant and fields with If-Match', async () => {
+        renderScreen('EDITOR', 'header');
+        await loaded();
+        fireEvent.click(screen.getByRole('radio', { name: /Logo \+ CTA/ }));
+        fireEvent.click(screen.getByRole('switch', { name: 'Search' }));
+        fireEvent.click(screen.getByRole('button', { name: 'Save' }));
+        await waitFor(() => expect(toast).toHaveBeenCalledWith('Saved · site revalidated'));
+        const put = lastCall('/chrome/header', 'PUT');
+        expect(put.headers['If-Match']).toMatch(/^W\/"header-/);
+        expect(put.body).toEqual({
+            variant: 'minimal',
+            fields: {
+                menu: 'main',
+                cta: { on: true, label: 'Get a free audit', url: '/seo-audit' },
+                phone: { on: true, value: '(757) 555-0100' },
+                topMenu: { on: true, value: 'top' },
+                search: true,
+                sticky: true,
+            },
+        });
+    });
+    it('blocks Save with the reason when a value would be refused', async () => {
+        renderScreen('EDITOR', 'header');
+        await loaded();
+        fireEvent.change(screen.getByLabelText('Links to'), {
+            target: { value: 'javascript:alert(1)' },
+        });
+        expect(await screen.findByText('Links can be a site path or an http(s), mailto or tel link.')).toBeTruthy();
+        expect(screen.getByRole('button', { name: 'Save' }).disabled).toBe(true);
+    });
+    it('shows the orphan row from `orphans`, and Remove now deletes it', async () => {
+        renderScreen('EDITOR', 'header');
+        await loaded();
+        expect(screen.getByText('1 saved value isn’t in the schema anymore:')).toBeTruthy();
+        expect(screen.getByText('header.tagline')).toBeTruthy();
+        expect(screen.getByText(/It’s no longer sent to the site and will be removed in 30 days\./)).toBeTruthy();
+        fireEvent.click(screen.getByRole('button', { name: 'Remove now' }));
+        await waitFor(() => expect(toast).toHaveBeenCalledWith('Removed header.tagline'));
+        expect(lastCall('/chrome/header/orphans/tagline', 'DELETE')).toBeTruthy();
+        expect(screen.queryByText('header.tagline')).toBeNull();
+        // Not a form change.
+        expect(screen.queryByRole('button', { name: 'Save' })).toBeNull();
+    });
+    it('keeps the old ETag when Remove now shows someone else saved meanwhile', async () => {
+        const loadedTag = etag('header', header);
+        renderScreen('EDITOR', 'header');
+        await loaded();
+        // Another editor saves the header after this form loaded.
+        header = { ...header, fields: { ...header.fields, sticky: false } };
+        fireEvent.click(screen.getByRole('button', { name: 'Remove now' }));
+        await waitFor(() => expect(toast.error).toHaveBeenCalledWith('Removed. Someone else changed the header since you opened it: reload to see their changes before you save.'));
+        expect(screen.queryByText('header.tagline')).toBeNull();
+        fireEvent.change(screen.getByLabelText('Button text'), { target: { value: 'Mine' } });
+        fireEvent.click(screen.getByRole('button', { name: 'Save' }));
+        await waitFor(() => expect(lastCall('/chrome/header', 'PUT')).toBeTruthy());
+        // The stale form saves against the ETag it loaded with, so the server can refuse it.
+        expect(lastCall('/chrome/header', 'PUT').headers['If-Match']).toBe(loadedTag);
+    });
+    it('lists the pages that override the header', async () => {
+        renderScreen('EDITOR', 'header');
+        await loaded();
+        const card = screen.getByRole('region', { name: 'Page overrides' });
+        const rows = within(card).getAllByRole('link');
+        expect(rows.map((row) => row.textContent)).toEqual([
+            'Free SEO Auditheader:minimal/seo-audit',
+            'Careersheader.cta: off/careers',
+        ]);
+        fireEvent.click(rows[0]);
+        expect(navigate).toHaveBeenCalledWith('/pages/p1/edit');
+    });
+    it('says so when the CMS is too old to list overrides', async () => {
+        overridesStatus = 404;
+        renderScreen('EDITOR', 'header');
+        await loaded();
+        expect(screen.getByText('Update the CMS to list the pages that override the header.')).toBeTruthy();
+    });
+    it('says so when the overrides fail to load', async () => {
+        overridesStatus = 500;
+        renderScreen('EDITOR', 'header');
+        await loaded();
+        expect(screen.getByText('Couldn’t load the pages that override the header.')).toBeTruthy();
+    });
+    it('previews the draft in the mock, at desktop and mobile widths', async () => {
+        renderScreen('EDITOR', 'header');
+        await loaded();
+        expect(screen.getByText('built-in mock · set a Preview URL to render your components')).toBeTruthy();
+        const head = document.querySelector('[data-preview-header]');
+        expect(head.textContent).toContain('Services');
+        expect(head.textContent).toContain('Get a free audit');
+        fireEvent.change(screen.getByLabelText('Button text'), { target: { value: 'Call us' } });
+        expect(document.querySelector('[data-preview-header]').textContent).toContain('Call us');
+        fireEvent.click(screen.getByRole('radio', { name: 'Mobile' }));
+        expect(document.querySelector('[data-preview-site]').getAttribute('data-viewport')).toBe('mob');
+    });
+    it('is read-only for a viewer', async () => {
+        renderScreen('VIEWER', 'header');
+        await loaded();
+        expect(screen.getByRole('note').textContent).toContain('only editors and admins can change');
+        expect(screen.getByLabelText('Button text').disabled).toBe(true);
+        expect(screen.getByRole('button', { name: 'Remove now' }).disabled).toBe(true);
+        expect(screen.getByRole('radio', { name: /Centered/ }).disabled).toBe(true);
+    });
+});
+describe('Footer tab (P-11)', () => {
+    it('renders the footer variants and fields from its schema', async () => {
+        renderScreen('EDITOR', 'footer');
+        await loaded();
+        expect(screen.getByText('src/components/site/Footer.astro')).toBeTruthy();
+        const variants = screen.getByRole('radiogroup', { name: 'footer variant' });
+        expect(within(variants)
+            .getAllByRole('radio')
+            .map((r) => r.textContent)).toEqual(['Columnscolumns', 'Compactcompact', 'Single lineminimal']);
+        const background = screen.getByRole('radiogroup', { name: 'Background' });
+        expect(within(background).getAllByRole('radio')).toHaveLength(2);
+        expect(screen.getByLabelText('Link columns 1').value).toBe('company');
+        expect(screen.getByLabelText('Link columns 3')).toBeTruthy();
+        expect(screen.getByText('{year} updates automatically.')).toBeTruthy();
+        const card = screen.getByRole('region', { name: 'Page overrides' });
+        expect(within(card)
+            .getAllByRole('link')
+            .map((row) => row.textContent)).toEqual(['Thank youfooter: none/thank-you']);
+        // The mock fills {year}.
+        expect(document.querySelector('[data-preview-footer]').textContent).toContain(`© ${new Date().getFullYear()} Actuate Media`);
+    });
+    it('adds and removes social links and saves the list', async () => {
+        renderScreen('EDITOR', 'footer');
+        await loaded();
+        fireEvent.click(screen.getByRole('button', { name: 'Add link' }));
+        const urls = screen.getAllByLabelText(/ URL$/);
+        expect(urls).toHaveLength(2);
+        fireEvent.change(urls[1], { target: { value: 'https://facebook.com/actuate' } });
+        fireEvent.click(screen.getByRole('button', { name: 'Remove LinkedIn' }));
+        fireEvent.click(screen.getByRole('button', { name: 'Save' }));
+        await waitFor(() => expect(lastCall('/chrome/footer', 'PUT')).toBeTruthy());
+        expect(lastCall('/chrome/footer', 'PUT').body.fields.social).toEqual([
+            { platform: 'Facebook', url: 'https://facebook.com/actuate' },
+        ]);
+    });
+});
+describe('Preview URL', () => {
+    it('puts the token in the query, keeping a fragment and replacing an old draft', async () => {
+        settings.previewUrl = 'https://preview.example.com/__prenta/chrome?draft=old&site=main#chrome';
+        renderScreen('EDITOR', 'header');
+        await loaded();
+        const frame = screen.getByTitle('Site preview with draft values');
+        const src = new URL(frame.getAttribute('src'));
+        expect(src.pathname).toBe('/__prenta/chrome');
+        expect(src.hash).toBe('#chrome');
+        expect(src.searchParams.getAll('draft')).toHaveLength(1);
+        expect(src.searchParams.get('draft')).toMatch(/^[0-9a-f]{24}$/);
+        expect(src.searchParams.get('site')).toBe('main');
+    });
+    it('renders the site in an iframe and posts the draft to its origin only', async () => {
+        settings.previewUrl = 'https://preview.example.com/__prenta/chrome';
+        renderScreen('EDITOR', 'header');
+        await loaded();
+        const frame = screen.getByTitle('Site preview with draft values');
+        const src = new URL(frame.getAttribute('src'));
+        expect(src.origin + src.pathname).toBe('https://preview.example.com/__prenta/chrome');
+        const token = src.searchParams.get('draft');
+        expect(token).toMatch(/^[0-9a-f]{24}$/);
+        expect(screen.getByText('preview.example.com · draft values')).toBeTruthy();
+        const post = vi.fn();
+        Object.defineProperty(frame, 'contentWindow', {
+            value: { postMessage: post },
+            configurable: true,
+        });
+        fireEvent.change(screen.getByLabelText('Button text'), { target: { value: 'Call us' } });
+        await waitFor(() => expect(post).toHaveBeenCalled());
+        const [message, origin] = post.mock.calls.at(-1);
+        expect(origin).toBe('https://preview.example.com');
+        expect(message.type).toBe('prenta:chrome-preview');
+        expect(message.token).toBe(token);
+        expect(message.chrome.header.fields.cta).toEqual({ label: 'Call us', url: '/seo-audit' });
+        expect(message.chrome.header.fields.menu).toEqual({
+            id: 'main',
+            name: 'Main',
+            items: [
+                { label: 'Services', url: '' },
+                { label: 'Work', url: '' },
+            ],
+        });
+        expect(message.chrome.announcement).toMatchObject({ id: 'ann_1', tone: 'brand' });
+        // A ready message from the frame gets the draft again; one from elsewhere doesn't.
+        post.mockClear();
+        await act(async () => {
+            window.dispatchEvent(new MessageEvent('message', {
+                origin: 'https://evil.example',
+                data: { type: 'prenta:chrome-preview-ready', token },
+            }));
+        });
+        expect(post).not.toHaveBeenCalled();
+    });
+});
+describe('Developer tab (P-13)', () => {
+    it('shows the samples, the live schema status, settings and local dev', async () => {
+        renderScreen('ADMIN', 'developer');
+        await loaded();
+        const wired = screen.getByRole('region', { name: 'How it’s wired' });
+        expect(within(wired)
+            .getAllByRole('tab')
+            .map((t) => t.textContent)).toEqual(['Schema', 'Layout', 'API']);
+        expect(within(wired).getByText('prenta.config.ts')).toBeTruthy();
+        expect(within(wired).getByRole('tabpanel').textContent).toContain("import { defineRegion, field } from '@prenta/core/config';");
+        fireEvent.click(within(wired).getByRole('tab', { name: 'API' }));
+        expect(within(wired).getByText('GET /api/cms/public/chrome?path=/seo-audit')).toBeTruthy();
+        const schema = screen.getByRole('region', { name: 'Schema' });
+        expect(within(schema).getByText('● In sync')).toBeTruthy();
+        expect(within(schema).getByText('actuate/website@main')).toBeTruthy();
+        expect(within(schema).getByText('a41f9c2 · 2 hours ago')).toBeTruthy();
+        expect(within(schema).getByText('header · footer · announcement')).toBeTruthy();
+        expect(within(schema).getByText('13')).toBeTruthy();
+        expect(screen.getByLabelText('Revalidate URL').value).toBe('https://actuatemedia.com/api/revalidate');
+        expect(screen.getByLabelText('Preview URL').value).toBe('');
+        const local = screen.getByRole('region', { name: 'Local dev' });
+        expect(local.textContent).toContain('npx prenta pull chrome   // writes .prenta/chrome.json');
+    });
+    it('Copy puts the exact sample on the clipboard', async () => {
+        const writeText = vi.fn(async () => undefined);
+        vi.stubGlobal('navigator', { ...navigator, clipboard: { writeText } });
+        renderScreen('ADMIN', 'developer');
+        await loaded();
+        const wired = screen.getByRole('region', { name: 'How it’s wired' });
+        for (const sample of CODE_SAMPLES) {
+            fireEvent.click(within(wired).getByRole('tab', { name: sample.label }));
+            fireEvent.click(within(wired).getByRole('button', { name: `Copy ${sample.file}` }));
+            await waitFor(() => expect(writeText).toHaveBeenLastCalledWith(sample.src));
+            // The rendered code is the same text.
+            expect(within(wired).getByRole('tabpanel').textContent).toBe(`Copy${sample.file}${sample.src}`);
+        }
+        expect(toast).toHaveBeenCalledWith('Copied');
+    });
+    it('saves the settings and shows a new signing secret once', async () => {
+        settings.revalidateUrl = null;
+        renderScreen('ADMIN', 'developer');
+        await loaded();
+        fireEvent.change(screen.getByLabelText('Revalidate URL'), {
+            target: { value: 'https://example.com/api/revalidate' },
+        });
+        fireEvent.change(screen.getByLabelText('Preview URL'), {
+            target: { value: 'https://preview.example.com/__prenta/chrome' },
+        });
+        fireEvent.click(screen.getByRole('button', { name: 'Save' }));
+        await waitFor(() => expect(toast).toHaveBeenCalledWith('Saved'));
+        expect(lastCall('/chrome/settings', 'PUT').body).toEqual({
+            revalidateUrl: 'https://example.com/api/revalidate',
+            previewUrl: 'https://preview.example.com/__prenta/chrome',
+        });
+        expect(screen.getByText('whsec_test')).toBeTruthy();
+    });
+    it('sends only the URL that changed', async () => {
+        renderScreen('ADMIN', 'developer');
+        await loaded();
+        fireEvent.change(screen.getByLabelText('Preview URL'), {
+            target: { value: 'https://preview.example.com/__prenta/chrome' },
+        });
+        fireEvent.click(screen.getByRole('button', { name: 'Save' }));
+        await waitFor(() => expect(toast).toHaveBeenCalledWith('Saved'));
+        expect(lastCall('/chrome/settings', 'PUT').body).toEqual({
+            previewUrl: 'https://preview.example.com/__prenta/chrome',
+        });
+    });
+    it('only admins can change the settings', async () => {
+        settings.revalidateUrl = null;
+        renderScreen('EDITOR', 'developer');
+        await loaded();
+        const revalidate = screen.getByLabelText('Revalidate URL');
+        expect(revalidate.disabled).toBe(true);
+        expect(revalidate.placeholder).toBe('Only admins can see this');
+        expect(screen.getByLabelText('Preview URL').disabled).toBe(true);
+    });
+});
+//# sourceMappingURL=appearance-chrome.render.test.js.map