diff --git a/src/lib/components/infomessage/InfoMessage.component.tsx b/src/lib/components/infomessage/InfoMessage.component.tsx index 89604e4aec..17e82595c0 100644 --- a/src/lib/components/infomessage/InfoMessage.component.tsx +++ b/src/lib/components/infomessage/InfoMessage.component.tsx @@ -8,6 +8,7 @@ type Props = { title: string | React.ReactNode; content: React.ReactNode; link?: string; + linkText?: string; }; const InfoMessageContainer = styled.div` @@ -20,7 +21,7 @@ const InfoMessageContainer = styled.div` color: white; `; -export const InfoMessage = ({ title, content, link }: Props) => { +export const InfoMessage = ({ title, content, link, linkText }: Props) => { const { containerRef, backgroundColor } = useComputeBackgroundColor(); const theme = useTheme(); @@ -38,7 +39,7 @@ export const InfoMessage = ({ title, content, link }: Props) => { {link && ( - More info + {linkText || 'More info'} )} diff --git a/src/lib/components/infomessage/InfoMessageUtils.test.tsx b/src/lib/components/infomessage/InfoMessageUtils.test.tsx index cfbd03429e..e58f9735f1 100644 --- a/src/lib/components/infomessage/InfoMessageUtils.test.tsx +++ b/src/lib/components/infomessage/InfoMessageUtils.test.tsx @@ -1,8 +1,66 @@ +import React from 'react'; import '@testing-library/jest-dom'; -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { coreUIAvailableThemes } from '../../style/theme'; import { CoreUiThemeProvider } from '../coreuithemeprovider/CoreUiThemeProvider'; import { useComputeBackgroundColor } from './InfoMessageUtils'; +import { InfoMessage } from './InfoMessage.component'; +import { getWrapper } from '../../testUtils'; + +describe('InfoMessage', () => { + const selectors = { + title: () => screen.getByText('Title'), + content: () => screen.getByText('Content'), + defaultLinkText: () => screen.getByText('More info'), + link: () => screen.getByRole('link'), + linkText: () => screen.getByText('Link text'), + }; + it('should render', () => { + const { Wrapper } = getWrapper(); + render(, { + wrapper: Wrapper, + }); + expect(selectors.title()).toBeInTheDocument(); + expect(selectors.content()).toBeInTheDocument(); + }); + it('should render with link and default link text', () => { + const { Wrapper } = getWrapper(); + render( + , + { + wrapper: Wrapper, + }, + ); + expect(selectors.title()).toBeInTheDocument(); + expect(selectors.content()).toBeInTheDocument(); + expect(selectors.link()).toBeInTheDocument(); + expect(selectors.defaultLinkText()).toBeInTheDocument(); + expect(selectors.link()).toHaveAttribute('href', 'https://www.google.com'); + }); + it('should render with correct link text', () => { + const { Wrapper } = getWrapper(); + render( + , + { + wrapper: Wrapper, + }, + ); + expect(selectors.title()).toBeInTheDocument(); + expect(selectors.content()).toBeInTheDocument(); + expect(selectors.link()).toBeInTheDocument(); + expect(selectors.linkText()).toBeInTheDocument(); + expect(selectors.link()).toHaveAttribute('href', 'https://www.google.com'); + }); +}); describe('useComputeBackgroundColor', () => { const SUT = jest.fn();