Compare commits
No commits in common. "2d048df3fe47dd645d5c96d3a9431990307313e0" and "a73757d8492defdc0cac9f028ef0ad7679b9c5b4" have entirely different histories.
2d048df3fe
...
a73757d849
2 changed files with 2 additions and 300 deletions
60
src/App.tsx
60
src/App.tsx
|
|
@ -100,39 +100,8 @@ export class App extends React.Component<IAppProps> {
|
||||||
historyCurrentStep: 0,
|
historyCurrentStep: 0,
|
||||||
isLoaded: true
|
isLoaded: true
|
||||||
});
|
});
|
||||||
}, (error) => {
|
}, (error) => { throw new Error(error); }
|
||||||
// TODO: Implement an alert component
|
);
|
||||||
console.warn('[NewEditor] Could not fetch resource from API. Returning default.', error);
|
|
||||||
const MainContainer = new ContainerModel(
|
|
||||||
null,
|
|
||||||
{
|
|
||||||
id: 'main',
|
|
||||||
parentId: 'null',
|
|
||||||
x: 0,
|
|
||||||
y: 0,
|
|
||||||
width: DEFAULT_CONFIG.MainContainer.Width,
|
|
||||||
height: DEFAULT_CONFIG.MainContainer.Height,
|
|
||||||
fillOpacity: DEFAULT_CONFIG.MainContainer.Style.fillOpacity,
|
|
||||||
stroke: DEFAULT_CONFIG.MainContainer.Style.stroke,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
// Save the configuration and the new MainContainer
|
|
||||||
// and default the selected container to it
|
|
||||||
this.setState({
|
|
||||||
configuration: DEFAULT_CONFIG,
|
|
||||||
history:
|
|
||||||
[
|
|
||||||
{
|
|
||||||
MainContainer,
|
|
||||||
SelectedContainer: MainContainer,
|
|
||||||
TypeCounters: {}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
historyCurrentStep: 0,
|
|
||||||
isLoaded: true
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public LoadEditor(files: FileList | null): void {
|
public LoadEditor(files: FileList | null): void {
|
||||||
|
|
@ -213,28 +182,3 @@ export async function fetchConfiguration(): Promise<Configuration> {
|
||||||
xhr.send();
|
xhr.send();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const DEFAULT_CONFIG: Configuration = {
|
|
||||||
AvailableContainers: [
|
|
||||||
{
|
|
||||||
Type: 'Container',
|
|
||||||
Width: 75,
|
|
||||||
Height: 100,
|
|
||||||
Style: {
|
|
||||||
fillOpacity: 0,
|
|
||||||
stroke: 'green'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
AvailableSymbols: [],
|
|
||||||
MainContainer: {
|
|
||||||
Type: 'Container',
|
|
||||||
Width: 2000,
|
|
||||||
Height: 100,
|
|
||||||
Style: {
|
|
||||||
fillOpacity: 0,
|
|
||||||
stroke: 'black'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,242 +0,0 @@
|
||||||
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());
|
|
||||||
});
|
|
||||||
});
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue