LPD-30312 Create test to assert selected node style consistency

modules/test/playwright/pages/object-web/ModelBuilderPage.ts

@@ -15,6 +15,7 @@ export class ModelBuilderPage {
 	readonly deleteObjectDefinitionOption: Locator;
 	readonly deleteObjectRelationshipButton: Locator;
 	readonly deleteTrashButton: Locator;
+	readonly diagramArea: Locator;
 	readonly editInPageViewOption: Locator;
 	readonly editObjectFolderDetailsButton: Locator;
 	readonly fitViewButton: Locator;
@@ -60,6 +61,7 @@ export class ModelBuilderPage {
 		this.deleteTrashButton = page
 			.getByRole('tabpanel')
 			.getByTitle('Delete');
+		this.diagramArea = page.locator('.react-flow');
 		this.editInPageViewOption = page.getByRole('menuitem', {
 			name: 'Edit in page view',
 		});
@@ -265,6 +267,18 @@ export class ModelBuilderPage {
 		await this.modalDeleteObjectRelationshipConfirmationButton.click();
 	}
 
+	async dragNodeThroughDiagram(
+		objectDefinitionLabel: string,
+		targetX: number,
+		targetY: number
+	) {
+		await this.objectDefinitionNodes
+			.getByText(objectDefinitionLabel, {exact: true})
+			.dragTo(this.diagramArea, {
+				targetPosition: {x: targetX, y: targetY},
+			});
+	}
+
 	async fillNewObjectFieldLabel(objectFieldLabel: string) {
 		await this.newObjectFieldLabel.fill(objectFieldLabel);
 	}

modules/test/playwright/tests/object-web/objectDefinitions.spec.ts

@@ -50,6 +50,57 @@ test.describe('Manage object definitions through Model Builder', () => {
 		page.setViewportSize({height: 1080, width: 1920});
 	});
 
+	test('assert presence of selected node style on click and its transition after dragging an unselected one', async ({
+		apiHelpers,
+		modelBuilderPage,
+	}) => {
+		const objectDefinition =
+			await apiHelpers.objectAdmin.postRandomObjectDefinition({
+				objectFolderExternalReferenceCode: 'default',
+				status: {code: 0},
+			});
+
+		const commerceOrderItemLabel = 'Commerce Order Item';
+
+		objectDefinitions.push(objectDefinition);
+
+		await modelBuilderPage.goto({objectFolderName: 'Default'});
+
+		await modelBuilderPage.toggleSidebarsButton.click();
+
+		await modelBuilderPage.fitViewButton.click();
+
+		await modelBuilderPage.objectDefinitionNodes
+			.filter({hasText: commerceOrderItemLabel})
+			.click();
+
+		await expect(
+			modelBuilderPage.objectDefinitionNodes.filter({
+				hasText: commerceOrderItemLabel,
+			})
+		).toHaveClass(/selected/);
+
+		await modelBuilderPage.dragNodeThroughDiagram(
+			objectDefinition.label['en_US'],
+			1400,
+			940
+		);
+
+		await modelBuilderPage.fitViewButton.click();
+
+		await expect(
+			modelBuilderPage.objectDefinitionNodes.filter({
+				hasText: commerceOrderItemLabel,
+			})
+		).not.toHaveClass(/selected/);
+
+		await expect(
+			modelBuilderPage.objectDefinitionNodes.filter({
+				hasText: objectDefinition.label['en_US'],
+			})
+		).toHaveClass(/selected/);
+	});
+
 	test('can create an object definition by model builder', async ({
 		modalAddObjectDefinitionPage,
 		modelBuilderPage,