test(group): add group test #WIK-14774 (#792)

.changeset/soft-owls-bathe.md

@@ -0,0 +1,5 @@
+---
+'@plait/core': patch
+---
+
+add group test

package.json

@@ -26,6 +26,7 @@
         "watch": "ng build --watch --configuration development",
         "test": "ng test mind",
         "test:draw": "ng test draw",
+        "test:core": "ng test core",
         "start:docs": "docgeni serve --port 4600",
         "lint": "ng lint --fix",
         "pretty": "pretty-quick --staged"

packages/core/src/transforms/group.ts

@@ -38,7 +38,7 @@ export const addGroup = (board: PlaitBoard, elements?: PlaitElement[]) => {
 
 export const removeGroup = (board: PlaitBoard, elements?: PlaitElement[]) => {
     const selectedGroups = getHighestSelectedGroups(board, elements);
-    if (canRemoveGroup(board, selectedGroups)) {
+    if (canRemoveGroup(board)) {
         selectedGroups.map(group => {
             const elementsInGroup = findElements(board, {
                 match: item => item.groupId === group.id,

packages/core/src/utils/group.spec.ts

@@ -0,0 +1,252 @@
+import { PlaitElement, PlaitBoard } from '../interfaces';
+import { createTestingBoard } from '../testing';
+import { canAddGroup, canRemoveGroup, getHighestSelectedElements } from './group';
+
+const children: PlaitElement[] = [
+    {
+        id: 'HKiKS',
+        type: 'geometry',
+        shape: 'rectangle',
+        angle: 0,
+        opacity: 1,
+        textHeight: 20,
+        text: {
+            children: [
+                {
+                    text: ''
+                }
+            ],
+            align: 'center'
+        },
+        points: [
+            [-878.8864992700442, -192.19932879823625],
+            [-776.4559437144886, -125.67470758611506]
+        ],
+        strokeWidth: 2
+    },
+    {
+        id: 'WYtyJ',
+        type: 'geometry',
+        shape: 'ellipse',
+        angle: 0,
+        opacity: 1,
+        textHeight: 20,
+        text: {
+            children: [
+                {
+                    text: ''
+                }
+            ],
+            align: 'center'
+        },
+        points: [
+            [-634.347256747159, -188.71528517597852],
+            [-561.2609246764521, -128.27494426688764]
+        ],
+        strokeWidth: 2
+    }
+];
+
+const group1: PlaitElement[] = [
+    {
+        id: 'AeXEN',
+        type: 'group'
+    },
+    {
+        id: 'xAcFH',
+        type: 'geometry',
+        shape: 'ellipse',
+        angle: 0,
+        opacity: 1,
+        textHeight: 20,
+        text: {
+            children: [
+                {
+                    text: ''
+                }
+            ],
+            align: 'center'
+        },
+        points: [
+            [-891.1773767952967, -169.7916583436908],
+            [-803.5156028053977, -96.78029470732719]
+        ],
+        strokeWidth: 2,
+        groupId: 'AeXEN'
+    },
+    {
+        id: 'MAcze',
+        type: 'geometry',
+        shape: 'ellipse',
+        angle: 0,
+        opacity: 1,
+        textHeight: 20,
+        text: {
+            children: [
+                {
+                    text: ''
+                }
+            ],
+            align: 'center'
+        },
+        points: [
+            [-682.1948982007575, -164.09405270971433],
+            [-594.5331242108585, -91.0826890733507]
+        ],
+        strokeWidth: 2,
+        groupId: 'AeXEN'
+    },
+    {
+        id: 'xAcFH',
+        type: 'geometry',
+        shape: 'ellipse',
+        angle: 0,
+        opacity: 1,
+        textHeight: 20,
+        text: {
+            children: [
+                {
+                    text: ''
+                }
+            ],
+            align: 'center'
+        },
+        points: [
+            [-891.1773767952967, -169.7916583436908],
+            [-803.5156028053977, -96.78029470732719]
+        ],
+        strokeWidth: 2,
+        groupId: 'AeXEN'
+    },
+    {
+        id: 'MAcze',
+        type: 'geometry',
+        shape: 'ellipse',
+        angle: 0,
+        opacity: 1,
+        textHeight: 20,
+        text: {
+            children: [
+                {
+                    text: ''
+                }
+            ],
+            align: 'center'
+        },
+        points: [
+            [-682.1948982007575, -164.09405270971433],
+            [-594.5331242108585, -91.0826890733507]
+        ],
+        strokeWidth: 2,
+        groupId: 'AeXEN'
+    }
+];
+
+const group2: PlaitElement[] = [
+    {
+        id: 'ENAeX',
+        type: 'group'
+    },
+    {
+        id: 'fHxAC',
+        type: 'geometry',
+        shape: 'ellipse',
+        angle: 0,
+        opacity: 1,
+        textHeight: 20,
+        text: {
+            children: [
+                {
+                    text: ''
+                }
+            ],
+            align: 'center'
+        },
+        points: [
+            [-891.1773767952967, -169.7916583436908],
+            [-803.5156028053977, -96.78029470732719]
+        ],
+        strokeWidth: 2,
+        groupId: 'ENAeX'
+    },
+    {
+        id: 'zMAce',
+        type: 'geometry',
+        shape: 'ellipse',
+        angle: 0,
+        opacity: 1,
+        textHeight: 20,
+        text: {
+            children: [
+                {
+                    text: ''
+                }
+            ],
+            align: 'center'
+        },
+        points: [
+            [-682.1948982007575, -164.09405270971433],
+            [-594.5331242108585, -91.0826890733507]
+        ],
+        strokeWidth: 2,
+        groupId: 'ENAeX'
+    }
+];
+
+describe('group', () => {
+    let board: PlaitBoard;
+    beforeEach(() => {
+        board = createTestingBoard([], []);
+    });
+
+    describe('getHighestSelectedElements', () => {
+        it('should get correctly value', () => {
+            const value1 = getHighestSelectedElements(board, children);
+            expect(children).toEqual(value1);
+
+            const value2 = getHighestSelectedElements(board, group1);
+            expect(value2.length).toBe(1);
+            expect(value2[0]).toEqual(group1[0]);
+
+            const value3 = getHighestSelectedElements(board, [...group1, ...children, group2[1]]);
+            expect(value3.length).toBe(4);
+            expect(value3).toContain(group1[0]);
+            expect(value3).toContain(children[0]);
+            expect(value3).toContain(children[1]);
+            expect(value3).toContain(group2[1]);
+        });
+    });
+
+    describe('canAddGroup', () => {
+        it('should get canAddGroup value to be true', () => {
+            expect(canAddGroup(board, children)).toBe(true);
+            expect(canAddGroup(board, [...group1, ...children])).toBe(true);
+            expect(canAddGroup(board, [...group1, ...group2])).toBe(true);
+            expect(canAddGroup(board, [...group1, ...group2, ...children])).toBe(true);
+            expect(canAddGroup(board, [...group1, children[0]])).toBe(true);
+            expect(canAddGroup(board, [...group1, ...group2, children[0]])).toBe(true);
+        });
+
+        it('should get canAddGroup value to be false', () => {
+            expect(canAddGroup(board, [children[0]])).toBe(false);
+            expect(canAddGroup(board, group1)).toBe(false);
+            expect(canAddGroup(board, [...group1, group2[1]])).toBe(false);
+            expect(canAddGroup(board, [...children, group2[1]])).toBe(false);
+        });
+    });
+
+    describe('canRemoveGroup', () => {
+        it('should get canRemoveGroup value to be true', () => {
+            expect(canRemoveGroup(board, group1)).toBe(true);
+            expect(canRemoveGroup(board, [...group1, ...group2])).toBe(true);
+            expect(canRemoveGroup(board, [...group1, ...children])).toBe(true);
+            expect(canRemoveGroup(board, [...group1, group2[1]])).toBe(true);
+        });
+
+        it('should get canRemoveGroup value to be false', () => {
+            expect(canRemoveGroup(board, children)).toBe(false);
+            expect(canRemoveGroup(board, [group1[1], group2[1]])).toBe(false);
+            expect(canRemoveGroup(board, [...children, group1[1]])).toBe(false);
+        });
+    });
+});

packages/core/src/utils/group.ts

@@ -215,15 +215,17 @@ export const hasSelectedElementsInSameGroup = (elements: PlaitElement[]) => {
     return elements.every(item => item.groupId && item.groupId === elements[0].groupId);
 };
 
-export const canAddGroup = (board: PlaitBoard, highestSelectedElements: PlaitElement[]) => {
+export const canAddGroup = (board: PlaitBoard, elements?: PlaitElement[]) => {
+    const highestSelectedElements = getHighestSelectedElements(board, elements);
     const rootElements = highestSelectedElements.filter(item => board.canAddToGroup(item));
     if (rootElements.length > 1) {
         return nonGroupInHighestSelectedElements(rootElements) || hasSelectedElementsInSameGroup(rootElements);
     }
     return false;
 };
 
-export const canRemoveGroup = (board: PlaitBoard, selectedGroups: PlaitGroup[]) => {
-    const selectedElements = getSelectedElements(board);
+export const canRemoveGroup = (board: PlaitBoard, elements?: PlaitElement[]) => {
+    const selectedGroups = getHighestSelectedGroups(board, elements);
+    const selectedElements = elements || getSelectedElements(board);
     return selectedElements.length > 0 && selectedGroups.length > 0;
 };

src/app/editor/editor.component.ts

@@ -145,10 +145,8 @@ export class BasicEditorComponent implements OnInit {
     change(event: PlaitBoardChangeEvent) {
         this.setLocalData(JSON.stringify(event));
         this.selectedElements = getSelectedElements(this.board);
-        const selectedGroups = getHighestSelectedGroups(this.board);
-        this.showRemoveGroup = canRemoveGroup(this.board, selectedGroups);
-        const highestSelectedElements = getHighestSelectedElements(this.board);
-        this.showAddGroup = canAddGroup(this.board, highestSelectedElements);
+        this.showRemoveGroup = canRemoveGroup(this.board);
+        this.showAddGroup = canAddGroup(this.board);
     }
 
     getLocalStorage() {