diff --git a/src/Components/Properties/Properties.test.tsx b/src/Components/Properties/Properties.test.tsx new file mode 100644 index 0000000..05949a0 --- /dev/null +++ b/src/Components/Properties/Properties.test.tsx @@ -0,0 +1,75 @@ +import { fireEvent, render, screen } from '@testing-library/react'; +import * as React from 'react'; +import { describe, it, vi } from 'vitest'; +import { Properties } from './Properties'; + +describe.concurrent('Properties', () => { + it('No properties', () => { + render( {}} + />); + + expect(screen.queryByText(/property-/i)).toBeNull(); + }); + + it('Some properties', () => { + const prop = { + id: 'stuff', + parentId: 'parentId', + x: 1, + y: 1 + }; + + const handleChange = vi.fn((key, value) => { + (prop as any)[key] = value; + }); + + const { container, rerender } = render(); + + let propertyId = container.querySelector('#property-id'); + let propertyParentId = container.querySelector('#property-parentId'); + let propertyX = container.querySelector('#property-x'); + let propertyY = container.querySelector('#property-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(4); + + expect(prop.id).toBe('stuffed'); + expect(prop.parentId).toBe('parentedId'); + expect(prop.x).toBe('2'); + expect(prop.y).toBe('2'); + rerender(); + + + propertyId = container.querySelector('#property-id'); + propertyParentId = container.querySelector('#property-parentId'); + propertyX = container.querySelector('#property-x'); + propertyY = container.querySelector('#property-y'); + expect(propertyId).toBeDefined(); + expect((propertyId as HTMLInputElement).value).toBe('stuffed'); + expect(propertyParentId).toBeDefined(); + expect((propertyParentId as HTMLInputElement).value).toBe('parentedId'); + expect(propertyX).toBeDefined(); + expect((propertyX as HTMLInputElement).value).toBe('2'); + expect(propertyY).toBeDefined(); + expect((propertyY as HTMLInputElement).value).toBe('2'); + }); +});