@lumx/react 3.20.1-alpha.20 → 3.20.1-alpha.21

package/src/components/tooltip/Tooltip.stories.tsx

@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+
+import { Button, Dialog, Dropdown, Placement, Tooltip } from '@lumx/react';
+import { getSelectArgType } from '@lumx/react/stories/controls/selectArgType';
+import { withChromaticForceScreenSize } from '@lumx/react/stories/decorators/withChromaticForceScreenSize';
+import { ARIA_LINK_MODES } from '@lumx/react/components/tooltip/constants';
+
+const placements = [Placement.TOP, Placement.BOTTOM, Placement.RIGHT, Placement.LEFT];
+const CLOSE_MODES = ['hide', 'unmount'];
+
+export default {
+    title: 'LumX components/tooltip/Tooltip',
+    component: Tooltip,
+    args: Tooltip.defaultProps,
+    argTypes: {
+        placement: getSelectArgType(placements),
+        children: { control: false },
+        closeMode: { control: { type: 'inline-radio' }, options: CLOSE_MODES },
+        ariaLinkMode: { control: { type: 'inline-radio' }, options: ARIA_LINK_MODES },
+    },
+    decorators: [
+        // Force minimum chromatic screen size to make sure the dialog appears in view.
+        withChromaticForceScreenSize(),
+    ],
+};
+
+/** Simple tooltip on a button*/
+export const OnAButton = {
+    args: {
+        label: 'Tooltip label',
+        children: <Button>Button</Button>,
+    },
+};
+
+/** Simple tooltip on a button*/
+export const OnADisabledButton = {
+    args: {
+        ...OnAButton.args,
+        children: <Button isDisabled>Button</Button>,
+    },
+};
+
+/** Forcing the tooltip to appear */
+export const ForceOpen = {
+    args: {
+        ...OnAButton.args,
+        forceOpen: true,
+    },
+};
+
+/** Hide on close instead of unmounting */
+export const CloseModeHide = {
+    args: {
+        ...OnAButton.args,
+        closeMode: 'hide',
+    },
+};
+
+/** Display a multiline tooltip */
+export const MultilineTooltip = {
+    args: {
+        ...OnAButton.args,
+        label: 'First sentence.\nSecond sentence.\nThird sentence.\n',
+    },
+};
+
+/** Tooltip should hide when a dropdown opens */
+export const TooltipWithDropdown = (props: any) => {
+    const [button, setButton] = useState<HTMLElement | null>(null);
+    const [isOpen, setOpen] = useState(false);
+    return (
+        <>
+            <br />
+            <Tooltip label={!isOpen && 'Tooltip'} {...props} placement="top">
+                <Button ref={setButton} onClick={() => setOpen((o) => !o)}>
+                    Anchor
+                </Button>
+            </Tooltip>
+            <Dropdown anchorRef={{ current: button }} isOpen={isOpen} onClose={() => setOpen(false)}>
+                Dropdown
+            </Dropdown>
+        </>
+    );
+};
+
+/** Tooltip should hide when the anchor is hidden */
+export const HideTooltipOnHiddenAnchor = () => {
+    const [isOpen, setOpen] = useState(false);
+    return (
+        <>
+            The tooltip should show when the button is hovered but it should disappear when the dialog get in-between
+            the mouse and the button
+            <br />
+            <Tooltip label="Tooltip label">
+                <Button onClick={() => setOpen((wasOpen) => !wasOpen)}>Open dialog</Button>
+            </Tooltip>
+            <Dialog isOpen={isOpen} onClose={() => setOpen(false)}>
+                Dialog
+            </Dialog>
+        </>
+    );
+};
+HideTooltipOnHiddenAnchor.parameters = { chromatic: { disableSnapshot: true } };
+
+/** Test focusing a tooltip anchor programmatically */
+export const TestProgrammaticFocus = () => {
+    const anchorRef = React.useRef<HTMLButtonElement>(null);
+    return (
+        <>
+            <p>The tooltip should open on keyboard focus but not on programmatic focus (ex: after a click)</p>
+            <Tooltip label="label">
+                <Button ref={anchorRef}>button with label</Button>
+            </Tooltip>
+            <Button onClick={() => anchorRef.current?.focus()}>focus the button</Button>
+        </>
+    );
+};
+TestProgrammaticFocus.parameters = { chromatic: { disableSnapshot: true } };

