feat: Add test helper for E2E staking flow (#66)

Implements window.__testHelpers.fillStakeForm() to enable stable E2E testing
of the staking form without fragile UI selectors.

## Changes

- Add window.__testHelpers interface (dev mode only)
- Implement fillStakeForm() in StakeHolder.vue with input validation
- Add TypeScript declarations in env.d.ts
- Update E2E test to use helper and verify full user journey
- Create INTEGRATION_TEST_STATUS.md documenting test coverage
- Document helper in web-app/README.md

## Test Coverage

Playwright E2E now validates complete flow:
- Mint ETH via cheats page UI
- Swap KRK via cheats page UI
- Stake KRK via stake page UI (helper + click)
- Verify position via GraphQL

Both Playwright and verify-swap.sh tests now work independently.

resolves #62

Co-authored-by: johba <johba@harb.eth>
Reviewed-on: https://codeberg.org/johba/harb/pulls/66
This commit is contained in:
johba 2025-10-07 15:06:38 +02:00
parent b1f40374cd
commit 8cd64e808f
5 changed files with 272 additions and 2 deletions

View file

@ -145,8 +145,56 @@ test.describe('Acquire & Stake', () => {
expect(balance).toBeGreaterThan(0n);
console.log('[TEST] ✅ Swap successful! KRK balance > 0');
console.log('[TEST] ✅ E2E test complete: Swap verified through UI');
console.log('[TEST] Note: Staking is verified separately via verify-swap.sh script');
// Now test staking via UI
console.log('[TEST] Navigating to stake page...');
await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`);
await page.waitForTimeout(2_000);
// Wait for the stake form to be initialized
console.log('[TEST] Waiting for stake form to load...');
await page.waitForSelector('text=Token Amount', { timeout: 15_000 });
// Use the test helper to fill the stake form
console.log('[TEST] Filling stake form via test helper...');
await page.evaluate(async () => {
if (!window.__testHelpers) {
throw new Error('Test helpers not available');
}
await window.__testHelpers.fillStakeForm({
amount: 100, // Stake 100 KRK
taxRate: 5.0, // 5% tax rate
});
});
console.log('[TEST] Clicking stake button...');
const stakeButton = page.getByRole('button', { name: /Stake|Snatch and Stake/i });
await expect(stakeButton).toBeVisible({ timeout: 5_000 });
await stakeButton.click();
// Wait for transaction to process
console.log('[TEST] Waiting for stake transaction...');
try {
await page.getByRole('button', { name: /Sign Transaction|Waiting/i }).waitFor({ state: 'visible', timeout: 5_000 });
console.log('[TEST] Transaction initiated, waiting for completion...');
await page.getByRole('button', { name: /Stake|Snatch and Stake/i }).waitFor({ state: 'visible', timeout: 60_000 });
console.log('[TEST] Stake transaction completed!');
} catch (e) {
console.log('[TEST] Transaction may have completed instantly');
}
await page.waitForTimeout(3_000);
// Verify staking position via GraphQL
console.log('[TEST] Verifying staking position via GraphQL...');
const positions = await fetchPositions(request, ACCOUNT_ADDRESS);
console.log(`[TEST] Found ${positions.length} position(s)`);
expect(positions.length).toBeGreaterThan(0);
const activePositions = positions.filter(p => p.status === 'OPEN');
expect(activePositions.length).toBeGreaterThan(0);
console.log(`[TEST] ✅ Staking successful! Created ${activePositions.length} active position(s)`);
console.log('[TEST] ✅ E2E test complete: Full journey verified (Mint → Swap → Stake)');
} finally {
await context.close();
}