intotheeast-com/tests/ui/helpers.js

// @ts-check
const path = require('path');
const fs = require('fs');
const { execSync } = require('child_process');
const { expect } = require('@playwright/test');

// The shared photo fixture every create goes through (the post form gates submit
// on at least one uploaded photo).
const TEST_PHOTO = path.join(__dirname, '../fixtures/test-photo.jpg');

/**
 * Resolve the Grav user directory.
 *
 * Resolution order:
 *  1. GRAV_USER_DIR env var (set in .env or shell)
 *  2. Sibling `user/` directory — authoritative for this repo's layout, where
 *     docker-compose always bind-mounts `./user` relative to the checkout. This
 *     is correct for BOTH the main checkout and a git worktree (each worktree
 *     serves its own `./user`), so it must be preferred over docker inspect.
 *  3. `docker inspect intotheeast_grav` — last-resort fallback for running the
 *     specs detached from the served checkout. NOTE: from a worktree this points
 *     at the MAIN checkout's container (a different `user/`), so it must never
 *     win over the sibling dir above, or disk assertions look in the wrong tree.
 */
function resolveUserDir() {
    if (process.env.GRAV_USER_DIR) {
        return process.env.GRAV_USER_DIR;
    }
    const sibling = path.join(__dirname, '../../user');
    if (fs.existsSync(path.join(sibling, 'config/site.yaml'))) {
        return sibling;
    }
    try {
        const raw = execSync(
            "docker inspect intotheeast_grav --format '{{range .Mounts}}{{if eq .Destination \"/var/www/html/user\"}}{{.Source}}{{end}}{{end}}'",
            { encoding: 'utf-8', stdio: ['pipe', 'pipe', 'ignore'] }
        ).trim();
        if (raw) return raw;
    } catch (_) {
        // docker not available or container not running
    }
    return sibling;
}

/**
 * Resolve the active trip slug from site.yaml `active_trip`.
 *
 * The post form no longer hardcodes `pageconfig.parent` — the write target is
 * injected server-side from `site.active_trip` (see the cache-on-save plugin).
 * `active_trip` is a full route ("/trips/italy-2026-demo") or a bare slug; both
 * reduce to the trip slug here.
 */
