133 lines
4.7 KiB
JavaScript
133 lines
4.7 KiB
JavaScript
/**
|
|
* Group editing tests for Lightningbeam
|
|
* Tests that shapes can be edited inside groups with correct relative positioning
|
|
*/
|
|
|
|
import { describe, it, before } from 'mocha';
|
|
import { expect } from '@wdio/globals';
|
|
import { waitForAppReady } from '../helpers/app.js';
|
|
import {
|
|
drawRectangle,
|
|
selectMultipleShapes,
|
|
useKeyboardShortcut,
|
|
doubleClickCanvas,
|
|
clickCanvas
|
|
} from '../helpers/canvas.js';
|
|
import { assertShapeExists } from '../helpers/assertions.js';
|
|
|
|
describe('Group Editing', () => {
|
|
before(async () => {
|
|
await waitForAppReady();
|
|
});
|
|
|
|
describe('Entering and Editing Groups', () => {
|
|
it('should maintain shape positions when editing inside a group', async () => {
|
|
// Draw a rectangle
|
|
await drawRectangle(200, 200, 100, 100);
|
|
|
|
// Verify it exists at the expected location
|
|
await assertShapeExists(250, 250, 'Rectangle should exist at center before grouping');
|
|
|
|
// Select it (click on the center)
|
|
await clickCanvas(250, 250);
|
|
await browser.pause(200);
|
|
|
|
// Group it (even though it's just one shape)
|
|
await useKeyboardShortcut('g', true);
|
|
await browser.pause(300);
|
|
|
|
// The shape should still be visible at the same location
|
|
await assertShapeExists(250, 250, 'Rectangle should still exist at same position after grouping');
|
|
|
|
// Double-click on the group to enter editing mode
|
|
await doubleClickCanvas(250, 250);
|
|
|
|
// The shape should STILL be at the same position when editing the group
|
|
await assertShapeExists(250, 250, 'Rectangle should remain at same position when editing group');
|
|
});
|
|
|
|
it('should correctly position new shapes drawn inside a group', async () => {
|
|
// Draw a rectangle
|
|
await drawRectangle(100, 400, 80, 80);
|
|
|
|
// Select and group it
|
|
await clickCanvas(140, 440);
|
|
await browser.pause(200);
|
|
await useKeyboardShortcut('g', true);
|
|
await browser.pause(300);
|
|
|
|
// Double-click to enter group editing mode
|
|
await doubleClickCanvas(140, 440);
|
|
|
|
// Draw another rectangle inside the group at a specific location
|
|
await drawRectangle(200, 400, 80, 80);
|
|
|
|
// Verify the new shape is where we drew it
|
|
await assertShapeExists(240, 440, 'New shape should be at the coordinates where it was drawn');
|
|
|
|
// Verify the original shape still exists
|
|
await assertShapeExists(140, 440, 'Original shape should still exist');
|
|
});
|
|
|
|
it('should handle nested group editing with correct positioning', async () => {
|
|
// Create first group with two shapes
|
|
await drawRectangle(400, 100, 60, 60);
|
|
await drawRectangle(480, 100, 60, 60);
|
|
await selectMultipleShapes([
|
|
{ x: 430, y: 130 },
|
|
{ x: 510, y: 130 }
|
|
]);
|
|
await useKeyboardShortcut('g', true);
|
|
await browser.pause(300);
|
|
|
|
// Verify both shapes exist
|
|
await assertShapeExists(430, 130, 'First shape should exist');
|
|
await assertShapeExists(510, 130, 'Second shape should exist');
|
|
|
|
// Create another shape and group everything together
|
|
await drawRectangle(400, 180, 60, 60);
|
|
await selectMultipleShapes([
|
|
{ x: 470, y: 130 }, // Center of first group
|
|
{ x: 430, y: 210 } // Center of new shape
|
|
]);
|
|
await useKeyboardShortcut('g', true);
|
|
await browser.pause(300);
|
|
|
|
// Double-click to enter outer group
|
|
await doubleClickCanvas(470, 130);
|
|
|
|
// Double-click again to enter inner group
|
|
await doubleClickCanvas(470, 130);
|
|
|
|
// All shapes should still be at their original positions
|
|
await assertShapeExists(430, 130, 'First shape should maintain position in nested group');
|
|
await assertShapeExists(510, 130, 'Second shape should maintain position in nested group');
|
|
});
|
|
});
|
|
|
|
describe('Mouse Coordinate Transformation', () => {
|
|
it('should correctly translate mouse coordinates when drawing in groups', async () => {
|
|
// Draw and group a shape
|
|
await drawRectangle(300, 300, 50, 50);
|
|
await clickCanvas(325, 325);
|
|
await browser.pause(200);
|
|
await useKeyboardShortcut('g', true);
|
|
await browser.pause(300);
|
|
|
|
// Enter group
|
|
await doubleClickCanvas(325, 325);
|
|
|
|
// Draw shapes at precise coordinates to test mouse transformation
|
|
await drawRectangle(350, 300, 30, 30);
|
|
await drawRectangle(300, 350, 30, 30);
|
|
await drawRectangle(350, 350, 30, 30);
|
|
|
|
// Verify all shapes are at expected positions
|
|
await assertShapeExists(365, 315, 'Shape to the right should be at correct position');
|
|
await assertShapeExists(315, 365, 'Shape below should be at correct position');
|
|
await assertShapeExists(365, 365, 'Shape diagonal should be at correct position');
|
|
await assertShapeExists(325, 325, 'Original shape should still exist');
|
|
});
|
|
});
|
|
});
|