notid/integreat
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Whole-form htmx + Alpine morph for transaction edit

Browse Source 
Re-render the entire #wizard-form on each field edit and swap with
hx-swap="morph" so the focused input keeps focus/caret/value while typing.

- Field-level routes return the full form and target #wizard-form
- Key state-owning wrappers (account rows, simple-mode wrapper, vendor
  typeahead) so server-driven value changes re-init across the morph
- Guard tippy/$refs access in typeahead against stale post-morph state
- Round-trip simple/advanced mode via step-params[mode]
- Add e2e/transaction-edit-morph.spec.ts covering focus/caret preservation,
  vendor->account population, and repeated vendor changes
- Seed a second vendor/account for test isolation

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Bryce
2026-06-01 07:40:30 -07:00
parent b6649a3d1d
commit cdb6bb6fe3
8 changed files with 681 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

387
e2e/transaction-edit-morph.spec.ts Normal file
View File

@@ -0,0 +1,387 @@
import { test, expect } from '@playwright/test';
// These tests cover the "render the whole form via an htmx + alpine morph swap"
// behaviour on the transaction edit page. The whole-form approach exists so that
// any edit can hit its own route yet re-render the entire form, while keeping the
// user's focus and caret position intact (which a plain innerHTML swap destroys).
// Collect any uncaught page errors or console errors so a morph that throws
// (e.g. a tooltip callback dereferencing a stale $refs) fails the test loudly.
function trackErrors(page: any): string[] {
const errors: string[] = [];
page.on('pageerror', (e: any) => errors.push('pageerror: ' + e.message));
page.on('console', (m: any) => {
if (m.type() === 'error') errors.push('console: ' + m.text());
});
return errors;
}
async function openManualAdvanced(page: any, transactionIndex = 0) {
await page.goto('/transaction2');
await page.waitForSelector('table tbody tr');
await page
.locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]')
.nth(transactionIndex)
.click();
await page.waitForSelector('#modal-holder[x-show="open"]', { state: 'visible' });
await page.waitForSelector('#wizardmodal');
await page.click('button:has-text("Manual")');
// First transaction has no accounts so it opens in "simple" mode. Switch to
// advanced mode (a whole-form morph swap) so the account grid is present.
const advancedLink = page.locator('a:has-text("Switch to advanced mode")');
if (await advancedLink.count()) {
await advancedLink.first().click();
await page.waitForSelector('#account-grid-body');
}
}
// Drives the vendor typeahead like a user: open the dropdown, inject a result
// (Solr is unavailable in tests), click it, and wait for the whole-form morph.
async function selectVendor(page: any, vendorId: number, label: string) {
const vendor = page
.locator('div[hx-post*="edit-vendor-changed"]')
.first()
.locator('div.relative[x-data]')
.first();
await vendor.locator('a[x-ref="input"]').click();
const search = page.locator('[data-tippy-root] input[x-model="search"]').first();
await search.waitFor({ state: 'visible' });
await search.fill('xx');
await vendor.evaluate((el: HTMLElement, opt: { id: number; label: string }) => {
(window as any).Alpine.$data(el).elements = [{ value: opt.id, label: opt.label }];
}, { id: vendorId, label });
const swap = page.waitForResponse(
(r: any) =>
r.url().includes('edit-vendor-changed') &&
r.request().method() === 'POST' &&
r.status() === 200
);
await page.locator('[data-tippy-root] a', { hasText: label }).first().click();
await swap;
await page.waitForTimeout(400);
}
// Removes every existing account row (each remove is its own whole-form morph),
// so a test starts from a known-empty state regardless of what earlier tests
// saved onto the shared transaction.
async function clearAccounts(page: any) {
// eslint-disable-next-line no-constant-condition
while (true) {
const removeButtons = page.locator('#account-grid-body .account-remove-action');
const count = await removeButtons.count();
if (count === 0) break;
await removeButtons.first().click();
await expect
.poll(async () => page.locator('#account-grid-body .account-remove-action').count())
.toBeLessThan(count);
}
}
test.describe.configure({ mode: 'serial' });
test.describe('Transaction Edit whole-form morph', () => {
test('morph swaps (toggle mode, add account) do not throw', async ({ page }) => {
const errors = trackErrors(page);
await openManualAdvanced(page, 0);
// Add an account row -- another whole-form morph swap.
await page
.locator('#account-grid-body')
.locator('button:has-text("New account"), a:has-text("New account")')
.first()
.click();
await expect
.poll(async () => page.locator('#account-grid-body tbody tr.account-row').count())
.toBeGreaterThan(0);
// The form must survive the morph intact.
await expect(page.locator('#wizard-form')).toHaveCount(1);
expect(errors, errors.join('\n')).toEqual([]);
});
test('keeps focus and typed value in the amount field across a morph', async ({ page }) => {
const errors = trackErrors(page);
await openManualAdvanced(page, 0);
// Ensure exactly one account row exists.
const rows = await page.locator('#account-grid-body tbody tr.account-row').count();
if (rows === 0) {
await page
.locator('#account-grid-body')
.locator('button:has-text("New account"), a:has-text("New account")')
.first()
.click();
await expect
.poll(async () => page.locator('#account-grid-body tbody tr.account-row').count())
.toBeGreaterThan(0);
}
const amount = page.locator('.account-amount-field').first();
await amount.waitFor();
// Type a clean value via the keyboard. Typing fires the field's htmx trigger
// (keyup), which posts to a per-field route and morphs the whole form back
// in. The amount field is type=number (no text caret), so we assert focus +
// node identity + value -- the guarantees morph gives that innerHTML can't.
await amount.click();
await amount.press('Control+a');
const amountSwap = page.waitForResponse(
(r: any) =>
r.url().includes('edit-form-changed') &&
r.request().method() === 'POST' &&
r.status() === 200
);
await amount.pressSequentially('150', { delay: 40 });
// Identify the live focused node (before the debounced morph lands) so we can
// prove the *same* node survives.
await page.evaluate(() => {
(window as any).__focusedAmount = document.activeElement;
});
await amountSwap;
await page.waitForTimeout(300);
const state = await page.evaluate(() => {
const active = document.activeElement as HTMLInputElement;
return {
sameNode: active === (window as any).__focusedAmount,
isAmountField: !!active && active.classList.contains('account-amount-field'),
value: active ? active.value : null,
};
});
// Focus must stay on the amount field after the morph...
expect(state.isAmountField).toBe(true);
// ...on the very same DOM node (this is what morph buys us over innerHTML)...
expect(state.sameNode).toBe(true);
// ...with the value the user typed left intact.
expect(state.value).toBe('150');
// The TOTAL must have recomputed server-side from the posted amount.
await expect(page.locator('.account-total-row #total')).toContainText('150');
expect(errors, errors.join('\n')).toEqual([]);
});
test('preserves caret position in the memo text field across a morph', async ({ page }) => {
const errors = trackErrors(page);
await page.goto('/transaction2');
await page.waitForSelector('table tbody tr');
await page.locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]').nth(0).click();
await page.waitForSelector('#wizardmodal');
const memo = page.locator('#edit-memo');
await memo.waitFor();
// Clear any seeded memo text, then type "hello" via the keyboard (fires the
// field's htmx keyup trigger) and let that first whole-form morph settle.
await memo.click();
await memo.press('Control+a');
const firstSwap = page.waitForResponse(
(r: any) =>
r.url().includes('edit-form-changed') &&
r.request().method() === 'POST' &&
r.status() === 200
);
await memo.pressSequentially('hello', { delay: 40 });
await firstSwap;
await page.waitForTimeout(300);
// Drop the caret in the middle (text inputs support selection).
await memo.evaluate((el: HTMLInputElement) => {
el.focus();
el.setSelectionRange(2, 2);
});
await page.evaluate(() => {
(window as any).__focusedMemo = document.activeElement;
});
// Insert a char at the caret -> "heXllo", caret moves to 3, fires the swap.
const memoSwap = page.waitForResponse(
(r: any) =>
r.url().includes('edit-form-changed') &&
r.request().method() === 'POST' &&
r.status() === 200
);
await memo.press('X');
await memoSwap;
await page.waitForTimeout(300);
const state = await page.evaluate(() => {
const active = document.activeElement as HTMLInputElement;
return {
sameNode: active === (window as any).__focusedMemo,
id: active ? active.id : null,
value: active ? active.value : null,
caret: active ? active.selectionStart : null,
};
});
expect(state.id).toBe('edit-memo');
expect(state.sameNode).toBe(true);
expect(state.value).toBe('heXllo');
expect(state.caret).toBe(3);
expect(errors, errors.join('\n')).toEqual([]);
});
test('choosing an account from the typeahead does not throw and persists', async ({ page }) => {
const errors = trackErrors(page);
await openManualAdvanced(page, 0);
// Start from a clean, empty account row so selecting the account actually
// changes accountId (and fires the change-gated whole-form morph).
await clearAccounts(page);
await page
.locator('#account-grid-body')
.locator('button:has-text("New account"), a:has-text("New account")')
.first()
.click();
await expect
.poll(async () => page.locator('#account-grid-body tbody tr.account-row').count())
.toBeGreaterThan(0);
const row = page.locator('#account-grid-body tbody tr.account-row').first();
const typeahead = row.locator('div.relative[x-data]').first();
// Open the dropdown (tippy renders the popper into [data-tippy-root]).
await typeahead.locator('a[x-ref="input"]').click();
const search = page.locator('[data-tippy-root] input[x-model="search"]').first();
await search.waitFor({ state: 'visible' });
// Account search is backed by Solr (unavailable in tests), so type under the
// 3-char threshold and inject a clickable result into the typeahead state --
// the click handler, tippy.hide(), Alpine reactivity and HTMX morph all run
// exactly as in production.
await search.fill('te');
const testInfo = await (await page.request.get('/test-info')).json();
const accountId: number = testInfo.accounts['test-account'];
await typeahead.evaluate((el: HTMLElement, id: number) => {
(window as any).Alpine.$data(el).elements = [{ value: id, label: 'Test Account' }];
}, accountId);
// Clicking the result runs `value = element; tippy.hide(); ...`. Before the
// fix this threw "tippy is null" because the cached tippy var was stale after
// an earlier morph.
const swap = page.waitForResponse(
(r: any) =>
r.url().includes('edit-form-changed') &&
r.request().method() === 'POST' &&
r.status() === 200
);
await page.locator('[data-tippy-root] a', { hasText: 'Test Account' }).first().click();
await swap;
await page.waitForTimeout(300);
// The chosen account must survive the whole-form morph.
const hidden = page
.locator('#account-grid-body tbody tr.account-row')
.first()
.locator('input[type="hidden"][name*="transaction-account/account"]')
.first();
await expect(hidden).toHaveValue(accountId.toString());
expect(errors, errors.join('\n')).toEqual([]);
});
test('selecting a vendor populates its default account across the morph', async ({ page }) => {
const errors = trackErrors(page);
// Open the modal in simple mode (transaction 0 has no accounts).
await page.goto('/transaction2');
await page.waitForSelector('table tbody tr');
await page.locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]').nth(0).click();
await page.waitForSelector('#wizardmodal');
await page.click('button:has-text("Manual")');
await page.waitForSelector('div[hx-post*="edit-vendor-changed"]');
const testInfo = await (await page.request.get('/test-info')).json();
const vendorId: number = testInfo.accounts.vendor;
const defaultAccountId: number = testInfo.accounts['test-account'];
// Drive the vendor typeahead like a user: open dropdown, inject a result
// (Solr is unavailable in tests), click it.
const vendor = page.locator('div[hx-post*="edit-vendor-changed"]').first().locator('div.relative[x-data]').first();
await vendor.locator('a[x-ref="input"]').click();
const search = page.locator('[data-tippy-root] input[x-model="search"]').first();
await search.waitFor({ state: 'visible' });
await search.fill('te');
await vendor.evaluate((el: HTMLElement, id: number) => {
(window as any).Alpine.$data(el).elements = [{ value: id, label: 'Test Vendor' }];
}, vendorId);
const swap = page.waitForResponse(
(r: any) =>
r.url().includes('edit-vendor-changed') &&
r.request().method() === 'POST' &&
r.status() === 200
);
await page.locator('[data-tippy-root] a', { hasText: 'Test Vendor' }).first().click();
await swap;
await page.waitForTimeout(400);
// The vendor's default account must now be reflected in the account field --
// this is the bug the `key` re-init fixes: a server-driven value change into an
// Alpine-stateful typeahead that morph would otherwise preserve as empty.
const accountHidden = page
.locator('input[type="hidden"][name*="transaction-account/account"]')
.first();
await expect(accountHidden).toHaveValue(defaultAccountId.toString());
// The displayed account label should resolve too.
await expect(page.locator('span[x-text="value.label"]', { hasText: 'Test Account' })).toBeVisible();
expect(errors, errors.join('\n')).toEqual([]);
});
test('changing the vendor a second time still updates it', async ({ page }) => {
const errors = trackErrors(page);
await page.goto('/transaction2');
await page.waitForSelector('table tbody tr');
await page.locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]').nth(0).click();
await page.waitForSelector('#wizardmodal');
await page.click('button:has-text("Manual")');
await page.waitForSelector('div[hx-post*="edit-vendor-changed"]');
const testInfo = await (await page.request.get('/test-info')).json();
const vendor1: number = testInfo.accounts.vendor;
const vendor2: number = testInfo.accounts.vendor2;
const account1: number = testInfo.accounts['test-account'];
const account2: number = testInfo.accounts['second-account'];
const vendorLabel = page
.locator('div[hx-post*="edit-vendor-changed"] span[x-text="value.label"]')
.first();
const accountHidden = page
.locator('input[type="hidden"][name*="transaction-account/account"]')
.first();
// First vendor.
await selectVendor(page, vendor1, 'Test Vendor');
await expect(vendorLabel).toHaveText('Test Vendor');
await expect(accountHidden).toHaveValue(account1.toString());
// Second vendor -- this is the regression: a morph-preserved typeahead lost its
// value watcher, so the second change fired no request at all.
await selectVendor(page, vendor2, 'Second Vendor');
await expect(vendorLabel).toHaveText('Second Vendor');
await expect(accountHidden).toHaveValue(account2.toString());
// And back again, to be sure it keeps working.
await selectVendor(page, vendor1, 'Test Vendor');
await expect(vendorLabel).toHaveText('Test Vendor');
await expect(accountHidden).toHaveValue(account1.toString());
expect(errors, errors.join('\n')).toEqual([]);
});
});

10
e2e/transaction-edit.spec.ts
View File

@@ -18,7 +18,15 @@ async function openEditModal(page: any, transactionIndex: number = 0) {
// The modal is now single-page (Edit Transaction). Click "Manual" tab to ensure
// the manual account coding form is active.
await page.click('button:has-text("Manual")');
// Transactions with 0-1 accounts open in "simple" mode, which has no account
// grid. Switch to "advanced" mode (a whole-form morph swap) so the grid the
// rest of these helpers manipulate is present.
const advancedLink = page.locator('a:has-text("Switch to advanced mode")');
if (await advancedLink.count()) {
await advancedLink.first().click();
}
// Wait for the manual form to appear
await page.waitForSelector('#account-grid-body');
}