diff --git a/.betterer.results b/.betterer.results index f7fff7a0b2d..9722f45ede9 100644 --- a/.betterer.results +++ b/.betterer.results @@ -47,13 +47,10 @@ exports[`no enzyme tests`] = { "packages/jaeger-ui-components/src/TraceTimelineViewer/SpanTreeOffset.test.js:174536706": [ [14, 19, 13, "RegExp match", "2409514259"] ], - "packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.js:2286101708": [ + "packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.js:989353473": [ [15, 17, 13, "RegExp match", "2409514259"] ], - "packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.test.js:2106409544": [ - [14, 19, 13, "RegExp match", "2409514259"] - ], - "packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.js:1423129438": [ + "packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.js:4192868446": [ [15, 17, 13, "RegExp match", "2409514259"] ], "packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.test.js:551014442": [ @@ -1990,10 +1987,6 @@ exports[`better eslint`] = { "packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], - "packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineRow.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"], - [0, 0, 0, "Unexpected any. Specify a different type.", "1"] - ], "packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/Ticks.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/Ticks.tsx index b2eace5fcff..6d1c1195f4d 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/Ticks.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/Ticks.tsx @@ -78,6 +78,7 @@ export default function Ticks(props: TicksProps) { const portion = i / (numTicks - 1); ticks.push(
', () => { it('renders without exploding', () => { expect(wrapper).toBeDefined(); - expect(wrapper.find('[data-test-id="TimelineColumnResizer"]').length).toBe(1); - expect(wrapper.find('[data-test-id="TimelineColumnResizer--gripIcon"]').length).toBe(1); - expect(wrapper.find('[data-test-id="TimelineColumnResizer--dragger"]').length).toBe(1); + expect(wrapper.find('[data-testid="TimelineColumnResizer"]').length).toBe(1); + expect(wrapper.find('[data-testid="TimelineColumnResizer--gripIcon"]').length).toBe(1); + expect(wrapper.find('[data-testid="TimelineColumnResizer--dragger"]').length).toBe(1); }); it('sets the root elm', () => { - const rootWrapper = wrapper.find('[data-test-id="TimelineColumnResizer"]'); + const rootWrapper = wrapper.find('[data-testid="TimelineColumnResizer"]'); expect(rootWrapper.getDOMNode()).toBe(instance._rootElm); }); @@ -51,7 +51,7 @@ describe('', () => { it('handles mouse down on the dragger', () => { const dragger = wrapper.find({ onMouseDown: instance._dragManager.handleMouseDown }); expect(dragger.length).toBe(1); - expect(dragger.is('[data-test-id="TimelineColumnResizer--dragger"]')).toBe(true); + expect(dragger.is('[data-testid="TimelineColumnResizer--dragger"]')).toBe(true); }); it('returns the draggable bounds via _getDraggingBounds()', () => { @@ -86,8 +86,8 @@ describe('', () => { it('does not render a dragging indicator when not dragging', () => { const styles = getStyles(); - expect(wrapper.find('[data-test-id="TimelineColumnResizer--dragger"]').prop('style').right).toBe(undefined); - expect(wrapper.find('[data-test-id="TimelineColumnResizer--dragger"]').prop('className')).toBe(styles.dragger); + expect(wrapper.find('[data-testid="TimelineColumnResizer--dragger"]').prop('style').right).toBe(undefined); + expect(wrapper.find('[data-testid="TimelineColumnResizer--dragger"]').prop('className')).toBe(styles.dragger); }); it('renders a dragging indicator when dragging', () => { @@ -95,10 +95,10 @@ describe('', () => { instance._handleDragUpdate({ value: props.min }); instance.forceUpdate(); wrapper.update(); - expect(wrapper.find('[data-test-id="TimelineColumnResizer--dragger"]').prop('style').right).toBeDefined(); + expect(wrapper.find('[data-testid="TimelineColumnResizer--dragger"]').prop('style').right).toBeDefined(); const styles = getStyles(); - expect(wrapper.find('[data-test-id="TimelineColumnResizer--dragger"]').prop('className')).toBe( + expect(wrapper.find('[data-testid="TimelineColumnResizer--dragger"]').prop('className')).toBe( cx(styles.dragger, styles.draggerDragging, styles.draggerDraggingLeft) ); }); diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.tsx index 0d7395d5f7b..5fc65eaac4e 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.tsx @@ -194,11 +194,11 @@ export default class TimelineColumnResizer extends React.PureComponent< const isDragging = isDraggingLeft || isDraggingRight; return ( -
+
); diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.test.js index 700dfbe2df9..3d5047c097c 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.test.js +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.test.js @@ -12,20 +12,13 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { shallow } from 'enzyme'; +import { render, screen } from '@testing-library/react'; import React from 'react'; -import Ticks from '../Ticks'; - -import { TimelineCollapser } from './TimelineCollapser'; -import TimelineColumnResizer from './TimelineColumnResizer'; import TimelineHeaderRow from './TimelineHeaderRow'; -import TimelineViewingLayer from './TimelineViewingLayer'; -describe('', () => { - let wrapper; - - const nameColumnWidth = 0.25; +const nameColumnWidth = 0.25; +const setup = () => { const props = { nameColumnWidth, duration: 1234, @@ -42,67 +35,55 @@ describe('', () => { }, }; - beforeEach(() => { - wrapper = shallow(); - }); + return render(); +}; +describe('TimelineHeaderRow', () => { it('renders without exploding', () => { - expect(wrapper).toBeDefined(); - expect(wrapper.find('[data-test-id="TimelineHeaderRow"]').length).toBe(1); - }); - - it('propagates the name column width', () => { - const nameCol = wrapper.find({ width: nameColumnWidth }); - const timelineCol = wrapper.find({ width: 1 - nameColumnWidth }); - expect(nameCol.length).toBe(1); - expect(timelineCol.length).toBe(1); + expect(() => setup()).not.toThrow(); }); it('renders the title', () => { - expect(wrapper.find('h4').text()).toMatch(/Service.*?Operation/); + setup(); + + expect(screen.getByRole('heading', { name: 'Service & Operation' })); + }); + + it('renders the collapser controls', () => { + setup(); + + expect(screen.getByRole('button', { name: 'Expand All' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Collapse All' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Expand +1' })).toBeInTheDocument(); + expect(screen.getByRole('button', { name: 'Collapse +1' })).toBeInTheDocument(); + }); + + it('renders the resizer controls', () => { + setup(); + + expect(screen.getByTestId('TimelineColumnResizer')).toBeInTheDocument(); + expect(screen.getByTestId('TimelineColumnResizer--dragger')).toBeInTheDocument(); + expect(screen.getByTestId('TimelineColumnResizer--gripIcon')).toBeInTheDocument(); + }); + + it('propagates the name column width', () => { + setup(); + + const timelineCells = screen.queryAllByTestId('TimelineRowCell'); + expect(timelineCells).toHaveLength(2); + expect(getComputedStyle(timelineCells[0]).maxWidth).toBe(`${nameColumnWidth * 100}%`); + expect(getComputedStyle(timelineCells[1]).maxWidth).toBe(`${(1 - nameColumnWidth) * 100}%`); }); it('renders the TimelineViewingLayer', () => { - const elm = ( - - ); - expect(wrapper.containsMatchingElement(elm)).toBe(true); + setup(); + + expect(screen.getByTestId('TimelineViewingLayer')).toBeInTheDocument(); }); it('renders the Ticks', () => { - const [viewStart, viewEnd] = props.viewRangeTime.current; - const elm = ( - - ); - expect(wrapper.containsMatchingElement(elm)).toBe(true); - }); + setup(); - it('renders the TimelineColumnResizer', () => { - const elm = ( - - ); - expect(wrapper.containsMatchingElement(elm)).toBe(true); - }); - - it('renders the TimelineCollapser', () => { - const elm = ( - - ); - expect(wrapper.containsMatchingElement(elm)).toBe(true); + expect(screen.getAllByTestId('TicksID')).toHaveLength(5); }); }); diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx index fb197e0c279..d521890e880 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx @@ -89,7 +89,7 @@ export default function TimelineHeaderRow(props: TimelineHeaderRowProps) { const [viewStart, viewEnd] = viewRangeTime.current; const styles = useStyles2(getStyles); return ( - +

Service & Operation

', () => { it('renders without exploding', () => { expect(wrapper).toBeDefined(); - expect(wrapper.find('[data-test-id="TimelineViewingLayer"]').length).toBe(1); + expect(wrapper.find('[data-testid="TimelineViewingLayer"]').length).toBe(1); }); it('sets _root to the root DOM node', () => { expect(instance._root).toBeDefined(); - expect(wrapper.find('[data-test-id="TimelineViewingLayer"]').getDOMNode()).toBe(instance._root); + expect(wrapper.find('[data-testid="TimelineViewingLayer"]').getDOMNode()).toBe(instance._root); }); describe('uses DraggableManager', () => { @@ -67,7 +67,7 @@ describe('', () => { it('provides the DraggableManager handlers as callbacks', () => { const { handleMouseDown, handleMouseLeave, handleMouseMove } = instance._draggerReframe; - const rootWrapper = wrapper.find('[data-test-id="TimelineViewingLayer"]'); + const rootWrapper = wrapper.find('[data-testid="TimelineViewingLayer"]'); expect(rootWrapper.prop('onMouseDown')).toBe(handleMouseDown); expect(rootWrapper.prop('onMouseLeave')).toBe(handleMouseLeave); expect(rootWrapper.prop('onMouseMove')).toBe(handleMouseMove); @@ -137,17 +137,17 @@ describe('', () => { const baseViewRangeTime = { ...props.viewRangeTime, cursor }; wrapper.setProps({ viewRangeTime: baseViewRangeTime }); // cursor is rendered when solo - expect(wrapper.find('[data-test-id="TimelineViewingLayer--cursorGuide"]').length).toBe(1); + expect(wrapper.find('[data-testid="TimelineViewingLayer--cursorGuide"]').length).toBe(1); // cursor is skipped when shiftStart, shiftEnd, or reframe are present let viewRangeTime = { ...baseViewRangeTime, shiftStart: cursor }; wrapper.setProps({ viewRangeTime }); - expect(wrapper.find('[data-test-id="TimelineViewingLayer--cursorGuide"]').length).toBe(0); + expect(wrapper.find('[data-testid="TimelineViewingLayer--cursorGuide"]').length).toBe(0); viewRangeTime = { ...baseViewRangeTime, shiftEnd: cursor }; wrapper.setProps({ viewRangeTime }); - expect(wrapper.find('[data-test-id="TimelineViewingLayer--cursorGuide"]').length).toBe(0); + expect(wrapper.find('[data-testid="TimelineViewingLayer--cursorGuide"]').length).toBe(0); viewRangeTime = { ...baseViewRangeTime, reframe: { anchor: cursor, shift: cursor } }; wrapper.setProps({ viewRangeTime }); - expect(wrapper.find('[data-test-id="TimelineViewingLayer--cursorGuide"]').length).toBe(0); + expect(wrapper.find('[data-testid="TimelineViewingLayer--cursorGuide"]').length).toBe(0); }); it('renders the reframe dragging', () => { @@ -156,7 +156,7 @@ describe('', () => { const styles = getStyles(); expect( wrapper - .find('[data-test-id="Dragged"]') + .find('[data-testid="Dragged"]') .prop('className') .indexOf( cx(styles.dragged, styles.draggedDraggingLeft, styles.draggedDraggingRight, styles.draggedReframeDrag) @@ -170,7 +170,7 @@ describe('', () => { const styles = getStyles(); expect( wrapper - .find('[data-test-id="Dragged"]') + .find('[data-testid="Dragged"]') .prop('className') .indexOf( cx(styles.dragged, styles.draggedDraggingLeft, styles.draggedDraggingRight, styles.draggedShiftDrag) @@ -185,7 +185,7 @@ describe('', () => { const styles = getStyles(); expect( wrapper - .find('[data-test-id="Dragged"]') + .find('[data-testid="Dragged"]') .prop('className') .indexOf(cx(styles.dragged, styles.draggedDraggingLeft, styles.draggedShiftDrag)) >= 0 ).toBe(true); diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx index d786338983e..e414f4e54f1 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx @@ -168,7 +168,7 @@ function getMarkers(viewStart: number, viewEnd: number, from: number, to: number
); } @@ -265,13 +265,13 @@ export default class TimelineViewingLayer extends React.PureComponent {cusrorPosition != null && (
)} {reframe != null && getMarkers(viewStart, viewEnd, reframe.anchor, reframe.shift, false)} diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineRow.tsx b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineRow.tsx index f1d0b046874..7d6deba8623 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineRow.tsx +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineRow.tsx @@ -61,7 +61,7 @@ export function TimelineRowCell(props: TimelineRowCellProps) { const widthPercent = `${width * 100}%`; const mergedStyle = { ...style, flexBasis: widthPercent, maxWidth: widthPercent }; return ( -
+
{children}
); diff --git a/public/app/features/explore/TraceView/TraceView.test.tsx b/public/app/features/explore/TraceView/TraceView.test.tsx index c50f6207d63..1e3c648f8ee 100644 --- a/public/app/features/explore/TraceView/TraceView.test.tsx +++ b/public/app/features/explore/TraceView/TraceView.test.tsx @@ -105,7 +105,7 @@ describe('TraceView', () => { it('shows timeline ticks', () => { renderTraceViewNew(); function ticks() { - return screen.getByText('', { selector: 'div[data-test-id="TimelineHeaderRow"]' }).children[1].children[1] + return screen.getByText('', { selector: 'div[data-testid="TimelineHeaderRow"]' }).children[1].children[1] .textContent; } expect(ticks()).toBe('0μs274.5μs549μs823.5μs1.1ms');