mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 20:16:44 +00:00
df05d21fc2
## 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>
218 lines
5.8 KiB
TypeScript
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,
|
|
};
|
|
}
|