8cd64e808f
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
86 lines
2.2 KiB
Markdown
86 lines
2.2 KiB
Markdown
# harb staking
|
|
|
|
This template should help get you started developing with Vue 3 in Vite.
|
|
|
|
## Recommended IDE Setup
|
|
|
|
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
|
|
|
## Type Support for `.vue` Imports in TS
|
|
|
|
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
|
|
|
## Customize configuration
|
|
|
|
See [Vite Configuration Reference](https://vite.dev/config/).
|
|
|
|
## Project Setup
|
|
|
|
```sh
|
|
npm install
|
|
```
|
|
|
|
### Compile and Hot-Reload for Development
|
|
|
|
```sh
|
|
npm run dev
|
|
```
|
|
|
|
### Type-Check, Compile and Minify for Production
|
|
|
|
```sh
|
|
npm run build
|
|
```
|
|
|
|
## Testing
|
|
|
|
### Test Helpers
|
|
|
|
The application exposes test helpers on `window.__testHelpers` in development mode to facilitate E2E testing.
|
|
|
|
#### Available Helpers
|
|
|
|
##### `fillStakeForm(params)`
|
|
|
|
Programmatically fills the staking form without requiring fragile UI selectors.
|
|
|
|
**Parameters:**
|
|
- `amount` (number): Amount of KRK tokens to stake (must be >= minimum stake)
|
|
- `taxRate` (number): Tax rate percentage (must be between 0 and 100)
|
|
|
|
**Example:**
|
|
```typescript
|
|
// In Playwright test
|
|
await page.evaluate(async () => {
|
|
await window.__testHelpers.fillStakeForm({
|
|
amount: 100,
|
|
taxRate: 5.0,
|
|
});
|
|
});
|
|
|
|
// Then click the stake button
|
|
const stakeButton = page.getByRole('button', { name: /Stake|Snatch and Stake/i });
|
|
await stakeButton.click();
|
|
```
|
|
|
|
**Validation:**
|
|
- Throws if amount is below minimum stake
|
|
- Throws if amount exceeds wallet balance
|
|
- Throws if tax rate is outside valid range (0-100)
|
|
|
|
**TypeScript Support:**
|
|
Type declarations are available in `env.d.ts`:
|
|
```typescript
|
|
interface Window {
|
|
__testHelpers?: {
|
|
fillStakeForm: (params: { amount: number; taxRate: number }) => Promise<void>;
|
|
};
|
|
}
|
|
```
|
|
|
|
**Security:**
|
|
Test helpers are only available when `import.meta.env.DEV === true` and are automatically stripped from production builds.
|
|
|
|
### E2E Tests
|
|
|
|
See `INTEGRATION_TEST_STATUS.md` in the repository root for complete testing documentation.
|