Function TestHarness

site/src/components/Tabs/utils/useKebabMenu.test.tsx:52–85

({ tabGap = 0 }: { tabGap?: number })

] as const;

const TestHarness = ({ tabGap = 0 }: { tabGap?: number }) => {
	const { containerRef, visibleTabs, overflowTabs, getTabMeasureProps } =
		useKebabMenu({
			tabs,
			enabled: true,
			isActive: true,
			overflowTriggerWidth: 44,
		});

	return (
		<div>
			<div
				ref={containerRef}
				style={{ display: "flex", columnGap: `${tabGap}px` }}
			>
				{tabs.map((tab) => (
					<button
						key={tab.value}
						type="button"
						{...getTabMeasureProps(tab.value)}
					>
						{tab.label}
					</button>
				))}
			</div>
			<div data-testid="visible-values">
				{visibleTabs.map((tab) => tab.value).join(",")}
			</div>
			<div data-testid="overflow-values">
				{overflowTabs.map((tab) => tab.value).join(",")}
			</div>
		</div>
	);
};

describe("useKebabMenu", () => {
	beforeEach(() => {