Kaynağa Gözat

fix: fix markdownRender ui crash with standalone headings

The markdownRender component experienced a UI glitch when rendering markdown that consisted solely of headings.
eg:
```markdown
| a | b  |  c |  d  |
| - | :- | -: | :-: |
```

this would cause a `undefinded.props` error

Changes:
- Use optional chaining (?.) operator to safely access dataFiber props.
- Created unit tests to validate rendering behavior with markdown containing only headings.

Change-Id: Id87e93e62f4dca5be8e011a12962e0667af73aa6
邱士川 1 yıl önce
ebeveyn
işleme
68470940a8

+ 45 - 0
packages/semi-ui/markdownRender/__test__/markdown.test.js

@@ -0,0 +1,45 @@
+import MarkdownRender from '../index'
+import React from 'react';
+import { mount } from 'enzyme';
+import { BASE_CLASS_PREFIX } from '@douyinfe/semi-foundation/base/constants';
+
+
+describe(`MarkdownRender`, () => {
+    it(`test table render`, async () => {
+        const content = `
+        | Name | Brand | Count | Price |
+        | - | :- | -: | :-: |
+        | Book | Semi | 10 | ¥100 |
+        | Pen | Semi Design | 20 | ¥200 |
+        `;
+
+        const render = mount(
+            <MarkdownRender raw={content} />
+        );
+
+        // check if has table container
+        expect(render.exists(`.${BASE_CLASS_PREFIX}-table-container`)).toEqual(true);
+        // check if has table head & body
+        expect(render.exists(`.${BASE_CLASS_PREFIX}-table-thead`)).toEqual(true);
+        expect(render.exists(`.${BASE_CLASS_PREFIX}-table-tbody`)).toEqual(true);
+        // check has row is two
+        expect(render.find(`.${BASE_CLASS_PREFIX}-table-tbody .${BASE_CLASS_PREFIX}-table-row`).length).toBe(2);
+    });
+
+    it(`test table only header`, async () => {
+        const content = `
+        | Title | Name | Count | Price |
+        | - | :- | -: | :-: |
+        `;
+
+        const render = mount(
+            <MarkdownRender raw={content} />
+        );
+
+        // check if has table container
+        expect(render.exists(`.${BASE_CLASS_PREFIX}-table-container`)).toEqual(true);
+        // check if has table head & body
+        expect(render.exists(`.${BASE_CLASS_PREFIX}-table-thead`)).toEqual(true);
+        expect(render.exists(`.${BASE_CLASS_PREFIX}-table-tbody`)).toEqual(true);
+    });
+});

+ 1 - 1
packages/semi-ui/markdownRender/components/table.tsx

@@ -19,7 +19,7 @@ const table = (props: PropsWithChildren<TableProps>)=>{
         let item: Record<string, string> = {
             key: String(i)
         };
-        dataFiber[i].props.children.forEach((child, index)=>{
+        dataFiber[i]?.props.children.forEach((child, index)=>{
             item[titles[index]] = child?.props?.children ?? "";
         });
         tableDataSource.push(item);