Skip to content

Commit

Permalink
fix: increase test coverage for ToggleTip (#17661)
Browse files Browse the repository at this point in the history 
* fix: increase test coverage for ToggleTip

* refactor: userEvent over fireEvent

---------

Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com>
  • Loading branch information
@2nikhiltom @alisonjoseph
2nikhiltom and alisonjoseph authored Oct 9, 2024
1 parent b44a218 commit 9d1822c
Showing 1 changed file with 241 additions and 0 deletions.
241 changes: 241 additions & 0 deletions packages/react/src/components/Toggletip/__tests__/Toggletip-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,5 +202,246 @@ describe('Toggletip', () => {
);
});
});

describe('ToggletipLabel', () => {
it('should render with custom element using as prop', () => {
const CustomElement = forwardRef((props, ref) => (
<div data-testid="custom-label" ref={ref} {...props} />
));

render(<Toggletip as={CustomElement}>Label</Toggletip>);
expect(screen.getByTestId('custom-label')).toBeInTheDocument();
});
});

describe('ToggletipButton', () => {
const CustomButton = forwardRef((props, ref) => (
<div data-testid="custom-button" ref={ref} {...props} />
));

it('should render custom component with onClick handler', async () => {
const user = userEvent.setup();
render(
<Toggletip>
<ToggletipButton as={CustomButton}>Click me</ToggletipButton>
</Toggletip>
);

const button = screen.getByTestId('custom-button');
expect(button).toBeInTheDocument();
await user.click(button);
});

it('should use default label when not provided', () => {
render(
<Toggletip>
<ToggletipButton>
<span>Icon</span>
</ToggletipButton>
</Toggletip>
);

expect(screen.getByRole('button')).toHaveAttribute(
'aria-label',
'Show information'
);
});
});

describe('ToggletipContent', () => {
it('should render with custom className', () => {
render(
<Toggletip defaultOpen>
<ToggletipContent className="custom-content">
Content
</ToggletipContent>
</Toggletip>
);

expect(screen.getByText('Content').parentElement).toHaveClass(
'custom-content'
);
});

it('should have correct aria attributes', async () => {
render(
<Toggletip>
<ToggletipButton>Toggle</ToggletipButton>
<ToggletipContent>Content</ToggletipContent>
</Toggletip>
);

expect(screen.getByText('Toggle')).toHaveAttribute(
'aria-expanded',
'false'
);
await userEvent.click(screen.getByText('Toggle'));
expect(screen.getByText('Toggle')).toHaveAttribute(
'aria-expanded',
'true'
);
});
});

describe('ToggletipActions', () => {
it('should render with custom className', () => {
render(
<ToggletipActions className="custom-actions">
<button>Action</button>
</ToggletipActions>
);

expect(screen.getByRole('button').parentElement).toHaveClass(
'custom-actions'
);
});
});

describe('Toggletip Keyboard Navigation', () => {
it('should handle Tab navigation correctly', async () => {
render(
<Toggletip defaultOpen>
<ToggletipButton>Toggle</ToggletipButton>
<ToggletipContent>
<button>Action 1</button>
<button>Action 2</button>
</ToggletipContent>
</Toggletip>
);

const toggleButton = screen.getByText('Toggle');
await userEvent.tab();
expect(toggleButton).toHaveFocus();
});

it('should close on blur when focus moves outside', async () => {
render(
<>
<button>Outside</button>
<Toggletip defaultOpen>
<ToggletipButton>Toggle</ToggletipButton>
<ToggletipContent>Content</ToggletipContent>
</Toggletip>
</>
);

const outsideButton = screen.getByText('Outside');
await userEvent.click(outsideButton);
expect(screen.getByText('Toggle')).toHaveAttribute(
'aria-expanded',
'false'
);
});
});

describe('Toggletip Focus Management', () => {
it('should return focus to trigger button when closing with Escape', async () => {
render(
<Toggletip defaultOpen>
<ToggletipButton>Toggle</ToggletipButton>
<ToggletipContent>
<button>Action</button>
</ToggletipContent>
</Toggletip>
);

const actionButton = screen.getByText('Action');
actionButton.focus();
await userEvent.keyboard('{Escape}');

expect(screen.getByText('Toggle')).toHaveFocus();
});
});

describe('Toggletip Alignment', () => {
it.each([
'left-start',
'left-end',
'right-start',
'right-end',
'top-start',
'top-end',
'bottom-start',
'bottom-end',
])('should handle %s alignment correctly', (alignment) => {
const { container } = render(
<Toggletip align={alignment} defaultOpen>
<ToggletipButton>Toggle</ToggletipButton>
<ToggletipContent>Content</ToggletipContent>
</Toggletip>
);

expect(container.firstChild).toHaveClass(`cds--popover--${alignment}`);
});
});

describe('Toggletip Closing Behavior', () => {
it('should not close when clicking inside the toggletip during auto-alignment', async () => {
render(
<Toggletip autoAlign defaultOpen>
<ToggletipButton>Toggle</ToggletipButton>
<ToggletipContent>
<div data-testid="content">Content</div>
</ToggletipContent>
</Toggletip>
);

await userEvent.click(screen.getByTestId('content'));
expect(screen.getByText('Toggle')).toHaveAttribute(
'aria-expanded',
'true'
);
});

it('should close when focus moves outside the toggletip', async () => {
const user = userEvent.setup();
const { container } = render(
<>
<button data-testid="external-button">External</button>
<Toggletip defaultOpen>
<ToggletipButton>Toggle</ToggletipButton>
<ToggletipContent>Content</ToggletipContent>
</Toggletip>
</>
);

const toggleButton = screen.getByText('Toggle');
const externalButton = screen.getByTestId('external-button');

await user.click(toggleButton);
await user.tab();

expect(container.lastChild).not.toHaveClass(
`${prefix}--toggletip--open`
);
expect(container.lastChild).not.toHaveClass(`${prefix}--popover--open`);
});

it('should not close when open and relatedTarget is null', () => {
const { container } = render(
<Toggletip defaultOpen>
<ToggletipButton>Toggle</ToggletipButton>
<ToggletipContent>
<button>Action</button>
</ToggletipContent>
</Toggletip>
);

expect(container.firstChild).toHaveClass(`${prefix}--toggletip--open`);
const toggletipWrapper = container.firstChild;

fireEvent.blur(toggletipWrapper, {
currentTarget: toggletipWrapper,
relatedTarget: null,
});

expect(container.firstChild).toHaveClass(`${prefix}--toggletip--open`);
expect(container.firstChild).toHaveClass(`${prefix}--popover--open`);
expect(screen.getByText('Toggle')).toHaveAttribute(
'aria-expanded',
'true'
);
});
});
});
});

0 comments on commit 9d1822c

Please sign in to comment.