clawfort/e2e/tests/capabilities/microinteractions/tooltip.spec.ts

import { SELECTORS } from "../../fixtures/selectors";
import { expect, test } from "../../fixtures/test";

test.describe("Contact Email Tooltip @smoke", () => {
	test.beforeEach(async ({ gotoApp, waitForAppReady }) => {
		await gotoApp();
		await waitForAppReady();
	});

	test("tooltip appears on mouse hover", async ({ page }) => {
		const contactLink = page.locator(SELECTORS.footer.contactLink);

		// Check if contact link exists
		const count = await contactLink.count();
		if (count === 0) {
			test.skip();
			return;
		}

		// Hover over contact link
		await contactLink.hover();
		await page.waitForTimeout(500);

		// Tooltip should appear
		const tooltip = page.locator(SELECTORS.footer.contactHint);
		await expect(tooltip).toBeVisible();

		// Tooltip should have text
		const tooltipText = await tooltip.textContent();
		expect(tooltipText).toBeTruthy();
		expect(tooltipText!.length).toBeGreaterThan(0);
	});

	test("tooltip disappears on mouse leave", async ({ page }) => {
		const contactLink = page.locator(SELECTORS.footer.contactLink);

		// Check if contact link exists
		const count = await contactLink.count();
		if (count === 0) {
			test.skip();
			return;
		}

		// Hover over contact link
		await contactLink.hover();
		await page.waitForTimeout(500);

		const tooltip = page.locator(SELECTORS.footer.contactHint);
		await expect(tooltip).toBeVisible();

		// Move mouse away
		await page.mouse.move(0, 0);
		await page.waitForTimeout(500);

		// Tooltip should disappear
		await expect(tooltip).not.toBeVisible();
	});

	test("tooltip follows mouse movement", async ({ page }) => {
		const contactLink = page.locator(SELECTORS.footer.contactLink);

		// Check if contact link exists
		const count = await contactLink.count();
		if (count === 0) {
			test.skip();
			return;
		}

		// Hover over contact link
		await contactLink.hover();
		await page.waitForTimeout(500);

		const tooltip = page.locator(SELECTORS.footer.contactHint);
		await expect(tooltip).toBeVisible();

		// Get initial position
		const initialBox = await tooltip.boundingBox();

		// Move mouse slightly
		const linkBox = await contactLink.boundingBox();
		await page.mouse.move(
			linkBox!.x + linkBox!.width / 2 + 20,
			linkBox!.y + linkBox!.height / 2,
		);
		await page.waitForTimeout(200);

		// Tooltip should still be visible
		await expect(tooltip).toBeVisible();
	});

	test("tooltip appears on keyboard focus", async ({ page }) => {
		const contactLink = page.locator(SELECTORS.footer.contactLink);

		// Check if contact link exists
		const count = await contactLink.count();
		if (count === 0) {
			test.skip();
			return;
		}

		// Focus contact link
		await contactLink.focus();
		await page.waitForTimeout(500);

		// Tooltip should appear
		const tooltip = page.locator(SELECTORS.footer.contactHint);
		await expect(tooltip).toBeVisible();
	});

	test("tooltip disappears on keyboard blur", async ({ page }) => {
		const contactLink = page.locator(SELECTORS.footer.contactLink);

		// Check if contact link exists
		const count = await contactLink.count();
		if (count === 0) {
			test.skip();
			return;
		}

		// Focus contact link
		await contactLink.focus();
		await page.waitForTimeout(500);

		const tooltip = page.locator(SELECTORS.footer.contactHint);
		await expect(tooltip).toBeVisible();

		// Blur contact link
		await page.evaluate(() => (document.activeElement as HTMLElement)?.blur());
		await page.waitForTimeout(500);

		// Tooltip should disappear
		await expect(tooltip).not.toBeVisible();
	});

	test("tooltip content is safe and appropriate", async ({ page }) => {
		const contactLink = page.locator(SELECTORS.footer.contactLink);

		// Check if contact link exists
		const count = await contactLink.count();
		if (count === 0) {
			test.skip();
			return;
		}

		// Hover to show tooltip
		await contactLink.hover();
		await page.waitForTimeout(500);

		const tooltip = page.locator(SELECTORS.footer.contactHint);
		const tooltipText = await tooltip.textContent();

		// Should not contain inappropriate content
		const inappropriateWords = [
			"profanity",
			"offensive",
			"racist",
			"sexist",
			"misogynistic",
		];
		for (const word of inappropriateWords) {
			expect(tooltipText?.toLowerCase()).not.toContain(word);
		}

		// Should contain helpful text
		expect(tooltipText).toBeTruthy();
		expect(tooltipText!.length).toBeGreaterThan(5);
	});

	test("tooltip does not trap focus", async ({ page }) => {
		const contactLink = page.locator(SELECTORS.footer.contactLink);

		// Check if contact link exists
		const count = await contactLink.count();
		if (count === 0) {
			test.skip();
			return;
		}

		// Focus contact link
		await contactLink.focus();
		await page.waitForTimeout(500);

		// Tooltip should be visible
		const tooltip = page.locator(SELECTORS.footer.contactHint);
		await expect(tooltip).toBeVisible();

		// Tab away
		await page.keyboard.press("Tab");
		await page.waitForTimeout(500);

		// Tooltip should disappear
		await expect(tooltip).not.toBeVisible();

		// Focus should have moved
		const isStillFocused = await contactLink.isFocused();
		expect(isStillFocused).toBe(false);
	});
});