style: compact spread filter toolbar layout
This commit is contained in:
@@ -384,6 +384,63 @@ describe("market-content-entry", () => {
|
||||
expect(audienceProfileByIdExportButton?.style.color).toBe("rgb(255, 255, 255)");
|
||||
});
|
||||
|
||||
test("keeps plugin filters in two compact aligned rows", async () => {
|
||||
document.body.innerHTML = buildMarketFixture();
|
||||
|
||||
const { createMarketController } = await import("../src/content/market/index");
|
||||
const controller = trackController(createMarketController({
|
||||
document,
|
||||
loadAuthorMetrics: async () => ({
|
||||
success: false,
|
||||
reason: "request-failed"
|
||||
}),
|
||||
window
|
||||
}));
|
||||
|
||||
await controller.ready;
|
||||
|
||||
const toolbar = document.querySelector(
|
||||
'[data-plugin-toolbar="root"]'
|
||||
) as HTMLElement | null;
|
||||
const panel = document.querySelector(
|
||||
'[data-plugin-toolbar-panel="root"]'
|
||||
) as HTMLElement | null;
|
||||
const rows = document.querySelectorAll("[data-plugin-toolbar-row]");
|
||||
const primaryRow = document.querySelector(
|
||||
'[data-plugin-toolbar-row="primary"]'
|
||||
) as HTMLElement | null;
|
||||
const thresholdRow = document.querySelector(
|
||||
'[data-plugin-toolbar-row="thresholds"]'
|
||||
) as HTMLElement | null;
|
||||
const dataGroup = document.querySelector(
|
||||
'[data-plugin-toolbar-group="data"]'
|
||||
) as HTMLElement | null;
|
||||
const videoGroup = document.querySelector(
|
||||
'[data-plugin-toolbar-group="video"]'
|
||||
) as HTMLElement | null;
|
||||
const thresholdGroup = document.querySelector(
|
||||
'[data-plugin-toolbar-group="thresholds"]'
|
||||
) as HTMLElement | null;
|
||||
const titles = Array.from(document.querySelectorAll("[data-plugin-toolbar-title]"))
|
||||
.map((element) => element.textContent);
|
||||
|
||||
expect(toolbar?.style.flexWrap).toBe("nowrap");
|
||||
expect(panel?.style.flexDirection).toBe("column");
|
||||
expect(panel?.style.alignItems).toBe("stretch");
|
||||
expect(panel?.style.padding).toBe("2px 0px");
|
||||
expect(panel?.style.overflowX).toBe("visible");
|
||||
expect(rows).toHaveLength(2);
|
||||
expect(primaryRow?.style.flexWrap).toBe("nowrap");
|
||||
expect(thresholdRow?.style.flexWrap).toBe("nowrap");
|
||||
expect(dataGroup?.parentElement).toBe(primaryRow);
|
||||
expect(videoGroup?.parentElement).toBe(primaryRow);
|
||||
expect(thresholdGroup?.parentElement).toBe(thresholdRow);
|
||||
expect(thresholdGroup?.style.flexWrap).toBe("nowrap");
|
||||
expect(primaryRow?.style.justifyContent).toBe("flex-start");
|
||||
expect(thresholdRow?.style.justifyContent).toBe("flex-start");
|
||||
expect(titles).toEqual(["达人数据", "视频口径", "传播指标"]);
|
||||
});
|
||||
|
||||
test("remounts the plugin action bar when the native market action row appears later", async () => {
|
||||
document.body.innerHTML = buildMarketTableOnlyFixture();
|
||||
const observer = createMutationObserverFactory();
|
||||
|
||||
Reference in New Issue
Block a user