Siklos
f268011315
All checks were successful
continuous-integration/drone/push Build is passing
- Displayed text - Enable Shortcuts - Hide text - Disable Dimension - Depth dimension Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/37
94 lines
3.3 KiB
TypeScript
94 lines
3.3 KiB
TypeScript
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 IProperties from '../../Interfaces/IProperties';
|
|
import { Properties } from './Properties';
|
|
|
|
describe.concurrent('Properties', () => {
|
|
it('No properties', () => {
|
|
render(<Properties
|
|
properties={undefined}
|
|
onChange={() => {}}
|
|
onSubmit={() => {}}
|
|
/>);
|
|
|
|
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: IProperties = {
|
|
id: 'stuff',
|
|
parentId: 'parentId',
|
|
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}
|
|
onSubmit={() => {}}
|
|
/>);
|
|
|
|
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}
|
|
onSubmit={() => {}}
|
|
/>);
|
|
|
|
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');
|
|
});
|
|
});
|