test(post-form): retarget suite to redesigned /post + add UX coverage (U7)
- test-form-config.sh: assert parent is NOT hardcoded (injected server-side), active_trip set in site.yaml, and the new fields incl. custom 'photos' type. - helpers.js: resolve active trip from site.active_trip (parent coupling gone); fillEditor() drives EasyMDE via window.postFormEditor; waitForPhotoUpload() waits on the new picker. - post.spec / validation.spec: content via the editor, filepond selectors -> the photo picker, P8 checks editor value, V3/V4 exercise the picker cap + fail-closed non-image. - post-form-ux.spec.js (new): AE3 disclosure, AE1 HEIC->JPEG, AE4 corrupt-HEIC fail-closed, R18 weather gating, R20 draft restore. - fixtures: real + corrupt .heic. - test-post.sh: resolve dailies dir from active_trip. Refs AE1-AE4, R18, R20, U7.
This commit is contained in:
@@ -0,0 +1,102 @@
|
||||
// @ts-check
|
||||
// Tests: post-form redesign UX — disclosure, HEIC conversion + failure,
|
||||
// weather-button gating, draft restore. Covers AE1, AE3, AE4 and R18/R20.
|
||||
const { test, expect } = require('@playwright/test');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const { fillEditor, waitForPhotoUpload, cleanupEntry, findEntry } = require('../helpers');
|
||||
|
||||
const TEST_HEIC = path.join(__dirname, '../../fixtures/test-photo.heic');
|
||||
const TEST_CORRUPT_HEIC = path.join(__dirname, '../../fixtures/test-corrupt.heic');
|
||||
const DRAFT_KEY = 'intotheeast:new-entry-draft';
|
||||
|
||||
const created = [];
|
||||
test.afterAll(() => { created.forEach(cleanupEntry); });
|
||||
|
||||
// ── AE3: advanced fields sit behind "More options" ────────────────────────────
|
||||
test('AE3: advanced fields are hidden until "More options" is expanded', async ({ page }) => {
|
||||
await page.goto('/post');
|
||||
const hero = page.locator('input[name="data[hero_image]"]');
|
||||
|
||||
await expect(page.locator('details.more-options')).toBeAttached();
|
||||
await expect(hero).toBeHidden(); // collapsed <details> hides content
|
||||
await page.locator('.more-options__summary').click();
|
||||
await expect(hero).toBeVisible();
|
||||
});
|
||||
|
||||
// ── AE1: HEIC → JPEG conversion, posted with a working thumbnail ───────────────
|
||||
test('AE1: a HEIC photo is converted to JPEG client-side and posted', async ({ page }) => {
|
||||
const tag = `heic-${Date.now()}`;
|
||||
await page.goto('/post');
|
||||
await page.fill('input[name="data[title]"]', `UI Test ${tag}`);
|
||||
await fillEditor(page, 'HEIC conversion test. Safe to delete.');
|
||||
|
||||
await page.locator('input.photo-picker__input').setInputFiles(TEST_HEIC);
|
||||
await waitForPhotoUpload(page, 1); // is-done == converted + uploaded
|
||||
await expect(page.locator('.photo-card.is-done .photo-card__thumb')).toBeVisible();
|
||||
|
||||
await page.locator('.btn-post').evaluate(el => el.click());
|
||||
await expect(page.locator('.notices')).toContainText('Entry posted successfully!', { timeout: 15_000 });
|
||||
created.push(tag);
|
||||
|
||||
const dir = findEntry(tag);
|
||||
expect(dir, 'Entry folder should exist on disk').toBeTruthy();
|
||||
const files = fs.readdirSync(dir);
|
||||
expect(files.some(f => /\.jpe?g$/i.test(f)), 'a JPEG should be posted').toBe(true);
|
||||
expect(files.some(f => /\.heic$/i.test(f)), 'the original HEIC must NOT be posted').toBe(false);
|
||||
});
|
||||
|
||||
// ── AE4: corrupt HEIC fails closed; Submit + other photos stay usable ─────────
|
||||
test('AE4: a corrupt HEIC is blocked (fail-closed) and never posted', async ({ page }) => {
|
||||
const tag = `heicfail-${Date.now()}`;
|
||||
await page.goto('/post');
|
||||
await page.fill('input[name="data[title]"]', `UI Test ${tag}`);
|
||||
await fillEditor(page, 'HEIC failure test. Safe to delete.');
|
||||
|
||||
await page.locator('input.photo-picker__input').setInputFiles(TEST_CORRUPT_HEIC);
|
||||
await expect(page.locator('.photo-card.is-error')).toBeVisible({ timeout: 15_000 });
|
||||
await expect(page.locator('.btn-post')).toBeEnabled(); // Submit still usable
|
||||
|
||||
await page.locator('.btn-post').evaluate(el => el.click());
|
||||
await expect(page.locator('.notices')).toContainText('Entry posted successfully!', { timeout: 15_000 });
|
||||
created.push(tag);
|
||||
|
||||
const dir = findEntry(tag);
|
||||
expect(dir).toBeTruthy();
|
||||
const files = fs.readdirSync(dir);
|
||||
expect(files.some(f => /\.heic$/i.test(f)), 'the corrupt HEIC must never be posted').toBe(false);
|
||||
});
|
||||
|
||||
// ── R18: Get Weather is gated on coordinates ──────────────────────────────────
|
||||
test('R18: Get Weather is disabled until Get Location provides coordinates', async ({ page, context }) => {
|
||||
await context.grantPermissions(['geolocation']);
|
||||
await context.setGeolocation({ latitude: 35.6812, longitude: 139.7671 });
|
||||
|
||||
await page.goto('/post');
|
||||
await expect(page.locator('#get-weather')).toBeDisabled();
|
||||
|
||||
await page.click('#get-location');
|
||||
await expect(page.locator('input[name="data[lat]"]')).toHaveValue(/35\.68/, { timeout: 5_000 });
|
||||
await expect(page.locator('#get-weather')).toBeEnabled();
|
||||
});
|
||||
|
||||
// ── R20: text draft survives a reload; photos need re-selecting ────────────────
|
||||
test('R20: in-progress text is restored after a reload, with a photos hint', async ({ page }) => {
|
||||
await page.goto('/post');
|
||||
await page.evaluate((k) => localStorage.removeItem(k), DRAFT_KEY);
|
||||
|
||||
const marker = `draft-${Date.now()}`;
|
||||
await page.fill('input[name="data[title]"]', marker);
|
||||
await fillEditor(page, `Draft body ${marker}`);
|
||||
// Nudge an input event so the draft is written, then let it flush.
|
||||
await page.locator('input[name="data[title]"]').press('End');
|
||||
await page.waitForTimeout(300);
|
||||
|
||||
await page.reload();
|
||||
|
||||
await expect(page.locator('input[name="data[title]"]')).toHaveValue(marker);
|
||||
expect(await page.evaluate(() => window.postFormEditor.value())).toContain(marker);
|
||||
await expect(page.locator('.photo-picker__reauth-hint')).toBeVisible();
|
||||
|
||||
await page.evaluate((k) => localStorage.removeItem(k), DRAFT_KEY);
|
||||
});
|
||||
+14
-12
@@ -4,7 +4,7 @@
|
||||
const { test, expect } = require('@playwright/test');
|
||||
const path = require('path');
|
||||
const fs = require('fs');
|
||||
const { waitForFilePondUpload, cleanupEntry, findEntry, readEntryMd, TRACKER_DIR, ACTIVE_TRIP_URL } = require('../helpers');
|
||||
const { fillEditor, waitForPhotoUpload, cleanupEntry, findEntry, readEntryMd, TRACKER_DIR, ACTIVE_TRIP_URL } = require('../helpers');
|
||||
|
||||
const TEST_PHOTO = path.join(__dirname, '../../fixtures/test-photo.jpg');
|
||||
|
||||
@@ -22,7 +22,7 @@ test('P1: post text-only entry → created on disk and visible in trip feed', as
|
||||
|
||||
await page.goto('/post');
|
||||
await page.fill('input[name="data[title]"]', title);
|
||||
await page.fill('textarea[name="data[content]"]', 'Text-only test entry. Safe to delete.');
|
||||
await fillEditor(page, 'Text-only test entry. Safe to delete.');
|
||||
await page.fill('input[name="data[location_city]"]', 'Testville');
|
||||
await page.fill('input[name="data[location_country]"]', 'Testland');
|
||||
await page.locator('.btn-post').evaluate(el => el.click());
|
||||
@@ -50,12 +50,12 @@ test.skip('P2: post entry with photo → photo saved in entry folder and visible
|
||||
|
||||
await page.goto('/post');
|
||||
await page.fill('input[name="data[title]"]', title);
|
||||
await page.fill('textarea[name="data[content]"]', 'Photo test entry. Safe to delete.');
|
||||
await fillEditor(page, 'Photo test entry. Safe to delete.');
|
||||
await page.fill('input[name="data[location_city]"]', 'Testville');
|
||||
await page.fill('input[name="data[location_country]"]', 'Testland');
|
||||
|
||||
await page.locator('input.filepond--browser').setInputFiles(TEST_PHOTO);
|
||||
await waitForFilePondUpload(page);
|
||||
await page.locator('input.photo-picker__input').setInputFiles(TEST_PHOTO);
|
||||
await waitForPhotoUpload(page);
|
||||
|
||||
await page.locator('.btn-post').evaluate(el => el.click());
|
||||
await page.waitForSelector('.form-messages, .notices', { timeout: 15_000 });
|
||||
@@ -81,7 +81,7 @@ test('P3: post entry with city/country → frontmatter contains location', async
|
||||
|
||||
await page.goto('/post');
|
||||
await page.fill('input[name="data[title]"]', title);
|
||||
await page.fill('textarea[name="data[content]"]', 'Location test. Safe to delete.');
|
||||
await fillEditor(page, 'Location test. Safe to delete.');
|
||||
await page.fill('input[name="data[location_city]"]', 'Kyoto');
|
||||
await page.fill('input[name="data[location_country]"]', 'Japan');
|
||||
await page.locator('.btn-post').evaluate(el => el.click());
|
||||
@@ -103,7 +103,7 @@ test('P4: post entry with lat/lng → coordinates saved in frontmatter', async (
|
||||
|
||||
await page.goto('/post');
|
||||
await page.fill('input[name="data[title]"]', title);
|
||||
await page.fill('textarea[name="data[content]"]', 'GPS test. Safe to delete.');
|
||||
await fillEditor(page, 'GPS test. Safe to delete.');
|
||||
// lat/lng fields are CSS-hidden (designed to be filled by the Get Location button);
|
||||
// set values directly via JS to simulate what the button would do.
|
||||
await page.evaluate(() => {
|
||||
@@ -142,7 +142,7 @@ test('P6: successful submit shows "Entry posted successfully!" message', async (
|
||||
const tag = `p6-${Date.now()}`;
|
||||
await page.goto('/post');
|
||||
await page.fill('input[name="data[title]"]', `UI Test ${tag}`);
|
||||
await page.fill('textarea[name="data[content]"]', 'P6 test. Safe to delete.');
|
||||
await fillEditor(page, 'P6 test. Safe to delete.');
|
||||
await page.locator('.btn-post').evaluate(el => el.click());
|
||||
await expect(page.locator('.form-messages, .notices')).toContainText(
|
||||
'Entry posted successfully!', { timeout: 15_000 }
|
||||
@@ -158,7 +158,7 @@ test('P7: submitted entry is saved with a date within 5 minutes of now', async (
|
||||
const tag = `p7-${Date.now()}`;
|
||||
await page.goto('/post');
|
||||
await page.fill('input[name="data[title]"]', `UI Test ${tag}`);
|
||||
await page.fill('textarea[name="data[content]"]', 'P7 date test. Safe to delete.');
|
||||
await fillEditor(page, 'P7 date test. Safe to delete.');
|
||||
await page.locator('.btn-post').evaluate(el => el.click());
|
||||
await expect(page.locator('.form-messages, .notices')).toContainText(
|
||||
'Entry posted successfully!', { timeout: 15_000 }
|
||||
@@ -184,13 +184,15 @@ test('P8: title and content fields are empty after a successful submit', async (
|
||||
const tag = `p8-${Date.now()}`;
|
||||
await page.goto('/post');
|
||||
await page.fill('input[name="data[title]"]', `UI Test ${tag}`);
|
||||
await page.fill('textarea[name="data[content]"]', 'P8 reset test. Safe to delete.');
|
||||
await fillEditor(page, 'P8 reset test. Safe to delete.');
|
||||
await page.locator('.btn-post').evaluate(el => el.click());
|
||||
await expect(page.locator('.form-messages, .notices')).toContainText(
|
||||
'Entry posted successfully!', { timeout: 15_000 }
|
||||
);
|
||||
// After reset, the form fields should be empty
|
||||
// After reset, the form fields should be empty. The content textarea is
|
||||
// hidden by EasyMDE, so check the editor value via the exposed instance.
|
||||
await expect(page.locator('input[name="data[title]"]')).toHaveValue('');
|
||||
await expect(page.locator('textarea[name="data[content]"]')).toHaveValue('');
|
||||
await page.waitForFunction(() => window.postFormEditor != null, { timeout: 10_000 });
|
||||
expect(await page.evaluate(() => window.postFormEditor.value())).toBe('');
|
||||
created.push(tag);
|
||||
});
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
// Tests: V1–V4 — form validation and input constraints
|
||||
const { test, expect } = require('@playwright/test');
|
||||
const path = require('path');
|
||||
const { fillEditor, waitForPhotoUpload } = require('../helpers');
|
||||
|
||||
const TEST_PHOTO = path.join(__dirname, '../../fixtures/test-photo.jpg');
|
||||
const TEST_NONIMAGE = path.join(__dirname, '../../fixtures/test-nonimage.txt');
|
||||
@@ -10,7 +11,7 @@ const TEST_NONIMAGE = path.join(__dirname, '../../fixtures/test-nonimage.txt');
|
||||
test('V1: submit without title shows a validation error or stays on /post', async ({ page }) => {
|
||||
await page.goto('/post');
|
||||
// Leave title empty, fill only content
|
||||
await page.fill('textarea[name="data[content]"]', 'Content without a title.');
|
||||
await fillEditor(page, 'Content without a title.');
|
||||
await page.locator('.btn-post').evaluate(el => el.click());
|
||||
|
||||
// Grav either shows an error message OR re-renders the form (stays on /post).
|
||||
@@ -24,7 +25,7 @@ test('V1: submit without title shows a validation error or stays on /post', asyn
|
||||
test('V2: submit without content shows a validation error or stays on /post', async ({ page }) => {
|
||||
await page.goto('/post');
|
||||
await page.fill('input[name="data[title]"]', 'V2 title no content');
|
||||
// Leave content (textarea) empty
|
||||
// Leave content (editor) empty
|
||||
await page.locator('.btn-post').evaluate(el => el.click());
|
||||
|
||||
await page.waitForTimeout(2_000);
|
||||
@@ -33,43 +34,31 @@ test('V2: submit without content shows a validation error or stays on /post', as
|
||||
});
|
||||
|
||||
// ── V3: Photo limit (max 4) ───────────────────────────────────────────────────
|
||||
test('V3: filepond rejects a 5th photo when limit is 4', async ({ page }) => {
|
||||
test('V3: photo picker caps attachments at 4', async ({ page }) => {
|
||||
await page.goto('/post');
|
||||
const input = page.locator('input.photo-picker__input');
|
||||
|
||||
// Upload 4 photos (all the same fixture — we just need 4 items)
|
||||
const fourPhotos = [TEST_PHOTO, TEST_PHOTO, TEST_PHOTO, TEST_PHOTO];
|
||||
await page.locator('input.filepond--browser').setInputFiles(fourPhotos);
|
||||
// Attach 4 photos (same fixture — we only need four items).
|
||||
await input.setInputFiles([TEST_PHOTO, TEST_PHOTO, TEST_PHOTO, TEST_PHOTO]);
|
||||
await waitForPhotoUpload(page, 4);
|
||||
|
||||
// Wait for all 4 items to appear
|
||||
await page.waitForFunction(() =>
|
||||
document.querySelectorAll('.filepond--item').length === 4,
|
||||
{ timeout: 10_000 }
|
||||
);
|
||||
|
||||
// Attempt a 5th — filepond should ignore it once the limit is reached
|
||||
await page.locator('input.filepond--browser').setInputFiles([TEST_PHOTO]);
|
||||
// A 5th is rejected once the limit is reached — no new card, and a hint shows.
|
||||
await input.setInputFiles([TEST_PHOTO]);
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
const itemCount = await page.locator('.filepond--item').count();
|
||||
expect(itemCount).toBe(4);
|
||||
await expect(page.locator('.photo-card')).toHaveCount(4);
|
||||
await expect(page.locator('.photo-picker__hint')).toContainText(/up to 4/i);
|
||||
});
|
||||
|
||||
// ── V4: Non-image file rejected ───────────────────────────────────────────────
|
||||
test('V4: filepond rejects non-image files', async ({ page }) => {
|
||||
// ── V4: Non-image file rejected (fail-closed) ─────────────────────────────────
|
||||
test('V4: a non-image upload fails closed and is not attached', async ({ page }) => {
|
||||
await page.goto('/post');
|
||||
|
||||
await page.locator('input.filepond--browser').setInputFiles(TEST_NONIMAGE);
|
||||
await page.waitForTimeout(1_000);
|
||||
// The picker accepts anything the OS dialog allows; the server's uploadFiles
|
||||
// accept-check (image/*) rejects a .txt, so the card ends in the error state
|
||||
// and never reaches "done" — the original is never posted.
|
||||
await page.locator('input.photo-picker__input').setInputFiles(TEST_NONIMAGE);
|
||||
|
||||
const items = page.locator('.filepond--item');
|
||||
const count = await items.count();
|
||||
|
||||
if (count > 0) {
|
||||
// If filepond added it, it must show an error state — not processing-complete
|
||||
const state = await items.first().getAttribute('data-filepond-item-state');
|
||||
expect(state).not.toBe('processing-complete');
|
||||
} else {
|
||||
// Silently rejected before adding — also a pass
|
||||
expect(count).toBe(0);
|
||||
}
|
||||
await expect(page.locator('.photo-card.is-error')).toBeVisible({ timeout: 15_000 });
|
||||
await expect(page.locator('.photo-card.is-done')).toHaveCount(0);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user