mirror of https://github.com/msgbyte/tailchat
test: grouppaneltree render
parent
3fabb6f683
commit
17b68bf977
@ -0,0 +1,3 @@
|
||||
export const t = (key: string) => {
|
||||
return key;
|
||||
};
|
@ -0,0 +1,10 @@
|
||||
/**
|
||||
* JavaScript 中的 sleep 函数
|
||||
* 参考 https://github.com/sqren/await-sleep/blob/master/index.js
|
||||
* @param milliseconds 阻塞毫秒
|
||||
*/
|
||||
export function sleep(milliseconds: number): Promise<void> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(resolve, milliseconds);
|
||||
});
|
||||
}
|
@ -0,0 +1,8 @@
|
||||
// https://github.com/testing-library/react-testing-library#suppressing-unnecessary-warnings-on-react-dom-168
|
||||
const originalError = console.error;
|
||||
console.error = (...args) => {
|
||||
if (/Warning.*not wrapped in act/.test(args[0])) {
|
||||
return;
|
||||
}
|
||||
originalError.call(console, ...args);
|
||||
};
|
@ -0,0 +1,53 @@
|
||||
jest.mock('tailchat-shared/i18n');
|
||||
import { render } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import { GroupPanel, GroupPanelType } from 'tailchat-shared';
|
||||
import { GroupPanelTree } from '../GroupPanelTree';
|
||||
|
||||
describe('GroupPanelTree', () => {
|
||||
const testGroupPanels: GroupPanel[] = [
|
||||
{
|
||||
id: '00',
|
||||
name: 'section-1',
|
||||
type: GroupPanelType.GROUP,
|
||||
},
|
||||
{
|
||||
id: '01',
|
||||
name: 'panel-01',
|
||||
type: GroupPanelType.TEXT,
|
||||
parentId: '00',
|
||||
},
|
||||
{
|
||||
id: '02',
|
||||
name: 'panel-02',
|
||||
type: GroupPanelType.TEXT,
|
||||
parentId: '00',
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
name: 'section-2',
|
||||
type: GroupPanelType.GROUP,
|
||||
},
|
||||
{
|
||||
id: '11',
|
||||
name: 'panel-11',
|
||||
type: GroupPanelType.TEXT,
|
||||
parentId: '10',
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
name: 'panel-12',
|
||||
type: GroupPanelType.TEXT,
|
||||
parentId: '10',
|
||||
},
|
||||
];
|
||||
|
||||
test('simple render snapshot', async () => {
|
||||
const onChange = jest.fn();
|
||||
const wrapper = render(
|
||||
<GroupPanelTree groupPanels={testGroupPanels} onChange={onChange} />
|
||||
);
|
||||
|
||||
expect(wrapper.container).toMatchSnapshot();
|
||||
});
|
||||
});
|
@ -0,0 +1,242 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`GroupPanelTree simple render snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ant-tree ant-tree-icon-hide"
|
||||
>
|
||||
<div
|
||||
role="tree"
|
||||
>
|
||||
<input
|
||||
style="width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;"
|
||||
tabindex="0"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
class="ant-tree-treenode"
|
||||
style="position: absolute; pointer-events: none; visibility: hidden; height: 0px; overflow: hidden;"
|
||||
>
|
||||
<div
|
||||
class="ant-tree-indent"
|
||||
>
|
||||
<div
|
||||
class="ant-tree-indent-unit"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tree-list"
|
||||
style="position: relative;"
|
||||
>
|
||||
<div
|
||||
class="ant-tree-list-holder"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-tree-list-holder-inner"
|
||||
style="display: flex; flex-direction: column;"
|
||||
>
|
||||
<div
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-tree-indent"
|
||||
/>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
>
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-tree-switcher-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-grabbed="true"
|
||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open draggable"
|
||||
draggable="true"
|
||||
title="section-1"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-title"
|
||||
>
|
||||
section-1
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tree-treenode"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-tree-indent"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-indent-unit ant-tree-indent-unit-start"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
/>
|
||||
<span
|
||||
aria-grabbed="true"
|
||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"
|
||||
draggable="true"
|
||||
title="panel-01"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-title"
|
||||
>
|
||||
panel-01
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tree-treenode ant-tree-treenode-leaf-last"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-tree-indent"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-indent-unit ant-tree-indent-unit-start"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
/>
|
||||
<span
|
||||
aria-grabbed="true"
|
||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"
|
||||
draggable="true"
|
||||
title="panel-02"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-title"
|
||||
>
|
||||
panel-02
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tree-treenode ant-tree-treenode-switcher-open ant-tree-treenode-leaf-last"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-tree-indent"
|
||||
/>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher_open"
|
||||
>
|
||||
<span
|
||||
aria-label="caret-down"
|
||||
class="anticon anticon-caret-down ant-tree-switcher-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
aria-grabbed="true"
|
||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open draggable"
|
||||
draggable="true"
|
||||
title="section-2"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-title"
|
||||
>
|
||||
section-2
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tree-treenode"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-tree-indent"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-indent-unit ant-tree-indent-unit-end"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
/>
|
||||
<span
|
||||
aria-grabbed="true"
|
||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"
|
||||
draggable="true"
|
||||
title="panel-11"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-title"
|
||||
>
|
||||
panel-11
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-tree-treenode ant-tree-treenode-leaf-last"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="ant-tree-indent"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-indent-unit ant-tree-indent-unit-end"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="ant-tree-switcher ant-tree-switcher-noop"
|
||||
/>
|
||||
<span
|
||||
aria-grabbed="true"
|
||||
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal draggable"
|
||||
draggable="true"
|
||||
title="panel-12"
|
||||
>
|
||||
<span
|
||||
class="ant-tree-title"
|
||||
>
|
||||
panel-12
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
Loading…
Reference in New Issue