Chore: Refactor packages/jaeger-ui-components/src/TraceTimelineViewer/ListView to TS (#59873)

.betterer.results

@@ -14,8 +14,8 @@ exports[`no enzyme tests`] = {
     "packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/index.test.tsx:596989456": [
       [14, 35, 13, "RegExp match", "2409514259"]
     ],
-    "packages/jaeger-ui-components/src/TraceTimelineViewer/ListView/index.test.js:1734982398": [
+    "packages/jaeger-ui-components/src/TraceTimelineViewer/ListView/index.test.tsx:3266788928": [
-      [14, 26, 13, "RegExp match", "2409514259"]
+      [14, 56, 13, "RegExp match", "2409514259"]
     ],
     "packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.js:989353473": [
       [15, 17, 13, "RegExp match", "2409514259"]

packages/jaeger-ui-components/src/TraceTimelineViewer/ListView/Positions.test.ts

@@ -16,8 +16,9 @@ import Positions from './Positions';
 
 describe('Positions', () => {
   const bufferLen = 1;
-  const getHeight = (i) => i * 2 + 2;
+  const getHeight = (i: number) => i * 2 + 2;
-  let ps;
+
+  let ps: Positions;
 
   beforeEach(() => {
     ps = new Positions(bufferLen);

packages/jaeger-ui-components/src/TraceTimelineViewer/ListView/index.test.tsx

@@ -12,18 +12,30 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { mount, shallow } from 'enzyme';
+import { mount, ReactWrapper, shallow, ShallowWrapper } from 'enzyme';
 import React from 'react';
 
+import { TNil } from '../../types';
 import { polyfill as polyfillAnimationFrame } from '../../utils/test/requestAnimationFrame';
 
-import ListView from './index';
+import ListView, { TListViewProps } from './index';
 
 // Util to get list of all callbacks added to an event emitter by event type.
 // jest adds "error" event listeners to window, this util makes it easier to
 // ignore those calls.
-function getListenersByType(mockFn) {
+function getListenersByType(
-  const rv = {};
+  mockFn: jest.MockContext<
+    void,
+    [
+      type: string,
+      listener: EventListenerOrEventListenerObject,
+      options?: boolean | AddEventListenerOptions | undefined
+    ]
+  >
+) {
+  const rv: {
+    [eventType: string]: EventListenerOrEventListenerObject[];
+  } = {};
   mockFn.calls.forEach(([eventType, callback]) => {
     if (!rv[eventType]) {
       rv[eventType] = [callback];
@@ -40,25 +52,24 @@ describe('<ListView>', () => {
 
   const DATA_LENGTH = 40;
 
-  function getHeight(index) {
+  function getHeight(index: number) {
     return index * 2 + 2;
   }
 
-  function Item(props) {
+  function Item(props: React.HTMLProps<HTMLDivElement>) {
     const { children, ...rest } = props;
     return <div {...rest}>{children}</div>;
   }
 
-  function renderItem(itemKey, styles, itemIndex, attrs) {
+  const renderItem: TListViewProps['itemRenderer'] = (itemKey, styles, itemIndex, attrs) => {
     return (
       <Item key={itemKey} style={styles} {...attrs}>
         {itemIndex}
       </Item>
     );
-  }
+  };
 
-  let wrapper;
+  let instance: ListView;
-  let instance;
 
   const props = {
     dataLength: DATA_LENGTH,
@@ -74,6 +85,7 @@ describe('<ListView>', () => {
   };
 
   describe('shallow tests', () => {
+    let wrapper: ShallowWrapper<TListViewProps, {}, ListView>;
     beforeEach(() => {
       wrapper = shallow(<ListView {...props} />);
     });
@@ -92,10 +104,10 @@ describe('<ListView>', () => {
 
     it('sets the height of the items according to the height func', () => {
       const items = wrapper.find(Item);
-      const expectedHeights = [];
+      const expectedHeights: number[] = [];
       const heights = items.map((node, i) => {
         expectedHeights.push(getHeight(i));
-        return node.prop('style').height;
+        return node.prop('style')?.height;
       });
       expect(heights.length).toBe(props.initialDraw);
       expect(heights).toEqual(expectedHeights);
@@ -109,12 +121,13 @@ describe('<ListView>', () => {
   });
 
   describe('mount tests', () => {
+    let wrapper: ReactWrapper<TListViewProps, {}, ListView>;
     describe('accessor functions', () => {
       const clientHeight = 2;
       const scrollTop = 3;
 
-      let oldRender;
+      let oldRender: () => JSX.Element;
-      let oldInitWrapper;
+      let oldInitWrapper: (elm: HTMLElement | TNil) => void;
       const initWrapperMock = jest.fn((elm) => {
         if (elm != null) {
           // jsDom requires `defineProperties` instead of just setting the props
@@ -173,14 +186,28 @@ describe('<ListView>', () => {
     });
 
     describe('windowScroller', () => {
-      let windowAddListenerSpy;
+      let windowAddListenerSpy: jest.SpyInstance<
-      let windowRmListenerSpy;
+        void,
+        [
+          type: string,
+          listener: EventListenerOrEventListenerObject,
+          options?: boolean | AddEventListenerOptions | undefined
+        ]
+      >;
+      let windowRmListenerSpy: jest.SpyInstance<
+        void,
+        [
+          type: string,
+          listener: EventListenerOrEventListenerObject,
+          options?: boolean | AddEventListenerOptions | undefined
+        ]
+      >;
 
       beforeEach(() => {
         windowAddListenerSpy = jest.spyOn(window, 'addEventListener');
         windowRmListenerSpy = jest.spyOn(window, 'removeEventListener');
         const wsProps = { ...props, windowScroller: true };
-        wrapper = mount(<ListView {...wsProps} />);
+        wrapper = mount(<ListView {...(wsProps as unknown as TListViewProps)} />);
         instance = wrapper.instance();
       });
 

packages/jaeger-ui-components/src/TraceTimelineViewer/ListView/index.tsx

@@ -27,7 +27,7 @@ type TWrapperProps = {
 /**
  * @typedef
  */
-type TListViewProps = {
+export type TListViewProps = {
   /**
    * Number of elements in the list.
    */