package/src/components/tooltip/Tooltip.test.tsx

@@ -0,0 +1,417 @@
+import React from 'react';
+
+import { MockInstance } from 'vitest';
+import { Button } from '@lumx/react';
+import { screen, render } from '@testing-library/react';
+import { queryAllByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
+import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
+import userEvent from '@testing-library/user-event';
+import { isFocusVisible } from '@lumx/react/utils/browser/isFocusVisible';
+import { VISUALLY_HIDDEN } from '@lumx/react/constants';
+
+import { Tooltip, TooltipProps } from './Tooltip';
+
+const CLASSNAME = Tooltip.className as string;
+
+vi.mock('@lumx/react/utils/browser/isFocusVisible');
+vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
+// Skip delays
+vi.mock('@lumx/react/constants', async (importActual) => {
+    const actual = (await importActual()) as Record<string, any>;
+    return {
+        ...actual,
+        TOOLTIP_HOVER_DELAY: { open: 0, close: 0 },
+        VISUALLY_HIDDEN: actual.VISUALLY_HIDDEN,
+        CSS_PREFIX: actual.CSS_PREFIX,
+    };
+});
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = async (propsOverride: Partial<TooltipProps> = {}) => {
+    const props: any = { forceOpen: true, label: 'Tooltip label', children: 'Anchor', ...propsOverride };
+    const result = render(<Tooltip {...props} />);
+    const tooltip = screen.queryByRole('tooltip');
+    const anchorWrapper = queryByClassName(document.body, 'lumx-tooltip-anchor-wrapper');
+    return { props, tooltip, anchorWrapper, result };
+};
+
+describe(`<${Tooltip.displayName}>`, () => {
+    describe('render', () => {
+        it('should not render with empty label', async () => {
+            const { tooltip, anchorWrapper } = await setup({
+                label: undefined,
+                forceOpen: true,
+            });
+            expect(tooltip).not.toBeInTheDocument();
+            expect(anchorWrapper).not.toBeInTheDocument();
+        });
+
+        it('should wrap unknown children', async () => {
+            const { tooltip, anchorWrapper } = await setup({
+                label: 'Tooltip label',
+                children: 'Anchor',
+                forceOpen: true,
+            });
+            expect(tooltip).toBeInTheDocument();
+            // Default placement
+            expect(tooltip).toHaveAttribute('data-popper-placement', 'bottom');
+            expect(anchorWrapper).toBeInTheDocument();
+        });
+
+        it('should render with custom placement', async () => {
+            const { tooltip } = await setup({
+                label: 'Tooltip label',
+                children: 'Anchor',
+                forceOpen: true,
+                placement: 'top',
+            });
+            // Custom placement
+            expect(tooltip).toHaveAttribute('data-popper-placement', 'top');
+        });
+
+        it('should not wrap Button', async () => {
+            const { tooltip, anchorWrapper } = await setup({
+                label: 'Tooltip label',
+                children: <Button>Anchor</Button>,
+                forceOpen: true,
+            });
+            expect(tooltip).toBeInTheDocument();
+            expect(anchorWrapper).not.toBeInTheDocument();
+            const button = screen.queryByRole('button', { name: 'Anchor' });
+            expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
+        });
+
+        it('should wrap disabled Button', async () => {
+            const { tooltip, anchorWrapper } = await setup({
+                label: 'Tooltip label',
+                children: <Button isDisabled>Anchor</Button>,
+                forceOpen: true,
+            });
+            expect(tooltip).toBeInTheDocument();
+            expect(anchorWrapper).toBeInTheDocument();
+            expect(anchorWrapper).toHaveAttribute('aria-describedby', tooltip?.id);
+            const button = screen.queryByRole('button', { name: 'Anchor' });
+            expect(button?.parentElement).toBe(anchorWrapper);
+        });
+
+        it('should render multiline', async () => {
+            const { tooltip } = await setup({
+                label: 'First line\nSecond line',
+                forceOpen: true,
+            });
+            expect(tooltip).toBeInTheDocument();
+            const lines = queryAllByTagName(tooltip as any, 'p');
+            expect(lines.length).toBe(2);
+            expect(lines[0]).toHaveTextContent('First line');
+            expect(lines[1]).toHaveTextContent('Second line');
+        });
+
+        it('should have a stable ref', async () => {
+            const ref = React.createRef() as any;
+
+            // Render without a label
+            const result = render(
+                <Tooltip label="">
+                    <span ref={ref}>some text</span>
+                </Tooltip>,
+            );
+            const element = ref.current;
+            expect(element).not.toBeFalsy();
+
+            // Re-render with a label
+            result.rerender(
+                <Tooltip label="Some tooltip">
+                    <span ref={ref}>some updated text</span>
+                </Tooltip>,
+            );
+            // Children ref is stable
+            expect(ref.current === element).toBe(true);
+        });
+
+        describe('closeMode="hide"', () => {
+            it('should not render with empty label', async () => {
+                const { tooltip, anchorWrapper } = await setup({
+                    label: undefined,
+                    forceOpen: true,
+                    closeMode: 'hide',
+                });
+                expect(tooltip).not.toBeInTheDocument();
+                expect(anchorWrapper).not.toBeInTheDocument();
+            });
+
+            it('should render hidden', async () => {
+                const { tooltip } = await setup({
+                    label: 'Tooltip label',
+                    children: <Button>Anchor</Button>,
+                    closeMode: 'hide',
+                    forceOpen: false,
+                });
+                expect(tooltip).toBeInTheDocument();
+                expect(tooltip).toHaveClass(VISUALLY_HIDDEN);
+                // Popper styles should not be applied when closed.
+                expect(tooltip?.style?.transform).toBe('');
+
+                const anchor = screen.getByRole('button', { name: 'Anchor' });
+                await userEvent.hover(anchor);
+                expect(tooltip).not.toHaveClass(VISUALLY_HIDDEN);
+            });
+        });
+
+        describe('ariaLinkMode="aria-describedby"', () => {
+            it('should add aria-describedby on anchor on open', async () => {
+                await setup({
+                    label: 'Tooltip label',
+                    forceOpen: false,
+                    children: <Button aria-describedby=":description1:">Anchor</Button>,
+                });
+                const anchor = screen.getByRole('button', { name: 'Anchor' });
+                expect(anchor).toHaveAttribute('aria-describedby', ':description1:');
+
+                await userEvent.hover(anchor);
+                const tooltip = screen.queryByRole('tooltip');
+                expect(anchor).toHaveAttribute('aria-describedby', `:description1: ${tooltip?.id}`);
+            });
+
+            it('should always add aria-describedby on anchor with closeMode="hide"', async () => {
+                const { tooltip } = await setup({
+                    label: 'Tooltip label',
+                    forceOpen: false,
+                    children: <Button aria-describedby=":description1:">Anchor</Button>,
+                    closeMode: 'hide',
+                });
+                const anchor = screen.getByRole('button', { name: 'Anchor' });
+                expect(anchor).toHaveAttribute('aria-describedby', `:description1: ${tooltip?.id}`);
+            });
+
+            it('should skip aria-describedby if anchor has label', async () => {
+                const { tooltip } = await setup({
+                    label: 'Tooltip label',
+                    forceOpen: true,
+                    children: (
+                        <Button aria-describedby=":description1:" aria-label="Tooltip label">
+                            Anchor
+                        </Button>
+                    ),
+                });
+                expect(tooltip).toBeInTheDocument();
+                expect(screen.getByRole('button')).toHaveAttribute('aria-describedby', `:description1:`);
+            });
+
+            it('should add aria-describedby on anchor wrapper on open', async () => {
+                const { anchorWrapper } = await setup({
+                    label: 'Tooltip label',
+                    forceOpen: false,
+                    children: 'Anchor',
+                });
+                expect(anchorWrapper).not.toHaveAttribute('aria-describedby');
+
+                await userEvent.hover(anchorWrapper as any);
+                const tooltip = screen.queryByRole('tooltip');
+                expect(anchorWrapper).toHaveAttribute('aria-describedby', tooltip?.id);
+            });
+
+            it('should always add aria-describedby on anchor wrapper with closeMode="hide"', async () => {
+                const { tooltip, anchorWrapper } = await setup({
+                    label: 'Tooltip label',
+                    forceOpen: false,
+                    children: 'Anchor',
+                    closeMode: 'hide',
+                });
+                expect(anchorWrapper).toHaveAttribute('aria-describedby', `${tooltip?.id}`);
+            });
+        });
+
+        describe('ariaLinkMode="aria-labelledby"', () => {
+            it('should add aria-labelledby on anchor on open', async () => {
+                await setup({
+                    label: 'Tooltip label',
+                    forceOpen: false,
+                    children: <Button aria-labelledby=":label1:">Anchor</Button>,
+                    ariaLinkMode: 'aria-labelledby',
+                });
+                const anchor = screen.getByRole('button', { name: 'Anchor' });
+                expect(anchor).toHaveAttribute('aria-labelledby', ':label1:');
+
+                await userEvent.hover(anchor);
+                const tooltip = screen.queryByRole('tooltip');
+                expect(anchor).toHaveAttribute('aria-labelledby', `:label1: ${tooltip?.id}`);
+            });
+
+            it('should always add aria-labelledby on anchor with closeMode="hide"', async () => {
+                const label = 'Tooltip label';
+                const { tooltip } = await setup({
+                    label,
+                    forceOpen: false,
+                    children: <Button aria-labelledby=":label1:">Anchor</Button>,
+                    ariaLinkMode: 'aria-labelledby',
+                    closeMode: 'hide',
+                });
+                const anchor = screen.queryByRole('button', { name: label });
+                expect(anchor).toBeInTheDocument();
+                expect(anchor).toHaveAttribute('aria-labelledby', `:label1: ${tooltip?.id}`);
+            });
+
+            it('should skip aria-labelledby if anchor has label', async () => {
+                const { tooltip } = await setup({
+                    label: 'Tooltip label',
+                    forceOpen: true,
+                    children: (
+                        <Button aria-labelledby=":label1:" aria-label="Tooltip label">
+                            Anchor
+                        </Button>
+                    ),
+                    ariaLinkMode: 'aria-labelledby',
+                });
+                expect(tooltip).toBeInTheDocument();
+                expect(screen.getByRole('button')).toHaveAttribute('aria-labelledby', `:label1:`);
+            });
+
+            it('should add aria-labelledby on anchor wrapper on open', async () => {
+                const { anchorWrapper } = await setup({
+                    label: 'Tooltip label',
+                    forceOpen: false,
+                    children: 'Anchor',
+                    ariaLinkMode: 'aria-labelledby',
+                });
+                expect(anchorWrapper).not.toHaveAttribute('aria-labelledby');
+
+                await userEvent.hover(anchorWrapper as any);
+                const tooltip = screen.queryByRole('tooltip');
+                expect(anchorWrapper).toHaveAttribute('aria-labelledby', tooltip?.id);
+            });
+
+            it('should always add aria-labelledby on anchor wrapper with closeMode="hide"', async () => {
+                const { tooltip, anchorWrapper } = await setup({
+                    label: 'Tooltip label',
+                    forceOpen: false,
+                    children: 'Anchor',
+                    ariaLinkMode: 'aria-labelledby',
+                    closeMode: 'hide',
+                });
+                expect(anchorWrapper).toHaveAttribute('aria-labelledby', `${tooltip?.id}`);
+            });
+        });
+    });
+
+    describe('activation', () => {
+        it('should activate on anchor hover', async () => {
+            let { tooltip } = await setup({
+                label: 'Tooltip label',
+                children: <Button>Anchor</Button>,
+                forceOpen: false,
+            });
+
+            expect(tooltip).not.toBeInTheDocument();
+
+            // Hover anchor button
+            const button = screen.getByRole('button', { name: 'Anchor' });
+            await userEvent.hover(button);
+
+            // Tooltip opened
+            tooltip = await screen.findByRole('tooltip', { name: 'Tooltip label' });
+            expect(tooltip).toBeInTheDocument();
+
+            // Un-hover anchor button
+            await userEvent.unhover(button);
+
+            expect(button).not.toHaveFocus();
+            // Tooltip closed
+            expect(tooltip).not.toBeInTheDocument();
+        });
+
+        it('should activate on hover anchor and then tooltip', async () => {
+            let { tooltip } = await setup({
+                label: 'Tooltip label',
+                children: <Button>Anchor</Button>,
+                forceOpen: false,
+            });
+
+            expect(tooltip).not.toBeInTheDocument();
+
+            // Hover anchor button
+            const button = screen.getByRole('button', { name: 'Anchor' });
+            await userEvent.hover(button);
+
+            // Tooltip opened
+            tooltip = await screen.findByRole('tooltip', { name: 'Tooltip label' });
+            expect(tooltip).toBeInTheDocument();
+            expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
+
+            // Hover tooltip
+            await userEvent.hover(tooltip);
+            expect(tooltip).toBeInTheDocument();
+            expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
+
+            // Un-hover tooltip
+            await userEvent.unhover(tooltip);
+            expect(button).not.toHaveFocus();
+            // Tooltip closed
+            expect(tooltip).not.toBeInTheDocument();
+        });
+
+        it('should activate on anchor focus visible and close on escape', async () => {
+            (isFocusVisible as unknown as MockInstance).mockReturnValue(true);
+            let { tooltip } = await setup({
+                label: 'Tooltip label',
+                children: <Button>Anchor</Button>,
+                forceOpen: false,
+            });
+
+            expect(tooltip).not.toBeInTheDocument();
+
+            // Focus anchor button
+            await userEvent.tab();
+            const button = screen.getByRole('button', { name: 'Anchor' });
+            expect(button).toHaveFocus();
+
+            // Tooltip opened
+            tooltip = await screen.findByRole('tooltip', { name: 'Tooltip label' });
+            expect(tooltip).toBeInTheDocument();
+            expect(button).toHaveAttribute('aria-describedby', tooltip?.id);
+
+            // Focus next element => close tooltip
+            await userEvent.tab();
+            expect(button).not.toHaveFocus();
+            expect(tooltip).not.toBeInTheDocument();
+
+            // Focus again
+            await userEvent.tab({ shift: true });
+            tooltip = await screen.findByRole('tooltip', { name: 'Tooltip label' });
+            expect(tooltip).toBeInTheDocument();
+
+            // Escape pressed => close tooltip
+            await userEvent.keyboard('{Escape}');
+            expect(tooltip).not.toBeInTheDocument();
+        });
+
+        it('should not activate on anchor focus if not visible', async () => {
+            (isFocusVisible as unknown as MockInstance).mockReturnValue(false);
+            let { tooltip } = await setup({
+                label: 'Tooltip label',
+                children: <Button>Anchor</Button>,
+                forceOpen: false,
+            });
+
+            expect(tooltip).not.toBeInTheDocument();
+
+            // Focus anchor button
+            await userEvent.tab();
+            const button = screen.getByRole('button', { name: 'Anchor' });
+            expect(button).toHaveFocus();
+
+            // Tooltip not opening
+            tooltip = screen.queryByRole('tooltip', { name: 'Tooltip label' });
+            expect(tooltip).not.toBeInTheDocument();
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: CLASSNAME,
+        forwardClassName: 'tooltip',
+        forwardAttributes: 'tooltip',
+        forwardRef: 'tooltip',
+    });
+});