453 lines
17 KiB
JavaScript
453 lines
17 KiB
JavaScript
import { act, render, screen, within } from "@testing-library/react";
|
||
import { afterEach, beforeEach, expect, test, vi } from "vitest";
|
||
import { DatabiApp } from "./DatabiApp.jsx";
|
||
import {
|
||
fetchFilterOptions,
|
||
fetchSelfGameStatisticsOverview,
|
||
fetchSocialBiFunnel,
|
||
fetchSocialBiKpi,
|
||
fetchSocialBiMaster,
|
||
fetchSocialBiOverview,
|
||
fetchStatisticsOverview
|
||
} from "./api.js";
|
||
|
||
vi.mock("./api.js", () => ({
|
||
fetchFilterOptions: vi.fn(),
|
||
fetchSocialBiFilterOptions: vi.fn(),
|
||
fetchSocialBiFunnel: vi.fn(),
|
||
fetchSocialBiKpi: vi.fn(),
|
||
fetchSocialBiMaster: vi.fn(),
|
||
fetchSocialBiOverview: vi.fn(),
|
||
fetchSelfGameStatisticsOverview: vi.fn(),
|
||
fetchStatisticsOverview: vi.fn(),
|
||
getCurrentAppCode: vi.fn(() => "lalu"),
|
||
getDefaultAppOptions: vi.fn(() => [
|
||
{ code: "", label: "全部", value: "" },
|
||
{ code: "lalu", label: "Lalu", value: "lalu" },
|
||
{ code: "aslan", label: "Aslan", value: "aslan" },
|
||
{ code: "yumi", label: "Yumi", value: "yumi" }
|
||
]),
|
||
setCurrentAppCode: vi.fn((value) => String(value || "lalu").toLowerCase())
|
||
}));
|
||
|
||
vi.mock("./charts/EChart.jsx", () => ({
|
||
EChart: () => <div data-testid="databi-chart" />
|
||
}));
|
||
|
||
beforeEach(() => {
|
||
vi.useFakeTimers();
|
||
vi.setSystemTime(new Date("2026-06-06T08:00:00Z"));
|
||
fetchFilterOptions.mockResolvedValue({
|
||
appOptions: [
|
||
{ code: "", label: "全部", value: "" },
|
||
{ code: "lalu", label: "Lalu", value: "lalu" },
|
||
{ code: "aslan", label: "Aslan", value: "aslan" },
|
||
{ code: "yumi", label: "Yumi", value: "yumi" }
|
||
],
|
||
countryOptions: [{ countryCode: "", id: 0, label: "全部国家", regionIds: [], searchText: "全部国家 all", value: 0 }],
|
||
regionOptions: [{ countryCodes: [], id: "all", label: "全部区域", value: "all" }]
|
||
});
|
||
fetchSelfGameStatisticsOverview.mockResolvedValue({});
|
||
fetchSocialBiMaster.mockResolvedValue({
|
||
access: { all: true, scopes: [] },
|
||
apps: [],
|
||
operators: [],
|
||
permissions: {},
|
||
regions: []
|
||
});
|
||
fetchSocialBiOverview.mockResolvedValue({ access: { all: true, scopes: [] }, apps: [] });
|
||
fetchSocialBiFunnel.mockResolvedValue({ access: { all: true, scopes: [] }, apps: [] });
|
||
fetchSocialBiKpi.mockResolvedValue({ items: [], period_month: "2026-06", summary: {} });
|
||
});
|
||
|
||
afterEach(() => {
|
||
window.history.pushState(null, "", "/");
|
||
vi.useRealTimers();
|
||
vi.clearAllMocks();
|
||
});
|
||
|
||
test("keeps current data visible during scheduled refresh", async () => {
|
||
const overview = { active_users: 10, paid_users: 2, recharge_usd_minor: 100, updated_at_ms: 1 };
|
||
fetchStatisticsOverview
|
||
.mockResolvedValueOnce(overview)
|
||
.mockResolvedValueOnce(overview)
|
||
.mockImplementationOnce(() => new Promise(() => {}));
|
||
|
||
render(<DatabiApp />);
|
||
|
||
await flushEffects();
|
||
expect(screen.getAllByText("$1").length).toBeGreaterThan(0);
|
||
expect(screen.getByLabelText("数据报表")).toBeTruthy();
|
||
expect(document.querySelector(".report-metric-card.is-loading")).toBeNull();
|
||
|
||
await act(async () => {
|
||
vi.advanceTimersByTime(60_000);
|
||
});
|
||
|
||
expect(fetchStatisticsOverview).toHaveBeenCalledTimes(3);
|
||
expect(screen.getAllByText("$1").length).toBeGreaterThan(0);
|
||
expect(document.querySelector(".report-metric-card.is-loading")).toBeNull();
|
||
});
|
||
|
||
test("queries China natural day statistics when display timezone is Beijing", async () => {
|
||
fetchStatisticsOverview.mockResolvedValue({ active_users: 10, paid_users: 2, recharge_usd_minor: 100, updated_at_ms: 1 });
|
||
|
||
render(<DatabiApp />);
|
||
|
||
await flushEffects();
|
||
|
||
expect(fetchStatisticsOverview).toHaveBeenCalledWith(expect.objectContaining({
|
||
endMs: Date.UTC(2026, 5, 6, 15, 59, 59),
|
||
seriesEndMs: Date.UTC(2026, 5, 6, 15, 59, 59),
|
||
seriesStartMs: Date.UTC(2026, 4, 30, 16, 0, 0),
|
||
startMs: Date.UTC(2026, 5, 5, 16, 0, 0),
|
||
statTz: "Asia/Shanghai"
|
||
}));
|
||
});
|
||
|
||
test("renders legacy app metric columns in report view", async () => {
|
||
fetchStatisticsOverview.mockResolvedValue({
|
||
coin_seller_stock_coin: 400_000,
|
||
coin_seller_transfer_coin: 160_000,
|
||
salary_transfer_coin: 88_000,
|
||
country_breakdown: [
|
||
{
|
||
coin_seller_stock_coin: 400_000,
|
||
coin_seller_transfer_coin: 160_000,
|
||
country: "巴西",
|
||
country_id: 86,
|
||
salary_transfer_coin: 88_000
|
||
}
|
||
],
|
||
updated_at_ms: 1
|
||
});
|
||
|
||
render(<DatabiApp />);
|
||
|
||
await flushEffects();
|
||
|
||
expect(screen.getByRole("columnheader", { name: "币商充值金币" })).toBeTruthy();
|
||
expect(screen.getByRole("columnheader", { name: "币商出货金币" })).toBeTruthy();
|
||
expect(screen.getByRole("columnheader", { name: "工资兑换金币" })).toBeTruthy();
|
||
expect(screen.getAllByText("400,000").length).toBeGreaterThan(0);
|
||
expect(screen.getAllByText("160,000").length).toBeGreaterThan(0);
|
||
expect(screen.getAllByText("88,000").length).toBeGreaterThan(0);
|
||
});
|
||
|
||
test("switches report sidebar sections and stops data report polling on empty sections", async () => {
|
||
fetchStatisticsOverview.mockResolvedValue({ active_users: 10, paid_users: 2, recharge_usd_minor: 100, updated_at_ms: 1 });
|
||
|
||
render(<DatabiApp />);
|
||
|
||
await flushEffects();
|
||
|
||
const reportTypeTabs = screen.getByRole("tablist", { name: "报表类型" });
|
||
expect(within(reportTypeTabs).getByRole("tab", { name: "数据报表" })).toHaveAttribute("aria-selected", "true");
|
||
expect(screen.getByRole("region", { name: "数据报表" })).toBeTruthy();
|
||
|
||
await act(async () => {
|
||
within(reportTypeTabs).getByRole("tab", { name: "财务报表" }).click();
|
||
});
|
||
|
||
expect(within(reportTypeTabs).getByRole("tab", { name: "财务报表" })).toHaveAttribute("aria-selected", "true");
|
||
expect(screen.getByRole("region", { name: "财务报表" })).toBeTruthy();
|
||
expect(screen.queryByRole("region", { name: "数据报表" })).toBeNull();
|
||
const requestCountAfterFinanceSwitch = fetchStatisticsOverview.mock.calls.length;
|
||
|
||
await act(async () => {
|
||
vi.advanceTimersByTime(60_000);
|
||
});
|
||
|
||
expect(fetchStatisticsOverview).toHaveBeenCalledTimes(requestCountAfterFinanceSwitch);
|
||
|
||
await act(async () => {
|
||
within(reportTypeTabs).getByRole("tab", { name: "运营报表" }).click();
|
||
});
|
||
|
||
expect(within(reportTypeTabs).getByRole("tab", { name: "运营报表" })).toHaveAttribute("aria-selected", "true");
|
||
expect(screen.getByRole("region", { name: "运营报表" })).toBeTruthy();
|
||
|
||
await act(async () => {
|
||
within(reportTypeTabs).getByRole("tab", { name: "数据报表" }).click();
|
||
});
|
||
await flushEffects();
|
||
|
||
expect(screen.getByRole("region", { name: "数据报表" })).toBeTruthy();
|
||
expect(fetchStatisticsOverview.mock.calls.length).toBeGreaterThan(requestCountAfterFinanceSwitch);
|
||
});
|
||
|
||
test("loads self game statistics from the big screen switch", async () => {
|
||
fetchStatisticsOverview.mockResolvedValue({ active_users: 10, paid_users: 2, recharge_usd_minor: 100, updated_at_ms: 1 });
|
||
fetchSelfGameStatisticsOverview.mockResolvedValue({
|
||
events: [{ event_name: "page_open", event_count: 8, user_count: 5 }],
|
||
match_totals: { created_matches: 3, matched_matches: 2, settled_matches: 1 },
|
||
retention: { cohort_users: 5, day1_rate: 0.2, day7_rate: 0.1 }
|
||
});
|
||
|
||
render(<DatabiApp />);
|
||
|
||
await flushEffects();
|
||
await act(async () => {
|
||
screen.getByRole("button", { name: "自研游戏" }).click();
|
||
});
|
||
await flushEffects();
|
||
|
||
expect(fetchSelfGameStatisticsOverview).toHaveBeenCalledWith(expect.objectContaining({ appCode: "lalu", gameId: "all", statTz: "Asia/Shanghai" }));
|
||
expect(screen.getByText("Dice / Rock H5 聚合统计")).toBeTruthy();
|
||
expect(screen.getByText("创建局")).toBeTruthy();
|
||
});
|
||
|
||
test("renders real-room robot gift cards in a separate row", async () => {
|
||
fetchStatisticsOverview.mockResolvedValue({
|
||
real_room_robot_avg_room_gift_coin: 300,
|
||
real_room_robot_gift_room_count: 2,
|
||
real_room_robot_lucky_gift_coin: 200,
|
||
real_room_robot_normal_gift_coin: 100,
|
||
real_room_robot_super_gift_coin: 300,
|
||
updated_at_ms: 1
|
||
});
|
||
|
||
render(<DatabiApp />);
|
||
|
||
await flushEffects();
|
||
await act(async () => {
|
||
screen.getByRole("tab", { name: "大屏 BI" }).click();
|
||
});
|
||
|
||
const businessSection = screen.getByLabelText("业务指标");
|
||
const robotGiftSection = screen.getByLabelText("真人房机器人送礼指标");
|
||
expect(within(businessSection).queryByText("真人房机器人普通礼物")).toBeNull();
|
||
expect(within(robotGiftSection).getByText("真人房机器人普通礼物")).toBeTruthy();
|
||
expect(within(robotGiftSection).getByText("真人房机器人幸运礼物")).toBeTruthy();
|
||
expect(within(robotGiftSection).getByText("真人房机器人超级幸运礼物")).toBeTruthy();
|
||
expect(within(robotGiftSection).getByText("真人房机器人房均礼物")).toBeTruthy();
|
||
});
|
||
|
||
test("routes databi social page to Social BI and loads real overview rows", async () => {
|
||
window.history.pushState(null, "", "/databi/social/");
|
||
const laluTotal = {
|
||
active_users: 20,
|
||
arpu_usd_minor: 410,
|
||
arppu_usd_minor: 615,
|
||
avg_mic_online_ms: 120_000,
|
||
consumed_coin: 900_000,
|
||
consume_output_delta: 450_000,
|
||
consume_output_ratio: 0.5,
|
||
d1_retention_rate: 0.25,
|
||
game_profit_rate: 0.17,
|
||
game_turnover: 300_000,
|
||
gift_coin_spent: 123_456,
|
||
google_recharge_usd_minor: 700,
|
||
mifapay_recharge_usd_minor: 800,
|
||
new_users: 3,
|
||
output_coin: 450_000,
|
||
paid_conversion_rate: 0.2,
|
||
paid_users: 4,
|
||
recharge_usd_minor: 12_300,
|
||
recharge_users: 4
|
||
};
|
||
const aslanRegionRow = {
|
||
active_users: 10,
|
||
new_users: 1,
|
||
paid_users: 2,
|
||
recharge_usd_minor: 5000,
|
||
recharge_users: 2,
|
||
region_code: "MENA",
|
||
region_id: 11,
|
||
region_name: "中东大区"
|
||
};
|
||
fetchSocialBiMaster.mockResolvedValue({
|
||
access: { all: true, scopes: [] },
|
||
apps: [
|
||
{ app_code: "lalu", app_name: "Lalu", kind: "hyapp" },
|
||
{ app_code: "aslan", app_name: "Aslan", kind: "legacy" }
|
||
],
|
||
operators: [
|
||
{ account: "omar", name: "Omar", scopes: [{ app_code: "aslan", region_id: 11 }], team: "中东运营部", team_id: 2, user_id: 9 }
|
||
],
|
||
permissions: {},
|
||
regions: [{ app_code: "aslan", countries: ["SA"], region_code: "MENA", region_id: 11, region_name: "中东大区" }]
|
||
});
|
||
fetchSocialBiOverview.mockResolvedValue({
|
||
access: { all: true, scopes: [] },
|
||
apps: [
|
||
{
|
||
app_code: "lalu",
|
||
app_name: "Lalu",
|
||
country_breakdown: [],
|
||
daily_country_breakdown: [],
|
||
daily_region_breakdown: [],
|
||
daily_series: [],
|
||
kind: "hyapp",
|
||
region_breakdown: [],
|
||
total: laluTotal
|
||
},
|
||
{
|
||
app_code: "aslan",
|
||
app_name: "Aslan",
|
||
country_breakdown: [],
|
||
daily_country_breakdown: [],
|
||
daily_region_breakdown: [],
|
||
daily_series: [],
|
||
kind: "legacy",
|
||
region_breakdown: [aslanRegionRow],
|
||
total: { active_users: 10, new_users: 1, paid_users: 2, recharge_usd_minor: 5000, recharge_users: 2 }
|
||
}
|
||
]
|
||
});
|
||
fetchSocialBiKpi.mockResolvedValue({
|
||
items: [
|
||
{
|
||
app_code: "aslan",
|
||
app_name: "Aslan",
|
||
month_recharge_usd_minor: 90_000,
|
||
operator_account: "omar",
|
||
operator_name: "Omar",
|
||
operator_user_id: 9,
|
||
range_new_users: 1,
|
||
range_recharge_usd_minor: 5000,
|
||
region_id: 11,
|
||
region_name: "中东大区",
|
||
team: "中东运营部",
|
||
team_id: 2
|
||
}
|
||
],
|
||
period_month: "2026-06",
|
||
summary: { month_recharge_usd_minor: 90_000, operator_count: 1, range_recharge_usd_minor: 5000 }
|
||
});
|
||
|
||
render(<DatabiApp />);
|
||
|
||
await flushEffects();
|
||
|
||
// v2 Shell：主视图容器 + 侧栏视图 tab，默认选中“经营概览”。
|
||
expect(screen.getByLabelText("Social BI 数据中心")).toBeTruthy();
|
||
const viewTabs = screen.getByRole("tablist", { name: "数据视图" });
|
||
["经营概览", "地区洞察", "运营中心", "留存质量", "数据明细", "埋点漏斗"].forEach((name) => {
|
||
expect(within(viewTabs).getByRole("tab", { name })).toBeTruthy();
|
||
});
|
||
expect(within(viewTabs).getByRole("tab", { name: "经营概览" })).toHaveAttribute("aria-selected", "true");
|
||
|
||
expect(fetchSocialBiMaster).toHaveBeenCalledTimes(1);
|
||
expect(fetchSocialBiOverview).toHaveBeenCalledWith(expect.objectContaining({ statTz: "Asia/Shanghai" }));
|
||
expect(fetchSocialBiFunnel).toHaveBeenCalledWith(expect.objectContaining({ statTz: "Asia/Shanghai" }));
|
||
expect(fetchSocialBiKpi).toHaveBeenCalledWith(expect.objectContaining({ statTz: "Asia/Shanghai" }));
|
||
|
||
// 经营概览：App 名、Hero 汇总充值（12,300 + 5,000 USD 分 = $173）、
|
||
// App 对比里 Lalu 的单 App 充值（$123）、区域 Top5 里的中东大区。
|
||
expect(screen.getAllByText("Lalu").length).toBeGreaterThan(0);
|
||
expect(screen.getAllByText("充值 ($)").length).toBeGreaterThan(0);
|
||
expect(screen.getByText("付费用户")).toBeTruthy();
|
||
expect(screen.getAllByText("$173").length).toBeGreaterThan(0);
|
||
expect(screen.getAllByText("$123").length).toBeGreaterThan(0);
|
||
expect(screen.getAllByText("中东大区").length).toBeGreaterThan(0);
|
||
|
||
// 侧栏切换：地区洞察 —— 区域下钻表出现，Aslan 中东大区行充值 $50。
|
||
await act(async () => {
|
||
within(viewTabs).getByRole("tab", { name: "地区洞察" }).click();
|
||
});
|
||
expect(within(viewTabs).getByRole("tab", { name: "地区洞察" })).toHaveAttribute("aria-selected", "true");
|
||
expect(screen.getByText("区域下钻")).toBeTruthy();
|
||
expect(screen.getAllByText("中东大区").length).toBeGreaterThan(0);
|
||
expect(screen.getAllByText("$50").length).toBeGreaterThan(0);
|
||
|
||
// 侧栏切换：运营中心 —— 运营人员 Omar 上榜，只展示负责范围内的充值数据。
|
||
await act(async () => {
|
||
within(viewTabs).getByRole("tab", { name: "运营中心" }).click();
|
||
});
|
||
expect(within(viewTabs).getByRole("tab", { name: "运营中心" })).toHaveAttribute("aria-selected", "true");
|
||
expect(screen.getAllByText("Omar").length).toBeGreaterThan(0);
|
||
expect(screen.getAllByText("$900").length).toBeGreaterThan(0);
|
||
});
|
||
|
||
test("renders social BI funnel view and limits funnel apps to supported apps", async () => {
|
||
window.history.pushState(null, "", "/databi/social/?view=funnel");
|
||
fetchSocialBiMaster.mockResolvedValue({
|
||
access: { all: true, scopes: [] },
|
||
apps: [
|
||
{ app_code: "lalu", app_name: "Lalu", kind: "hyapp" },
|
||
{ app_code: "huwaa", app_name: "Huwaa", kind: "hyapp" },
|
||
{ app_code: "fami", app_name: "Fami", kind: "hyapp" },
|
||
{ app_code: "aslan", app_name: "Aslan", kind: "legacy" },
|
||
{ app_code: "yumi", app_name: "Yumi", kind: "legacy" }
|
||
],
|
||
operators: [],
|
||
permissions: {},
|
||
regions: []
|
||
});
|
||
fetchSocialBiFunnel.mockResolvedValue({
|
||
access: { all: true, scopes: [] },
|
||
apps: [
|
||
{
|
||
app_code: "lalu",
|
||
app_name: "Lalu",
|
||
cohorts: [
|
||
{
|
||
base_users: 1,
|
||
d1_retention_rate: 1,
|
||
d1_retention_users: 1,
|
||
dimension: "country",
|
||
label: "US",
|
||
steps: [
|
||
{ event_name: "login_success", user_count: 1 },
|
||
{ event_name: "profile_complete", user_count: 1 },
|
||
{ event_name: "room_join_success", user_count: 1 },
|
||
{ event_name: "stay_3m", user_count: 1 },
|
||
{ event_name: "send_message", user_count: 1 }
|
||
],
|
||
value: "US"
|
||
}
|
||
],
|
||
kind: "hyapp",
|
||
steps: [
|
||
{ event_name: "login_start", event_count: 2, label: "登录开始", user_count: 2 },
|
||
{ event_name: "login_success", event_count: 1, label: "登录成功", user_count: 1 },
|
||
{ event_name: "room_join_success", event_count: 1, label: "进房成功", user_count: 1 },
|
||
{ event_name: "room_join_fail", event_count: 1, is_failure: true, label: "进房失败", user_count: 1 },
|
||
{ event_name: "stay_3m", event_count: 1, label: "停留 3 分钟", user_count: 1 },
|
||
{ event_name: "send_message", event_count: 1, label: "发消息", user_count: 1 }
|
||
],
|
||
totals: {
|
||
d1_retention_base_users: 1,
|
||
d1_retention_rate: 1,
|
||
d1_retention_users: 1,
|
||
login_start_users: 2,
|
||
login_success_users: 1,
|
||
room_join_fail_users: 1,
|
||
room_join_success_users: 1
|
||
}
|
||
}
|
||
]
|
||
});
|
||
|
||
render(<DatabiApp />);
|
||
|
||
await flushEffects();
|
||
|
||
expect(screen.getByRole("tab", { name: "埋点漏斗" })).toHaveAttribute("aria-selected", "true");
|
||
expect(screen.getByRole("button", { name: "全部漏斗 App" })).toBeTruthy();
|
||
expect(screen.getByRole("button", { name: /Lalu/ })).toBeTruthy();
|
||
expect(screen.getByRole("button", { name: /Huwaa/ })).toBeTruthy();
|
||
expect(screen.getByRole("button", { name: /Fami/ })).toBeTruthy();
|
||
expect(screen.queryByRole("button", { name: /Aslan/ })).toBeNull();
|
||
expect(screen.queryByRole("button", { name: /Yumi/ })).toBeNull();
|
||
expect(fetchSocialBiFunnel).toHaveBeenCalledWith(expect.objectContaining({ appCodes: ["lalu", "huwaa", "fami"] }));
|
||
|
||
expect(screen.getByText("主路径转化")).toBeTruthy();
|
||
expect(screen.getByText("事件明细")).toBeTruthy();
|
||
expect(screen.getByText("D1 Cohort")).toBeTruthy();
|
||
expect(screen.getByText("login_start")).toBeTruthy();
|
||
expect(screen.getByText("room_join_fail")).toBeTruthy();
|
||
expect(screen.getByText("US")).toBeTruthy();
|
||
expect(screen.getAllByText("100.0%").length).toBeGreaterThan(0);
|
||
expect(screen.getByTestId("databi-chart")).toBeTruthy();
|
||
});
|
||
|
||
async function flushEffects() {
|
||
await act(async () => {
|
||
for (let index = 0; index < 10; index += 1) {
|
||
await Promise.resolve();
|
||
}
|
||
});
|
||
}
|