diff --git a/webapp/channels/src/components/profile_popover/profile_popover_email.test.tsx b/webapp/channels/src/components/profile_popover/profile_popover_email.test.tsx new file mode 100644 index 0000000000..05674f3eeb --- /dev/null +++ b/webapp/channels/src/components/profile_popover/profile_popover_email.test.tsx @@ -0,0 +1,73 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import {screen, fireEvent} from '@testing-library/react'; +import React from 'react'; + +import {renderWithContext} from 'tests/react_testing_utils'; + +import ProfilePopoverEmail from './profile_popover_email'; + +// Mock window.open +const mockWindowOpen = jest.fn(); +Object.defineProperty(window, 'open', { + writable: true, + value: mockWindowOpen, +}); + +describe('components/ProfilePopoverEmail', () => { + const baseProps = { + email: 'test@example.com', + haveOverrideProp: false, + isBot: false, + }; + + beforeEach(() => { + mockWindowOpen.mockClear(); + }); + + test('should not render when email is empty', () => { + const props = { + ...baseProps, + email: '', + }; + const {container} = renderWithContext(); + expect(container.firstChild).toBeNull(); + }); + + test('should handle different email formats', () => { + const props = { + ...baseProps, + email: 'user.name+tag@domain.co.uk', + }; + renderWithContext(); + + const email = 'user.name+tag@domain.co.uk'; + const emailLink = screen.getByText(email); + expect(emailLink).toBeInTheDocument(); + expect(emailLink.tagName).toBe('A'); + }); + + test('should open email client when clicked', () => { + renderWithContext(); + + const email = 'test@example.com'; + const emailLink = screen.getByText(email); + + fireEvent.click(emailLink); + + expect(mockWindowOpen).toHaveBeenCalledWith('mailto:test@example.com'); + }); + + test('should prevent default click behavior', () => { + renderWithContext(); + + const email = 'test@example.com'; + const emailLink = screen.getByText(email); + + const clickEvent = fireEvent.click(emailLink); + + expect(clickEvent).toBe(false); // fireEvent.click returns false when preventDefault was called + expect(mockWindowOpen).toHaveBeenCalledWith('mailto:test@example.com'); + }); +}); diff --git a/webapp/channels/src/components/profile_popover/profile_popover_email.tsx b/webapp/channels/src/components/profile_popover/profile_popover_email.tsx index 3cbc1cfc01..1406bfec24 100644 --- a/webapp/channels/src/components/profile_popover/profile_popover_email.tsx +++ b/webapp/channels/src/components/profile_popover/profile_popover_email.tsx @@ -17,6 +17,11 @@ const ProfilePopoverEmail = ({ return null; } + function handleEmailClick(e: React.MouseEvent) { + e.preventDefault(); + window.open(`mailto:${email}`); + } + return ( {email} diff --git a/webapp/channels/src/components/profile_popover/profile_popover_phone.test.tsx b/webapp/channels/src/components/profile_popover/profile_popover_phone.test.tsx index 758c521185..ee7a5b1be1 100644 --- a/webapp/channels/src/components/profile_popover/profile_popover_phone.test.tsx +++ b/webapp/channels/src/components/profile_popover/profile_popover_phone.test.tsx @@ -1,7 +1,7 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import {screen} from '@testing-library/react'; +import {screen, fireEvent} from '@testing-library/react'; import React from 'react'; import type {UserPropertyField} from '@mattermost/types/properties'; @@ -12,6 +12,13 @@ import ProfilePopoverPhone from './profile_popover_phone'; import {TestHelper} from '../../utils/test_helper'; +// Mock window.open +const mockWindowOpen = jest.fn(); +Object.defineProperty(window, 'open', { + writable: true, + value: mockWindowOpen, +}); + describe('components/ProfilePopoverPhone', () => { const attribute: UserPropertyField = { id: 'phone_attribute_id', @@ -38,6 +45,10 @@ describe('components/ProfilePopoverPhone', () => { }), }; + beforeEach(() => { + mockWindowOpen.mockClear(); + }); + test('should not render when phone is missing', () => { const props = { ...baseProps, @@ -46,8 +57,8 @@ describe('components/ProfilePopoverPhone', () => { custom_profile_attributes: {}, }), }; - renderWithContext(); - expect(screen.queryByRole('link')).not.toBeInTheDocument(); + const {container} = renderWithContext(); + expect(container.firstChild).toBeNull(); }); test('should not render when phone is empty', () => { @@ -60,17 +71,17 @@ describe('components/ProfilePopoverPhone', () => { }, }), }; - renderWithContext(); - expect(screen.queryByRole('link')).not.toBeInTheDocument(); + const {container} = renderWithContext(); + expect(container.firstChild).toBeNull(); }); test('should render phone with icon', () => { renderWithContext(); const phone = '+1 (555) 123-4567'; - const link = screen.getByRole('link'); - expect(link).toHaveAttribute('href', 'tel:+1 (555) 123-4567'); - expect(link).toHaveTextContent(phone); + const phoneLink = screen.getByText(phone); + expect(phoneLink).toBeInTheDocument(); + expect(phoneLink.tagName).toBe('A'); expect(screen.getByTitle(phone)).toBeInTheDocument(); expect(screen.getByLabelText('phone icon')).toBeInTheDocument(); }); @@ -88,8 +99,31 @@ describe('components/ProfilePopoverPhone', () => { renderWithContext(); const phone = '+44 20 7123 4567'; - const link = screen.getByRole('link'); - expect(link).toHaveAttribute('href', 'tel:+44 20 7123 4567'); - expect(link).toHaveTextContent(phone); + const phoneLink = screen.getByText(phone); + expect(phoneLink).toBeInTheDocument(); + expect(phoneLink.tagName).toBe('A'); + }); + + test('should open phone dialer when clicked', () => { + renderWithContext(); + + const phone = '+1 (555) 123-4567'; + const phoneLink = screen.getByText(phone); + + fireEvent.click(phoneLink); + + expect(mockWindowOpen).toHaveBeenCalledWith('tel:+1 (555) 123-4567'); + }); + + test('should prevent default click behavior', () => { + renderWithContext(); + + const phone = '+1 (555) 123-4567'; + const phoneLink = screen.getByText(phone); + + const clickEvent = fireEvent.click(phoneLink); + + expect(clickEvent).toBe(false); // fireEvent.click returns false when preventDefault was called + expect(mockWindowOpen).toHaveBeenCalledWith('tel:+1 (555) 123-4567'); }); }); diff --git a/webapp/channels/src/components/profile_popover/profile_popover_phone.tsx b/webapp/channels/src/components/profile_popover/profile_popover_phone.tsx index 3a4c868ceb..fd046cfd71 100644 --- a/webapp/channels/src/components/profile_popover/profile_popover_phone.tsx +++ b/webapp/channels/src/components/profile_popover/profile_popover_phone.tsx @@ -18,6 +18,11 @@ const ProfilePopoverPhone = ({attribute, userProfile}: Props) => { return null; } + function handlePhoneClick(e: React.MouseEvent) { + e.preventDefault(); + window.open(`tel:${phone}`); + } + return ( { aria-label='phone icon' /> {phone}