@automattic/charts 0.59.0 → 1.0.1

package/src/utils/test/color-utils.test.ts

@@ -716,6 +716,21 @@ describe( 'normalizeColorToHex', () => {
 		} );
 	} );
 
+	describe( 'HSLA strings', () => {
+		it( 'converts hsla(0, 100%, 50%, 1) to #ff0000', () => {
+			expect( normalizeColorToHex( 'hsla(0, 100%, 50%, 1)' ) ).toBe( '#ff0000' );
+		} );
+
+		it( 'converts hsla(120, 100%, 50%, 0.5) to #00ff00', () => {
+			expect( normalizeColorToHex( 'hsla(120, 100%, 50%, 0.5)' ) ).toBe( '#00ff00' );
+		} );
+
+		it( 'converts fully transparent hsla to #000000', () => {
+			// d3-color converts fully transparent colors (alpha=0) to black
+			expect( normalizeColorToHex( 'hsla(240, 100%, 50%, 0)' ) ).toBe( '#000000' );
+		} );
+	} );
+
 	describe( 'RGB strings', () => {
 		it( 'converts rgb(255, 0, 0) to #ff0000', () => {
 			expect( normalizeColorToHex( 'rgb(255, 0, 0)' ) ).toBe( '#ff0000' );
@@ -726,6 +741,36 @@ describe( 'normalizeColorToHex', () => {
 		} );
 	} );
 
+	describe( 'RGBA strings', () => {
+		it( 'converts rgba(255, 0, 0, 1) to #ff0000', () => {
+			expect( normalizeColorToHex( 'rgba(255, 0, 0, 1)' ) ).toBe( '#ff0000' );
+		} );
+
+		it( 'converts rgba(0, 0, 255, 0.5) to #0000ff', () => {
+			// Alpha channel is stripped in hex conversion
+			expect( normalizeColorToHex( 'rgba(0, 0, 255, 0.5)' ) ).toBe( '#0000ff' );
+		} );
+
+		it( 'converts fully transparent rgba to #000000', () => {
+			// d3-color converts fully transparent colors (alpha=0) to black
+			expect( normalizeColorToHex( 'rgba(128, 128, 128, 0)' ) ).toBe( '#000000' );
+		} );
+	} );
+
+	describe( 'Named CSS colors', () => {
+		it( 'converts steelblue to hex', () => {
+			expect( normalizeColorToHex( 'steelblue' ) ).toBe( '#4682b4' );
+		} );
+
+		it( 'converts red to hex', () => {
+			expect( normalizeColorToHex( 'red' ) ).toBe( '#ff0000' );
+		} );
+
+		it( 'returns unknown strings as-is', () => {
+			expect( normalizeColorToHex( 'notacolor' ) ).toBe( 'notacolor' );
+		} );
+	} );
+
 	describe( 'CSS variables', () => {
 		it( 'returns original if no resolveCss function provided', () => {
 			expect( normalizeColorToHex( '--my-color' ) ).toBe( '--my-color' );
@@ -755,6 +800,71 @@ describe( 'normalizeColorToHex', () => {
 			const mockResolve = jest.fn().mockReturnValue( null );
 			expect( normalizeColorToHex( '--my-color', null, mockResolve ) ).toBe( '--my-color' );
 		} );
+
+		it( 'returns original when CSS variable resolves to itself', () => {
+			const mockResolve = jest.fn().mockImplementation( ( v: string ) => v );
+			expect( normalizeColorToHex( '--loop', null, mockResolve ) ).toBe( '--loop' );
+		} );
+
+		it( 'returns original when CSS variable resolves to empty string', () => {
+			const mockResolve = jest.fn().mockReturnValue( '' );
+			expect( normalizeColorToHex( '--empty', null, mockResolve ) ).toBe( '--empty' );
+		} );
+
+		it( 'does not infinite loop on indirect CSS variable cycle', () => {
+			const mockResolve = jest.fn().mockImplementation( ( v: string ) => {
+				if ( v === '--a' ) return 'var(--b)';
+				if ( v === 'var(--b)' ) return '--a';
+
+				return null;
+			} );
+
+			expect( () => normalizeColorToHex( '--a', null, mockResolve ) ).not.toThrow();
+		} );
+
+		it( 'resolves multi-hop CSS variable chain', () => {
+			const mockResolve = jest.fn().mockImplementation( ( v: string ) => {
+				if ( v === '--a' ) return 'var(--b)';
+				if ( v === 'var(--b)' ) return 'hsl(0, 100%, 50%)';
+
+				return null;
+			} );
+
+			expect( normalizeColorToHex( '--a', null, mockResolve ) ).toBe( '#ff0000' );
+		} );
+	} );
+
+	describe( 'Whitespace handling', () => {
+		it( 'trims leading and trailing spaces from hex', () => {
+			expect( normalizeColorToHex( '  #ff0000  ' ) ).toBe( '#ff0000' );
+		} );
+
+		it( 'trims spaces from HSL string', () => {
+			expect( normalizeColorToHex( '  hsl(0, 100%, 50%)  ' ) ).toBe( '#ff0000' );
+		} );
+
+		it( 'trims spaces from named color', () => {
+			expect( normalizeColorToHex( '  red  ' ) ).toBe( '#ff0000' );
+		} );
+	} );
+
+	describe( 'Case insensitivity', () => {
+		it( 'converts uppercase HSL', () => {
+			expect( normalizeColorToHex( 'HSL(0, 100%, 50%)' ) ).toBe( '#ff0000' );
+		} );
+
+		it( 'converts uppercase RGB', () => {
+			expect( normalizeColorToHex( 'RGB(255, 0, 0)' ) ).toBe( '#ff0000' );
+		} );
+
+		it( 'converts uppercase RGBA', () => {
+			expect( normalizeColorToHex( 'RGBA(0, 0, 255, 1)' ) ).toBe( '#0000ff' );
+		} );
+
+		it( 'handles uppercase VAR() syntax', () => {
+			const mockResolve = jest.fn().mockReturnValue( '#ff0000' );
+			expect( normalizeColorToHex( 'VAR(--my-color)', null, mockResolve ) ).toBe( '#ff0000' );
+		} );
 	} );
 
 	describe( 'Invalid inputs', () => {

package/src/utils/test/sanitize-html.test.ts

@@ -0,0 +1,101 @@
+import { sanitizeHtml } from '../sanitize-html';
+
+describe( 'sanitizeHtml', () => {
+	test( 'preserves safe formatting tags', () => {
+		const input = '<b>Bold</b> <em>italic</em> <strong>strong</strong>';
+		expect( sanitizeHtml( input ) ).toBe( '<b>Bold</b> <em>italic</em> <strong>strong</strong>' );
+	} );
+
+	test( 'strips style attributes', () => {
+		const input = '<div style="padding: 12px;"><span style="color: red;">text</span></div>';
+		expect( sanitizeHtml( input ) ).toBe( '<div><span>text</span></div>' );
+	} );
+
+	test( 'preserves br tags', () => {
+		const input = 'line one<br>line two';
+		expect( sanitizeHtml( input ) ).toBe( 'line one<br>line two' );
+	} );
+
+	test( 'removes script tags', () => {
+		const input = '<b>Safe</b><script>alert("xss")</script>';
+		expect( sanitizeHtml( input ) ).toBe( '<b>Safe</b>' );
+	} );
+
+	test( 'removes img tags with onerror handlers', () => {
+		const input = '<b>Safe</b><img src=x onerror="alert(document.cookie)">';
+		expect( sanitizeHtml( input ) ).toBe( '<b>Safe</b>' );
+	} );
+
+	test( 'removes iframe tags', () => {
+		const input = '<div>text</div><iframe src="https://evil.com"></iframe>';
+		expect( sanitizeHtml( input ) ).toBe( '<div>text</div>' );
+	} );
+
+	test( 'removes event handler attributes from allowed tags', () => {
+		const input = '<div onclick="alert(1)" onmouseover="steal()">text</div>';
+		expect( sanitizeHtml( input ) ).toBe( '<div>text</div>' );
+	} );
+
+	test( 'removes javascript: URLs from href', () => {
+		const input = '<a href="javascript:alert(1)">click</a>';
+		expect( sanitizeHtml( input ) ).toBe( '<a>click</a>' );
+	} );
+
+	test( 'preserves safe href values', () => {
+		const input = '<a href="https://example.com" target="_blank" rel="noopener">link</a>';
+		expect( sanitizeHtml( input ) ).toBe(
+			'<a href="https://example.com" target="_blank" rel="noopener noreferrer">link</a>'
+		);
+	} );
+
+	test( 'removes object and embed tags', () => {
+		const input = '<div>safe</div><object data="x"></object><embed src="y">';
+		expect( sanitizeHtml( input ) ).toBe( '<div>safe</div>' );
+	} );
+
+	test( 'removes form tags but preserves safe child content', () => {
+		const input = '<form action="https://evil.com"><div>trap</div></form>';
+		const result = sanitizeHtml( input );
+		expect( result ).not.toContain( '<form' );
+		expect( result ).not.toContain( 'action' );
+		expect( result ).toContain( '<div>trap</div>' );
+	} );
+
+	test( 'handles complex tooltip HTML and strips style attributes', () => {
+		const input = `<div style="padding: 12px; font-family: sans-serif;">
+			<div style="font-weight: bold;">United States</div>
+			<div style="color: #666;">Orders: <strong>1,000</strong></div>
+		</div>`;
+		const result = sanitizeHtml( input );
+		expect( result ).toContain( 'United States' );
+		expect( result ).toContain( '<strong>1,000</strong>' );
+		expect( result ).not.toContain( 'style' );
+	} );
+
+	test( 'handles empty string', () => {
+		expect( sanitizeHtml( '' ) ).toBe( '' );
+	} );
+
+	test( 'handles plain text', () => {
+		expect( sanitizeHtml( 'just text' ) ).toBe( 'just text' );
+	} );
+
+	test( 'removes disallowed attributes like id and style', () => {
+		const input = '<div id="evil" style="color: red;">text</div>';
+		expect( sanitizeHtml( input ) ).toBe( '<div>text</div>' );
+	} );
+
+	test( 'enforces rel="noopener noreferrer" on target="_blank" links', () => {
+		const input = '<a href="https://example.com" target="_blank">link</a>';
+		expect( sanitizeHtml( input ) ).toBe(
+			'<a href="https://example.com" target="_blank" rel="noopener noreferrer">link</a>'
+		);
+	} );
+
+	test( 'overrides insufficient rel on target="_blank" links', () => {
+		const input = '<a href="https://example.com" target="_blank" rel="noopener">link</a>';
+		expect( sanitizeHtml( input ) ).toBe(
+			'<a href="https://example.com" target="_blank" rel="noopener noreferrer">link</a>'
+		);
+	} );
+} );