migrate: Migrate ExternalLinks component from enzyme to RTL

Signed-off-by: Eshaan Aggarwal <[email protected]>
jaegertracing · Dec 24, 2023 · e192be6 · e192be6
1 parent 3cc0e88
commit e192be6
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 22 deletions.
diff --git a/packages/jaeger-ui/src/components/common/ExternalLinks.test.js b/packages/jaeger-ui/src/components/common/ExternalLinks.test.js
@@ -13,40 +13,46 @@
 // limitations under the License.
 
 import React from 'react';
-import { shallow } from 'enzyme';
-import { Dropdown } from 'antd';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import ExternalLinks from './ExternalLinks';
 
 describe('<ExternalLinks>', () => {
-  describe('render  links links', () => {
+  describe('renders multiple links correctly', () => {
     it('renders dropdown with multiple links', () => {
       const links = [
         { url: 'http://nowhere/', text: 'some text' },
         { url: 'http://other/', text: 'other text' },
         { url: 'http://link/', text: 'link text' },
       ];
 
-      const wrapper = shallow(<ExternalLinks links={links} />);
-      const dropdown = wrapper.find(Dropdown);
-      expect(dropdown.length).toBe(1);
-      const submenuItems = wrapper.props().menu.items;
-      expect(submenuItems.length).toBe(links.length);
-      submenuItems.forEach((subMenu, i) => {
-        expect(subMenu.label.props.href).toBe(links[i].url);
-        expect(subMenu.label.props.children).toBe(links[i].text);
+      render(<ExternalLinks links={links} />);
+
+      // The dropdown should be rendered
+      const dropdown = screen.getByTestId('dropdown');
+      expect(dropdown).toBeInTheDocument();
+
+      // Open the dropdown and check the rendered links
+      fireEvent.click(dropdown);
+
+      const dropdownLinks = screen.getAllByRole('link');
+      expect(dropdownLinks).toHaveLength(links.length);
+      links.forEach(({ text, url }, index) => {
+        expect(dropdownLinks[index]).toHaveAttribute('href', url);
+        expect(dropdownLinks[index]).toHaveAttribute('title', text);
       });
     });
 
-    it('renders one link', () => {
+    it('renders one link correctly', () => {
       const links = [{ url: 'http://nowhere/', text: 'some text' }];
-      const wrapper = shallow(<ExternalLinks links={links} />);
-      const dropdown = wrapper.find(Dropdown);
-      expect(dropdown.length).toBe(0);
-      const linkValues = wrapper.find('LinkValue');
-      expect(linkValues.length).toBe(1);
-      expect(linkValues.prop('href')).toBe(links[0].url);
-      expect(linkValues.prop('title')).toBe(links[0].text);
+      render(<ExternalLinks links={links} />);
+
+      // There should be no dropdown rendered
+      expect(screen.queryByTestId('dropdown')).toBeNull();
+
+      // There should be one link rendered with the correct title and href
+      expect(screen.getByRole('link', { title: links[0].text })).toHaveAttribute('href', links[0].url);
     });
   });
 });
diff --git a/packages/jaeger-ui/src/components/common/ExternalLinks.tsx b/packages/jaeger-ui/src/components/common/ExternalLinks.tsx
@@ -23,7 +23,7 @@ type ExternalLinksProps = {
 
 const LinkValue = (props: {
   href: string;
-  title?: string;
+  title: string;
   children?: React.ReactNode;
   className?: string;
 }) => (
@@ -41,7 +41,11 @@ const LinkValue = (props: {
 // export for testing
 export const linkValueList = (links: Link[]) => {
   const dropdownItems = links.map(({ text, url }, index) => ({
-    label: <LinkValue href={url}>{text}</LinkValue>,
+    label: (
+      <LinkValue href={url} title={text}>
+        {text}
+      </LinkValue>
+    ),
     key: `${url}-${index}`,
   }));
 
@@ -52,12 +56,14 @@ export const linkValueList = (links: Link[]) => {
 // Example: https://github.com/jaegertracing/jaeger-ui/assets/94157520/7f0d84bc-c2fb-488c-9e50-1ec9484ea1e6
 export default function ExternalLinks(props: ExternalLinksProps) {
   const { links } = props;
+
   if (links.length === 1) {
     return <LinkValue href={links[0].url} title={links[0].text} className="TracePageHeader--back" />;
   }
+
   return (
     <Dropdown menu={{ items: linkValueList(links) }} placement="bottomRight" trigger={['click']}>
-      <a className="TracePageHeader--back">
+      <a className="TracePageHeader--back" data-testid="dropdown">
         <NewWindowIcon isLarge />
       </a>
     </Dropdown>