391 lines
16 KiB
JavaScript
391 lines
16 KiB
JavaScript
import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
|
||
import { afterEach, expect, test, vi } from "vitest";
|
||
import { LuckyGiftConfigDialog } from "./LuckyGiftConfigDialog.jsx";
|
||
|
||
afterEach(() => {
|
||
vi.unstubAllGlobals();
|
||
});
|
||
|
||
test("keeps every dynamic_v3 control reachable while locking rule-time pool injection", () => {
|
||
renderDialog(dynamicConfig());
|
||
|
||
const dialog = screen.getByRole("dialog");
|
||
expect(within(dialog).getByRole("navigation", { name: "全局参数分区" })).toBeInTheDocument();
|
||
["规则", "资金", "水位", "大奖", "限额"].forEach((label) => {
|
||
expect(within(dialog).getByRole("button", { name: label })).toBeInTheDocument();
|
||
});
|
||
|
||
expect(within(dialog).getByRole("switch", { name: "发布状态" })).toBeChecked();
|
||
expect(within(dialog).getByLabelText(/初始奖池金币/)).toHaveValue(0);
|
||
expect(within(dialog).getByLabelText(/初始奖池金币/)).toBeDisabled();
|
||
[
|
||
"低水位金币",
|
||
"高水位金币",
|
||
"充值加权窗口 (ms)",
|
||
"独立大奖倍率",
|
||
"全局大奖 RTP 上限 (%)",
|
||
"用户日累计消费触发门槛（金币）",
|
||
"单次返奖上限",
|
||
"主播每日上限",
|
||
].forEach((label) =>
|
||
expect(within(dialog).getByLabelText((accessibleName) => accessibleName.startsWith(label))).toBeInTheDocument(),
|
||
);
|
||
|
||
expect(within(dialog).getAllByRole("tab")).toHaveLength(3);
|
||
expect(within(dialog).getByRole("columnheader", { name: "倍率" })).toBeInTheDocument();
|
||
expect(within(dialog).getByRole("columnheader", { name: "普通中奖机会 %" })).toBeInTheDocument();
|
||
expect(within(dialog).getByRole("heading", { name: "独立大奖路径" })).toBeInTheDocument();
|
||
expect(within(dialog).getByText("4. 未成功才走普通开奖")).toBeInTheDocument();
|
||
expect(within(dialog).getByLabelText("新手阶段第 1 档倍率")).toBeInTheDocument();
|
||
expect(within(dialog).getByLabelText("新手阶段第 2 档概率 %")).toHaveAttribute("readonly");
|
||
expect(within(dialog).getByRole("button", { name: "删除新手阶段第 1 档" })).toBeInTheDocument();
|
||
expect(within(dialog).getByLabelText("新手阶段派生充值范围")).toHaveTextContent("7 日充值 < 0 或 30 日充值 < 1");
|
||
expect(
|
||
within(dialog).getByText("任一未达到即为新手；7 日与 30 日均达到门槛（含等于）后进入普通。"),
|
||
).toBeInTheDocument();
|
||
|
||
fireEvent.click(within(dialog).getByRole("tab", { name: /普通/ }));
|
||
expect(within(dialog).getByLabelText("7 日最低充值（金币）")).toHaveValue(0);
|
||
expect(within(dialog).getByLabelText("30 日最低充值（金币）")).toHaveValue(1);
|
||
});
|
||
|
||
test("section navigation handles reduced motion and falls back after switching from dynamic_v3 to fixed_v2", async () => {
|
||
vi.stubGlobal(
|
||
"matchMedia",
|
||
vi.fn().mockReturnValue({
|
||
addEventListener: vi.fn(),
|
||
matches: true,
|
||
media: "(prefers-reduced-motion: reduce)",
|
||
removeEventListener: vi.fn(),
|
||
}),
|
||
);
|
||
renderDialog(dynamicConfig());
|
||
|
||
const dialog = screen.getByRole("dialog");
|
||
const sectionList = dialog.querySelector(".ops-config-section-list");
|
||
const identitySection = dialog.querySelector('[data-config-section="identity"]');
|
||
const waterSection = dialog.querySelector('[data-config-section="water"]');
|
||
const scrollTo = vi.fn();
|
||
Object.defineProperty(sectionList, "clientHeight", { configurable: true, value: 480 });
|
||
Object.defineProperty(sectionList, "scrollHeight", { configurable: true, value: 1_400 });
|
||
Object.defineProperty(sectionList, "scrollTo", { configurable: true, value: scrollTo });
|
||
Object.defineProperty(sectionList, "getBoundingClientRect", {
|
||
configurable: true,
|
||
value: () => ({ top: 200 }),
|
||
});
|
||
Object.defineProperty(waterSection, "getBoundingClientRect", {
|
||
configurable: true,
|
||
value: () => ({ top: 520 }),
|
||
});
|
||
// 尺寸变化后监听器也必须从响应式外层重新绑定到桌面内层 scroller。
|
||
fireEvent(window, new Event("resize"));
|
||
|
||
fireEvent.click(within(dialog).getByRole("button", { name: "水位" }));
|
||
expect(scrollTo).toHaveBeenLastCalledWith({ behavior: "auto", top: 312 });
|
||
expect(within(dialog).getByRole("button", { name: "水位" })).toHaveAttribute("aria-current", "true");
|
||
expect(within(dialog).getByRole("heading", { name: "动态水位" })).toHaveFocus();
|
||
|
||
sectionList.scrollTop = 137;
|
||
Object.defineProperty(identitySection, "getBoundingClientRect", {
|
||
configurable: true,
|
||
value: () => ({ top: 71 }),
|
||
});
|
||
fireEvent.click(within(dialog).getByRole("button", { name: "规则" }));
|
||
expect(scrollTo).toHaveBeenLastCalledWith({ behavior: "auto", top: 0 });
|
||
expect(within(dialog).getByRole("heading", { name: "规则身份" })).toHaveFocus();
|
||
|
||
fireEvent.click(within(dialog).getByRole("button", { name: "水位" }));
|
||
|
||
fireEvent.mouseDown(within(dialog).getByLabelText("策略版本"));
|
||
fireEvent.click(screen.getByRole("option", { name: "fixed_v2（历史兼容）" }));
|
||
|
||
await waitFor(() => {
|
||
expect(within(dialog).queryByRole("button", { name: "水位" })).not.toBeInTheDocument();
|
||
expect(within(dialog).getByRole("button", { name: "规则" })).toHaveAttribute("aria-current", "true");
|
||
});
|
||
expect(within(dialog).queryByLabelText(/初始奖池金币/)).not.toBeInTheDocument();
|
||
expect(within(dialog).getByRole("switch", { name: "发布状态" })).toBeInTheDocument();
|
||
});
|
||
|
||
test.each([390, 1024])(
|
||
"uses the dialog content scroller for %ipx responsive navigation and active-section sync",
|
||
(viewportWidth) => {
|
||
renderDialog(dynamicConfig());
|
||
|
||
const dialog = screen.getByRole("dialog");
|
||
const sectionNav = dialog.querySelector(".ops-config-section-nav");
|
||
const sectionList = dialog.querySelector(".ops-config-section-list");
|
||
const outerScroller = sectionList.closest(".ops-config-dialog-content");
|
||
const innerScrollTo = vi.fn();
|
||
const outerScrollTo = vi.fn();
|
||
// 不向组件暴露 viewport 宽度；测试通过导航的真实 flex 布局区分手机横栏和平板左栏。
|
||
sectionNav.style.flexDirection = viewportWidth === 390 ? "row" : "column";
|
||
Object.defineProperty(sectionNav, "getBoundingClientRect", {
|
||
configurable: true,
|
||
value: () => ({ height: 50 }),
|
||
});
|
||
Object.defineProperty(sectionList, "clientHeight", { configurable: true, value: 1_200 });
|
||
Object.defineProperty(sectionList, "scrollHeight", { configurable: true, value: 1_200 });
|
||
Object.defineProperty(sectionList, "scrollTo", { configurable: true, value: innerScrollTo });
|
||
Object.defineProperty(outerScroller, "scrollTop", { configurable: true, value: 1_837, writable: true });
|
||
Object.defineProperty(outerScroller, "scrollTo", { configurable: true, value: outerScrollTo });
|
||
Object.defineProperty(outerScroller, "getBoundingClientRect", {
|
||
configurable: true,
|
||
value: () => ({ top: 120 }),
|
||
});
|
||
|
||
const sectionTops = {
|
||
funds: -800,
|
||
identity: -1_000,
|
||
jackpot: 180,
|
||
limits: 800,
|
||
water: -579,
|
||
};
|
||
for (const [sectionKey, top] of Object.entries(sectionTops)) {
|
||
Object.defineProperty(
|
||
dialog.querySelector(`[data-config-section="${sectionKey}"]`),
|
||
"getBoundingClientRect",
|
||
{
|
||
configurable: true,
|
||
value: () => ({ top }),
|
||
},
|
||
);
|
||
}
|
||
|
||
fireEvent.scroll(outerScroller);
|
||
const expectedActiveSection = viewportWidth === 390 ? "大奖" : "水位";
|
||
expect(within(dialog).getByRole("button", { name: expectedActiveSection })).toHaveAttribute(
|
||
"aria-current",
|
||
"true",
|
||
);
|
||
|
||
fireEvent.click(within(dialog).getByRole("button", { name: "水位" }));
|
||
expect(outerScrollTo).toHaveBeenCalledWith({
|
||
behavior: "smooth",
|
||
// 横向 sticky nav 占 50px，目标标题落在其底边下方 8px；左栏布局不需要额外偏移。
|
||
top: viewportWidth === 390 ? 1_080 : 1_130,
|
||
});
|
||
expect(innerScrollTo).not.toHaveBeenCalled();
|
||
},
|
||
);
|
||
|
||
test("stage tabs expose complete aria relationships and support roving keyboard navigation", () => {
|
||
renderDialog(dynamicConfig());
|
||
|
||
const dialog = screen.getByRole("dialog");
|
||
const noviceTab = within(dialog).getByRole("tab", { name: /新手/ });
|
||
const normalTab = within(dialog).getByRole("tab", { name: /普通/ });
|
||
const advancedTab = within(dialog).getByRole("tab", { name: /高阶/ });
|
||
|
||
expect(noviceTab).toHaveAttribute("aria-controls", "ops-stage-panel-novice");
|
||
expect(noviceTab).toHaveAttribute("tabindex", "0");
|
||
expect(normalTab).toHaveAttribute("tabindex", "-1");
|
||
expect(within(dialog).getByRole("tabpanel")).toHaveAttribute("aria-labelledby", "ops-stage-tab-novice");
|
||
|
||
fireEvent.keyDown(noviceTab, { key: "ArrowRight" });
|
||
expect(normalTab).toHaveFocus();
|
||
expect(normalTab).toHaveAttribute("aria-selected", "true");
|
||
expect(within(dialog).getByRole("tabpanel")).toHaveAttribute("id", "ops-stage-panel-normal");
|
||
expect(within(dialog).getByLabelText("正常阶段第 1 档倍率")).toBeInTheDocument();
|
||
|
||
fireEvent.keyDown(normalTab, { key: "End" });
|
||
expect(advancedTab).toHaveFocus();
|
||
expect(advancedTab).toHaveAttribute("aria-selected", "true");
|
||
fireEvent.keyDown(advancedTab, { key: "Home" });
|
||
expect(noviceTab).toHaveFocus();
|
||
expect(noviceTab).toHaveAttribute("aria-selected", "true");
|
||
});
|
||
|
||
test("fixed_v2 hides only dynamic controls and preserves immutable snapshot fields on submit", () => {
|
||
const onSubmit = vi.fn();
|
||
renderDialog(fixedConfig(), { onSubmit });
|
||
|
||
const dialog = screen.getByRole("dialog");
|
||
expect(within(dialog).getByRole("switch", { name: "发布状态" })).toBeChecked();
|
||
expect(within(dialog).queryByRole("button", { name: "水位" })).not.toBeInTheDocument();
|
||
expect(within(dialog).queryByText(/资金合计/)).not.toBeInTheDocument();
|
||
expect(within(dialog).queryByLabelText(/初始奖池金币/)).not.toBeInTheDocument();
|
||
expect(within(dialog).getAllByRole("tab")).toHaveLength(3);
|
||
|
||
fireEvent.click(within(dialog).getByRole("button", { name: "保存配置" }));
|
||
|
||
expect(onSubmit).toHaveBeenCalledWith(
|
||
expect.objectContaining({
|
||
effective_from_ms: 987_654_321,
|
||
enabled: true,
|
||
strategy_version: "fixed_v2",
|
||
stages: expect.arrayContaining([
|
||
expect.objectContaining({
|
||
stage: "novice",
|
||
tiers: expect.arrayContaining([
|
||
expect.objectContaining({
|
||
enabled: true,
|
||
high_water_only: false,
|
||
tier_id: "novice_none",
|
||
}),
|
||
]),
|
||
}),
|
||
]),
|
||
}),
|
||
);
|
||
});
|
||
|
||
test("saves an ordinary tier and the independent jackpot list when they share a multiplier", () => {
|
||
const onSubmit = vi.fn();
|
||
const stages = stagesFor(98).map((stage) =>
|
||
stage.stage === "normal"
|
||
? {
|
||
...stage,
|
||
tiers: [
|
||
{ ...stage.tiers[0], probability_percent: 1.99 },
|
||
stage.tiers[1],
|
||
{
|
||
enabled: true,
|
||
high_water_only: true,
|
||
multiplier: 200,
|
||
probability_percent: 0.01,
|
||
tier_id: "normal_200x",
|
||
},
|
||
],
|
||
}
|
||
: stage,
|
||
);
|
||
renderDialog(dynamicConfig({ stages }), { onSubmit });
|
||
|
||
const dialog = screen.getByRole("dialog");
|
||
fireEvent.click(within(dialog).getByRole("button", { name: "保存配置" }));
|
||
|
||
expect(within(dialog).queryByRole("alert")).not.toBeInTheDocument();
|
||
expect(onSubmit).toHaveBeenCalledWith(
|
||
expect.objectContaining({
|
||
jackpot_multipliers: [200, 500, 1000],
|
||
stages: expect.arrayContaining([
|
||
expect.objectContaining({
|
||
stage: "normal",
|
||
tiers: expect.arrayContaining([
|
||
expect.objectContaining({
|
||
high_water_only: true,
|
||
multiplier: 200,
|
||
probability_percent: 0.01,
|
||
tier_id: "normal_200x",
|
||
}),
|
||
]),
|
||
}),
|
||
]),
|
||
}),
|
||
);
|
||
});
|
||
|
||
test("focuses the validation summary when the fixed action bar submission is rejected", async () => {
|
||
const onSubmit = vi.fn();
|
||
renderDialog(dynamicConfig({ low_watermark_coins: 0 }), { onSubmit });
|
||
|
||
const dialog = screen.getByRole("dialog");
|
||
fireEvent.click(within(dialog).getByRole("button", { name: "保存配置" }));
|
||
|
||
const alert = await within(dialog).findByRole("alert");
|
||
expect(alert).toHaveTextContent("高水位必须大于正数低水位");
|
||
expect(alert).toHaveFocus();
|
||
expect(onSubmit).not.toHaveBeenCalled();
|
||
});
|
||
|
||
function renderDialog(config, overrides = {}) {
|
||
return render(
|
||
<LuckyGiftConfigDialog
|
||
appOptions={[
|
||
["lalu", "Lalu"],
|
||
["yumi", "Yumi"],
|
||
]}
|
||
config={config}
|
||
mode="edit"
|
||
saving={false}
|
||
onClose={vi.fn()}
|
||
onSubmit={vi.fn()}
|
||
{...overrides}
|
||
/>,
|
||
);
|
||
}
|
||
|
||
function dynamicConfig(overrides = {}) {
|
||
return {
|
||
anchor_daily_payout_cap: 6_000_000,
|
||
anchor_rate_percent: 1,
|
||
app_code: "lalu",
|
||
control_band_percent: 3,
|
||
device_daily_payout_cap: 4_000_000,
|
||
effective_from_ms: 123_456_789,
|
||
enabled: true,
|
||
gift_price_reference: 100,
|
||
high_water_nonzero_factor_percent: 130,
|
||
high_watermark_coins: 20_000_000,
|
||
initial_pool_coins: 0,
|
||
jackpot_global_rtp_max_percent: 98,
|
||
jackpot_multipliers: [200, 500, 1000],
|
||
jackpot_spend_threshold_coins: 50_000,
|
||
jackpot_user_72h_rtp_max_percent: 96,
|
||
jackpot_user_day_rtp_max_percent: 96,
|
||
loss_streak_guarantee: 5,
|
||
low_water_nonzero_factor_percent: 70,
|
||
low_watermark_coins: 10_000_000,
|
||
max_jackpot_hits_per_user_day: 5,
|
||
max_single_payout: 1_000_000,
|
||
normal_max_equivalent_draws: 20_000,
|
||
novice_max_equivalent_draws: 2_000,
|
||
pool_id: "lucky",
|
||
pool_rate_percent: 98,
|
||
profit_rate_percent: 1,
|
||
recharge_boost_factor_percent: 110,
|
||
recharge_boost_window_ms: 300_000,
|
||
room_hourly_payout_cap: 5_000_000,
|
||
rule_version: 3,
|
||
settlement_window_wager: 1_000_000,
|
||
stages: stagesFor(98),
|
||
strategy_version: "dynamic_v3",
|
||
target_rtp_percent: 98,
|
||
user_daily_payout_cap: 3_000_000,
|
||
user_hourly_payout_cap: 2_000_000,
|
||
...overrides,
|
||
};
|
||
}
|
||
|
||
function fixedConfig() {
|
||
return {
|
||
app_code: "lalu",
|
||
control_band_percent: 1,
|
||
effective_from_ms: 987_654_321,
|
||
enabled: true,
|
||
gift_price_reference: 100,
|
||
pool_id: "legacy",
|
||
pool_rate_percent: 95,
|
||
rule_version: 8,
|
||
settlement_window_wager: 1_000_000,
|
||
stages: stagesFor(95),
|
||
strategy_version: "fixed_v2",
|
||
target_rtp_percent: 95,
|
||
};
|
||
}
|
||
|
||
function stagesFor(targetRTP) {
|
||
return ["novice", "normal", "advanced"].map((stage, index) => ({
|
||
min_recharge_30d_coins: index === 0 ? 0 : 1,
|
||
min_recharge_7d_coins: index === 2 ? 1 : 0,
|
||
stage,
|
||
tiers: [
|
||
{
|
||
enabled: true,
|
||
high_water_only: false,
|
||
multiplier: 0,
|
||
probability_percent: 100 - targetRTP,
|
||
tier_id: `${stage}_none`,
|
||
},
|
||
{
|
||
enabled: true,
|
||
high_water_only: false,
|
||
multiplier: 1,
|
||
probability_percent: targetRTP,
|
||
tier_id: `${stage}_1x`,
|
||
},
|
||
],
|
||
}));
|
||
}
|