Fix TracePageHeader and TracePageSearchBar tests

Signed-off-by: Davit Yeghshatyan <[email protected]>
jaegertracing · Aug 22, 2018 · 98ca290 · 98ca290
1 parent 7bdc815
commit 98ca290
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 20 deletions.
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader.js
@@ -15,7 +15,7 @@
 // limitations under the License.
 
 import * as React from 'react';
-import { Button, Dropdown, Icon, Menu } from 'antd';
+import { Button, Dropdown, Icon, Input, Menu } from 'antd';
 import IoChevronDown from 'react-icons/lib/io/chevron-down';
 import IoChevronRight from 'react-icons/lib/io/chevron-right';
 import IoIosFilingOutline from 'react-icons/lib/io/ios-filing-outline';
@@ -41,6 +41,7 @@ type TracePageHeaderProps = {
   prevResult: () => void,
   nextResult: () => void,
   clearSearch: () => void,
+  forwardedRef: { current: Input | null },
   resultCount: number,
   archiveButtonVisible: boolean,
   onArchiveClicked: () => void,
@@ -90,7 +91,7 @@ export const HEADER_ITEMS = [
   },
 ];
 
-function TracePageHeader(props: TracePageHeaderProps, ref: any) {
+export function TracePageHeaderFn(props: TracePageHeaderProps) {
   const {
     archiveButtonVisible,
     onArchiveClicked,
@@ -109,6 +110,7 @@ function TracePageHeader(props: TracePageHeaderProps, ref: any) {
     nextResult,
     clearSearch,
     resultCount,
+    forwardedRef,
   } = props;
 
   if (!traceID) {
@@ -185,7 +187,7 @@ function TracePageHeader(props: TracePageHeaderProps, ref: any) {
           nextResult={nextResult}
           clearSearch={clearSearch}
           resultCount={resultCount}
-          ref={ref}
+          ref={forwardedRef}
         />
         <Dropdown overlay={viewMenu}>
           <Button className="ub-mr2">
@@ -206,4 +208,4 @@ function TracePageHeader(props: TracePageHeaderProps, ref: any) {
 
 // ghetto fabulous cast because the 16.3 API is not in flow yet
 // https://github.com/facebook/flow/issues/6103
-export default (React: any).forwardRef(TracePageHeader);
+export default (React: any).forwardRef((props, ref) => <TracePageHeaderFn {...props} forwardedRef={ref} />);
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageHeader.test.js b/packages/jaeger-ui/src/components/TracePage/TracePageHeader.test.js
@@ -15,7 +15,7 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 
-import TracePageHeader, { HEADER_ITEMS } from './TracePageHeader';
+import { TracePageHeaderFn as TracePageHeader, HEADER_ITEMS } from './TracePageHeader';
 
 describe('<TracePageHeader>', () => {
   const defaultProps = {

diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageSearchBar.js b/packages/jaeger-ui/src/components/TracePage/TracePageSearchBar.js
@@ -28,14 +28,21 @@ type TracePageSearchBarProps = {
   nextResult: () => void,
   clearSearch: () => void,
   resultCount: number,
+  forwardedRef: { current: Input | null },
 };
 
-function TracePageSearchBar(props: TracePageSearchBarProps, ref: any) {
-  const { prevResult, nextResult, clearSearch, resultCount, updateTextFilter, textFilter } = props;
+export function TracePageSearchBarFn(props: TracePageSearchBarProps) {
+  const {
+    prevResult,
+    nextResult,
+    clearSearch,
+    resultCount,
+    updateTextFilter,
+    textFilter,
+    forwardedRef,
+  } = props;
 
-  const count = textFilter ? (
-    <span className="TracePageSearchBar--count">{resultCount.toString()}</span>
-  ) : null;
+  const count = textFilter ? <span className="TracePageSearchBar--count">{resultCount}</span> : null;
 
   const updateFilter = event => updateTextFilter(event.target.value);
   const onKeyDown = e => {
@@ -56,7 +63,7 @@ function TracePageSearchBar(props: TracePageSearchBarProps, ref: any) {
           value={textFilter}
           data-test={markers.IN_TRACE_SEARCH}
           suffix={count}
-          ref={ref}
+          ref={forwardedRef}
           onKeyDown={onKeyDown}
           onPressEnter={nextResult}
         />
@@ -70,4 +77,6 @@ function TracePageSearchBar(props: TracePageSearchBarProps, ref: any) {
 
 // ghetto fabulous cast because the 16.3 API is not in flow yet
 // https://github.com/facebook/flow/issues/6103
-export default (React: any).forwardRef(TracePageSearchBar);
+export default (React: any).forwardRef((props, ref) => (
+  <TracePageSearchBarFn {...props} forwardedRef={ref} />
+));
diff --git a/packages/jaeger-ui/src/components/TracePage/TracePageSearchBar.test.js b/packages/jaeger-ui/src/components/TracePage/TracePageSearchBar.test.js
@@ -13,11 +13,10 @@
 // limitations under the License.
 
 import React from 'react';
-import sinon from 'sinon';
 import { shallow } from 'enzyme';
 
 import * as markers from './TracePageSearchBar.markers';
-import TracePageSearchBar from './TracePageSearchBar';
+import { TracePageSearchBarFn as TracePageSearchBar } from './TracePageSearchBar';
 
 describe('<TracePageSearchBar>', () => {
   const defaultProps = {
@@ -35,15 +34,15 @@ describe('<TracePageSearchBar>', () => {
   });
 
   it('calls updateTextFilter() function for onChange of the input', () => {
-    const updateTextFilter = sinon.spy();
+    const updateTextFilter = jest.fn();
     const props = { ...defaultProps, updateTextFilter };
     wrapper = shallow(<TracePageSearchBar {...props} />);
     const event = { target: { value: 'my new value' } };
     wrapper
       .find(`[data-test="${markers.IN_TRACE_SEARCH}"]`)
       .first()
       .simulate('change', event);
-    expect(updateTextFilter.calledWith('my new value')).toBeTruthy();
+    expect(updateTextFilter.mock.calls.length).toBe(1);
   });
 
   it('renders the search bar', () => {

diff --git a/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/index.js b/packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/index.js
@@ -36,7 +36,7 @@ type TraceTimelineViewerProps = {
   collapseOne: (Span[]) => void,
   expandAll: () => void,
   expandOne: (Span[]) => void,
-  findMatchesIDs: Set<string>,
+  findMatchesIDs: ?Set<string>,
   spanNameColumnWidth: number,
   trace: Trace,
   updateNextViewRangeTime: ViewRangeTimeUpdate => void,

diff --git a/packages/jaeger-ui/src/components/TracePage/index.js b/packages/jaeger-ui/src/components/TracePage/index.js
@@ -22,6 +22,7 @@ import _values from 'lodash/values';
 import { connect } from 'react-redux';
 import type { RouterHistory, Match } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
+import { Input } from 'antd';
 
 import ArchiveNotifier from './ArchiveNotifier';
 import { actions as archiveActions } from './ArchiveNotifier/duck';
@@ -101,7 +102,7 @@ export class TracePageImpl extends React.PureComponent<TracePageProps, TracePage
   state: TracePageState;
 
   _headerElm: ?Element;
-  _searchBar: any;
+  _searchBar: { current: Input | null };
   _scrollManager: ScrollManager;
 
   constructor(props: TracePageProps) {
@@ -230,11 +231,11 @@ export class TracePageImpl extends React.PureComponent<TracePageProps, TracePage
 
   clearSearch = () => {
     this.updateTextFilter('');
-    this._searchBar.current.blur();
+    if (this._searchBar.current) this._searchBar.current.blur();
   };
 
   focusOnSearchBar = () => {
-    this._searchBar.current.focus();
+    if (this._searchBar.current) this._searchBar.current.focus();
   };
 
   updateViewRangeTime = (start: number, end: number, trackSrc?: string) => {