Files
OpenFrontIO/tests/client/clan/ClanApiSchemas.test.ts
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

237 lines
6.3 KiB
TypeScript

import { describe, expect, it } from "vitest";
import {
ClanBanSchema,
ClanInfoSchema,
ClanJoinRequestSchema,
ClanMemberSchema,
ClanStatsSchema,
} from "../../../src/core/ClanApiSchemas";
describe("ClanInfoSchema", () => {
const base = {
name: "Test Clan",
tag: "TEST",
description: "A clan",
isOpen: true,
};
it("accepts valid data with ISO datetime createdAt", () => {
const result = ClanInfoSchema.safeParse({
...base,
createdAt: "2024-01-15T12:00:00.000Z",
memberCount: 5,
});
expect(result.success).toBe(true);
});
it("rejects non-ISO strings for createdAt", () => {
const result = ClanInfoSchema.safeParse({
...base,
createdAt: "January 15, 2024",
});
expect(result.success).toBe(false);
});
it("accepts data without optional createdAt", () => {
const result = ClanInfoSchema.safeParse(base);
expect(result.success).toBe(true);
});
it("accepts data without optional memberCount", () => {
const result = ClanInfoSchema.safeParse({
...base,
createdAt: "2024-01-15T12:00:00.000Z",
});
expect(result.success).toBe(true);
});
it("accepts data with neither createdAt nor memberCount", () => {
const result = ClanInfoSchema.safeParse(base);
expect(result.success).toBe(true);
if (result.success) {
expect(result.data.createdAt).toBeUndefined();
expect(result.data.memberCount).toBeUndefined();
}
});
});
describe("ClanMemberSchema", () => {
it("accepts a valid member with ISO datetime joinedAt", () => {
const result = ClanMemberSchema.safeParse({
role: "member",
joinedAt: "2024-03-01T09:30:00.000Z",
publicId: "abc123",
});
expect(result.success).toBe(true);
});
it("rejects a plain string for joinedAt", () => {
const result = ClanMemberSchema.safeParse({
role: "member",
joinedAt: "last Tuesday",
publicId: "abc123",
});
expect(result.success).toBe(false);
});
it("rejects null publicId", () => {
const result = ClanMemberSchema.safeParse({
role: "leader",
joinedAt: "2024-03-01T09:30:00.000Z",
publicId: null,
});
expect(result.success).toBe(false);
});
it("accepts stats with total/ffa/team/ranked/1v1 win-loss breakdown", () => {
const result = ClanMemberSchema.safeParse({
role: "member",
joinedAt: "2024-03-01T09:30:00.000Z",
publicId: "abc123",
stats: {
total: { wins: 8, losses: 8 },
ffa: { wins: 2, losses: 4 },
team: { wins: 5, losses: 1 },
hvn: { wins: 0, losses: 0 },
ranked: { wins: 1, losses: 3 },
"1v1": { wins: 1, losses: 3 },
},
});
expect(result.success).toBe(true);
});
it("treats stats as optional for backwards compatibility", () => {
const result = ClanMemberSchema.safeParse({
role: "member",
joinedAt: "2024-03-01T09:30:00.000Z",
publicId: "abc123",
});
expect(result.success).toBe(true);
if (result.success) {
expect(result.data.stats).toBeUndefined();
}
});
it("rejects stats missing a bucket", () => {
const result = ClanMemberSchema.safeParse({
role: "member",
joinedAt: "2024-03-01T09:30:00.000Z",
publicId: "abc123",
stats: {
ffa: { wins: 1, losses: 1 },
team: { wins: 1, losses: 1 },
},
});
expect(result.success).toBe(false);
});
});
describe("ClanJoinRequestSchema", () => {
it("accepts a valid join request with ISO datetime createdAt", () => {
const result = ClanJoinRequestSchema.safeParse({
publicId: "player-xyz",
createdAt: "2024-06-10T08:00:00.000Z",
});
expect(result.success).toBe(true);
});
it("rejects a plain string for createdAt", () => {
const result = ClanJoinRequestSchema.safeParse({
publicId: "player-xyz",
createdAt: "2024-06-10",
});
expect(result.success).toBe(false);
});
});
describe("ClanStatsSchema", () => {
const validStats = {
clanTag: "ABcd1",
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: { ffa: { wl: [7, 3] } },
teamCountWL: { "2": { wl: [4, 1] } },
};
it("accepts a valid clan tag (2-5 alphanumeric chars)", () => {
for (const tag of ["AB", "abc12", "XYZAB"]) {
const result = ClanStatsSchema.safeParse({ ...validStats, clanTag: tag });
expect(result.success, `tag "${tag}" should be valid`).toBe(true);
}
});
it("rejects tags that are too short", () => {
const result = ClanStatsSchema.safeParse({ ...validStats, clanTag: "A" });
expect(result.success).toBe(false);
});
it("rejects tags that are too long", () => {
const result = ClanStatsSchema.safeParse({
...validStats,
clanTag: "TOOLNG",
});
expect(result.success).toBe(false);
});
it("rejects tags with non-alphanumeric characters", () => {
const result = ClanStatsSchema.safeParse({
...validStats,
clanTag: "AB-CD",
});
expect(result.success).toBe(false);
});
});
describe("ClanBanSchema", () => {
const validBan = {
publicId: "player-1",
bannedBy: "officer-1",
reason: "spamming",
createdAt: "2024-06-01T00:00:00.000Z",
};
it("accepts a valid ban with reason", () => {
const result = ClanBanSchema.safeParse(validBan);
expect(result.success).toBe(true);
});
it("accepts a ban with null reason", () => {
const result = ClanBanSchema.safeParse({ ...validBan, reason: null });
expect(result.success).toBe(true);
if (result.success) {
expect(result.data.reason).toBeNull();
}
});
it("rejects a ban with missing reason field", () => {
const result = ClanBanSchema.safeParse({
publicId: validBan.publicId,
bannedBy: validBan.bannedBy,
createdAt: validBan.createdAt,
});
expect(result.success).toBe(false);
});
it("rejects a non-ISO string for createdAt", () => {
const result = ClanBanSchema.safeParse({
...validBan,
createdAt: "June 1 2024",
});
expect(result.success).toBe(false);
});
it("rejects null bannedBy", () => {
const result = ClanBanSchema.safeParse({ ...validBan, bannedBy: null });
expect(result.success).toBe(false);
});
});