97 lines
4.0 KiB
JavaScript
97 lines
4.0 KiB
JavaScript
|
const { test, expect } = require('@playwright/test');
|
||
|
|
const { waitForEditor, addBlockById, clearCanvas } = require('./helpers');
|
||
|
|
|
||
|
|
test.describe('Anchor Point Visibility', () => {
|
||
|
|
test.beforeEach(async ({ page }) => {
|
||
|
|
await waitForEditor(page);
|
||
|
|
});
|
||
|
|
|
||
|
|
test('should show anchors in editor mode', async ({ page }) => {
|
||
|
|
// Add an anchor point via the API
|
||
|
|
const result = await addBlockById(page, 'anchor-point');
|
||
|
|
expect(result.success).toBe(true);
|
||
|
|
await page.waitForTimeout(500);
|
||
|
|
|
||
|
|
// Check that anchor is visible in editor canvas
|
||
|
|
const canvas = page.frameLocator('#gjs iframe').first();
|
||
|
|
const anchor = canvas.locator('[data-anchor="true"]').first();
|
||
|
|
await expect(anchor).toBeVisible({ timeout: 5000 });
|
||
|
|
|
||
|
|
// Verify it has the editor-anchor class
|
||
|
|
const anchorClass = await anchor.getAttribute('class');
|
||
|
|
expect(anchorClass).toContain('editor-anchor');
|
||
|
|
|
||
|
|
// Verify it has visual styling (border exists via computed style)
|
||
|
|
const borderStyle = await anchor.evaluate(el => window.getComputedStyle(el).borderStyle);
|
||
|
|
expect(borderStyle).toBeTruthy();
|
||
|
|
});
|
||
|
|
|
||
|
|
test('should hide anchors in preview mode', async ({ page, context }) => {
|
||
|
|
// Add an anchor point via API
|
||
|
|
const result = await addBlockById(page, 'anchor-point');
|
||
|
|
expect(result.success).toBe(true);
|
||
|
|
await page.waitForTimeout(500);
|
||
|
|
|
||
|
|
// Wait for auto-save to persist changes
|
||
|
|
await page.waitForTimeout(2000);
|
||
|
|
|
||
|
|
// Open preview in new page
|
||
|
|
const [previewPage] = await Promise.all([
|
||
|
|
context.waitForEvent('page'),
|
||
|
|
page.locator('#btn-preview').click()
|
||
|
|
]);
|
||
|
|
|
||
|
|
await previewPage.waitForLoadState('domcontentloaded');
|
||
|
|
await previewPage.waitForTimeout(1000);
|
||
|
|
|
||
|
|
// Check that anchor exists in DOM but is hidden
|
||
|
|
const anchor = previewPage.locator('[data-anchor="true"]').first();
|
||
|
|
if (await anchor.count() > 0) {
|
||
|
|
await expect(anchor).toBeHidden();
|
||
|
|
}
|
||
|
|
// If anchor was stripped entirely, that's also valid
|
||
|
|
});
|
||
|
|
|
||
|
|
test('should remove anchors from exported HTML', async ({ page }) => {
|
||
|
|
// Add an anchor point via API
|
||
|
|
const result = await addBlockById(page, 'anchor-point');
|
||
|
|
expect(result.success).toBe(true);
|
||
|
|
await page.waitForTimeout(500);
|
||
|
|
|
||
|
|
// Verify the export process strips anchors
|
||
|
|
const exportedHtml = await page.evaluate(() => {
|
||
|
|
const editor = window.editor;
|
||
|
|
let html = editor.getHtml();
|
||
|
|
// The export process strips anchors via regex (same as generatePageHtml)
|
||
|
|
html = html.replace(/<div[^>]*data-anchor="true"[^>]*>[\s\S]*?<\/div>/g, '');
|
||
|
|
html = html.replace(/<div[^>]*class="editor-anchor"[^>]*>[\s\S]*?<\/div>/g, '');
|
||
|
|
return html;
|
||
|
|
});
|
||
|
|
|
||
|
|
// Verify no anchor elements remain in cleaned HTML
|
||
|
|
expect(exportedHtml).not.toMatch(/data-anchor="true"/);
|
||
|
|
expect(exportedHtml).not.toMatch(/class="editor-anchor"/);
|
||
|
|
});
|
||
|
|
|
||
|
|
test('anchor should have visual indicator with ID in editor', async ({ page }) => {
|
||
|
|
// Add an anchor point via API
|
||
|
|
const result = await addBlockById(page, 'anchor-point');
|
||
|
|
expect(result.success).toBe(true);
|
||
|
|
await page.waitForTimeout(500);
|
||
|
|
|
||
|
|
// Select the anchor
|
||
|
|
const canvas = page.frameLocator('#gjs iframe').first();
|
||
|
|
const anchor = canvas.locator('[data-anchor="true"]').first();
|
||
|
|
await expect(anchor).toBeVisible({ timeout: 5000 });
|
||
|
|
await anchor.click();
|
||
|
|
|
||
|
|
// Verify the anchor has the icon span (not ::before pseudo-element)
|
||
|
|
const anchorIcon = canvas.locator('[data-anchor="true"] .anchor-icon').first();
|
||
|
|
await expect(anchorIcon).toBeVisible();
|
||
|
|
|
||
|
|
// Verify anchor has an input for the name
|
||
|
|
const anchorInput = canvas.locator('[data-anchor="true"] .anchor-name-input').first();
|
||
|
|
await expect(anchorInput).toBeVisible();
|
||
|
|
});
|
||
|
|
});
|