n8n/packages/testing/playwright/pages/components/StickyComponent.ts

import type { Locator, Page } from '@playwright/test';

import { BasePage } from '../BasePage';

/**
 * Sticky note component for canvas interactions.
 * Used within CanvasPage as `n8n.canvas.sticky.*`
 *
 * @example
 * // Access via canvas page
 * await n8n.canvas.sticky.addSticky();
 * await expect(n8n.canvas.sticky.getStickies()).toHaveCount(1);
 */
export class StickyComponent extends BasePage {
	constructor(page: Page) {
		super(page);
	}

	getAddButton(): Locator {
		return this.page.getByTestId('add-sticky-button');
	}

	getStickies(): Locator {
		return this.page.getByTestId('sticky');
	}

	getStickyByContent(content: string): Locator {
		return this.getStickies().filter({ hasText: content });
	}

	async getStickyBoundingBox(
		content: string,
	): Promise<{ x: number; y: number; width: number; height: number }> {
		const box = await this.getStickyByContent(content).boundingBox();
		if (!box) throw new Error(`Sticky with content "${content}" not found or not visible`);
		return box;
	}

	async addSticky(): Promise<void> {
		await this.getAddButton().click();
	}

	/**
	 * Add a sticky from the context menu, targets top left corner of canvas, so could fail if it's covered
	 * @param canvasPane - The canvas pane locator
	 */
	async addFromContextMenu(canvasPane: Locator): Promise<void> {
		await canvasPane.click({
			button: 'right',
			position: { x: 10, y: 10 },
		});
		await this.page.getByText('Add sticky note').click();
	}

	getDefaultStickyGuideLink(): Locator {
		return this.getStickies().first().getByRole('link', { name: 'Guide' });
	}

	/**
	 * Open the color picker for a sticky via its right-click context menu.
	 */
	async openColorPickerFromContextMenu(sticky: Locator): Promise<void> {
		await sticky.click({ button: 'right' });
		await this.page.getByTestId('context-menu-item-change_color').click();
	}

	getColorOptions(): Locator {
		return this.page.getByTestId('color');
	}
}