Chore: Refactor TracePageHeader.test.js to TypeScript (#59256)

This commit is contained in:
Hamas Shafiq 2022-11-30 12:08:02 +00:00 committed by GitHub
parent ba0b2dfa1a
commit 0b42b2f790
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 47 deletions

View File

@ -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 <SpanGraph>', () => {
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(<TracePageHeader hideSummary={false} trace={null} />);
rerender(<TracePageHeader {...({ hideSummary: false, trace: null } as TracePageHeaderEmbedProps)} />);
expect(screen.queryAllByRole('listitem')).toHaveLength(0);
rerender(
<TracePageHeader
trace={trace}
hideSummary={true}
hideMap={false}
showArchiveButton={false}
showShortcutsHelp={false}
showStandaloneLink={false}
showViewOptions={false}
textFilter=""
viewRange={{ time: { current: [10, 20] } }}
updateTextFilter={() => {}}
{...({
trace: trace,
hideSummary: true,
hideMap: false,
viewRange: { time: { current: [10, 20] } },
} as TracePageHeaderEmbedProps)}
/>
);
expect(screen.queryAllByRole('listitem')).toHaveLength(0);
rerender(
<TracePageHeader
trace={trace}
hideSummary={false}
hideMap={false}
showArchiveButton={false}
showShortcutsHelp={false}
showStandaloneLink={false}
showViewOptions={false}
textFilter=""
viewRange={{ time: { current: [10, 20] } }}
updateTextFilter={() => {}}
{...({
trace: trace,
hideSummary: false,
hideMap: false,
viewRange: { time: { current: [10, 20] } },
} as TracePageHeaderEmbedProps)}
/>
);
expect(screen.queryAllByRole('listitem')).toHaveLength(5);

View File

@ -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;