Add tests for elements sidebar

src/Components/ElementsSidebar/ElementsSidebar.test.tsx

@@ -0,0 +1,242 @@
+import { describe, test, expect, vi } from 'vitest';
+import * as React from 'react';
+import { fireEvent, render, screen } from '../../utils/test-utils';
+import { ElementsSidebar } from './ElementsSidebar';
+import { IContainerModel } from '../../Interfaces/ContainerModel';
+
+describe.concurrent('Elements sidebar', () => {
+  it('No elements', () => {
+    render(<ElementsSidebar
+      MainContainer={null}
+      isOpen={true}
+      isHistoryOpen={false}
+      SelectedContainer={null}
+      onClick={() => {}}
+      onPropertyChange={() => {}}
+      selectContainer={() => {}}
+    />);
+
+    expect(screen.getByText(/Elements/i));
+    expect(screen.queryByText('id')).toBeNull();
+    expect(screen.queryByText(/main/i)).toBeNull();
+  });
+
+  it('With a MainContainer', () => {
+    render(<ElementsSidebar
+      MainContainer={{
+        children: [],
+        parent: null,
+        properties: {
+          id: 'main',
+          parentId: null,
+          x: 0,
+          y: 0,
+          width: 2000,
+          height: 100
+        },
+        userData: {}
+      }}
+      isOpen={true}
+      isHistoryOpen={false}
+      SelectedContainer={null}
+      onClick={() => {}}
+      onPropertyChange={() => {}}
+      selectContainer={() => {}}
+    />);
+
+    expect(screen.getByText(/Elements/i));
+    expect(screen.queryByText('id')).toBeNull();
+    expect(screen.getByText(/main/i));
+  });
+
+  it('With a selected MainContainer', () => {
+    const MainContainer = {
+      children: [],
+      parent: null,
+      properties: {
+        id: 'main',
+        parentId: '',
+        x: 0,
+        y: 0,
+        width: 2000,
+        height: 100
+      },
+      userData: {}
+    };
+
+    const { container } = render(<ElementsSidebar
+      MainContainer={MainContainer}
+      isOpen={true}
+      isHistoryOpen={false}
+      SelectedContainer={MainContainer}
+      onClick={() => {}}
+      onPropertyChange={() => {}}
+      selectContainer={() => {}}
+    />);
+
+    expect(screen.getByText(/Elements/i));
+    expect(screen.getByText(/main/i));
+    expect(screen.queryByText('id')).toBeDefined();
+    expect(screen.queryByText('parentId')).toBeDefined();
+    expect(screen.queryByText('x')).toBeDefined();
+    expect(screen.queryByText('y')).toBeDefined();
+    expect(screen.queryByText('width')).toBeDefined();
+    expect(screen.queryByText('height')).toBeDefined();
+    const propertyId = container.querySelector('#property-id');
+    const propertyParentId = container.querySelector('#property-parentId');
+    const propertyX = container.querySelector('#property-x');
+    const propertyY = container.querySelector('#property-y');
+    const propertyWidth = container.querySelector('#property-width');
+    const propertyHeight = container.querySelector('#property-height');
+    expect((propertyId as HTMLInputElement).value).toBe(MainContainer.properties.id.toString());
+    expect(propertyParentId).toBeDefined();
+    expect((propertyParentId as HTMLInputElement).value).toBe('');
+    expect(propertyX).toBeDefined();
+    expect((propertyX as HTMLInputElement).value).toBe(MainContainer.properties.x.toString());
+    expect(propertyY).toBeDefined();
+    expect((propertyY as HTMLInputElement).value).toBe(MainContainer.properties.y.toString());
+    expect(propertyWidth).toBeDefined();
+    expect((propertyWidth as HTMLInputElement).value).toBe(MainContainer.properties.width.toString());
+    expect(propertyHeight).toBeDefined();
+    expect((propertyHeight as HTMLInputElement).value).toBe(MainContainer.properties.height.toString());
+  });
+
+  it('With multiple containers', () => {
+    const children: IContainerModel[] = [];
+    const MainContainer = {
+      children,
+      parent: null,
+      properties: {
+        id: 'main',
+        parentId: '',
+        x: 0,
+        y: 0,
+        width: 2000,
+        height: 100
+      },
+      userData: {}
+    };
+
+    children.push(
+      {
+        children: [],
+        parent: MainContainer,
+        properties: {
+          id: 'child-1',
+          parentId: 'main',
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0
+        },
+        userData: {}
+      }
+    );
+
+    children.push(
+      {
+        children: [],
+        parent: MainContainer,
+        properties: {
+          id: 'child-2',
+          parentId: 'main',
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0
+        },
+        userData: {}
+      }
+    );
+
+    render(<ElementsSidebar
+      MainContainer={MainContainer}
+      isOpen={true}
+      isHistoryOpen={false}
+      SelectedContainer={MainContainer}
+      onClick={() => {}}
+      onPropertyChange={() => {}}
+      selectContainer={() => {}}
+    />);
+
+    expect(screen.getByText(/Elements/i));
+    expect(screen.queryByText('id')).toBeDefined();
+    expect(screen.getByText(/main/i));
+    expect(screen.getByText(/child-1/i));
+    expect(screen.getByText(/child-2/i));
+  });
+
+  it('With multiple containers, change selection', () => {
+    const children: IContainerModel[] = [];
+    const MainContainer: IContainerModel = {
+      children,
+      parent: null,
+      properties: {
+        id: 'main',
+        parentId: '',
+        x: 0,
+        y: 0,
+        width: 2000,
+        height: 100
+      },
+      userData: {}
+    };
+
+    const child1Model: IContainerModel = {
+      children: [],
+      parent: MainContainer,
+      properties: {
+        id: 'child-1',
+        parentId: 'main',
+        x: 0,
+        y: 0,
+        width: 0,
+        height: 0
+      },
+      userData: {}
+    };
+    children.push(child1Model);
+
+    let SelectedContainer = MainContainer;
+    const selectContainer = vi.fn((container: IContainerModel) => {
+      SelectedContainer = container;
+    });
+
+    const { container, rerender } = render(<ElementsSidebar
+      MainContainer={MainContainer}
+      isOpen={true}
+      isHistoryOpen={false}
+      SelectedContainer={SelectedContainer}
+      onClick={() => {}}
+      onPropertyChange={() => {}}
+      selectContainer={selectContainer}
+    />);
+
+    expect(screen.getByText(/Elements/i));
+    expect(screen.queryByText('id')).toBeDefined();
+    expect(screen.getByText(/main/i));
+    const child1 = screen.getByText(/child-1/i);
+    expect(child1);
+    const propertyId = container.querySelector('#property-id');
+    const propertyParentId = container.querySelector('#property-parentId');
+    expect((propertyId as HTMLInputElement).value).toBe(MainContainer.properties.id.toString());
+    expect((propertyParentId as HTMLInputElement).value).toBe('');
+
+    fireEvent.click(child1);
+
+    rerender(<ElementsSidebar
+      MainContainer={MainContainer}
+      isOpen={true}
+      isHistoryOpen={false}
+      SelectedContainer={SelectedContainer}
+      onClick={() => {}}
+      onPropertyChange={() => {}}
+      selectContainer={selectContainer}
+    />);
+
+    expect((propertyId as HTMLInputElement).value === 'main').toBeFalsy();
+    expect((propertyParentId as HTMLInputElement).value === '').toBeFalsy();
+    expect((propertyId as HTMLInputElement).value).toBe(child1Model.properties.id.toString());
+    expect((propertyParentId as HTMLInputElement).value).toBe(child1Model.properties.parentId?.toString());
+  });
+});