Merged PR 163: Remove the static form + rename some components for clarity

The static form is hard to maintain so I am removing it + rename some components for clarity + moved some utils files

src/Components/ContainerProperties/ContainerProperties.test.tsx

@@ -0,0 +1,95 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import * as React from 'react';
+import { expect, describe, it, vi } from 'vitest';
+import { XPositionReference } from '../../Enums/XPositionReference';
+import IContainerProperties from '../../Interfaces/IContainerProperties';
+import { Properties } from './ContainerProperties';
+
+describe.concurrent('Properties', () => {
+  it('No properties', () => {
+    render(<Properties
+      properties={undefined}
+      onChange={() => {}}
+      symbols={new Map()}
+    />);
+
+    expect(screen.queryByText('id')).toBeNull();
+    expect(screen.queryByText('parentId')).toBeNull();
+    expect(screen.queryByText('x')).toBeNull();
+    expect(screen.queryByText('y')).toBeNull();
+  });
+
+  it('Some properties, change values with dynamic input', () => {
+    const prop: IContainerProperties = {
+      id: 'stuff',
+      parentId: 'parentId',
+      linkedSymbolId: '',
+      displayedText: 'stuff',
+      x: 1,
+      y: 1,
+      width: 1,
+      height: 1,
+      minWidth: 1,
+      XPositionReference: XPositionReference.Left,
+      isRigidBody: false,
+      isAnchor: false
+    };
+
+    const handleChange = vi.fn((key, value) => {
+      (prop as any)[key] = value;
+    });
+
+    const { container, rerender } = render(<Properties
+      properties={prop}
+      onChange={handleChange}
+      symbols={new Map()}
+    />);
+
+    expect(screen.queryByText('id')).toBeDefined();
+    expect(screen.queryByText('parentId')).toBeDefined();
+    expect(screen.queryByText('x')).toBeDefined();
+    expect(screen.queryByText('y')).toBeDefined();
+
+    let propertyId = container.querySelector('#id');
+    let propertyParentId = container.querySelector('#parentId');
+    let propertyX = container.querySelector('#x');
+    let propertyY = container.querySelector('#y');
+    expect(propertyId).toBeDefined();
+    expect((propertyId as HTMLInputElement).value).toBe('stuff');
+    expect(propertyParentId).toBeDefined();
+    expect((propertyParentId as HTMLInputElement).value).toBe('parentId');
+    expect(propertyX).toBeDefined();
+    expect((propertyX as HTMLInputElement).value).toBe('1');
+    expect(propertyY).toBeDefined();
+    expect((propertyY as HTMLInputElement).value).toBe('1');
+
+    fireEvent.change(propertyId as Element, { target: { value: 'stuffed' } });
+    fireEvent.change(propertyParentId as Element, { target: { value: 'parentedId' } });
+    fireEvent.change(propertyX as Element, { target: { value: '2' } });
+    fireEvent.change(propertyY as Element, { target: { value: '2' } });
+    expect(handleChange).toBeCalledTimes(2);
+
+    expect(prop.id).toBe('stuff');
+    expect(prop.parentId).toBe('parentId');
+    expect(prop.x).toBe(2);
+    expect(prop.y).toBe(2);
+    rerender(<Properties
+      properties={Object.assign({}, prop)}
+      onChange={handleChange}
+      symbols={new Map()}
+    />);
+
+    propertyId = container.querySelector('#id');
+    propertyParentId = container.querySelector('#parentId');
+    propertyX = container.querySelector('#x');
+    propertyY = container.querySelector('#y');
+    expect(propertyId).toBeDefined();
+    expect((propertyId as HTMLInputElement).value).toBe('stuff');
+    expect(propertyParentId).toBeDefined();
+    expect((propertyParentId as HTMLInputElement).value).toBe('parentId');
+    expect(propertyX).toBeDefined();
+    expect((propertyX as HTMLInputElement).value).toBe('2');
+    expect(propertyY).toBeDefined();
+    expect((propertyY as HTMLInputElement).value).toBe('2');
+  });
+});