fix: align market selection checkboxes
This commit is contained in:
@@ -2682,9 +2682,7 @@ function installPaginationHarness(
|
||||
}
|
||||
|
||||
const renderPage = () => {
|
||||
const authorColumn = document.querySelector(
|
||||
'[data-testid="author-section"] .content-column'
|
||||
) as HTMLElement | null;
|
||||
const authorColumn = readAuthorContentColumn();
|
||||
const middleColumn = document.querySelector(
|
||||
'.middle-columns .content-column'
|
||||
) as HTMLElement | null;
|
||||
@@ -2777,9 +2775,7 @@ function installAsyncPaginationHarness(
|
||||
};
|
||||
|
||||
const renderPage = () => {
|
||||
const authorColumn = document.querySelector(
|
||||
'[data-testid="author-section"] .content-column'
|
||||
) as HTMLElement | null;
|
||||
const authorColumn = readAuthorContentColumn();
|
||||
const middleColumn = document.querySelector(
|
||||
'.middle-columns .content-column'
|
||||
) as HTMLElement | null;
|
||||
@@ -2883,9 +2879,7 @@ function installLaggyPaginationHarness(
|
||||
};
|
||||
|
||||
const renderPage = () => {
|
||||
const authorColumn = document.querySelector(
|
||||
'[data-testid="author-section"] .content-column'
|
||||
) as HTMLElement | null;
|
||||
const authorColumn = readAuthorContentColumn();
|
||||
const middleColumn = document.querySelector(
|
||||
'.middle-columns .content-column'
|
||||
) as HTMLElement | null;
|
||||
@@ -2940,9 +2934,7 @@ function installLaggyPaginationHarness(
|
||||
pageIndex += 1;
|
||||
updatePaginationState(pageIndex);
|
||||
|
||||
const authorColumn = document.querySelector(
|
||||
'[data-testid="author-section"] .content-column'
|
||||
) as HTMLElement | null;
|
||||
const authorColumn = readAuthorContentColumn();
|
||||
const middleColumn = document.querySelector(
|
||||
'.middle-columns .content-column'
|
||||
) as HTMLElement | null;
|
||||
@@ -3014,9 +3006,7 @@ function installProgressivePaginationHarness(
|
||||
price21To60s: string;
|
||||
}>
|
||||
) => {
|
||||
const authorColumn = document.querySelector(
|
||||
'[data-testid="author-section"] .content-column'
|
||||
) as HTMLElement | null;
|
||||
const authorColumn = readAuthorContentColumn();
|
||||
const middleColumn = document.querySelector(
|
||||
'.middle-columns .content-column'
|
||||
) as HTMLElement | null;
|
||||
@@ -3118,9 +3108,7 @@ function installLazyFieldHydrationHarness(options: {
|
||||
const rightColumns = document.querySelectorAll(
|
||||
'[data-testid="right-section"] > .content-column'
|
||||
);
|
||||
const authorCells = Array.from(
|
||||
document.querySelectorAll('[data-testid="author-section"] .content-column .content-cell')
|
||||
) as HTMLElement[];
|
||||
const authorCells = readAuthorContentCells();
|
||||
const middleCells = Array.from(
|
||||
document.querySelectorAll(".middle-columns .content-column .content-cell")
|
||||
) as HTMLElement[];
|
||||
@@ -3288,11 +3276,7 @@ function installPagedLazyFieldHydrationHarness(options: {
|
||||
const rightColumns = document.querySelectorAll(
|
||||
'[data-testid="right-section"] > .content-column'
|
||||
);
|
||||
const authorCells = Array.from(
|
||||
document.querySelectorAll(
|
||||
'[data-testid="author-section"] .content-column .content-cell'
|
||||
)
|
||||
) as HTMLElement[];
|
||||
const authorCells = readAuthorContentCells();
|
||||
const middleCells = Array.from(
|
||||
document.querySelectorAll(".middle-columns .content-column .content-cell")
|
||||
) as HTMLElement[];
|
||||
@@ -3531,14 +3515,40 @@ function readRowOrder() {
|
||||
}
|
||||
|
||||
function readDivAuthorOrder() {
|
||||
const authorColumn = document.querySelector(
|
||||
'[data-testid="author-section"] .content-column'
|
||||
);
|
||||
const authorColumn = readAuthorContentColumn();
|
||||
return readVisualCells(authorColumn).map(
|
||||
(cell) => cell.querySelector("a")?.textContent?.trim() ?? ""
|
||||
);
|
||||
}
|
||||
|
||||
function readAuthorContentColumn(): HTMLElement | null {
|
||||
const nativeColumns = Array.from(
|
||||
document.querySelectorAll('[data-testid="author-section"] > .content-column')
|
||||
).filter(
|
||||
(column): column is HTMLElement =>
|
||||
column instanceof HTMLElement && !column.dataset.marketColumnGroup
|
||||
);
|
||||
if (nativeColumns.length === 1) {
|
||||
return nativeColumns[0];
|
||||
}
|
||||
|
||||
return (
|
||||
nativeColumns.find((column) =>
|
||||
Boolean(
|
||||
column.querySelector('a[href*="/author-homepage/"]') ||
|
||||
column.querySelector(".author-nickname") ||
|
||||
column.querySelector("[data-testid^='author-cell-']")
|
||||
)
|
||||
) ?? null
|
||||
);
|
||||
}
|
||||
|
||||
function readAuthorContentCells(): HTMLElement[] {
|
||||
return Array.from(
|
||||
readAuthorContentColumn()?.querySelectorAll(":scope > .content-cell") ?? []
|
||||
).filter((cell): cell is HTMLElement => cell instanceof HTMLElement);
|
||||
}
|
||||
|
||||
function readDivRightRowTexts(rowIndex: number) {
|
||||
return Array.from(
|
||||
document.querySelectorAll('[data-testid="right-section"] > .content-column'),
|
||||
|
||||
@@ -307,6 +307,28 @@ describe("market-dom-sync", () => {
|
||||
expect(readAuthorNames()).toEqual(["达人 A", "达人 B"]);
|
||||
});
|
||||
|
||||
test("inserts the selection column before the native author column", () => {
|
||||
document.body.innerHTML = buildRealMarketGridFixture();
|
||||
|
||||
const table = syncMarketTable(document);
|
||||
if (!table) {
|
||||
throw new Error("Expected market table");
|
||||
}
|
||||
|
||||
expect(readAuthorSectionColumnKeys()).toEqual(["selection", "author"]);
|
||||
});
|
||||
|
||||
test("keeps the selection cells aligned to the native author row heights", () => {
|
||||
document.body.innerHTML = buildRealMarketGridFixture();
|
||||
|
||||
const table = syncMarketTable(document);
|
||||
if (!table) {
|
||||
throw new Error("Expected market table");
|
||||
}
|
||||
|
||||
expect(readSelectionCellHeights()).toEqual(["120px", "120px"]);
|
||||
});
|
||||
|
||||
test("uses native-like alignment styles for plugin cells", () => {
|
||||
document.body.innerHTML = buildRealMarketGridFixtureWithScopedAttributes();
|
||||
|
||||
@@ -962,14 +984,37 @@ function readSelectionRowCheckboxCount() {
|
||||
}
|
||||
|
||||
function readAuthorNames() {
|
||||
const authorColumn = document.querySelector(
|
||||
'[data-testid="author-section"] .content-column'
|
||||
);
|
||||
const authorColumn = Array.from(
|
||||
document.querySelectorAll('[data-testid="author-section"] > .content-column')
|
||||
).find((column) => (column as HTMLElement).querySelector("a")) as Element | null;
|
||||
return readVisualCells(authorColumn).map(
|
||||
(cell) => cell.querySelector("a")?.textContent?.trim() ?? ""
|
||||
);
|
||||
}
|
||||
|
||||
function readAuthorSectionColumnKeys() {
|
||||
return Array.from(
|
||||
document.querySelectorAll('[data-testid="author-section"] > .content-column'),
|
||||
(column) => {
|
||||
const element = column as HTMLElement;
|
||||
if (element.dataset.marketColumnGroup) {
|
||||
return element.dataset.marketColumnGroup;
|
||||
}
|
||||
|
||||
return element.querySelector("a") ? "author" : "unknown";
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function readSelectionCellHeights() {
|
||||
return Array.from(
|
||||
document.querySelectorAll(
|
||||
'[data-testid="author-section"] [data-market-column-group="selection"] > .content-cell'
|
||||
),
|
||||
(cell) => (cell as HTMLElement).style.height
|
||||
);
|
||||
}
|
||||
|
||||
function readAuthorRowHiddenStates() {
|
||||
return Array.from(
|
||||
document.querySelectorAll('[data-testid^="author-cell-"]'),
|
||||
|
||||
Reference in New Issue
Block a user