.
const outerDiv = container.firstChild as HTMLElement;
// The mb-6 wrapper div contains the card div — neither should be an
expect(outerDiv.tagName).toBe('DIV');
const cardEl = outerDiv.firstChild as HTMLElement;
expect(cardEl.tagName).toBe('DIV');
});
it('does not contain a nested inside another (no validateDOMNesting warning)', () => {
const { container } = render(
,
);
const anchors = container.querySelectorAll('a');
// Every anchor must NOT be a descendant of another anchor.
anchors.forEach((anchor) => {
let parent = anchor.parentElement;
while (parent) {
expect(parent.tagName).not.toBe('A');
parent = parent.parentElement;
}
});
});
it('renders an explicit "View ROI" link when gains > 0', () => {
render(
,
);
const roiLink = screen.getByRole('link', { name: /view full roi dashboard/i });
expect(roiLink).toBeInTheDocument();
});
it('renders the inline $/click input and Save button when hasLift && !showRevenue', () => {
render(
,
);
expect(screen.getByTestId('recovery-hero-cpc-nudge')).toBeInTheDocument();
expect(screen.getByTestId('recovery-hero-cpc-input')).toBeInTheDocument();
expect(screen.getByTestId('recovery-hero-cpc-save')).toBeInTheDocument();
// Save button should be labelled
expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
});
it('pre-fills the input with the stored roi_per_click_value when provided', () => {
render(
,
);
const input = screen.getByTestId('recovery-hero-cpc-input') as HTMLInputElement;
expect(input.value).toBe('0.75');
});
it('Save button posts to settings.roi-per-click.store via router.post (fire-and-forget)', async () => {
const { fireEvent } = await import('@testing-library/react');
const { router } = await import('@inertiajs/react');
const postSpy = vi.mocked(router.post);
render(
,
);
const input = screen.getByTestId('recovery-hero-cpc-input');
fireEvent.change(input, { target: { value: '0.50' } });
fireEvent.click(screen.getByTestId('recovery-hero-cpc-save'));
expect(postSpy).toHaveBeenCalledWith(
'/settings/roi-per-click', // route mock resolves to this
{ per_click_value: 0.5 },
expect.objectContaining({ onFinish: expect.any(Function) }),
);
});
it('Save button shows disabled state while saving', async () => {
const { fireEvent } = await import('@testing-library/react');
render(
,
);
const input = screen.getByTestId('recovery-hero-cpc-input');
fireEvent.change(input, { target: { value: '0.50' } });
fireEvent.click(screen.getByTestId('recovery-hero-cpc-save'));
// Button should be disabled immediately after click (before onFinish fires)
const saveBtn = screen.getByTestId('recovery-hero-cpc-save');
expect(saveBtn).toBeDisabled();
});
it('does NOT render the inline rate form when revenue_estimate is already set (showRevenue=true)', () => {
render(
,
);
expect(screen.queryByTestId('recovery-hero-cpc-input')).not.toBeInTheDocument();
expect(screen.queryByTestId('recovery-hero-cpc-save')).not.toBeInTheDocument();
});
it('does NOT render the inline rate form when gains are 0', () => {
render(
,
);
expect(screen.queryByTestId('recovery-hero-cpc-input')).not.toBeInTheDocument();
});
});