mirror of
https://github.com/grafana/grafana.git
synced 2025-08-01 01:51:49 +08:00
59 lines
2.6 KiB
TypeScript
59 lines
2.6 KiB
TypeScript
import { getSvgId, getSvgStyle, svgStyleCleanup } from './utils';
|
|
|
|
const ID = 'TEST_ID';
|
|
|
|
const svgNoId =
|
|
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style type="text/css">.st0{fill:purple;}</style><circle cx="12" cy="12" r="10" class="st0"/></svg>';
|
|
|
|
const svgWithId = `<svg id="${ID}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style type="text/css">.st0{fill:blue;}</style><circle cx="12" cy="12" r="10" class="st0"/></svg>`;
|
|
|
|
const svgWithWrongIdInStyle =
|
|
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style type="text/css">#WRONG .st0{fill:green;}</style><circle cx="12" cy="12" r="10" class="st0"/></svg>';
|
|
|
|
describe('SanitizedSVG', () => {
|
|
it('should cleanup the style and generate an ID', () => {
|
|
const cleanStyle = svgStyleCleanup(svgNoId);
|
|
const updatedStyle = getSvgStyle(cleanStyle);
|
|
const svgId = getSvgId(cleanStyle);
|
|
|
|
expect(cleanStyle.indexOf('id="')).toBeGreaterThan(-1);
|
|
expect(svgId).toBeDefined();
|
|
expect(svgId?.startsWith('x')).toBeTruthy();
|
|
expect(updatedStyle?.indexOf(`#${svgId}`)).toBeGreaterThan(-1);
|
|
|
|
expect(cleanStyle).toEqual(
|
|
`<svg id="${svgId}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style type="text/css">#${svgId} .st0{fill:purple;}</style><circle cx="12" cy="12" r="10" class="st0"/></svg>`
|
|
);
|
|
});
|
|
|
|
it('should cleanup the style and use the existing ID', () => {
|
|
const cleanStyle = svgStyleCleanup(svgWithId);
|
|
const updatedStyle = getSvgStyle(cleanStyle);
|
|
const svgId = getSvgId(cleanStyle);
|
|
|
|
expect(cleanStyle.indexOf('id="')).toBeGreaterThan(-1);
|
|
expect(svgId).toBeDefined();
|
|
expect(svgId).toEqual(ID);
|
|
expect(updatedStyle?.indexOf(`#${svgId}`)).toBeGreaterThan(-1);
|
|
|
|
expect(cleanStyle).toEqual(
|
|
`<svg id="${svgId}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style type="text/css">#${svgId} .st0{fill:blue;}</style><circle cx="12" cy="12" r="10" class="st0"/></svg>`
|
|
);
|
|
});
|
|
|
|
it('should cleanup the style and replace the wrong ID', () => {
|
|
const cleanStyle = svgStyleCleanup(svgWithWrongIdInStyle);
|
|
const updatedStyle = getSvgStyle(cleanStyle);
|
|
const svgId = getSvgId(cleanStyle);
|
|
|
|
expect(cleanStyle.indexOf('id="')).toBeGreaterThan(-1);
|
|
expect(svgId).toBeDefined();
|
|
expect(svgId?.startsWith('x')).toBeTruthy();
|
|
expect(updatedStyle?.indexOf(`#${svgId}`)).toBeGreaterThan(-1);
|
|
|
|
expect(cleanStyle).toEqual(
|
|
`<svg id="${svgId}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><style type="text/css">#${svgId} .st0{fill:green;}</style><circle cx="12" cy="12" r="10" class="st0"/></svg>`
|
|
);
|
|
});
|
|
});
|