@vimeo/iris/components/Tip/Tip.test.esm.js

Vimeo Design System

import React__default from 'react';
import { r as render, s as screen } from '../../react.esm-edf204b5.js';
import { u as userEvent } from '../../index-cff9b439.js';
import { ThemeProvider } from 'styled-components';
import { themes } from '../../themes/index.esm.js';
import { Tip } from './Tip.esm.js';
import { Button } from '../Button/Button.esm.js';
import '../../es.typed-array.set-c204e812.js';
import 'os';
import 'tty';
import 'react-dom';
import 'util';
import 'polished';
import '../../color/colors.esm.js';
import '../../tslib.es6-7f0e734f.js';
import './Tip.settings.esm.js';
import './Tip.style.esm.js';
import '../../utils/HOCs/withIris.esm.js';
import '../../utils/hooks/usePortal_DEPRECATED/usePortal_DEPRECATED.esm.js';
import '../../utils/hooks/usePortal_DEPRECATED/usePortal_DEPRECATED.style.esm.js';
import '../../utils/hooks/usePortal_DEPRECATED/useMountAnimations.esm.js';
import '../../utils/hooks/useIsomorphicEffect.esm.js';
import '../../utils/DOM/getComputedStyles.esm.js';
import '../../utils/DOM/animate.esm.js';
import '../../utils/events/onEvent.esm.js';
import '../../utils/hooks/usePortal_DEPRECATED/coordinates.esm.js';
import '../../utils/hooks/usePortal_DEPRECATED/Anchor.esm.js';
import '../../utils/hooks/useOutsideClick.esm.js';
import '../../utils/DOM/SSR.esm.js';
import '../../utils/DOM/createPortalOutlet.esm.js';
import '../../utils/DOM/createElement.esm.js';
import '../../utils/hooks/useIrisError.esm.js';
import '../../utils/general/generateUID.esm.js';
import '../../typography/Paragraph/Paragraph.esm.js';
import '../../typography/Paragraph/Paragraph.style.esm.js';
import '../../typography/Text/Text.esm.js';
import '../../typography/Text/Text.style.esm.js';
import '../../typography/typography.esm.js';
import '../../tokens/core.esm.js';
import '../../tokens/color/index.esm.js';
import '../../tokens/color/background/background.esm.js';
import '../../tokens/util/readToken.esm.js';
import '../../tokens/util/clamp.esm.js';
import '../../tokens/color/format/format.esm.js';
import '../../tokens/color/format/primary.esm.js';
import '../../tokens/color/format/secondary.esm.js';
import '../../tokens/color/format/tertiary.esm.js';
import '../../tokens/color/rainbow/rainbow.esm.js';
import '../../tokens/color/rainbow/conic/index.esm.js';
import '../../tokens/color/rainbow/conic/sm.esm.js';
import '../../tokens/color/rainbow/conic/xl.esm.js';
import '../../tokens/color/rainbow/linear/index.esm.js';
import '../../tokens/color/rainbow/linear/sm.esm.js';
import '../../tokens/color/rainbow/linear/xl.esm.js';
import '../../tokens/color/livestream/livestream.esm.js';
import '../../tokens/color/status/status.esm.js';
import '../../tokens/color/status/caution.esm.js';
import '../../tokens/color/status/negative.esm.js';
import '../../tokens/color/status/positive.esm.js';
import '../../tokens/color/stroke/stroke.esm.js';
import '../../tokens/color/surface/surface.esm.js';
import '../../tokens/color/text/text.esm.js';
import '../../tokens/util/round.esm.js';
import '../../tokens/color/upsell/upsell.esm.js';
import '../../tokens/color/upsell/sm.esm.js';
import '../../tokens/color/upsell/xl.esm.js';
import '../../tokens/color/upsell/new.esm.js';
import '../../tokens/edge/edge.esm.js';
import '../../tokens/space/space.esm.js';
import '../../tokens/typography/index.esm.js';
import '../../tokens/typography/size/size.esm.js';
import '../../typography/Text/EditableText.esm.js';
import '../../utils/hooks/useLayoutStyles.esm.js';
import '../../utils/DOM/geometry.esm.js';
import '../../utils/css.esm.js';
import '../Button/Button.style.esm.js';
import '../Button/Button.config.esm.js';
import '../Button/FeaturedIcon.esm.js';
import '../LoaderCircular/LoaderCircular.esm.js';
import '../LoaderCircular/LoaderCircular.style.esm.js';
import '../../utils/hooks/useDeprecate.esm.js';
import '../../utils/general/mergeReactRefs.esm.js';

describe('Tip', function () {
    it('triggers by hovering the wrapped button', function () {
        render(React__default.createElement(ThemeProvider, { theme: themes['light'] },
            React__default.createElement(Tip, { content: "tip", "data-testid": "tip", active: false },
                React__default.createElement(Button, null, "Button"))));
        var button = screen.getByText(/button/i);
        userEvent.hover(button).then(function () {
            var tip = screen.getByTestId('tip');
            expect(tip).toBeInTheDocument();
        });
    });
    it('triggers by clicking the wrapped button', function () {
        render(React__default.createElement(ThemeProvider, { theme: themes['light'] },
            React__default.createElement(Tip, { content: "tip", "data-testid": "tip", trigger: "click" },
                React__default.createElement(Button, null, "Button"))));
        var button = screen.getByText(/Button/i);
        expect(button).toBeInTheDocument();
        userEvent.click(button).then(function () {
            var tip = screen.getByTestId('tip');
            expect(tip).toBeInTheDocument();
        });
    });
});
it('has a text content', function () {
    render(React__default.createElement(ThemeProvider, { theme: themes['light'] },
        React__default.createElement(Tip, { content: "this is a text", "data-testid": "tip", active: true },
            React__default.createElement(Button, null, "Button"))));
    var tip = screen.getByText('this is a text');
    expect(tip).toHaveTextContent('this is a text');
});
it('is not visible on hovering the wrapped button when disabled', function () {
    render(React__default.createElement(ThemeProvider, { theme: themes['light'] },
        React__default.createElement(Tip, { content: "tip", "data-testid": "tip", disabled: true },
            React__default.createElement(Button, null, "Button"))));
    var button = screen.getByText(/Button/i);
    userEvent.hover(button).then(function () {
        var tip = screen.getByTestId('tip');
        expect(tip).not.toBeInTheDocument();
    });
});
it('can recieve children component as prop and render them', function () {
    render(React__default.createElement(ThemeProvider, { theme: themes['light'] },
        React__default.createElement(Tip, { content: "tip", "data-testid": "tip", children: React__default.createElement(Button, null, "Button") })));
    var button = screen.getByText(/Button/i);
    expect(button).toBeInTheDocument();
    userEvent.hover(button).then(function () {
        var tip = screen.getByTestId('tip');
        expect(tip).toBeInTheDocument();
    });
});