shadowdaoandClaude Opus 4.8
54572f648a
NavStylePanel (Navbar/Menu/Logo/Footer):
- LinkPicker: dropdown of the site's pages (read-only via usePages()) plus
manual URL / #anchor / tel: / mailto: entry, wired into every link-href
field (standalone Logo href, Navbar logoUrl, Navbar/Menu link items).
- "Sync links with Pages" button in the Links section: repopulates the
links array from the current pages list (label = page name, href = '/'
for the landing page else '/{slug}'), preserving any existing CTA link.
Regression-fix vs the legacy GrapesJS builder, which had this.
- `download` checkbox per link (Navbar/Menu links, standalone Logo href)
emits the `download` attribute on export for links to files.
- Links/Colors sections now gate on the component actually carrying a
`links`/color prop, so Footer (no links array) no longer shows a dead
"Add Link" editor.
- Box-model (Margin/Padding via SpacingControl, Border & Effects via
BorderControl + box-shadow presets + opacity), AnimationControl, and
VisibilityControl added for all four owned components, backed by new
animation/animationDelay/hideOnDesktop/hideOnTablet/hideOnMobile props
(with blank/default values in each component's .craft.props).
Tests: NavStylePanel.test.tsx (new, 17 tests: LinkPicker modes, sync
preserves CTA, download toggle, box-model/animation/visibility wiring) +
extended Navbar/Menu/Logo/Footer .toHtml.test.ts (download attribute,
craft.props defaults). Full suite: 683/683 passing. `npm run build` green.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
70 lines
3.1 KiB
TypeScript
70 lines
3.1 KiB
TypeScript
import { describe, test, expect } from 'vitest';
|
|
import { Menu } from './Menu';
|
|
|
|
const toHtml = (Menu as any).toHtml;
|
|
|
|
describe('Menu.toHtml deterministic + unique scope ids (thread node id, no Math.random)', () => {
|
|
test('same node id -> identical output across calls (deterministic)', () => {
|
|
const { html: html1 } = toHtml({}, '', 'node-menu1');
|
|
const { html: html2 } = toHtml({}, '', 'node-menu1');
|
|
expect(html1).toBe(html2);
|
|
});
|
|
|
|
test('different node ids -> different, non-colliding scope classes (identical default links, no collision)', () => {
|
|
const { html: html1 } = toHtml({}, '', 'node-menu1');
|
|
const { html: html2 } = toHtml({}, '', 'node-menu2');
|
|
const cls1 = html1.match(/\.([a-z0-9_]+-link):hover/)![1];
|
|
const cls2 = html2.match(/\.([a-z0-9_]+-link):hover/)![1];
|
|
expect(cls1).not.toBe(cls2);
|
|
});
|
|
|
|
test('the anchor class= and the <style> hover rule use the SAME scope', () => {
|
|
const { html } = toHtml({}, '', 'node-menu1');
|
|
const hoverCls = html.match(/\.([a-z0-9_]+-link):hover/)![1];
|
|
expect(html).toContain(`class="${hoverCls}"`);
|
|
});
|
|
|
|
test('no nodeId (legacy 2-arg call): still deterministic across repeated calls, not random', () => {
|
|
const { html: html1 } = toHtml({}, '');
|
|
const { html: html2 } = toHtml({}, '');
|
|
expect(html1).toBe(html2);
|
|
});
|
|
});
|
|
|
|
describe('Menu.toHtml download attribute (F3: link-to-file toggle)', () => {
|
|
test('a link with download:true emits the download attribute', () => {
|
|
const { html } = toHtml({ links: [{ text: 'Brochure', href: '/brochure.pdf', download: true }] }, '', 'node-dl1');
|
|
expect(html).toMatch(/<a href="\/brochure\.pdf"[^>]* download[^>]*>Brochure<\/a>/);
|
|
});
|
|
|
|
test('a link without download does not emit the attribute', () => {
|
|
const { html } = toHtml({ links: [{ text: 'Home', href: '/' }] }, '', 'node-dl2');
|
|
expect(html).not.toContain(' download');
|
|
});
|
|
});
|
|
|
|
describe('Menu (F4: box-model + animation + visibility props on craft.props)', () => {
|
|
test('craft.props includes animation/visibility defaults so the panel controls always render', () => {
|
|
const craftProps = (Menu as any).craft.props;
|
|
expect(craftProps).toHaveProperty('animation', 'none');
|
|
expect(craftProps).toHaveProperty('animationDelay', '0');
|
|
expect(craftProps).toHaveProperty('hideOnDesktop', false);
|
|
expect(craftProps).toHaveProperty('hideOnTablet', false);
|
|
expect(craftProps).toHaveProperty('hideOnMobile', false);
|
|
});
|
|
});
|
|
|
|
describe('Menu.toHtml XSS hardening (linkHoverColor into <style>)', () => {
|
|
test('a linkHoverColor value containing </style><script> is neutralized', () => {
|
|
const malicious = '#fff}</style><script>alert(1)</script><style>{';
|
|
const { html } = toHtml({ linkHoverColor: malicious }, '', 'node-xss');
|
|
expect(html).not.toContain('</style><script');
|
|
expect(html).not.toContain('<script>alert(1)</script>');
|
|
});
|
|
|
|
test('a normal linkHoverColor still renders in the hover rule', () => {
|
|
const { html } = toHtml({ linkHoverColor: '#ff0000' }, '', 'node-normal');
|
|
expect(html).toMatch(/:hover\s*\{\s*color:\s*#ff0000/);
|
|
});
|
|
});
|