rose-ash/lib/host/playwright/relate-picker.spec.js

// Browser check for the relate picker (lib/host/blog.sx). Runs against an
// ephemeral host server seeded with a host post + 25 candidates by
// run-picker-check.sh, which copies this spec into the Playwright env and sets
// SX_TEST_URL. Exercises the login redirect, the JS-driven candidate load,
// debounced filter, infinite scroll, and click-to-relate.
const { test, expect } = require('playwright/test');

const USER = process.env.SX_ADMIN_USER || 'admin';
const PASS = process.env.SX_ADMIN_PASSWORD || 'letmein';
const HOST = 'picker-host';        // the post whose edit page we drive
const LIMIT = 20;                  // host/blog--picker-limit
// the Related picker box (the edit page now has one picker per kind)
const REL = '.relate-picker[data-kind="related"]';
const RELF = `${REL} .rp-filter`;
const RELR = `${REL} .rp-results`;

// Navigate to a guarded path; the host redirects to /login?next=…, so fill the
// form and we should land back on the original path (exercises the auth flow).
async function loginTo(page, path) {
  await page.goto(path);
  await page.waitForURL(/\/login/);
  await page.fill('input[name="username"]', USER);
  await page.fill('input[name="password"]', PASS);
  await page.click('button[type="submit"]');
  await page.waitForURL((u) => !u.pathname.startsWith('/login'));
}

test.describe('relate picker', () => {
  test('edit page has Related + Tags pickers and an is-a-tag toggle', async ({ page }) => {
    await loginTo(page, `/${HOST}/edit`);
    await expect(page).toHaveURL(new RegExp(`/${HOST}/edit`));
    await expect(page.locator(RELF)).toBeVisible();                                  // Related picker
    await expect(page.locator('.relate-picker[data-kind="tagged"] .rp-filter')).toBeVisible(); // Tags picker
    await expect(page.getByRole('button', { name: 'Make this a tag' })).toBeVisible(); // toggle
  });

  test('picker loads a page of candidates then loads more on scroll', async ({ page }) => {
    await loginTo(page, `/${HOST}/edit`);
    const rows = page.locator(`${RELR} li`);
    // initial JS load fills exactly one page
    await expect.poll(() => rows.count(), { timeout: 8000 }).toBe(LIMIT);
    // scroll the results box to the bottom -> infinite scroll fetches the rest
    await page.locator(RELR).evaluate((el) => el.scrollTo(0, el.scrollHeight));
    await expect.poll(() => rows.count(), { timeout: 8000 }).toBeGreaterThan(LIMIT);
  });

  test('typing in the filter narrows the candidates', async ({ page }) => {
    await loginTo(page, `/${HOST}/edit`);
    await expect.poll(() => page.locator(`${RELR} li`).count(), { timeout: 8000 }).toBeGreaterThan(0);
    await page.fill(RELF, 'Item 13');
    await expect.poll(() => page.locator(`${RELR} li`).count(), { timeout: 8000 }).toBe(1);
    await expect(page.locator(RELR)).toContainText('Picker Item 13');
  });

  test('clicking a candidate relates it (and it shows on the post page)', async ({ page }) => {
    await loginTo(page, `/${HOST}/edit`);
    await page.fill(RELF, 'Item 07');
    await expect.poll(() => page.locator(`${RELR} li`).count(), { timeout: 8000 }).toBe(1);
    await page.locator(`${RELR} button`).first().click();
    // form POST -> 303 back to the edit page; the related list now links the slug
    await expect(page).toHaveURL(new RegExp(`/${HOST}/edit`));
    await expect(page.locator('a[href="/picker-item-07/"]')).toHaveCount(1);
    // and the public post page shows the Related posts block with the title
    await page.goto(`/${HOST}/`);
    await expect(page.getByRole('heading', { name: 'Related posts' })).toBeVisible();
    await expect(page.locator('body')).toContainText('Picker Item 07');
  });
});