diff --git a/.betterer.results b/.betterer.results index 52dfa2aa57c..08df5db3e94 100644 --- a/.betterer.results +++ b/.betterer.results @@ -8,11 +8,11 @@ exports[`no enzyme tests`] = { "packages/grafana-ui/src/components/QueryField/QueryField.test.tsx:2976628669": [ [0, 26, 13, "RegExp match", "2409514259"] ], - "packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/ViewingLayer.test.js:1676554632": [ - [14, 19, 13, "RegExp match", "2409514259"] + "packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/ViewingLayer.test.tsx:793800575": [ + [14, 35, 13, "RegExp match", "2409514259"] ], - "packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/index.test.js:186764954": [ - [14, 19, 13, "RegExp match", "2409514259"] + "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": [ [14, 26, 13, "RegExp match", "2409514259"] diff --git a/packages/jaeger-ui-components/package.json b/packages/jaeger-ui-components/package.json index 151c54674f4..fd0c72d3aa7 100644 --- a/packages/jaeger-ui-components/package.json +++ b/packages/jaeger-ui-components/package.json @@ -15,6 +15,7 @@ "@testing-library/user-event": "14.4.3", "@types/classnames": "^2.2.7", "@types/deep-freeze": "^0.1.1", + "@types/enzyme": "3.10.12", "@types/hoist-non-react-statics": "^3.3.1", "@types/jest": "29.2.3", "@types/lodash": "4.14.187", diff --git a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/CanvasSpanGraph.test.js b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/CanvasSpanGraph.test.tsx similarity index 100% rename from packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/CanvasSpanGraph.test.js rename to packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/CanvasSpanGraph.test.tsx diff --git a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.test.js b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.test.tsx similarity index 88% rename from packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.test.js rename to packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.test.tsx index ffb2af7c879..ade36dcc5dc 100644 --- a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.test.js +++ b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.test.tsx @@ -12,12 +12,12 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { render, screen, within } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import React from 'react'; -import GraphTicks from './GraphTicks'; +import GraphTicks, { GraphTicksProps } from './GraphTicks'; -const setup = (propOverrides) => { +const setup = (propOverrides?: GraphTicksProps) => { const defaultProps = { items: [ { valueWidth: 100, valueOffset: 25, serviceName: 'a' }, diff --git a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.tsx b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.tsx index ce2244456ee..5827fd07110 100644 --- a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.tsx +++ b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/GraphTicks.tsx @@ -27,7 +27,7 @@ const getStyles = () => { }; }; -type GraphTicksProps = { +export type GraphTicksProps = { numTicks: number; }; diff --git a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.test.js b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.test.tsx similarity index 89% rename from packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.test.js rename to packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.test.tsx index 1f1ca955b78..384e047bcc9 100644 --- a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.test.js +++ b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.test.tsx @@ -15,19 +15,19 @@ import { render, screen, fireEvent, within } from '@testing-library/react'; import React from 'react'; -import Scrubber from './Scrubber'; +import Scrubber, { ScrubberProps } from './Scrubber'; describe('', () => { const defaultProps = { position: 0, }; - let rerender; + let rerender: (arg0: JSX.Element) => void; beforeEach(() => { ({ rerender } = render( - + )); }); @@ -45,7 +45,7 @@ describe('', () => { it('calculates the correct x% for a timestamp', () => { rerender( - + ); const line = screen.getByTestId('scrubber-component-line'); diff --git a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.tsx b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.tsx index 94bec0f1769..077eb2a9f2d 100644 --- a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.tsx +++ b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.tsx @@ -72,7 +72,7 @@ export const getStyles = () => { }; }; -type ScrubberProps = { +export type ScrubberProps = { isDragging: boolean; position: number; onMouseDown: (evt: React.MouseEvent) => void; diff --git a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/ViewingLayer.test.js b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/ViewingLayer.test.tsx similarity index 79% rename from packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/ViewingLayer.test.js rename to packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/ViewingLayer.test.tsx index b65184021ed..e83e65f778c 100644 --- a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/ViewingLayer.test.js +++ b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/ViewingLayer.test.tsx @@ -12,22 +12,23 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { shallow } from 'enzyme'; +import { shallow, ShallowWrapper } from 'enzyme'; import React from 'react'; import { createTheme } from '@grafana/data'; -import { EUpdateTypes } from '../../utils/DraggableManager'; +import { ViewRangeTime } from '../../TraceTimelineViewer/types'; +import DraggableManager, { DraggingUpdate, EUpdateTypes } from '../../utils/DraggableManager'; import { polyfill as polyfillAnimationFrame } from '../../utils/test/requestAnimationFrame'; import GraphTicks from './GraphTicks'; -import Scrubber from './Scrubber'; -import ViewingLayer, { dragTypes, getStyles } from './ViewingLayer'; +import Scrubber, { ScrubberProps } from './Scrubber'; +import ViewingLayer, { dragTypes, getStyles, ViewingLayerProps, UnthemedViewingLayer } from './ViewingLayer'; -function getViewRange(viewStart, viewEnd) { +function getViewRange(viewStart: number, viewEnd: number) { return { time: { - current: [viewStart, viewEnd], + current: [viewStart, viewEnd] as [number, number], }, }; } @@ -35,8 +36,8 @@ function getViewRange(viewStart, viewEnd) { describe('', () => { polyfillAnimationFrame(window); - let props; - let wrapper; + let props: ViewingLayerProps; + let wrapper: ShallowWrapper; beforeEach(() => { props = { @@ -45,7 +46,8 @@ describe('', () => { updateNextViewRangeTime: jest.fn(), updateViewRangeTime: jest.fn(), viewRange: getViewRange(0, 1), - }; + } as unknown as ViewingLayerProps; + wrapper = shallow() .dive() .dive(); @@ -57,11 +59,12 @@ describe('', () => { wrapper = shallow() .dive() .dive(); + wrapper.instance()._setRoot({ getBoundingClientRect() { return { left: 10, width: 100 }; }, - }); + } as SVGElement); }); it('throws if _root is not set', () => { @@ -105,81 +108,81 @@ describe('', () => { describe('reframe', () => { it('handles mousemove', () => { const value = 0.5; - wrapper.instance()._handleReframeMouseMove({ value }); - const calls = props.updateNextViewRangeTime.mock.calls; + wrapper.instance()._handleReframeMouseMove({ value } as DraggingUpdate); + const calls = jest.mocked(props.updateNextViewRangeTime).mock.calls; expect(calls).toEqual([[{ cursor: value }]]); }); it('handles mouseleave', () => { wrapper.instance()._handleReframeMouseLeave(); - const calls = props.updateNextViewRangeTime.mock.calls; + const calls = jest.mocked(props.updateNextViewRangeTime).mock.calls; expect(calls).toEqual([[{ cursor: null }]]); }); describe('drag update', () => { it('handles sans anchor', () => { const value = 0.5; - wrapper.instance()._handleReframeDragUpdate({ value }); - const calls = props.updateNextViewRangeTime.mock.calls; + wrapper.instance()._handleReframeDragUpdate({ value } as DraggingUpdate); + const calls = jest.mocked(props.updateNextViewRangeTime).mock.calls; expect(calls).toEqual([[{ reframe: { anchor: value, shift: value } }]]); }); it('handles the existing anchor', () => { const value = 0.5; const anchor = 0.1; - const time = { ...props.viewRange.time, reframe: { anchor } }; + const time = { ...props.viewRange.time, reframe: { anchor } } as ViewRangeTime; props = { ...props, viewRange: { time } }; wrapper = shallow() .dive() .dive(); - wrapper.instance()._handleReframeDragUpdate({ value }); - const calls = props.updateNextViewRangeTime.mock.calls; + wrapper.instance()._handleReframeDragUpdate({ value } as DraggingUpdate); + const calls = jest.mocked(props.updateNextViewRangeTime).mock.calls; expect(calls).toEqual([[{ reframe: { anchor, shift: value } }]]); }); }); describe('drag end', () => { - let manager; + let manager: DraggableManager; beforeEach(() => { - manager = { resetBounds: jest.fn() }; + manager = { resetBounds: jest.fn() } as unknown as DraggableManager; }); it('handles sans anchor', () => { const value = 0.5; - wrapper.instance()._handleReframeDragEnd({ manager, value }); - expect(manager.resetBounds.mock.calls).toEqual([[]]); - const calls = props.updateViewRangeTime.mock.calls; + wrapper.instance()._handleReframeDragEnd({ manager, value } as DraggingUpdate); + expect((manager.resetBounds as jest.Mock).mock.calls).toEqual([[]]); + const calls = (props.updateViewRangeTime as jest.Mock).mock.calls; expect(calls).toEqual([[value, value, 'minimap']]); }); it('handles dragged left (anchor is greater)', () => { const value = 0.5; const anchor = 0.6; - const time = { ...props.viewRange.time, reframe: { anchor } }; + const time = { ...props.viewRange.time, reframe: { anchor } } as ViewRangeTime; props = { ...props, viewRange: { time } }; wrapper = shallow() .dive() .dive(); - wrapper.instance()._handleReframeDragEnd({ manager, value }); + wrapper.instance()._handleReframeDragEnd({ manager, value } as DraggingUpdate); - expect(manager.resetBounds.mock.calls).toEqual([[]]); - const calls = props.updateViewRangeTime.mock.calls; + expect((manager.resetBounds as jest.Mock).mock.calls).toEqual([[]]); + const calls = (props.updateViewRangeTime as jest.Mock).mock.calls; expect(calls).toEqual([[value, anchor, 'minimap']]); }); it('handles dragged right (anchor is less)', () => { const value = 0.5; const anchor = 0.4; - const time = { ...props.viewRange.time, reframe: { anchor } }; + const time = { ...props.viewRange.time, reframe: { anchor } } as ViewRangeTime; props = { ...props, viewRange: { time } }; wrapper = shallow() .dive() .dive(); - wrapper.instance()._handleReframeDragEnd({ manager, value }); + wrapper.instance()._handleReframeDragEnd({ manager, value } as DraggingUpdate); - expect(manager.resetBounds.mock.calls).toEqual([[]]); - const calls = props.updateViewRangeTime.mock.calls; + expect((manager.resetBounds as jest.Mock).mock.calls).toEqual([[]]); + const calls = (props.updateViewRangeTime as jest.Mock).mock.calls; expect(calls).toEqual([[anchor, value, 'minimap']]); }); }); @@ -187,12 +190,12 @@ describe('', () => { describe('scrubber', () => { it('prevents the cursor from being drawn on scrubber mouseover', () => { - wrapper.instance()._handleScrubberEnterLeave({ type: EUpdateTypes.MouseEnter }); + wrapper.instance()._handleScrubberEnterLeave({ type: EUpdateTypes.MouseEnter } as DraggingUpdate); expect(wrapper.state('preventCursorLine')).toBe(true); }); it('prevents the cursor from being drawn on scrubber mouseleave', () => { - wrapper.instance()._handleScrubberEnterLeave({ type: EUpdateTypes.MouseLeave }); + wrapper.instance()._handleScrubberEnterLeave({ type: EUpdateTypes.MouseLeave } as DraggingUpdate); expect(wrapper.state('preventCursorLine')).toBe(false); }); @@ -203,7 +206,7 @@ describe('', () => { event: { stopPropagation }, type: EUpdateTypes.DragStart, }; - wrapper.instance()._handleScrubberDragUpdate(update); + wrapper.instance()._handleScrubberDragUpdate(update as unknown as DraggingUpdate); expect(stopPropagation.mock.calls).toEqual([[]]); }); @@ -229,7 +232,7 @@ describe('', () => { }, ]; cases.forEach((_case) => { - instance._handleScrubberDragUpdate(_case.dragUpdate); + instance._handleScrubberDragUpdate(_case.dragUpdate as DraggingUpdate); expect(props.updateNextViewRangeTime).lastCalledWith(_case.viewRangeUpdate); }); }); @@ -261,9 +264,9 @@ describe('', () => { const { manager } = _case.dragUpdate; wrapper.setState({ preventCursorLine: true }); expect(wrapper.state('preventCursorLine')).toBe(true); - instance._handleScrubberDragEnd(_case.dragUpdate); + instance._handleScrubberDragEnd(_case.dragUpdate as unknown as DraggingUpdate); expect(wrapper.state('preventCursorLine')).toBe(false); - expect(manager.resetBounds.mock.calls).toEqual([[]]); + expect((manager.resetBounds as jest.Mock).mock.calls).toEqual([[]]); expect(props.updateViewRangeTime).lastCalledWith(..._case.viewRangeUpdate, 'minimap'); }); }); @@ -315,7 +318,7 @@ describe('', () => { const leftBox = wrapper.find(`.${getStyles(createTheme()).ViewingLayerInactive}`); expect(leftBox.length).toBe(1); - const width = Number(leftBox.prop('width').slice(0, -1)); + const width = Number(leftBox.prop('width')?.toString().slice(0, -1)); const x = leftBox.prop('x'); expect(Math.round(width)).toBe(20); expect(x).toBe(0); @@ -329,17 +332,17 @@ describe('', () => { const rightBox = wrapper.find(`.${getStyles(createTheme()).ViewingLayerInactive}`); expect(rightBox.length).toBe(1); - const width = Number(rightBox.prop('width').slice(0, -1)); - const x = Number(rightBox.prop('x').slice(0, -1)); + const width = Number(rightBox.prop('width')?.toString().slice(0, -1)); + const x = Number(rightBox.prop('x')?.toString().slice(0, -1)); expect(Math.round(width)).toBe(20); expect(x).toBe(80); }); it('renders handles for the timeRangeFilter', () => { const [viewStart, viewEnd] = props.viewRange.time.current; - let scrubber = ; + let scrubber = ; expect(wrapper.containsMatchingElement(scrubber)).toBeTruthy(); - scrubber = ; + scrubber = ; expect(wrapper.containsMatchingElement(scrubber)).toBeTruthy(); }); }); diff --git a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/ViewingLayer.tsx b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/ViewingLayer.tsx index e4090032a4c..17025ba4a65 100644 --- a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/ViewingLayer.tsx +++ b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/ViewingLayer.tsx @@ -89,7 +89,7 @@ export const getStyles = stylesFactory((theme: GrafanaTheme2) => { }; }); -type ViewingLayerProps = { +export type ViewingLayerProps = { height: number; numTicks: number; updateViewRangeTime: TUpdateViewRangeTimeFunction; diff --git a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/index.test.js b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/index.test.tsx similarity index 84% rename from packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/index.test.js rename to packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/index.test.tsx index d76f4aab944..ba8d949e2fc 100644 --- a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/index.test.js +++ b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/index.test.tsx @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { shallow } from 'enzyme'; +import { shallow, ShallowWrapper } from 'enzyme'; import React from 'react'; import traceGenerator from '../../demo/trace-generators'; @@ -21,9 +21,9 @@ import { polyfill as polyfillAnimationFrame } from '../../utils/test/requestAnim import CanvasSpanGraph from './CanvasSpanGraph'; import TickLabels from './TickLabels'; -import ViewingLayer from './ViewingLayer'; +import ViewingLayer, { ViewingLayerProps, UnthemedViewingLayer } from './ViewingLayer'; -import SpanGraph from './index'; +import SpanGraph, { SpanGraphProps } from './index'; describe('', () => { polyfillAnimationFrame(window); @@ -39,10 +39,10 @@ describe('', () => { }, }; - let wrapper; + let wrapper: ShallowWrapper; beforeEach(() => { - wrapper = shallow(); + wrapper = shallow(); }); it('renders a ', () => { @@ -54,7 +54,7 @@ describe('', () => { }); it('returns a
if a trace is not provided', () => { - wrapper = shallow(); + wrapper = shallow(); expect(wrapper.matchesElement(
)).toBeTruthy(); }); @@ -68,7 +68,7 @@ describe('', () => { it('passes items to CanvasSpanGraph', () => { const canvasGraph = wrapper.find(CanvasSpanGraph).first(); - const items = trace.spans.map((span) => ({ + const items = trace?.spans.map((span) => ({ valueOffset: span.relativeStartTime, valueWidth: span.duration, serviceName: span.process.serviceName, diff --git a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/index.tsx b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/index.tsx index 6bab52a4b67..8133aaaa8e9 100644 --- a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/index.tsx +++ b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/index.tsx @@ -27,7 +27,7 @@ import ViewingLayer from './ViewingLayer'; const DEFAULT_HEIGHT = 60; const TIMELINE_TICK_INTERVAL = 4; -type SpanGraphProps = { +export type SpanGraphProps = { height?: number; trace: Trace; viewRange: ViewRange; diff --git a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/render-into-canvas.test.js b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/render-into-canvas.test.ts similarity index 78% rename from packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/render-into-canvas.test.js rename to packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/render-into-canvas.test.ts index 2b822025a84..a4a5082fa06 100644 --- a/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/render-into-canvas.test.js +++ b/packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/render-into-canvas.test.ts @@ -15,7 +15,6 @@ import { range as _range } from 'lodash'; import renderIntoCanvas, { - BG_COLOR, ITEM_ALPHA, MIN_ITEM_HEIGHT, MAX_TOTAL_HEIGHT, @@ -24,8 +23,10 @@ import renderIntoCanvas, { MAX_ITEM_HEIGHT, } from './render-into-canvas'; +const BG_COLOR = '#FFFFFF'; + const getCanvasWidth = () => window.innerWidth * 2; -const getBgFillRect = (items) => ({ +const getBgFillRect = (items?: Array<{ valueWidth: number; valueOffset: number; serviceName: string }>) => ({ fillStyle: BG_COLOR, height: !items || items.length < MIN_TOTAL_HEIGHT ? MIN_TOTAL_HEIGHT : Math.min(MAX_TOTAL_HEIGHT, items.length), width: getCanvasWidth(), @@ -37,12 +38,15 @@ describe('renderIntoCanvas()', () => { const basicItem = { valueWidth: 100, valueOffset: 50, serviceName: 'some-name' }; class CanvasContext { + fillStyle: undefined; + fillRectAccumulator: Array<{ fillStyle: undefined; height: number; width: number; x: number; y: number }> = []; + constructor() { this.fillStyle = undefined; this.fillRectAccumulator = []; } - fillRect(x, y, width, height) { + fillRect(x: number, y: number, width: number, height: number) { const fillStyle = this.fillStyle; this.fillRectAccumulator.push({ fillStyle, @@ -55,6 +59,11 @@ describe('renderIntoCanvas()', () => { } class Canvas { + height: number; + width: number; + contexts: CanvasContext[]; + getContext: jest.Mock; + constructor() { this.contexts = []; this.height = NaN; @@ -71,13 +80,13 @@ describe('renderIntoCanvas()', () => { function getColorFactory() { let i = 0; - const inputOutput = []; - function getFakeColor(str) { - const rv = [i, i, i]; + const inputOutput: Array<{ input: string; output: [number, number, number] }> = []; + function getFakeColor(str: string) { + const rv: [number, number, number] = [i, i, i]; i++; inputOutput.push({ input: str, - output: rv.slice(), + output: rv.slice() as [number, number, number], }); return rv; } @@ -88,7 +97,7 @@ describe('renderIntoCanvas()', () => { it('sets the width', () => { const canvas = new Canvas(); expect(canvas.width !== canvas.width).toBe(true); - renderIntoCanvas(canvas, [basicItem], 150, getColorFactory()); + renderIntoCanvas(canvas as unknown as HTMLCanvasElement, [basicItem], 150, getColorFactory(), BG_COLOR); expect(canvas.width).toBe(getCanvasWidth()); }); @@ -96,18 +105,18 @@ describe('renderIntoCanvas()', () => { it('sets the height', () => { const canvas = new Canvas(); expect(canvas.height !== canvas.height).toBe(true); - renderIntoCanvas(canvas, [basicItem], 150, getColorFactory()); + renderIntoCanvas(canvas as unknown as HTMLCanvasElement, [basicItem], 150, getColorFactory(), BG_COLOR); expect(canvas.height).toBe(MIN_TOTAL_HEIGHT); }); it('draws the background', () => { const expectedDrawing = [getBgFillRect()]; const canvas = new Canvas(); - const items = []; + const items: Array<{ valueWidth: number; valueOffset: number; serviceName: string }> = []; const totalValueWidth = 4000; const getFillColor = getColorFactory(); - renderIntoCanvas(canvas, items, totalValueWidth, getFillColor); - expect(canvas.getContext.mock.calls).toEqual([['2d', { alpha: false }]]); + renderIntoCanvas(canvas as unknown as HTMLCanvasElement, items, totalValueWidth, getFillColor, BG_COLOR); + expect((canvas.getContext as jest.Mock).mock.calls).toEqual([['2d', { alpha: false }]]); expect(canvas.contexts.length).toBe(1); expect(canvas.contexts[0].fillRectAccumulator).toEqual(expectedDrawing); }); @@ -141,7 +150,7 @@ describe('renderIntoCanvas()', () => { ]; const canvas = new Canvas(); const getFillColor = getColorFactory(); - renderIntoCanvas(canvas, items, totalValueWidth, getFillColor); + renderIntoCanvas(canvas as unknown as HTMLCanvasElement, items, totalValueWidth, getFillColor, BG_COLOR); expect(getFillColor.inputOutput).toEqual(expectedColors); expect(canvas.getContext.mock.calls).toEqual([['2d', { alpha: false }]]); expect(canvas.contexts.length).toBe(1); @@ -157,7 +166,7 @@ describe('renderIntoCanvas()', () => { items.push(basicItem); } expect(canvas.height !== canvas.height).toBe(true); - renderIntoCanvas(canvas, items, 150, getColorFactory()); + renderIntoCanvas(canvas as unknown as HTMLCanvasElement, items, 150, getColorFactory(), BG_COLOR); expect(canvas.height).toBe(items.length); }); @@ -187,9 +196,9 @@ describe('renderIntoCanvas()', () => { ]; const canvas = new Canvas(); const getFillColor = getColorFactory(); - renderIntoCanvas(canvas, items, totalValueWidth, getFillColor); + renderIntoCanvas(canvas as unknown as HTMLCanvasElement, items, totalValueWidth, getFillColor, BG_COLOR); expect(getFillColor.inputOutput).toEqual(expectedColors); - expect(canvas.getContext.mock.calls).toEqual([['2d', { alpha: false }]]); + expect((canvas.getContext as jest.Mock).mock.calls).toEqual([['2d', { alpha: false }]]); expect(canvas.contexts.length).toBe(1); expect(canvas.contexts[0].fillRectAccumulator).toEqual(expectedDrawings); }); diff --git a/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.test.js b/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.test.tsx similarity index 77% rename from packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.test.js rename to packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.test.tsx index f0338d287b9..f79f8734233 100644 --- a/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.test.js +++ b/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.test.tsx @@ -16,9 +16,8 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; import { createTheme } from '@grafana/data'; -import { selectors } from '@grafana/e2e-selectors'; -import TracePageSearchBar, { getStyles } from './TracePageSearchBar'; +import TracePageSearchBar, { getStyles, TracePageSearchBarProps } from './TracePageSearchBar'; const defaultProps = { forwardedRef: React.createRef(), @@ -30,8 +29,8 @@ const defaultProps = { describe('', () => { describe('truthy textFilter', () => { it('renders UiFindInput with correct props', () => { - render(); - expect(screen.getByPlaceholderText('Find...')['value']).toEqual('value'); + render(); + expect((screen.getByPlaceholderText('Find...') as HTMLInputElement)['value']).toEqual('value'); const suffix = screen.getByLabelText('Search bar suffix'); const theme = createTheme(); expect(suffix['className']).toBe(getStyles(theme).TracePageSearchBarSuffix); @@ -39,13 +38,13 @@ describe('', () => { }); it('renders buttons', () => { - render(); + render(); const nextResButton = screen.queryByRole('button', { name: 'Next results button' }); const prevResButton = screen.queryByRole('button', { name: 'Prev results button' }); expect(nextResButton).toBeInTheDocument(); expect(prevResButton).toBeInTheDocument(); - expect(nextResButton['disabled']).toBe(false); - expect(prevResButton['disabled']).toBe(false); + expect((nextResButton as HTMLButtonElement)['disabled']).toBe(false); + expect((prevResButton as HTMLButtonElement)['disabled']).toBe(false); }); it('only shows navigable buttons when navigable is true', () => { @@ -53,7 +52,7 @@ describe('', () => { ...defaultProps, navigable: false, }; - render(); + render(); expect(screen.queryByRole('button', { name: 'Next results button' })).not.toBeInTheDocument(); expect(screen.queryByRole('button', { name: 'Prev results button' })).not.toBeInTheDocument(); }); @@ -65,7 +64,7 @@ describe('', () => { ...defaultProps, searchValue: '', }; - render(); + render(); }); it('does not render suffix', () => { diff --git a/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx b/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx index 7c7f5b7e803..84a4a3c6c82 100644 --- a/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx +++ b/packages/jaeger-ui-components/src/TracePageHeader/TracePageSearchBar.tsx @@ -69,7 +69,7 @@ export const getStyles = (theme: GrafanaTheme2) => { }; }; -type TracePageSearchBarProps = { +export type TracePageSearchBarProps = { navigable: boolean; searchValue: string; setSearch: (value: string) => void; diff --git a/yarn.lock b/yarn.lock index ed8c5a77922..28f495ade83 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4966,6 +4966,7 @@ __metadata: "@testing-library/user-event": 14.4.3 "@types/classnames": ^2.2.7 "@types/deep-freeze": ^0.1.1 + "@types/enzyme": 3.10.12 "@types/hoist-non-react-statics": ^3.3.1 "@types/jest": 29.2.3 "@types/lodash": 4.14.187