Rocket.Chat');
expect(normalizedHtml).toContain('href="mailto:gabriel.engel@rocket.chat"');
expect(normalizedHtml).toContain('title="mailto:gabriel.engel@rocket.chat"');
expect(normalizedHtml).toContain('gabriel.engel@rocket.chat');
expect(normalizedHtml).toContain('+55991999999');
expect(normalizedHtml).toContain('Inline code');
expect(normalizedHtml).toContain('const test = \'this is code\'
');
expect(normalizedHtml).toContain('Bold text within Italics');
expect(normalizedHtml).toContain('Bold text with single asterik and underscore within Italics');
expect(normalizedHtml).toContain('Italics within Bold text');
expect(normalizedHtml).toContain('Italics within Bold text with single underscore and asterik');
});
it('should render html elements as expected using inline parser', async () => {
const { container } = render(, {
wrapper: mockAppRoot().build(),
});
const normalizedHtml = normalizeHtml(container.innerHTML);
expect(normalizedHtml).toContain('# Heading 1');
expect(normalizedHtml).toContain(
'Bold with one asterisk Bold with two asterisks Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
);
expect(normalizedHtml).toContain('## Heading 2');
expect(normalizedHtml).toContain(
'Italic Text: Italic with one underscore Italic with two underscores Lorem ipsum dolor sit amet',
);
expect(normalizedHtml).toContain('### Heading 3');
expect(normalizedHtml).toContain('Unordered List - List Item 1 - List Item 2 - List Item 3 - List Item 4');
expect(normalizedHtml).toContain('Ordered List 1. List Item 1 2. List Item 2 3. List Item 3 4. List Item 4');
expect(normalizedHtml).toContain('Rocket.Chat');
expect(normalizedHtml).toContain('href="mailto:gabriel.engel@rocket.chat"');
expect(normalizedHtml).toContain('title="mailto:gabriel.engel@rocket.chat"');
expect(normalizedHtml).toContain('rel="nofollow noopener noreferrer"');
expect(normalizedHtml).toContain('target="_blank"');
expect(normalizedHtml).toContain('+55991999999');
expect(normalizedHtml).toContain('Inline code');
expect(normalizedHtml).toContain(`typescript const test = 'this is code'`);
expect(normalizedHtml).toContain('Bold text within Italics');
expect(normalizedHtml).toContain('Bold text with single asterik and underscore within Italics');
expect(normalizedHtml).toContain('Italics within Bold text');
expect(normalizedHtml).toContain('Italics within Bold text with single underscore and asterik');
});
describe('links handling', () => {
it.each([
{
caseName: 'transform external http',
link: 'http://example.com',
query: () => screen.getByRole('link', { name: 'Test Link' }),
expectedHref: 'http://example.com',
expectedRel: 'nofollow noopener noreferrer',
expectedTarget: '_blank',
expectedTitleAttribute: '',
},
{
caseName: 'transform external https',
link: 'https://example.com',
query: () => screen.getByRole('link', { name: 'Test Link' }),
expectedHref: 'https://example.com',
expectedRel: 'nofollow noopener noreferrer',
expectedTarget: '_blank',
expectedTitleAttribute: '',
},
{
caseName: 'transform notes',
link: 'notes://example.com/path',
query: () => screen.getByRole('link', { name: 'Test Link' }),
expectedHref: 'notes://example.com/path',
expectedRel: 'nofollow noopener noreferrer',
expectedTarget: '_blank',
expectedTitleAttribute: '',
},
{
caseName: 'transform ftp',
link: 'ftp://example.com/file.txt',
query: () => screen.getByRole('link', { name: 'Test Link' }),
expectedHref: 'ftp://example.com/file.txt',
expectedRel: 'nofollow noopener noreferrer',
expectedTarget: '_blank',
expectedTitleAttribute: '',
},
{
caseName: 'transform ftps',
link: 'ftps://example.com/file.txt',
query: () => screen.getByRole('link', { name: 'Test Link' }),
expectedHref: 'ftps://example.com/file.txt',
expectedRel: 'nofollow noopener noreferrer',
expectedTarget: '_blank',
expectedTitleAttribute: '',
},
{
caseName: 'transform tel',
link: 'tel:+1234567890',
query: () => screen.getByRole('link', { name: 'Test Link' }),
expectedHref: 'tel:+1234567890',
expectedRel: 'nofollow noopener noreferrer',
expectedTarget: '_blank',
expectedTitleAttribute: '',
},
{
caseName: 'transform mailto',
link: 'mailto:test@example.com',
query: () => screen.getByRole('link', { name: 'mailto:test@example.com' }),
expectedHref: 'mailto:test@example.com',
expectedRel: 'nofollow noopener noreferrer',
expectedTarget: '_blank',
expectedTitleAttribute: 'mailto:test@example.com',
},
{
caseName: 'transform sms',
link: 'sms:+1234567890?body=hello',
query: () => screen.getByRole('link', { name: 'Test Link' }),
expectedHref: 'sms:+1234567890?body=hello',
expectedRel: 'nofollow noopener noreferrer',
expectedTarget: '_blank',
expectedTitleAttribute: '',
},
{
caseName: 'transform cid',
link: 'cid:someimage@example.com',
query: () => screen.getByRole('link', { name: 'Test Link' }),
expectedHref: 'cid:someimage@example.com',
expectedRel: 'nofollow noopener noreferrer',
expectedTarget: '_blank',
expectedTitleAttribute: '',
},
{
caseName: 'filter relative',
link: '/channel/general',
query: () => screen.getByText('Test Link'),
expectedHref: undefined,
expectedRel: 'nofollow noopener noreferrer',
expectedTarget: '_blank',
expectedTitleAttribute: '',
},
{
caseName: 'transform absolute',
link: 'http://localhost/another-channel',
query: () => screen.getByRole('link', { name: 'Go to: another-channel' }),
expectedHref: 'http://localhost/another-channel',
expectedRel: undefined,
expectedTarget: undefined,
expectedTitleAttribute: 'Go to: another-channel',
},
{
caseName: 'filter unknown scheme',
link: 'invalid://example.com',
query: () => screen.getByText('Test Link'),
expectedHref: undefined,
expectedRel: 'nofollow noopener noreferrer',
expectedTarget: '_blank',
expectedTitleAttribute: '',
},
{
caseName: 'filter javascript',
link: "javascript:alert('XSS')",
query: () => screen.getByText('Test Link'),
expectedHref: undefined,
expectedRel: 'nofollow noopener noreferrer',
expectedTarget: '_blank',
expectedTitleAttribute: '',
},
] as const)('should $caseName links', ({ link, query, expectedHref, expectedRel, expectedTarget, expectedTitleAttribute }) => {
const markdownContent = `[Test Link](${link})`;
render(, {
wrapper: mockAppRoot().withTranslations('en', 'core', { Go_to_href: 'Go to: {{href}}' }).build(),
});
const anchorElement = query();
expect(anchorElement).toBeInTheDocument();
expect(anchorElement.tagName).toBe('A');
expect(anchorElement).toHaveTextContent('Test Link');
if (expectedHref !== undefined) expect(anchorElement).toHaveAttribute('href', expectedHref);
else expect(anchorElement).not.toHaveAttribute('href');
if (expectedRel !== undefined) expect(anchorElement).toHaveAttribute('rel', expectedRel);
else expect(anchorElement).not.toHaveAttribute('rel');
if (expectedTarget !== undefined) expect(anchorElement).toHaveAttribute('target', expectedTarget);
else expect(anchorElement).not.toHaveAttribute('target');
if (expectedTitleAttribute !== undefined) expect(anchorElement).toHaveAttribute('title', expectedTitleAttribute);
else expect(anchorElement).not.toHaveAttribute('title');
});
describe('multiple links', () => {
it.each(getTestCases(supportedURISchemes, testUris))('supported scheme: $scheme', ({ scheme, links }) => {
const getTextContent = (link: string) => `Test link - ${link}`;
const markdownContent = links.map((link) => `[${getTextContent(link)}](${link})`).join('\n');
render(, {
wrapper: mockAppRoot().withTranslations('en', 'core', { Go_to_href: 'Go to: {{href}}' }).build(),
});
links.forEach((link) => {
const text = getTextContent(link);
const title = `Go to: ${link.replace(MOCKED_BASE_URI, '')}`;
const anchorElement = screen.getByText(text);
expect(anchorElement).toBeInTheDocument();
expect(anchorElement.tagName).toBe('A');
expect(anchorElement).toHaveTextContent(text);
expect(anchorElement).toHaveAttribute('href', link);
if (scheme === 'mailto') {
expect(anchorElement).toHaveAttribute('rel', 'nofollow noopener noreferrer');
expect(anchorElement).toHaveAttribute('target', '_blank');
expect(anchorElement).toHaveAttribute('href', link);
expect(anchorElement).toHaveAttribute('title', link);
return;
}
if (isExternal(link)) {
expect(anchorElement).toHaveAttribute('rel', 'nofollow noopener noreferrer');
expect(anchorElement).toHaveAttribute('target', '_blank');
expect(anchorElement).toHaveAttribute('title', '');
return;
}
expect(anchorElement).toHaveAttribute('title', title);
});
});
it.each(getTestCases(nonSupportedUriSchemes, testUris))('unsupported scheme: $scheme', ({ links }) => {
const getTextContent = (link: string) => `Test link - ${link}`;
const markdownContent = links.map((link) => `[${getTextContent(link)}](${link})`).join('\n');
render(, {
wrapper: mockAppRoot().withTranslations('en', 'core', { Go_to_href: 'Go to: {{href}}' }).build(),
});
links.forEach((link) => {
const text = getTextContent(link);
const anchorElement = screen.getByText(text);
expect(anchorElement).toBeInTheDocument();
expect(anchorElement.tagName).toBe('A');
expect(anchorElement).toHaveTextContent(text);
expect(anchorElement).not.toHaveAttribute('href');
expect(anchorElement).toHaveAttribute('rel', 'nofollow noopener noreferrer');
expect(anchorElement).toHaveAttribute('target', '_blank');
expect(anchorElement).toHaveAttribute('title', '');
});
});
});
});
describe('code handling', () => {
it.each([
{
caseName: 'inline with special characters',
content: '`2 < 3 > 1 & 4 "Test"`',
expected: '2 < 3 > 1 & 4 "Test"',
},
{
caseName: 'inline with encoded special characters',
content: '`< = < > = > & = &`',
expected: '< = < > = > & = &',
},
{
caseName: 'block with language',
content: "```typescript\nconst test = 'this is code'\n```",
expected: 'const test = \'this is code\' ',
},
{
caseName: 'block without language',
content: '```\nTwo < Three > One & Four "Test"\n```',
expected: 'Two < Three > One & Four "Test" ',
},
{
caseName: 'block with encoded special characters',
content: '```\nTwo < Three > One & Four "Test"\n```',
expected: 'Two < Three > One & Four "Test" ',
},
] as const)('should render $caseName', ({ content, expected }) => {
render(, {
wrapper: mockAppRoot().build(),
});
expect(screen.getByRole('code').outerHTML).toEqual(expected);
});
});
describe('line breaks handling', () => {
it('should convert newlines to
in document variant', () => {
const content = 'First Line\nSecond Line\nThird Line';
const { container } = render(, {
wrapper: mockAppRoot().build(),
});
const html = container.innerHTML;
expect(html).toContain('First Line
Second Line
Third Line');
});
it('should convert newlines to
in inline variant', () => {
const content = 'First Line\nSecond Line\nThird Line';
const { container } = render(, {
wrapper: mockAppRoot().build(),
});
const html = container.innerHTML;
expect(html).not.toContain('
');
});
it('should not convert newlines to
in inlineWithoutBreaks variant', () => {
const content = 'First Line\nSecond Line\nThird Line';
const { container } = render(, {
wrapper: mockAppRoot().build(),
});
const html = container.innerHTML;
expect(html).not.toContain('
');
});
});
describe('DOMPurify hook registration', () => {
it('should register hook only once at module level', () => {
// Import the module to trigger hook registration
const addHookSpy = jest.spyOn(dompurify, 'addHook');
// Clear any previous calls from module initialization
addHookSpy.mockClear();
const { rerender, unmount } = render(, {
wrapper: mockAppRoot().build(),
});
// Hook should NOT be registered during component render (it's registered at module level)
expect(addHookSpy).toHaveBeenCalledTimes(0);
// Re-rendering with different props should not register hook again
rerender();
expect(addHookSpy).toHaveBeenCalledTimes(0);
// Rendering another instance should not register hook again
render(, {
wrapper: mockAppRoot().build(),
});
expect(addHookSpy).toHaveBeenCalledTimes(0);
// Unmounting should not affect the module-level hook
unmount();
expect(addHookSpy).toHaveBeenCalledTimes(0);
addHookSpy.mockRestore();
});
});
describe('parser limit handling', () => {
beforeEach(() => {
getMarkdownParserLimitMock.mockClear();
});
it('should render plain text without parsing when content exceeds the limit', () => {
getMarkdownParserLimitMock.mockReturnValue(5);
const longContent = '**this should not be bold** because it exceeds the limit';
render(, {
wrapper: mockAppRoot().build(),
});
const element = screen.getByText(longContent);
expect(element).toBeInTheDocument();
expect(element.tagName).not.toBe('STRONG');
});
it('should render parsed markdown when content is within the limit', () => {
getMarkdownParserLimitMock.mockReturnValue(Infinity);
const content = '**bold text**';
render(, {
wrapper: mockAppRoot().build(),
});
const boldText = screen.getByText('bold text');
expect(boldText).toBeInTheDocument();
expect(boldText.tagName).toBe('STRONG');
});
it('should render parsed markdown when content length equals the limit', () => {
const content = '**hi**';
getMarkdownParserLimitMock.mockReturnValue(content.length);
render(, {
wrapper: mockAppRoot().build(),
});
const parsedText = screen.getByText('hi');
expect(parsedText).toBeInTheDocument();
expect(parsedText.tagName).toBe('STRONG');
});
});
describe('emoji parsing', () => {
// Minimal stand-in for the native emoji package that turns the `:smile:`
// shortcode into the same markup the real renderer produces.
const renderSmile = (text: string): string => text.replace(/:smile:/g, '😄');
beforeAll(() => {
emoji.packages.native = {
emojiCategories: [],
emojisByCategory: {},
toneList: {},
render: renderSmile,
renderPicker: () => undefined,
};
});
afterAll(() => {
delete emoji.packages.native;
});
beforeEach(() => {
getMarkdownParserLimitMock.mockReturnValue(Infinity);
});
it('should render emoji shortcodes that appear in visible text', () => {
const { container } = render(, {
wrapper: mockAppRoot().build(),
});
const emojiElement = container.querySelector('.emoji');
expect(emojiElement).toBeInTheDocument();
expect(emojiElement).toHaveAttribute('title', ':smile:');
expect(emojiElement).toHaveTextContent('😄');
expect(container).not.toHaveTextContent(':smile:');
});
it('should not corrupt a link whose href contains an emoji shortcode', () => {
render(, {
wrapper: mockAppRoot().build(),
});
const anchorElement = screen.getByText('docs');
expect(anchorElement.tagName).toBe('A');
// The shortcode inside the href must stay untouched instead of being replaced by an emoji span
expect(anchorElement).toHaveAttribute('href', 'https://example.test/:smile:');
expect(anchorElement.querySelector('.emoji')).toBeNull();
});
it('should render emoji in text while keeping a shortcode inside an href intact', () => {
const { container } = render(, {
wrapper: mockAppRoot().build(),
});
const anchorElement = screen.getByText('docs');
expect(anchorElement).toHaveAttribute('href', 'https://example.test/:smile:');
expect(anchorElement.querySelector('.emoji')).toBeNull();
const emojiElement = container.querySelector('.emoji');
expect(emojiElement).toBeInTheDocument();
expect(emojiElement).toHaveTextContent('😄');
});
});