test: migrate SearchableSelect and TraceId tests from Enzyme to RTL (#2869)

Converted tests for SearchableSelect and TraceId components from Enzyme
to React Testing Library. Replaced snapshot and Enzyme-specific logic
with RTL assertions while maintaining full test coverage.

---------

Signed-off-by: Vishvamsinh Vaghela <[email protected]>

Author: vishvamsinh28

packages/jaeger-ui/src/components/common/SearchableSelect.test.js

@@ -13,22 +13,21 @@
 // limitations under the License.
 
 import React from 'react';
-import { shallow } from 'enzyme';
-
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
 import { Select } from 'antd';
 import SearchableSelect, { filterOptionsByLabel } from './SearchableSelect';
 
 describe('SearchableSelect', () => {
-  let wrapper;
-
   const options = [
     { label: 'Test 1', value: 'test1' },
     { label: 'Test 2', value: 'test2' },
     { label: 'Test 3', value: 'test3' },
   ];
 
-  beforeEach(() => {
-    wrapper = shallow(
+  it('renders all options when dropdown is opened', async () => {
+    render(
       <SearchableSelect>
         {options.map((option, i) => (
           <Select.Option key={option.value} value={option.value} data-testid={`option-${i}`}>
@@ -37,64 +36,62 @@ describe('SearchableSelect', () => {
         ))}
       </SearchableSelect>
     );
-  });
 
-  it('SearchableSelect renders with all props and options', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
+    const select = screen.getByRole('combobox');
+    await userEvent.click(select);
 
-  it('search is enabled', () => {
-    expect(wrapper.props().showSearch).toBe(true);
+    await Promise.all([
+      screen.findByTestId('option-0'),
+      screen.findByTestId('option-1'),
+      screen.findByTestId('option-2'),
+    ]);
+
+    expect(screen.getByTestId('option-0')).toHaveTextContent('Test 1');
+    expect(screen.getByTestId('option-1')).toHaveTextContent('Test 2');
+    expect(screen.getByTestId('option-2')).toHaveTextContent('Test 3');
   });
 
-  it('renders all the options correctly', () => {
-    const ops = wrapper.find(Select.Option);
+  it('filters options based on input when showSearch is enabled', async () => {
+    render(
+      <SearchableSelect>
+        <Select.Option value="apple">Apple</Select.Option>
+        <Select.Option value="banana">Banana</Select.Option>
+      </SearchableSelect>
+    );
 
-    expect(ops.length).toBe(3);
+    const select = screen.getByRole('combobox');
+    await userEvent.click(select);
+    await userEvent.type(select, 'ban');
 
-    ops.forEach((op, i) => {
-      expect(op.props().value).toBe(options[i].value);
-      expect(op.props().children).toBe(options[i].label);
-    });
+    expect(screen.getByText('Banana')).toBeInTheDocument();
+    expect(screen.queryByText('Apple')).not.toBeInTheDocument();
   });
 });
 
 describe('filterOptionsByLabel', () => {
-  const options = [
-    {
-      children: 'Test 1',
-      label: 'Test 1',
-      value: 'test1',
-    },
-  ];
+  const option = {
+    children: 'Test 1',
+    label: 'Test 1',
+    value: 'test1',
+  };
 
   it('should return true when passed empty input', () => {
-    const input = filterOptionsByLabel('', options[0]);
-
-    expect(input).toBe(true);
+    expect(filterOptionsByLabel('', option)).toBe(true);
   });
 
   it('should return true when passed matching lowercase string', () => {
-    const input = filterOptionsByLabel('test', options[0]);
-
-    expect(input).toBe(true);
+    expect(filterOptionsByLabel('test', option)).toBe(true);
   });
 
   it('should return true when passed matching uppercase string', () => {
-    const input = filterOptionsByLabel('TEST', options[0]);
-
-    expect(input).toBe(true);
+    expect(filterOptionsByLabel('TEST', option)).toBe(true);
   });
 
   it('should return false when passed non-matching', () => {
-    const input = filterOptionsByLabel('jaeger', options[0]);
-
-    expect(input).toBe(false);
+    expect(filterOptionsByLabel('jaeger', option)).toBe(false);
   });
 
   it('should return false when passed null option', () => {
-    const input = filterOptionsByLabel('jaeger', null);
-
-    expect(input).toBe(false);
+    expect(filterOptionsByLabel('jaeger', null)).toBe(false);
   });
 });

packages/jaeger-ui/src/components/common/TraceId.test.js

@@ -13,7 +13,8 @@
 // limitations under the License.
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { TraceId } from './TraceId';
 import { getConfigValue } from '../../utils/config/get-config';
 
@@ -26,8 +27,6 @@ describe('TraceIdDisplayLength', () => {
   const MOCK_TRACE_ID = '12345678901234567890';
   const CUSTOM_CLASS = 'custom-class';
 
-  let wrapper;
-
   const defaultProps = {
     traceId: MOCK_TRACE_ID,
   };
@@ -36,26 +35,28 @@ describe('TraceIdDisplayLength', () => {
     jest.clearAllMocks();
   });
 
-  const createWrapper = (props = {}) => {
-    return shallow(<TraceId {...defaultProps} {...props} />);
+  const renderComponent = (props = {}) => {
+    render(<TraceId {...defaultProps} {...props} />);
   };
 
   describe('TraceIdDisplayLength Component', () => {
     it('renders the default traceIdLength 7', () => {
       getConfigValue.mockReturnValue(undefined);
-      wrapper = createWrapper();
+      renderComponent();
 
-      const displayedText = wrapper.text();
-      expect(displayedText).toEqual(MOCK_TRACE_ID.slice(0, DEFAULT_LENGTH));
+      const displayed = MOCK_TRACE_ID.slice(0, DEFAULT_LENGTH);
+      expect(screen.getByText(displayed)).toBeInTheDocument();
+      expect(screen.queryByText(MOCK_TRACE_ID.slice(0, DEFAULT_LENGTH + 1))).not.toBeInTheDocument();
     });
 
     it('renders the config length when provided', () => {
       const configuredLength = 5;
       getConfigValue.mockReturnValue(configuredLength);
-      wrapper = createWrapper();
+      renderComponent();
 
-      const displayedText = wrapper.text();
-      expect(displayedText).toEqual(MOCK_TRACE_ID.slice(0, configuredLength));
+      const displayed = MOCK_TRACE_ID.slice(0, configuredLength);
+      expect(screen.getByText(displayed)).toBeInTheDocument();
+      expect(screen.queryByText(MOCK_TRACE_ID.slice(0, configuredLength + 1))).not.toBeInTheDocument();
     });
   });
 
@@ -65,36 +66,43 @@ describe('TraceIdDisplayLength', () => {
       const configuredLength = 10;
       getConfigValue.mockReturnValue(configuredLength);
 
-      wrapper = createWrapper({ traceId: shortTraceId });
-      expect(wrapper.text()).toEqual(shortTraceId);
+      renderComponent({ traceId: shortTraceId });
+      expect(screen.getByText(shortTraceId)).toBeInTheDocument();
     });
 
-    it('renders when traceId is undefiend', () => {
-      wrapper = createWrapper({ traceId: '' });
-      expect(wrapper.text()).toEqual('');
+    it('renders an empty <small> element when traceId is an empty string', () => {
+      const { container } = render(<TraceId traceId="" />);
+      const el = container.querySelector('small');
+      expect(el).toBeInTheDocument();
+      expect(el).toBeEmptyDOMElement();
     });
   });
 
   describe('Style handling', () => {
     it('applies custom className when provided', () => {
-      wrapper = createWrapper({ className: CUSTOM_CLASS });
-      expect(wrapper.hasClass(CUSTOM_CLASS)).toBe(true);
+      getConfigValue.mockReturnValue(undefined);
+      renderComponent({ className: CUSTOM_CLASS });
+
+      const el = screen.getByText(MOCK_TRACE_ID.slice(0, DEFAULT_LENGTH));
+      expect(el).toHaveClass(CUSTOM_CLASS);
     });
 
     it('default classes for styling', () => {
-      wrapper = createWrapper();
-      expect(wrapper.hasClass('TraceIDLength')).toBe(true);
-      expect(wrapper.hasClass('u-tx-muted')).toBe(true);
+      renderComponent();
+      const el = screen.getByText(MOCK_TRACE_ID.slice(0, DEFAULT_LENGTH));
+
+      expect(el).toHaveClass('TraceIDLength');
+      expect(el).toHaveClass('u-tx-muted');
     });
 
     it('adds a length-based class depending on the configuration', () => {
       getConfigValue.mockReturnValue(DEFAULT_LENGTH);
-      wrapper = createWrapper();
-      expect(wrapper.hasClass('TraceIDLength--short')).toBe(true);
+      renderComponent();
+      expect(screen.getByText(MOCK_TRACE_ID.slice(0, DEFAULT_LENGTH))).toHaveClass('TraceIDLength--short');
 
       getConfigValue.mockReturnValue(32);
-      wrapper = createWrapper();
-      expect(wrapper.hasClass('TraceIDLength--full')).toBe(true);
+      renderComponent();
+      expect(screen.getByText(MOCK_TRACE_ID.slice(0, 32))).toHaveClass('TraceIDLength--full');
     });
   });
 });