test: grouppaneltree render

jest.config.js

@@ -16,6 +16,7 @@ module.exports = {
       '<rootDir>/test/fileTransformer.js',
   },
   transformIgnorePatterns: ['/node_modules/'],
+  setupFiles: ['<rootDir>/test/setup.js'],
   setupFilesAfterEnv: [],
   globals: {
     window: {},

shared/i18n/__mocks__/index.ts

@@ -0,0 +1,3 @@
+export const t = (key: string) => {
+  return key;
+};

shared/index.tsx

@@ -100,3 +100,4 @@ export {
   version,
 } from './utils/environment';
 export { getTextColorHex } from './utils/string-helper';
+export { sleep } from './utils/utils';

shared/utils/utils.ts

@@ -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);
+  });
+}

test/setup.js

@@ -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);
+};

web/src/components/modals/GroupDetail/Panel/__tests__/GroupPanelTree.spec.tsx

@@ -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();
+  });
+});

web/src/components/modals/GroupDetail/Panel/__tests__/__snapshots__/GroupPanelTree.spec.tsx.snap

@@ -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>
+`;