diff --git a/webapp/channels/src/components/plugin_link_tooltip/index.test.tsx b/webapp/channels/src/components/plugin_link_tooltip/index.test.tsx new file mode 100644 index 0000000000..f8acfb3e8a --- /dev/null +++ b/webapp/channels/src/components/plugin_link_tooltip/index.test.tsx @@ -0,0 +1,135 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react'; + +import {act, renderWithContext, screen, userEvent, waitFor} from 'tests/react_testing_utils'; +import {RootHtmlPortalId} from 'utils/constants'; + +import PluginLinkTooltip from '.'; + +class TestLinkTooltip extends React.PureComponent<{href: string}> { + render() { + if (this.props.href.includes('tooltip')) { + return
{'This is a link tooltip'}
; + } + + return null; + } +} + +describe('PluginLinkTooltip', () => { + const baseState = { + plugins: { + components: { + LinkTooltip: [ + { + id: 'test', + pluginId: 'example.test', + component: TestLinkTooltip, + }, + ], + }, + }, + }; + + test('should show tooltip on hover', async () => { + renderWithContext( + <> + + {'This is a link'} + +
+ , + baseState, + ); + + expect(screen.queryByText('This is a link tooltip')).not.toBeInTheDocument(); + + userEvent.hover(screen.getByText('This is a link')); + await waitFor(() => { + expect(screen.queryByText('This is a link tooltip')).toBeVisible(); + }); + + act(() => { + userEvent.unhover(screen.getByText('This is a link')); + }); + await waitFor(() => { + expect(screen.queryByText('This is a link tooltip')).not.toBeInTheDocument(); + }); + }); + + test('should not take focus when the tooltip appears', async () => { + renderWithContext( + <> +