|
| 1 | +import {render, screen} from '@testing-library/react-native'; |
| 2 | +import React from 'react'; |
| 3 | +import type {CustomRendererProps, TBlock} from 'react-native-render-html'; |
| 4 | +import BulletItemRenderer from '@components/HTMLEngineProvider/HTMLRenderers/BulletItemRenderer'; |
| 5 | +import ULRenderer from '@components/HTMLEngineProvider/HTMLRenderers/ULRenderer'; |
| 6 | +import RenderHTML from '@components/RenderHTML'; |
| 7 | +import CONST from '@src/CONST'; |
| 8 | + |
| 9 | +jest.mock('@hooks/useWindowDimensions', () => () => ({windowWidth: 400})); |
| 10 | +jest.mock('@hooks/useHasTextAncestor', () => () => false); |
| 11 | + |
| 12 | +// Capture the html string ultimately passed to react-native-render-html so we can |
| 13 | +// assert the orphaned <br/> stripping happens before the library sees the HTML. |
| 14 | +const capturedSource: {html?: string} = {}; |
| 15 | +jest.mock('react-native-render-html', () => { |
| 16 | + const ReactModule = jest.requireActual<typeof React>('react'); |
| 17 | + const {View: MockView, Text: MockText} = jest.requireActual<{View: React.ComponentType; Text: React.ComponentType}>('react-native'); |
| 18 | + return { |
| 19 | + RenderHTMLConfigProvider: ({children}: {children: React.ReactNode}) => children, |
| 20 | + RenderHTMLSource: ({source}: {source: {html?: string}}) => { |
| 21 | + capturedSource.html = source?.html; |
| 22 | + return ReactModule.createElement(MockView); |
| 23 | + }, |
| 24 | + TNodeChildrenRenderer: ({tnode}: {tnode?: {mockText?: string}}) => ReactModule.createElement(MockText, null, tnode?.mockText ?? ''), |
| 25 | + TNodeRenderer: ({tnode}: {tnode?: {mockText?: string}}) => ReactModule.createElement(MockText, null, tnode?.mockText ?? ''), |
| 26 | + }; |
| 27 | +}); |
| 28 | + |
| 29 | +// Bypass ExpensiMark in these tests — we want to assert the regex stripping logic |
| 30 | +// in RenderHTML, not the upstream parser's behavior. |
| 31 | +jest.mock('@libs/Parser', () => ({ |
| 32 | + __esModule: true, |
| 33 | + default: {replace: (html: string) => html}, |
| 34 | +})); |
| 35 | + |
| 36 | +const buildTNode = (text = '') => ({mockText: text}) as unknown as CustomRendererProps<TBlock>['tnode']; |
| 37 | +const buildULTNode = (children: Array<{tagName: string; text: string}>) => |
| 38 | + ({ |
| 39 | + children: children.map((child) => ({tagName: child.tagName, mockText: child.text})), |
| 40 | + }) as unknown as CustomRendererProps<TBlock>['tnode']; |
| 41 | + |
| 42 | +describe('Bullet list rendering', () => { |
| 43 | + beforeEach(() => { |
| 44 | + capturedSource.html = undefined; |
| 45 | + }); |
| 46 | + |
| 47 | + describe('ULRenderer', () => { |
| 48 | + it('wraps each <li> child with a bullet marker', () => { |
| 49 | + render( |
| 50 | + // @ts-expect-error — only the props read by the renderer are needed for this test |
| 51 | + <ULRenderer |
| 52 | + tnode={buildULTNode([ |
| 53 | + {tagName: 'li', text: 'One'}, |
| 54 | + {tagName: 'li', text: 'Two'}, |
| 55 | + ])} |
| 56 | + style={{}} |
| 57 | + />, |
| 58 | + ); |
| 59 | + expect(screen.getAllByText(CONST.DOT_SEPARATOR)).toHaveLength(2); |
| 60 | + expect(screen.getByText('One')).toBeTruthy(); |
| 61 | + expect(screen.getByText('Two')).toBeTruthy(); |
| 62 | + }); |
| 63 | + |
| 64 | + it('renders non-<li> children with the default node renderer', () => { |
| 65 | + render( |
| 66 | + // @ts-expect-error — only the props read by the renderer are needed for this test |
| 67 | + <ULRenderer |
| 68 | + tnode={buildULTNode([{tagName: 'span', text: 'stray child'}])} |
| 69 | + style={{}} |
| 70 | + />, |
| 71 | + ); |
| 72 | + expect(screen.queryByText(CONST.DOT_SEPARATOR)).toBeNull(); |
| 73 | + expect(screen.getByText('stray child')).toBeTruthy(); |
| 74 | + }); |
| 75 | + }); |
| 76 | + |
| 77 | + describe('BulletItemRenderer (used for both <li> and <bullet-item>)', () => { |
| 78 | + it('renders a bullet marker next to the item content', () => { |
| 79 | + render(<BulletItemRenderer tnode={buildTNode('First item')} />); |
| 80 | + expect(screen.getByText(CONST.DOT_SEPARATOR)).toBeTruthy(); |
| 81 | + expect(screen.getByText('First item')).toBeTruthy(); |
| 82 | + }); |
| 83 | + }); |
| 84 | + |
| 85 | + describe('RenderHTML strips orphaned <br/> tags inside <ul>', () => { |
| 86 | + it('strips <br/> immediately before </ul>', () => { |
| 87 | + render(<RenderHTML html="<ul><li>One</li><li>Two</li><br/></ul>" />); |
| 88 | + expect(capturedSource.html).toBe('<ul><li>One</li><li>Two</li></ul>'); |
| 89 | + }); |
| 90 | + |
| 91 | + it('strips <br> (no slash) immediately before </ul>', () => { |
| 92 | + render(<RenderHTML html="<ul><li>One</li><li>Two</li><br></ul>" />); |
| 93 | + expect(capturedSource.html).toBe('<ul><li>One</li><li>Two</li></ul>'); |
| 94 | + }); |
| 95 | + |
| 96 | + it('strips <br/> appearing between </li> and the next <li>', () => { |
| 97 | + render(<RenderHTML html="<ul><li>One</li><br/><li>Two</li></ul>" />); |
| 98 | + expect(capturedSource.html).toBe('<ul><li>One</li><li>Two</li></ul>'); |
| 99 | + }); |
| 100 | + |
| 101 | + it('leaves a valid <ul>/<li> list untouched', () => { |
| 102 | + render(<RenderHTML html="<ul><li>One</li><li>Two</li></ul>" />); |
| 103 | + expect(capturedSource.html).toBe('<ul><li>One</li><li>Two</li></ul>'); |
| 104 | + }); |
| 105 | + |
| 106 | + it('does not strip <br/> outside of <ul> lists', () => { |
| 107 | + render(<RenderHTML html="<p>line1<br/>line2</p>" />); |
| 108 | + expect(capturedSource.html).toBe('<p>line1<br/>line2</p>'); |
| 109 | + }); |
| 110 | + |
| 111 | + it('preserves <br/> that lives inside <li> as an in-bullet line break', () => { |
| 112 | + render(<RenderHTML html="<ul><li>One<br/>still one</li><li>Two</li></ul>" />); |
| 113 | + expect(capturedSource.html).toBe('<ul><li>One<br/>still one</li><li>Two</li></ul>'); |
| 114 | + }); |
| 115 | + }); |
| 116 | +}); |
0 commit comments