diff --git a/web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx b/web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx index 206d4cf1..f271ce0b 100644 --- a/web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx +++ b/web/src/components/modals/GroupDetail/Panel/GroupPanelTree.tsx @@ -37,7 +37,7 @@ function buildTreeDataWithGroupPanel( /** * 重新构建面板顺序 */ -function rebuildGroupPanelOrder( +export function rebuildGroupPanelOrder( groupPanels: GroupPanelInfo[] ): GroupPanelInfo[] { const originGroupPanels = _cloneDeep(groupPanels); diff --git a/web/src/components/modals/GroupDetail/Panel/__tests__/GroupPanelTree.spec.tsx b/web/src/components/modals/GroupDetail/Panel/__tests__/GroupPanelTree.spec.tsx index c8d544cc..f263e273 100644 --- a/web/src/components/modals/GroupDetail/Panel/__tests__/GroupPanelTree.spec.tsx +++ b/web/src/components/modals/GroupDetail/Panel/__tests__/GroupPanelTree.spec.tsx @@ -2,46 +2,46 @@ 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'; +import { GroupPanelTree, rebuildGroupPanelOrder } 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', - }, - ]; +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', + }, +]; +describe('GroupPanelTree', () => { test('simple render snapshot', async () => { const onChange = jest.fn(); const wrapper = render( @@ -51,3 +51,48 @@ describe('GroupPanelTree', () => { expect(wrapper.container).toMatchSnapshot(); }); }); + +describe('rebuildGroupPanelOrder', () => { + test('ref is changed', () => { + expect(rebuildGroupPanelOrder(testGroupPanels)).not.toBe(testGroupPanels); + expect(rebuildGroupPanelOrder(testGroupPanels)[0]).not.toBe( + testGroupPanels[0] + ); + }); + + test('keep order if right', () => { + expect(rebuildGroupPanelOrder(testGroupPanels)).toEqual(testGroupPanels); + }); + + test('child should after parent', () => { + expect( + rebuildGroupPanelOrder([testGroupPanels[1], testGroupPanels[0]]) + ).toEqual([testGroupPanels[0], testGroupPanels[1]]); + }); + + test('switch position should keep origin order', () => { + expect( + rebuildGroupPanelOrder([ + testGroupPanels[1], + testGroupPanels[2], + testGroupPanels[0], + ]) + ).toEqual([testGroupPanels[0], testGroupPanels[1], testGroupPanels[2]]); + }); + + test('switch position should keep origin order(group)', () => { + expect( + rebuildGroupPanelOrder([ + testGroupPanels[1], + testGroupPanels[2], + testGroupPanels[0], + testGroupPanels[3], + ]) + ).toEqual([ + testGroupPanels[0], + testGroupPanels[1], + testGroupPanels[2], + testGroupPanels[3], + ]); + }); +});