Files
OpenFrontIO/tests/radialMenuElements.spec.ts
T
Hauke12345 dcf5d1b103 Fading handshake (#2474)
## Description:
Add dynamic alliance icon with time-based fill and extension request
indicator

- Implement bottom-up green fill on alliance icon proportional to
remaining time
- Use AllianceIconFaded.svg as base layer with green overlay clipped
from top
- Add 20-82.40% clip range to account for icon vertical offset 

## 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


<img width="1132" height="631" alt="Screenshot 2025-11-18 205205"
src="https://github.com/user-attachments/assets/4af71ddc-f847-4460-9046-167275efc773"
/>
<img width="1387" height="792" alt="Screenshot 2025-11-18 205532"
src="https://github.com/user-attachments/assets/9dd0e018-323f-4de1-bae8-2633c09fe867"
/>

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

---------

Co-authored-by: Evan <evanpelle@gmail.com>
2025-11-19 12:32:01 -08:00

104 lines
2.8 KiB
TypeScript

// Mock BuildMenu to avoid importing lit and other ESM-heavy deps in this unit test
jest.mock(
"../src/client/graphics/layers/BuildMenu",
() => ({
BuildMenu: class {},
flattenedBuildTable: [],
}),
{ virtual: true },
);
// Mock Utils to avoid touching DOM (document) during tests
jest.mock("../src/client/Utils", () => ({
translateText: (k: string) => k,
getSvgAspectRatio: async () => 1,
}));
import {
COLORS,
rootMenuElement,
type MenuElementParams,
} from "../src/client/graphics/layers/RadialMenuElements";
// Minimal stubs to satisfy types used in rootMenuElement.subMenu and allyBreak actions
const makePlayer = (id: string) =>
({
id: () => id,
isAlliedWith: (other: any) =>
other && typeof other.id === "function" && other.id() !== id
? true
: true,
}) as unknown as import("../src/core/game/GameView").PlayerView;
const makeParams = (opts?: Partial<MenuElementParams>): MenuElementParams => {
const myPlayer = (opts?.myPlayer as any) ?? makePlayer("p1");
const selected = (opts?.selected as any) ?? makePlayer("p2");
return {
myPlayer,
selected,
tile: {} as any,
playerActions: {
canAttack: true,
interaction: {
canBreakAlliance: true,
canSendAllianceRequest: false,
canEmbargo: false,
},
} as any,
game: {
inSpawnPhase: () => false,
owner: () => ({ isPlayer: () => false }),
} as any,
buildMenu: {
canBuildOrUpgrade: () => false,
cost: () => 0,
count: () => 0,
sendBuildOrUpgrade: () => {},
} as any,
emojiTable: {} as any,
playerActionHandler: {
handleBreakAlliance: jest.fn(),
handleEmbargo: jest.fn(),
handleDonateGold: jest.fn(),
handleDonateTroops: jest.fn(),
handleTargetPlayer: jest.fn(),
} as any,
playerPanel: {
show: jest.fn(),
} as any,
chatIntegration: {
createQuickChatMenu: jest.fn(() => []),
} as any,
eventBus: {} as any,
closeMenu: jest.fn(),
};
};
const findAllyBreak = (items: any[]) =>
items.find((i) => i && i.id === "ally_break");
describe("RadialMenuElements ally break", () => {
test("shows break option with correct color when allied", () => {
const params = makeParams();
const items = rootMenuElement.subMenu!(params);
const ally = findAllyBreak(items)!;
expect(ally).toBeTruthy();
expect(ally.name).toBe("break");
expect(ally.color).toBe(COLORS.breakAlly);
});
test("action calls handleBreakAlliance and closes menu", () => {
const params = makeParams();
const items = rootMenuElement.subMenu!(params);
const ally = findAllyBreak(items)!;
ally.action!(params);
expect(params.playerActionHandler.handleBreakAlliance).toHaveBeenCalledWith(
params.myPlayer,
params.selected,
);
expect(params.closeMenu).toHaveBeenCalled();
});
});