Files
OpenFrontIO/tests/client/clan/ClanModalTestUtils.ts
T
Ryan df05d21fc2 Clan System Part 2 - UI (#3625)
## Description:

Continuation from #3276 

Adds the complete client-side clan UI as a Lit web component
(`<clan-modal>`), a typed API client with Zod-validated responses,
shared response schemas, and a reusable `<confirm-dialog>` component.


### New: `ClanModal.ts`

| View | What it does |
|------|-------------|
| **My Clans** | Lists joined clans + pending join requests (built from
`/users/@me`, no extra fetches) |
| **Browse** | Search by tag (min 3 chars), paginated results,
configurable per-page (10/25/50) |
| **Clan Detail** | Stats, paginated + searchable member list, role
badges, join/leave/request actions |
| **Manage** | Edit name (max 35 chars) + description, toggle
open/invite-only, disband |
| **Transfer** | Leadership transfer with member selector + confirmation
|
| **Requests** | Approve/deny join requests (leader/officer) |
| **Bans** | View and unban (leader/officer) |
| **My Requests** | View and withdraw outgoing requests |

### New: `ConfirmDialog.ts`

Reusable `<confirm-dialog>` Lit component — replaces native
`confirm()`/`prompt()` which are blocked or broken on mobile and
CrazyGames iframes. Supports danger/warning variants and an optional
textarea (used for ban reasons). Fires `confirm`/`cancel` events.

### New: `ClanApi.ts`

Typed API client covering all clan endpoints. Every response is
Zod-validated. Auth header is always last in the spread (can't be
overridden by callers). Unknown server error messages always fall back
to a generic client-side string — never displayed verbatim.

### New: `ClanApiSchemas.ts` (in `src/core/`)

Shared Zod schemas for clan API responses with max-length constraints on
`name` (35) and `description` (200). Lives in `core/` so it can be
consumed by both client code and the leaderboard table.

### Modified: `ApiSchemas.ts`

- Added `clans` and `clanRequests` arrays to `UserMeResponseSchema`
- Moved clan leaderboard schemas out to `ClanApiSchemas.ts`
- Renamed `LeaderboardClanTagSchema` → `RequiredClanTagSchema`

### Modified: `Api.ts`

- Added `invalidateUserMe()` to bust the cached `/users/me` response
after mutations
- Removed `fetchClanLeaderboard` (moved to `ClanApi.ts`)

### Tests

- `ClanModal.test.ts` — rendering, view navigation, user actions
- `ClanApiQueries.test.ts` — fetch functions, error handling, pagination
- `ClanApiMutations.test.ts` — join, leave, kick, ban, promote,
transfer, etc.
- `ClanApiBans.test.ts` — ban/unban calls and error paths
- `ClanApiSchemas.test.ts` — Zod schema validation edge cases
- `LeaderboardModal.test.ts` — updated imports

## Notable design decisions

- **Not-logged-in state** — shows "Sign in to join clans" instead of
false "no clans" empty state
- **Rate limit feedback** — reads `Retry-After` header and surfaces wait
time to the user

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

w.o.n

---------

Co-authored-by: evanpelle <evanpelle@gmail.com>
2026-04-30 21:27:35 -06:00

218 lines
5.8 KiB
TypeScript

import { vi } from "vitest";
import type { ClanInfo } from "../../../src/client/ClanApi";
import type { ClanModal } from "../../../src/client/ClanModal";
// ─── Mock factories ─────────────────────────────────────────────────────────
// Each factory returns a fresh object of vi.fn()s. Test files pass these to
// vi.mock() so Vitest invokes them when the mocked module is first imported.
// The factory pattern keeps the mock surface DRY across test files while
// preserving per-file module isolation.
export function clanApiMockFactory() {
return {
fetchClanDetail: vi.fn(async () => ({
name: "Test Clan",
tag: "TST",
description: "A test clan",
isOpen: true,
createdAt: "2024-01-01T00:00:00Z",
memberCount: 5,
})),
fetchClanMembers: vi.fn(async () => ({
results: [
{
role: "leader",
joinedAt: "2024-01-01T00:00:00Z",
publicId: "test-player",
},
],
total: 1,
page: 1,
limit: 10,
pendingRequests: 0,
})),
fetchClanStats: vi.fn(async () => ({
clanTag: "TST",
games: 10,
wins: 7,
losses: 3,
stats: {
total: { wins: 7, losses: 3 },
ffa: { wins: 3, losses: 2 },
team: { wins: 2, losses: 1 },
hvn: { wins: 1, losses: 0 },
ranked: { wins: 1, losses: 0 },
"1v1": { wins: 1, losses: 0 },
},
teamTypeWL: {},
teamCountWL: {},
})),
fetchClans: vi.fn(async () => ({
results: [],
total: 0,
page: 1,
limit: 20,
})),
joinClan: vi.fn(),
leaveClan: vi.fn(),
updateClan: vi.fn(),
disbandClan: vi.fn(),
kickMember: vi.fn(),
promoteMember: vi.fn(),
demoteMember: vi.fn(),
transferLeadership: vi.fn(),
fetchClanRequests: vi.fn(async () => ({
results: [],
total: 0,
page: 1,
limit: 20,
})),
approveClanRequest: vi.fn(async () => true),
denyClanRequest: vi.fn(),
withdrawClanRequest: vi.fn(),
fetchClanLeaderboard: vi.fn(),
banClanMember: vi.fn(async () => true),
unbanClanMember: vi.fn(async () => true),
fetchClanBans: vi.fn(async () => ({
results: [],
total: 0,
page: 1,
limit: 20,
})),
};
}
export function apiMockFactory() {
return {
getUserMe: vi.fn(async () => ({
player: {
publicId: "test-player",
clans: [
{
tag: "TST",
name: "Test Clan",
role: "leader",
joinedAt: "2024-01-01T00:00:00Z",
memberCount: 5,
},
],
clanRequests: [],
achievements: { singleplayerMap: [] },
},
user: { email: "test@test.com" },
})),
invalidateUserMe: vi.fn(),
};
}
export function utilsMockFactory() {
return {
translateText: vi.fn((key: string) => key),
showToast: vi.fn(),
};
}
export function authMockFactory() {
return {
getAuthHeader: vi.fn(async () => "Bearer test-token"),
userAuth: vi.fn(async () => ({ jwt: "test-token", claims: {} })),
};
}
export function configLoaderMockFactory() {
return {
getRuntimeClientServerConfig: vi.fn(() => ({})),
};
}
export function crazyGamesSdkMockFactory() {
return {
crazyGamesSDK: { isAvailable: false },
};
}
export async function virtualizerMockFactory() {
const { html } = await import("lit");
return {
virtualize: vi.fn(() => html``),
};
}
export function stubLocalStorage() {
vi.stubGlobal("localStorage", {
getItem: vi.fn(() => null),
setItem: vi.fn(),
removeItem: vi.fn(),
clear: vi.fn(),
});
}
// ─── Test helpers ───────────────────────────────────────────────────────────
/**
* Drain pending microtasks and Lit's update scheduler.
* Replaces bare `await new Promise(r => setTimeout(r, 0))` which only drains
* a single microtask tick and can miss batched Lit updates.
*/
export async function flushAsync(
...els: (Element | null | undefined)[]
): Promise<void> {
// Two ticks to drain chained microtasks (e.g. async handler → state update → re-render).
await new Promise((r) => setTimeout(r, 0));
await new Promise((r) => setTimeout(r, 0));
for (const el of els) {
if (el && "updateComplete" in el) {
await (el as HTMLElement & { updateComplete: Promise<boolean> })
.updateComplete;
}
}
}
/** Force-set a Lit @state property and trigger re-render. */
export function setState<K extends keyof ClanModal>(
modal: ClanModal,
key: K,
value: ClanModal[K],
) {
(modal as unknown as Record<string, unknown>)[key] = value;
}
/** Force-set a property on any element (sub-components etc.). */
export function setElState(el: Element, key: string, value: unknown) {
(el as unknown as Record<string, unknown>)[key] = value;
}
/** Get a property from any element. */
export function getElState<T = unknown>(el: Element, key: string): T {
return (el as unknown as Record<string, unknown>)[key] as T;
}
/**
* Wait for a sub-component to mount and finish its initial async load.
* Call after setting ClanModal state that causes the sub-component to render.
*/
export async function waitForSubComponent(
modal: ClanModal,
selector: string,
): Promise<Element> {
await flushAsync(modal);
const el = modal.querySelector(selector)!;
if (el && "updateComplete" in el) {
await (el as HTMLElement & { updateComplete: Promise<boolean> })
.updateComplete;
}
return el;
}
export function makeClan(overrides: Partial<ClanInfo> = {}): ClanInfo {
return {
name: "Test Clan",
tag: "TST",
description: "A test clan",
isOpen: true,
createdAt: "2024-01-01T00:00:00Z",
memberCount: 5,
...overrides,
};
}