Migrate ResultItem tests (#2742)

## Which problem is this PR solving?
- Part of #1668

## Description of the changes
- Migrates `ResultItem` test

## How was this change tested?
- Test itself.

## Checklist
- [x] I have read
https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
- [x] I have signed all commits
- [x] I have added unit tests for the new functionality
- [x] I have run lint and test steps successfully
  - for `jaeger`: `make lint test`
  - for `jaeger-ui`: `npm run lint` and `npm run test`

---------

Signed-off-by: nojaf <[email protected]>

Author: nojaf

packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItem.test.js

@@ -13,33 +13,100 @@
 // limitations under the License.
 
 import React from 'react';
-import { Tag } from 'antd';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { MemoryRouter } from 'react-router-dom';
 
 import ResultItem from './ResultItem';
 import * as markers from './ResultItem.markers';
 import traceGenerator from '../../../demo/trace-generators';
 import transformTraceData from '../../../model/transform-trace-data';
 
-const trace = transformTraceData(traceGenerator.trace({}));
+// Helper function to wrap component with Router
+const renderWithRouter = ui => {
+  return render(ui, { wrapper: MemoryRouter });
+};
+
+let trace; // Use let to allow modification in tests
+
+beforeEach(() => {
+  // Reset trace data before each test.
+  // Some tests modify the trace object (e.g., adding tags).
+  // Resetting ensures that each test starts with a clean, unmodified trace,
+  // preventing side effects between tests and maintaining test isolation.
+  trace = transformTraceData(traceGenerator.trace({}));
+});
 
 it('<ResultItem /> should render base case correctly', () => {
-  const wrapper = shallow(<ResultItem trace={trace} durationPercent={50} linkTo="" />);
-  const numberOfSpanText = wrapper.find(`[data-test="${markers.NUM_SPANS}"]`).first().render().text();
-  const serviceTags = wrapper.find(`[data-test="${markers.SERVICE_TAGS}"]`).find(Tag);
-  expect(numberOfSpanText).toBe(`${trace.spans.length} Spans`);
+  renderWithRouter(
+    <ResultItem
+      trace={trace}
+      durationPercent={50}
+      linkTo=""
+      toggleComparison={() => {}}
+      isInDiffCohort={false}
+      disableComparision={false}
+    />
+  );
+  expect(screen.getByTestId(markers.NUM_SPANS)).toHaveTextContent(`${trace.spans.length} Spans`);
+  const serviceTagsContainer = screen.getByTestId(markers.SERVICE_TAGS);
+  const serviceTags = serviceTagsContainer.querySelectorAll('li > .ResultItem--serviceTag');
   expect(serviceTags).toHaveLength(trace.services.length);
 });
 
 it('<ResultItem /> should not render any ServiceTags when there are no services', () => {
-  const wrapper = shallow(<ResultItem trace={{ ...trace, services: [] }} durationPercent={50} linkTo="" />);
-  const serviceTags = wrapper.find(`[data-test="${markers.SERVICE_TAGS}"]`).find(Tag);
+  const traceWithoutServices = { ...trace, services: [] };
+  renderWithRouter(
+    <ResultItem
+      trace={traceWithoutServices}
+      durationPercent={50}
+      linkTo=""
+      toggleComparison={() => {}}
+      isInDiffCohort={false}
+      disableComparision={false}
+    />
+  );
+  const serviceTagsContainer = screen.getByTestId(markers.SERVICE_TAGS);
+  const serviceTags = serviceTagsContainer.querySelectorAll('li > .ResultItem--serviceTag');
   expect(serviceTags).toHaveLength(0);
 });
 
 it('<ResultItem /> should render error icon on ServiceTags that have an error tag', () => {
-  trace.spans[0].tags.push({ key: 'error', value: true });
-  const wrapper = shallow(<ResultItem trace={trace} durationPercent={50} linkTo="" />);
-  const errorServiceTags = wrapper.find('.ResultItem--errorIcon').getElements();
-  expect(errorServiceTags).toHaveLength(1);
+  // Assume trace has services and spans from the generator. Assert this assumption.
+  expect(trace.services).toBeDefined();
+  expect(trace.services.length).toBeGreaterThan(0);
+  expect(trace.spans).toBeDefined();
+  expect(trace.spans.length).toBeGreaterThan(0);
+
+  // Find the first span belonging to the first service.
+  const firstService = trace.services[0];
+  const spanWithError = trace.spans.find(span => span.process.serviceName === firstService.name);
+
+  // Assert that a span for the first service was found. If not, the fixture is wrong.
+  expect(spanWithError).toBeDefined();
+
+  // Add the error tag directly, initializing tags array if necessary.
+  spanWithError.tags = spanWithError.tags || [];
+  spanWithError.tags.push({ key: 'error', value: true });
+
+  renderWithRouter(
+    <ResultItem
+      trace={trace}
+      durationPercent={50}
+      linkTo=""
+      toggleComparison={() => {}}
+      isInDiffCohort={false}
+      disableComparision={false}
+    />
+  );
+
+  const serviceTagsContainer = screen.getByTestId(markers.SERVICE_TAGS);
+  // Find the tag associated with the service that should have the error
+  const errorTag = Array.from(serviceTagsContainer.querySelectorAll('li > .ResultItem--serviceTag')).find(
+    tag => tag.textContent.includes(firstService.name)
+  );
+
+  // Assert that the specific service tag is found and has the error icon
+  expect(errorTag).toBeDefined();
+  expect(errorTag.querySelector('.ResultItem--errorIcon')).toBeInTheDocument();
 });

packages/jaeger-ui/src/components/SearchTracePage/SearchResults/ResultItem.tsx

@@ -101,7 +101,7 @@ export default class ResultItem extends React.PureComponent<Props, State> {
         <Link to={linkTo}>
           <Row>
             <Col span={4} className="ub-p2">
-              <Tag className="ub-m1" data-test={markers.NUM_SPANS}>
+              <Tag className="ub-m1" data-testid={markers.NUM_SPANS}>
                 {this.state.numSpans} Span{this.state.numSpans > 1 && 's'}
               </Tag>
               {Boolean(this.state.numErredSpans) && (
@@ -111,7 +111,7 @@ export default class ResultItem extends React.PureComponent<Props, State> {
               )}
             </Col>
             <Col span={16} className="ub-p2">
-              <ul className="ub-list-reset" data-test={markers.SERVICE_TAGS}>
+              <ul className="ub-list-reset" data-testid={markers.SERVICE_TAGS}>
                 {_sortBy(services, s => s.name).map(service => {
                   const { name, numberOfSpans: count } = service;
                   return (