shadowdaoandClaude Opus 4.8
8bf525c600
SectionTypePanel (Accordion/Tabs/Testimonials/Countdown/NumberCounter/ CTASection/CallToAction/FeaturesGrid), PricingStylePanel, and SocialStylePanel all gain a Spacing & Border section (margin/padding per-side, border, box-shadow, opacity), an Animation section, and a Visibility section, wired to the shared SpacingControl/BorderControl/ AnimationControl/VisibilityControl. PricingTable's per-card colors (cardBg/textColor/subColor/featColor/ checkColor/btnBg/btnColor) were previously hard-coded literals computed from featuredBg inside toHtml -- promoted to real optional props (each falling back to the exact prior literal when unset) and exposed via ColorPickerField in PricingStylePanel. SocialStylePanel now exposes SocialLinks' iconShape/gap (already-built props with no control), plus Icon's bgColor/bgShape/bgSize/link and StarRating's filledColor/emptyColor, which the panel's generic iconBgColor/starColor checks never matched since those aren't Icon's or StarRating's real prop names. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
94 lines
4.5 KiB
TypeScript
94 lines
4.5 KiB
TypeScript
import { describe, test, expect } from 'vitest';
|
|
import { SocialLinks } from './SocialLinks';
|
|
|
|
const toHtml = (SocialLinks as any).toHtml;
|
|
|
|
describe('SocialLinks.toHtml accessibility (F2.5)', () => {
|
|
test('icon-only links get an aria-label naming the platform', () => {
|
|
const { html } = toHtml({ links: [{ platform: 'facebook', url: 'https://fb.example/x' }] }, '');
|
|
expect(html).toMatch(/<a[^>]*aria-label="Facebook"/);
|
|
});
|
|
|
|
test('the icon glyph itself is aria-hidden', () => {
|
|
const { html } = toHtml({ links: [{ platform: 'twitter', url: '#' }] }, '');
|
|
expect(html).toMatch(/<i class="fa fa-twitter"[^>]*aria-hidden="true"/);
|
|
});
|
|
});
|
|
|
|
describe('SocialLinks.toHtml XSS hardening (iconSize/iconColor/iconBgColor/gap into style=)', () => {
|
|
test('an iconSize value with an attribute-breakout string cannot escape style=""', () => {
|
|
const malicious = '20px" onmouseover="alert(1)';
|
|
const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], iconSize: malicious as any }, '');
|
|
expect(html).not.toMatch(/"\s+onmouseover="/);
|
|
});
|
|
|
|
test('an iconColor value with an attribute-breakout string cannot escape style=""', () => {
|
|
const malicious = '#fff" onmouseover="alert(1)';
|
|
const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], iconColor: malicious as any }, '');
|
|
expect(html).not.toMatch(/"\s+onmouseover="/);
|
|
});
|
|
|
|
test('an iconBgColor value with an attribute-breakout string cannot escape style=""', () => {
|
|
const malicious = '#374151" onmouseover="alert(1)';
|
|
const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], iconShape: 'circle', iconBgColor: malicious as any }, '');
|
|
expect(html).not.toMatch(/"\s+onmouseover="/);
|
|
});
|
|
|
|
test('a gap value with an attribute-breakout string cannot escape the wrapper style=""', () => {
|
|
const malicious = '10px" onmouseover="alert(1)';
|
|
const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], gap: malicious as any }, '');
|
|
expect(html).not.toMatch(/"\s+onmouseover="/);
|
|
});
|
|
|
|
test('a malicious platform key does not produce a raw class-attribute breakout', () => {
|
|
const malicious = 'x"><script>alert(1)</script>';
|
|
const { html } = toHtml({ links: [{ platform: malicious, url: '#' }] }, '');
|
|
expect(html).not.toContain('<script>alert(1)</script>');
|
|
});
|
|
|
|
test('a link url with a javascript: scheme is neutralized', () => {
|
|
const { html } = toHtml({ links: [{ platform: 'facebook', url: 'javascript:alert(1)' }] }, '');
|
|
expect(html).not.toContain('javascript:alert(1)');
|
|
});
|
|
});
|
|
|
|
describe('SocialLinks.toHtml iconShape/gap emission (previously built but unexposed in SocialStylePanel)', () => {
|
|
test('iconShape="circle" emits a 50% border-radius on the wrapping <a>', () => {
|
|
const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], iconShape: 'circle' }, '');
|
|
expect(html).toMatch(/<a[^>]*style="[^"]*border-radius:50%[^"]*"/);
|
|
});
|
|
|
|
test('iconShape="square" emits border-radius:0', () => {
|
|
const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], iconShape: 'square' }, '');
|
|
expect(html).toMatch(/<a[^>]*style="[^"]*border-radius:0[^"]*"/);
|
|
});
|
|
|
|
test('iconShape="rounded" emits a 6px border-radius', () => {
|
|
const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], iconShape: 'rounded' }, '');
|
|
expect(html).toMatch(/<a[^>]*style="[^"]*border-radius:6px[^"]*"/);
|
|
});
|
|
|
|
test('iconShape="none" omits the background box entirely (transparent bg, no fixed box size)', () => {
|
|
const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], iconShape: 'none' }, '');
|
|
const aTag = html.match(/<a[^>]*>/)![0];
|
|
expect(aTag).toContain('background-color:transparent');
|
|
expect(aTag).not.toContain('border-radius');
|
|
});
|
|
|
|
test('gap emits on the wrapper <div> style', () => {
|
|
const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], gap: '24px' }, '');
|
|
expect(html).toMatch(/<div[^>]*style="[^"]*gap:24px[^"]*"/);
|
|
});
|
|
});
|
|
|
|
describe('SocialLinks.craft.props includes the box-model/animation/visibility rollout props', () => {
|
|
test('animation, animationDelay, and all 3 hideOn* flags are declared (blank/false defaults)', () => {
|
|
const props = (SocialLinks as any).craft.props;
|
|
expect(props).toHaveProperty('animation', '');
|
|
expect(props).toHaveProperty('animationDelay', '');
|
|
expect(props).toHaveProperty('hideOnDesktop', false);
|
|
expect(props).toHaveProperty('hideOnTablet', false);
|
|
expect(props).toHaveProperty('hideOnMobile', false);
|
|
});
|
|
});
|