diff --git a/.betterer.results b/.betterer.results index e57b20976b5..bc7f616f948 100644 --- a/.betterer.results +++ b/.betterer.results @@ -41,9 +41,6 @@ exports[`no enzyme tests`] = { "packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.test.js:551014442": [ [13, 26, 13, "RegExp match", "2409514259"] ], - "packages/jaeger-ui-components/src/TraceTimelineViewer/index.test.js:1541367299": [ - [14, 19, 13, "RegExp match", "2409514259"] - ], "public/app/core/components/Select/MetricSelect.test.tsx:1074737147": [ [0, 19, 13, "RegExp match", "2409514259"] ], diff --git a/packages/jaeger-ui-components/src/TraceTimelineViewer/index.test.js b/packages/jaeger-ui-components/src/TraceTimelineViewer/index.test.js index 17d0e9f30a4..746e9287388 100644 --- a/packages/jaeger-ui-components/src/TraceTimelineViewer/index.test.js +++ b/packages/jaeger-ui-components/src/TraceTimelineViewer/index.test.js @@ -12,7 +12,8 @@ // 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 userEvent from '@testing-library/user-event'; import React from 'react'; import { createTheme } from '@grafana/data'; @@ -20,8 +21,6 @@ import { createTheme } from '@grafana/data'; import traceGenerator from '../demo/trace-generators'; import transformTraceData from '../model/transform-trace-data'; -import TimelineHeaderRow from './TimelineHeaderRow'; - import TraceTimelineViewer from './index'; jest.mock('@grafana/runtime', () => { @@ -42,12 +41,17 @@ describe('', () => { }, }, traceTimeline: { + childrenHiddenIDs: new Set(), + hoverIndentGuideIds: new Set(), spanNameColumnWidth: 0.5, + detailStates: new Map(), }, expandAll: jest.fn(), collapseAll: jest.fn(), expandOne: jest.fn(), + registerAccessors: jest.fn(), collapseOne: jest.fn(), + setTrace: jest.fn(), theme: createTheme(), history: { replace: () => {}, @@ -56,27 +60,34 @@ describe('', () => { search: null, }, }; - let wrapper; - - beforeEach(() => { - wrapper = shallow() - .dive() - .dive(); - }); it('it does not explode', () => { - expect(wrapper).toBeDefined(); + expect(() => render()).not.toThrow(); }); - it('it sets up actions', () => { - const headerRow = wrapper.find(TimelineHeaderRow); - headerRow.props().onCollapseAll(); - headerRow.props().onExpandAll(); - headerRow.props().onExpandOne(); - headerRow.props().onCollapseOne(); - expect(props.collapseAll.mock.calls.length).toBe(1); - expect(props.expandAll.mock.calls.length).toBe(1); - expect(props.expandOne.mock.calls.length).toBe(1); - expect(props.collapseOne.mock.calls.length).toBe(1); + it('it sets up actions', async () => { + render(); + + const expandOne = screen.getByRole('button', { name: 'Expand +1' }); + const collapseOne = screen.getByRole('button', { name: 'Collapse +1' }); + const expandAll = screen.getByRole('button', { name: 'Expand All' }); + const collapseAll = screen.getByRole('button', { name: 'Collapse All' }); + + expect(expandOne).toBeInTheDocument(); + expect(collapseOne).toBeInTheDocument(); + expect(expandAll).toBeInTheDocument(); + expect(collapseAll).toBeInTheDocument(); + + await userEvent.click(expandOne); + expect(props.expandOne).toHaveBeenCalled(); + + await userEvent.click(collapseOne); + expect(props.collapseOne).toHaveBeenCalled(); + + await userEvent.click(expandAll); + expect(props.expandAll).toHaveBeenCalled(); + + await userEvent.click(collapseAll); + expect(props.collapseAll).toHaveBeenCalled(); }); });