// Copyright (c) 2017 Uber Technologies, Inc. // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. // You may obtain a copy of the License at // // http://www.apache.org/licenses/LICENSE-2.0 // // Unless required by applicable law or agreed to in writing, software // distributed under the License is distributed on an "AS IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. import { render, screen } from '@testing-library/react'; import React from 'react'; import traceGenerator from '../demo/trace-generators'; import { getTraceName } from '../model/trace-viewer'; import transformTraceData from '../model/transform-trace-data'; import TracePageHeader, { TracePageHeaderEmbedProps } from './TracePageHeader'; const trace = transformTraceData(traceGenerator.trace({})); const setup = (propOverrides?: TracePageHeaderEmbedProps) => { const defaultProps = { canCollapse: false, hideSummary: false, onSlimViewClicked: () => {}, onTraceGraphViewClicked: () => {}, slimView: false, trace, hideMap: false, timeZone: '', viewRange: { time: { current: [10, 20] as [number, number] } }, updateNextViewRangeTime: () => {}, updateViewRangeTime: () => {}, ...propOverrides, }; return render(); }; 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 } as TracePageHeaderEmbedProps); expect(screen.queryByRole('banner')).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', { name: (content) => content.replace(/ /g, '').startsWith(getTraceName(trace!.spans).replace(/ /g, '')), }) ).toBeInTheDocument(); }); it('should render the header items', () => { setup(); const headerItems = screen.queryAllByRole('listitem'); 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(); }); 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 } as TracePageHeaderEmbedProps); expect(screen.queryByText(/Reset Selection/)).not.toBeInTheDocument(); }); it('hides the summary when hideSummary === true', () => { const { rerender } = setup({ hideSummary: false } as TracePageHeaderEmbedProps); expect(screen.queryAllByRole('listitem')).toHaveLength(5); rerender(); expect(screen.queryAllByRole('listitem')).toHaveLength(0); rerender( ); expect(screen.queryAllByRole('listitem')).toHaveLength(0); rerender( ); expect(screen.queryAllByRole('listitem')).toHaveLength(5); }); }); });