diff --git a/apps/web/src/core/providers/canvas-schema/canvas-schema.provider.spec.tsx b/apps/web/src/core/providers/canvas-schema/canvas-schema.provider.spec.tsx new file mode 100644 index 00000000..ed03dd44 --- /dev/null +++ b/apps/web/src/core/providers/canvas-schema/canvas-schema.provider.spec.tsx @@ -0,0 +1,77 @@ +import { act, renderHook } from '@testing-library/react'; +import { + CanvasSchemaProvider, + useCanvasSchemaContext, +} from './canvas-schema.provider'; +import { + createDefaultDatabaseSchemaVm, + TableVm, +} from './canvas-schema-vlatest.model'; + +const table: TableVm = { + id: 'table-1', + tableName: 'Users', + x: 100, + y: 200, + fields: [{ id: 'field-1', name: '_id', type: 'objectId', PK: true }], +}; + +const renderWithCopiedTable = () => { + const hook = renderHook(() => useCanvasSchemaContext(), { + wrapper: CanvasSchemaProvider, + }); + + act(() => { + hook.result.current.addTable(table); + hook.result.current.doSelectElement(table.id); + }); + act(() => hook.result.current.copySelectedTable()); + + return hook; +}; + +describe('CanvasSchemaProvider New Page clipboard', () => { + it('clears the copied table and prevents pasting into a new page', () => { + const { result } = renderWithCopiedTable(); + expect(result.current.hasClipboardContent).toBe(true); + + act(() => result.current.createEmptySchema()); + + expect(result.current.hasClipboardContent).toBe(false); + expect(result.current.canvasSchema).toEqual( + createDefaultDatabaseSchemaVm() + ); + + act(() => result.current.pasteTable()); + + expect(result.current.canvasSchema).toEqual( + createDefaultDatabaseSchemaVm() + ); + }); + + it('allows copying on the new page with the initial paste offset', () => { + const { result } = renderWithCopiedTable(); + act(() => result.current.pasteTable()); + act(() => result.current.pasteTable()); + act(() => result.current.createEmptySchema()); + + const newTable = { ...table, id: 'table-2', tableName: 'Orders' }; + act(() => { + result.current.addTable(newTable); + result.current.doSelectElement(newTable.id); + }); + act(() => result.current.copySelectedTable()); + act(() => result.current.pasteTable()); + + expect(result.current.hasClipboardContent).toBe(true); + expect(result.current.canvasSchema.tables).toHaveLength(2); + const pastedTable = result.current.canvasSchema.tables[1]; + expect(pastedTable).toMatchObject({ + tableName: 'Orders', + x: newTable.x + 50, + y: newTable.y + 50, + }); + expect(pastedTable.id).not.toBe(newTable.id); + expect(pastedTable.fields[0].id).not.toBe(newTable.fields[0].id); + }); +}); diff --git a/apps/web/src/core/providers/canvas-schema/canvas-schema.provider.tsx b/apps/web/src/core/providers/canvas-schema/canvas-schema.provider.tsx index badce685..c40756bd 100644 --- a/apps/web/src/core/providers/canvas-schema/canvas-schema.provider.tsx +++ b/apps/web/src/core/providers/canvas-schema/canvas-schema.provider.tsx @@ -55,6 +55,7 @@ export const CanvasSchemaProvider: React.FC = props => { const createEmptySchema = () => { setSchema(createDefaultDatabaseSchemaVm()); + clearClipboard(); }; const updateFullTable = (table: TableVm) => { @@ -304,6 +305,11 @@ export const CanvasSchemaProvider: React.FC = props => { } }; + const clearClipboard = () => { + setClipboardTable(null); + setPasteOffset({ x: 0, y: 0 }); + }; + return (