test: Added test to change items layers functionality

projects/f-flow/src/domain/update-item-and-children-layers/update-item-and-children-layers.execution.spec.ts

@@ -1,89 +1,111 @@
 import { TestBed } from '@angular/core/testing';
-import { UpdateItemAndChildrenLayersExecution } from './update-item-and-children-layers.execution';
-import { UpdateItemAndChildrenLayersRequest } from './update-item-and-children-layers.request';
-import { FFlowMediator } from '../../infrastructure';
+import {
+  FCanvasBase,
+  FNodeBase,
+  GetDeepChildrenNodesAndGroupsExecution,
+  MoveFrontElementsBeforeTargetElementExecution,
+  SortItemLayersExecution,
+  SortItemLayersRequest, SortItemsByParentExecution, SortNodeLayersExecution,
+  UpdateItemAndChildrenLayersExecution
+} from '@foblex/flow';
+import { FFlowMediator } from '@foblex/flow';
+import { UpdateItemAndChildrenLayersRequest } from '@foblex/flow';
+import {
+  FComponentsStore,
+} from '@foblex/flow';
 import { setupTestModule } from '../test-setup';
-import { ISelectable } from '../../f-connection';
 
-function getSelectableItem(hostElement: HTMLElement): ISelectable {
-  return {
-    fId: '1',
-    fSelectionDisabled: false,
-    hostElement: hostElement,
-    select: jasmine.createSpy('select'),
-    deselect: jasmine.createSpy('deselect'),
-    isSelected: jasmine.createSpy('isSelected').and.returnValue(true)
-  }
-}
-
-function createElementWithId(id: string): HTMLElement {
+function createElement(id: string): HTMLElement {
   const element = document.createElement('div');
   element.id = id;
   return element;
 }
 
-describe('UpdateItemLayerExecution', () => {
+function createNode(id: string, element: HTMLElement, parentId?: string): FNodeBase {
+  return {
+    fId: id,
+    fParentId: parentId,
+    hostElement: element,
+  } as FNodeBase;
+}
+
+function createCanvas(): FCanvasBase {
+  return {
+    fGroupsContainer: {
+      nativeElement: document.createElement('div') as HTMLElement,
+    },
+    fNodesContainer: {
+      nativeElement: document.createElement('div') as HTMLElement,
+    },
+    fConnectionsContainer: {
+      nativeElement: document.createElement('div') as HTMLElement,
+    }
+  } as FCanvasBase;
+}
+
+describe('UpdateItemAndChildrenLayersExecution', () => {
   let fMediator: FFlowMediator;
+  let fComponentsStore: FComponentsStore;
 
   beforeEach(() => {
-    setupTestModule([ UpdateItemAndChildrenLayersExecution ]);
+    setupTestModule([ UpdateItemAndChildrenLayersExecution, SortItemLayersExecution, SortItemsByParentExecution, SortNodeLayersExecution, GetDeepChildrenNodesAndGroupsExecution, MoveFrontElementsBeforeTargetElementExecution]);
     fMediator = TestBed.inject(FFlowMediator) as jasmine.SpyObj<FFlowMediator>;
+    fComponentsStore = TestBed.inject(FComponentsStore);
   });
 
-  it('should move TargetElement to last position in array', () => {
-    const itemContainer = createElementWithId('itemContainer');
-    const itemElement = createElementWithId('itemElement')
-    const anotherElement = createElementWithId('anotherElement')
-    const targetElement = createElementWithId('targetElement');
-
-    itemContainer.appendChild(anotherElement);
-    itemContainer.appendChild(targetElement);
-    itemContainer.appendChild(itemElement);
+  it('should handle group container', () => {
+    const fCanvas = createCanvas();
+    fComponentsStore.fCanvas = fCanvas;
 
-    expect(itemContainer.children[ 1 ].id).toEqual('targetElement');
+    const group1 = createNode('group1', createElement('group1'), 'group2');
+    const group2 = createNode('group2', createElement('group2'));
+    fCanvas.fGroupsContainer.nativeElement.append(group1.hostElement, group2.hostElement);
 
-    fMediator.send(new UpdateItemAndChildrenLayersRequest(getSelectableItem(targetElement), itemContainer));
-
-    expect(itemContainer.children[ 0 ].id).toEqual('anotherElement');
-    expect(itemContainer.children[ 1 ].id).toEqual('itemElement');
-    expect(itemContainer.children[ 2 ].id).toEqual('targetElement');
-  });
+    const node4 = createNode('node4', createElement('node4'), 'node2');
+    const node1 = createNode('node1', createElement('node1'));
+    const node2 = createNode('node2', createElement('node2'), 'group1');
+    const node3 = createNode('node3', createElement('node3'));
 
-  it('should do nothing if TargetElement is already the last element', () => {
-    const itemContainer = createElementWithId('itemContainer');
-    const anotherElement = createElementWithId('anotherElement')
-    const targetElement = createElementWithId('targetElement');
+    fCanvas.fNodesContainer.nativeElement.append(node4.hostElement, node1.hostElement, node2.hostElement, node3.hostElement);
 
-    itemContainer.appendChild(anotherElement);
-    itemContainer.appendChild(targetElement);
+    fComponentsStore.fNodes = [ group1, group2, node1, node2, node3, node4 ];
+    fMediator.send(new SortItemLayersRequest());
+    fMediator.send(new UpdateItemAndChildrenLayersRequest(group1, fCanvas.fGroupsContainer.nativeElement));
 
-    expect(itemContainer.children[ 1 ].id).toEqual('targetElement');
+    expect(fCanvas.fGroupsContainer.nativeElement.children.item(0)).toEqual(group2.hostElement);
+    expect(fCanvas.fGroupsContainer.nativeElement.children.item(1)).toEqual(group1.hostElement);
 
-    fMediator.send(new UpdateItemAndChildrenLayersRequest(getSelectableItem(targetElement), itemContainer));
-
-    expect(itemContainer.children[ 0 ].id).toEqual('anotherElement');
-    expect(itemContainer.children[ 1 ].id).toEqual('targetElement');
+    expect(fCanvas.fNodesContainer.nativeElement.children.item(0)).toEqual(node1.hostElement);
+    expect(fCanvas.fNodesContainer.nativeElement.children.item(1)).toEqual(node3.hostElement);
+    expect(fCanvas.fNodesContainer.nativeElement.children.item(3)).toEqual(node4.hostElement);
+    expect(fCanvas.fNodesContainer.nativeElement.children.item(2)).toEqual(node2.hostElement);
   });
 
-  it('should handle empty item container', () => {
-    const itemContainer = createElementWithId('itemContainer');
-    const targetElement = createElementWithId('targetElement');
+  it('should handle group container with SortItemLayers', () => {
+    const fCanvas = createCanvas();
+    fComponentsStore.fCanvas = fCanvas;
 
-    fMediator.send(new UpdateItemAndChildrenLayersRequest(getSelectableItem(targetElement), itemContainer));
+    const group1 = createNode('group1', createElement('group1'), 'group2');
+    const group2 = createNode('group2', createElement('group2'));
+    fCanvas.fGroupsContainer.nativeElement.append(group1.hostElement, group2.hostElement);
 
-    expect(itemContainer.children.length).toBe(0);
-  });
+    const node4 = createNode('node4', createElement('node4'), 'node2');
+    const node1 = createNode('node1', createElement('node1'));
+    const node2 = createNode('node2', createElement('node2'), 'group1');
+    const node3 = createNode('node3', createElement('node3'));
+
+    fCanvas.fNodesContainer.nativeElement.append(node4.hostElement, node1.hostElement, node2.hostElement, node3.hostElement);
 
-  it('should handle item not in container', () => {
-    const itemContainer = createElementWithId('itemContainer');
-    const anotherElement = createElementWithId('anotherElement')
-    const targetElement = createElementWithId('targetElement');
+    fComponentsStore.fNodes = [ group1, group2, node1, node2, node3, node4 ];
 
-    itemContainer.appendChild(anotherElement);
+    fMediator.send(new UpdateItemAndChildrenLayersRequest(group1, fCanvas.fGroupsContainer.nativeElement));
 
-    fMediator.send(new UpdateItemAndChildrenLayersRequest(getSelectableItem(targetElement), itemContainer));
+    expect(fCanvas.fGroupsContainer.nativeElement.children.item(0)).toEqual(group2.hostElement);
+    expect(fCanvas.fGroupsContainer.nativeElement.children.item(1)).toEqual(group1.hostElement);
 
-    expect(itemContainer.children.length).toBe(1);
-    expect(itemContainer.children[ 0 ].id).toEqual('anotherElement');
+    expect(fCanvas.fNodesContainer.nativeElement.children.item(0)).toEqual(node1.hostElement);
+    expect(fCanvas.fNodesContainer.nativeElement.children.item(1)).toEqual(node3.hostElement);
+    expect(fCanvas.fNodesContainer.nativeElement.children.item(2)).toEqual(node4.hostElement); // node4 is here because we need call SortItemLayers on test Init
+    expect(fCanvas.fNodesContainer.nativeElement.children.item(3)).toEqual(node2.hostElement);
   });
 });

projects/f-pro-examples/db-management-example/components/flow/db-management-flow.component.ts

@@ -102,7 +102,6 @@ export class DbManagementFlowComponent implements OnInit {
 
   private subscribeOnReloadData(): Subscription {
     return this.apiService.reload$.pipe(startWith(null)).subscribe((reason: EReloadReason | null) => {
-      console.log('reload');
       this.getData();
       if (reason === EReloadReason.CONNECTION_CHANGED) {
         this.fFlowComponent.clearSelection();
@@ -129,7 +128,6 @@ export class DbManagementFlowComponent implements OnInit {
   }
 
   public selectionChanged(event: FSelectionChangeEvent): void {
-    console.log('selection changed', event);
     this.isSingleSelection = event.connections.length + event.nodes.length === 1;
     this.selectionService.setTables(event.nodes);
     this.changeDetectorRef.markForCheck();

projects/f-pro-examples/db-management-example/components/table/components/header/db-management-table-header.component.ts

@@ -32,7 +32,6 @@ export class DbManagementTableHeaderComponent {
   }
 
   public createColumn(): void {
-    console.log('create column');
     this.apiService.createColumn(this.viewModel.id);
   }
 }

projects/f-pro-examples/db-management-example/domain/database.api-service.ts

@@ -26,8 +26,6 @@ import { ChangeColumnKeyHandler } from './table/change-column-key/change-column-
 import { ChangeColumnKeyRequest } from './table/change-column-key/change-column-key.request';
 import { ToGroupViewModelHandler } from './group';
 
-
-
 @Injectable()
 export class DatabaseApiService {
 
@@ -69,7 +67,6 @@ export class DatabaseApiService {
   }
 
   public changeColumnKey(tableId: string, columnId: string, key: ETableColumnKey | null): void {
-    console.log('changeColumnKey', tableId, columnId, key);
     new ChangeColumnKeyHandler(this.storage).handle(
       new ChangeColumnKeyRequest(tableId, columnId, key)
     );