From 0b42b2f790ec015a75a9c99503a1035462c1799d Mon Sep 17 00:00:00 2001 From: Hamas Shafiq Date: Wed, 30 Nov 2022 12:08:02 +0000 Subject: [PATCH] Chore: Refactor TracePageHeader.test.js to TypeScript (#59256) --- ...eader.test.js => TracePageHeader.test.tsx} | 82 +++++++++---------- .../src/TracePageHeader/TracePageHeader.tsx | 4 +- 2 files changed, 39 insertions(+), 47 deletions(-) rename packages/jaeger-ui-components/src/TracePageHeader/{TracePageHeader.test.js => TracePageHeader.test.tsx} (58%) diff --git a/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.test.js b/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.test.tsx similarity index 58% rename from packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.test.js rename to packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.test.tsx index bb6955051dd..65f8dd706d8 100644 --- a/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.test.js +++ b/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.test.tsx @@ -19,20 +19,22 @@ import traceGenerator from '../demo/trace-generators'; import { getTraceName } from '../model/trace-viewer'; import transformTraceData from '../model/transform-trace-data'; -import TracePageHeader from './TracePageHeader'; +import TracePageHeader, { TracePageHeaderEmbedProps } from './TracePageHeader'; const trace = transformTraceData(traceGenerator.trace({})); -const setup = (propOverrides) => { +const setup = (propOverrides?: TracePageHeaderEmbedProps) => { const defaultProps = { + canCollapse: false, + hideSummary: false, + onSlimViewClicked: () => {}, + onTraceGraphViewClicked: () => {}, + slimView: false, trace, hideMap: false, - showArchiveButton: false, - showShortcutsHelp: false, - showStandaloneLink: false, - showViewOptions: false, - textFilter: '', - viewRange: { time: { current: [10, 20] } }, - updateTextFilter: () => {}, + timeZone: '', + viewRange: { time: { current: [10, 20] as [number, number] } }, + updateNextViewRangeTime: () => {}, + updateViewRangeTime: () => {}, ...propOverrides, }; @@ -42,23 +44,23 @@ const setup = (propOverrides) => { describe('TracePageHeader test', () => { it('should render a header ', () => { setup(); - expect(screen.getByRole('banner')).toBeInTheDocument(); }); it('should render nothing if a trace is not present', () => { - setup({ trace: null }); - + setup({ trace: null } as TracePageHeaderEmbedProps); expect(screen.queryByRole('banner')).not.toBeInTheDocument(); - expect(screen.queryByRole('heading', { traceName: getTraceName(trace.spans) })).not.toBeInTheDocument(); expect(screen.queryAllByRole('listitem')).toHaveLength(0); expect(screen.queryByText(/Reset Selection/)).not.toBeInTheDocument(); }); it('should render the trace title', () => { setup(); - - expect(screen.getByRole('heading', { traceName: getTraceName(trace.spans) })).toBeInTheDocument(); + expect( + screen.getByRole('heading', { + name: (content) => content.replace(/ /g, '').startsWith(getTraceName(trace!.spans).replace(/ /g, '')), + }) + ).toBeInTheDocument(); }); it('should render the header items', () => { @@ -68,61 +70,51 @@ describe('TracePageHeader test', () => { expect(headerItems).toHaveLength(5); // Year-month-day hour-minute-second - expect(headerItems[0].textContent.match(/Trace Start:\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}\.\d{3}/g)).toBeTruthy(); - expect(headerItems[1].textContent.match(/Duration:[\d|\.][\.|\d|s][\.|\d|s]?[\d]?/)).toBeTruthy(); - expect(headerItems[2].textContent.match(/Services:\d\d?/g)).toBeTruthy(); - expect(headerItems[3].textContent.match(/Depth:\d\d?/)).toBeTruthy(); - expect(headerItems[4].textContent.match(/Total Spans:\d\d?\d?\d?/)).toBeTruthy(); + expect(headerItems[0].textContent?.match(/Trace Start:\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}\.\d{3}/g)).toBeTruthy(); + expect(headerItems[1].textContent?.match(/Duration:[\d|\.][\.|\d|s][\.|\d|s]?[\d]?/)).toBeTruthy(); + expect(headerItems[2].textContent?.match(/Services:\d\d?/g)).toBeTruthy(); + expect(headerItems[3].textContent?.match(/Depth:\d\d?/)).toBeTruthy(); + expect(headerItems[4].textContent?.match(/Total Spans:\d\d?\d?\d?/)).toBeTruthy(); }); it('should render a ', () => { setup(); - expect(screen.getByText(/Reset Selection/)).toBeInTheDocument(); }); describe('observes the visibility toggles for various UX elements', () => { it('hides the minimap when hideMap === true', () => { - setup({ hideMap: true }); - + setup({ hideMap: true } as TracePageHeaderEmbedProps); expect(screen.queryByText(/Reset Selection/)).not.toBeInTheDocument(); }); it('hides the summary when hideSummary === true', () => { - const { rerender } = setup({ hideSummary: false }); + const { rerender } = setup({ hideSummary: false } as TracePageHeaderEmbedProps); expect(screen.queryAllByRole('listitem')).toHaveLength(5); - rerender(); + rerender(); expect(screen.queryAllByRole('listitem')).toHaveLength(0); rerender( {}} + {...({ + trace: trace, + hideSummary: true, + hideMap: false, + viewRange: { time: { current: [10, 20] } }, + } as TracePageHeaderEmbedProps)} /> ); expect(screen.queryAllByRole('listitem')).toHaveLength(0); rerender( {}} + {...({ + trace: trace, + hideSummary: false, + hideMap: false, + viewRange: { time: { current: [10, 20] } }, + } as TracePageHeaderEmbedProps)} /> ); expect(screen.queryAllByRole('listitem')).toHaveLength(5); diff --git a/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx b/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx index 5c78064d18f..a18fb38e213 100644 --- a/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx +++ b/packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx @@ -140,14 +140,14 @@ const getStyles = (theme: GrafanaTheme2) => { }; }; -type TracePageHeaderEmbedProps = { +export type TracePageHeaderEmbedProps = { canCollapse: boolean; hideMap: boolean; hideSummary: boolean; onSlimViewClicked: () => void; onTraceGraphViewClicked: () => void; slimView: boolean; - trace: Trace; + trace: Trace | null; updateNextViewRangeTime: (update: ViewRangeTimeUpdate) => void; updateViewRangeTime: TUpdateViewRangeTimeFunction; viewRange: ViewRange;