function resolveActiveTripSlug(userDir) {
    const sitePath = path.join(userDir, 'config/site.yaml');
    if (!fs.existsSync(sitePath)) return null;
    const content = fs.readFileSync(sitePath, 'utf-8');
    const m = content.match(/^active_trip:\s*['"]?(\S+?)['"]?\s*$/m);
    if (!m) return null;
    return m[1]
        .replace(/^\/?trips\//, '') // strip a leading /trips/
        .replace(/^\//, '')
        .replace(/\/.*$/, '');       // keep only the slug segment
}

/**
 * Resolve the active dailies directory on disk from the active trip slug.
 */
function resolveDailiesDir(userDir) {
    const tripSlug = resolveActiveTripSlug(userDir);
    if (!tripSlug) return null;

    const tripsBase = path.join(userDir, 'pages/01.trips');
    if (!fs.existsSync(tripsBase)) return null;

    const tripFolder = fs.readdirSync(tripsBase).find(f => f === tripSlug || f.endsWith('.' + tripSlug) || f.includes(tripSlug));
    if (!tripFolder) return null;

    const dailiesBase = path.join(tripsBase, tripFolder);
    const dailiesFolder = fs.readdirSync(dailiesBase).find(f => f === 'dailies' || f === '01.dailies' || f.endsWith('.dailies'));
    if (!dailiesFolder) return null;

    return path.join(dailiesBase, dailiesFolder);
}

const USER_DIR = resolveUserDir();
const TRACKER_DIR = resolveDailiesDir(USER_DIR) || path.join(USER_DIR, 'pages/01.trips/italy-2026-demo/01.dailies');

/**
 * The Grav route to the active trip page, derived from site.yaml `active_trip`.
 * Posted entries surface in this page's journal feed.
 * Falls back to '/trips/italy-2026-demo'.
 */
function resolveActiveTripUrl() {
    const slug = resolveActiveTripSlug(USER_DIR);
    return slug ? '/trips/' + slug : '/trips/italy-2026-demo';
}

const ACTIVE_TRIP_URL = resolveActiveTripUrl();

/**
 * Type content into the EasyMDE editor. The underlying <textarea> is hidden by
 * EasyMDE, so we set the value through the instance the bundle exposes on
 * window.postFormEditor (which also syncs the textarea for submission).
 */
async function fillEditor(page, text) {
    await page.waitForFunction(() => window.postFormEditor != null, { timeout: 10_000 });
    await page.evaluate((t) => window.postFormEditor.value(t), text);
}

/**
 * Wait for photos to finish uploading. post-form.js converts HEIC->JPEG and
 * hands files to FilePond via pond.addFile(); FilePond then uploads each, and a
 * finished item reaches data-filepond-item-state="processing-complete".
 */
async function waitForPhotoUpload(page, count = 1) {
    await page.waitForFunction(
        (n) => {
            const items = document.querySelectorAll('.filepond--item[data-filepond-item-state]');
            return [...items].filter(el => el.getAttribute('data-filepond-item-state') === 'processing-complete').length >= n;
        },
        count,
        { timeout: 40_000 }
    );
}

/**
 * Submit the post form with minimal required fields and return the unique title marker.
 * Caller is responsible for cleanup via cleanupEntry().
 */
async function postEntry(page, { titleTag, content = 'Automated test. Safe to delete.', city = '', country = '' } = {}) {
    const title = `UI Test ${titleTag} ${Date.now()}`;
    await page.goto('/post');
    await page.fill('input[name="data[title]"]', title);
    await fillEditor(page, content);
    if (city) await page.fill('input[name="data[location_city]"]', city);
    if (country) await page.fill('input[name="data[location_country]"]', country);
    await page.locator('.btn-post').evaluate(el => el.click());
    await page.waitForSelector('.form-messages, .notices', { timeout: 15_000 });
    return titleTag;
}

/**
 * Create a fresh journal entry through the /post create form, with a photo
 * attached so the submit gate is satisfied. Shared by the specs that need a
 * disposable feed card to act on (delete-flow, edit-mode, anon-view draft).
 *
 * Pass the spec's `created` array so the tag is registered for cleanup BEFORE
 * the (slow, 15s) success-toast assertion — a create that lands on disk but
 * whose toast assertion times out would otherwise leak an entry the afterAll
 * hook never sees. `publish:false` flips the Published toggle off to make a
 * draft (the toggle is a visually-hidden radio pair behind "More options", so
 * set state + fire `change` rather than fighting the visibility gate).
 */
async function createPhotoEntry(page, tag, { content, publish = true, created } = {}) {
    await page.goto('/post');
    await page.fill('input[name="data[title]"]', `UI Test ${tag}`);
    await fillEditor(page, content || `Fixture for ${tag}. Safe to delete.`);
    await page.locator('input.filepond--browser').setInputFiles(TEST_PHOTO);
    await waitForPhotoUpload(page);
    if (!publish) {
        await page.evaluate(() => {
            const off = document.querySelector('input[name="data[published]"][value="0"]');
            off.checked = true;
            off.dispatchEvent(new Event('change', { bubbles: true }));
        });
    }
    await page.locator('.btn-post').evaluate(el => el.click());
    if (created) created.push(tag);
    await expect(page.locator('.form-messages, .notices')).toContainText(
        'Entry posted successfully!', { timeout: 15_000 });
}

/**
 * Find a tracker entry folder by a unique slug fragment, then delete it.
 */
function cleanupEntry(slugFragment) {
    if (!slugFragment) return;
    if (!fs.existsSync(TRACKER_DIR)) return;
    const entries = fs.readdirSync(TRACKER_DIR);
    const match = entries.find(e => e.includes(slugFragment));
    if (match) {
        fs.rmSync(path.join(TRACKER_DIR, match), { recursive: true });
    }
}

/**
 * Find the first entry folder matching a slug fragment and return its full path.
 */
function findEntry(slugFragment) {
    if (!fs.existsSync(TRACKER_DIR)) return null;
    const entries = fs.readdirSync(TRACKER_DIR);
    const match = entries.find(e => e.includes(slugFragment));
    return match ? path.join(TRACKER_DIR, match) : null;
}

/**
 * Read the entry .md file (entry.md or entry.en.md) from an entry folder.
 */
function readEntryMd(entryDir) {
    const name = ['entry.md', 'entry.en.md'].find(f => fs.existsSync(path.join(entryDir, f)));
    if (!name) return null;
    return fs.readFileSync(path.join(entryDir, name), 'utf-8');
}

module.exports = { fillEditor, waitForPhotoUpload, postEntry, createPhotoEntry, cleanupEntry, findEntry, readEntryMd, TEST_PHOTO, TRACKER_DIR, ACTIVE_TRIP_URL };