diff --git a/ui/src/common/Linkify.js b/ui/src/common/Linkify.js
index 65d5c70af..87947905a 100644
--- a/ui/src/common/Linkify.js
+++ b/ui/src/common/Linkify.js
@@ -54,7 +54,10 @@ const Linkify = ({ text, ...rest }) => {
// Push remaining text
if (text.length > lastIndex) {
elements.push(
-
+
)
}
diff --git a/ui/src/common/Linkify.test.js b/ui/src/common/Linkify.test.js
new file mode 100644
index 000000000..fd896f7d2
--- /dev/null
+++ b/ui/src/common/Linkify.test.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import Linkify from './Linkify'
+
+const URL = 'http://www.example.com'
+
+const expectLink = (url) => {
+ const linkEl = screen.getByRole('link')
+ expect(linkEl).not.toBeNull()
+ expect(linkEl?.href).toBe(url)
+}
+
+describe('', () => {
+ it('should render link', () => {
+ render()
+ expectLink(`${URL}/`)
+ expect(screen.getByText(URL)).toBeInTheDocument()
+ })
+
+ it('should render link and text', () => {
+ render()
+ expectLink(`${URL}/`)
+ expect(screen.getByText(/foo/i)).toBeInTheDocument()
+ expect(screen.getByText(URL)).toBeInTheDocument()
+ expect(screen.getByText(/bar/i)).toBeInTheDocument()
+ })
+
+ it('should render only text', () => {
+ render()
+ expect(screen.queryAllByRole('link')).toHaveLength(0)
+ expect(screen.getByText(/foo bar/i)).toBeInTheDocument()
+ })
+})