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();