12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223 |
- import {browserHistory, InjectedRouter} from 'react-router';
- import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
- import {initializeOrg} from 'sentry-test/initializeOrg';
- import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
- import ProjectsStore from 'sentry/stores/projectsStore';
- import TeamStore from 'sentry/stores/teamStore';
- import {Project} from 'sentry/types';
- import {
- MEPSetting,
- MEPState,
- } from 'sentry/utils/performance/contexts/metricsEnhancedSetting';
- import TransactionSummary from 'sentry/views/performance/transactionSummary/transactionOverview';
- import {RouteContext} from 'sentry/views/routeContext';
- const teams = [
- TestStubs.Team({id: '1', slug: 'team1', name: 'Team 1'}),
- TestStubs.Team({id: '2', slug: 'team2', name: 'Team 2'}),
- ];
- function initializeData({
- features: additionalFeatures = [],
- query = {},
- project: prj,
- }: {features?: string[]; project?: Project; query?: Record<string, any>} = {}) {
- const features = ['discover-basic', 'performance-view', ...additionalFeatures];
- const project = prj ?? TestStubs.Project({teams});
- const organization = TestStubs.Organization({
- features,
- projects: [project],
- apdexThreshold: 400,
- });
- const initialData = initializeOrg({
- ...initializeOrg(),
- organization,
- router: {
- location: {
- query: {
- transaction: '/performance',
- project: project.id,
- transactionCursor: '1:0:0',
- ...query,
- },
- },
- },
- });
- ProjectsStore.loadInitialData(initialData.organization.projects);
- TeamStore.loadInitialData(teams, false, null);
- return initialData;
- }
- const TestComponent = ({
- router,
- ...props
- }: React.ComponentProps<typeof TransactionSummary> & {
- router: InjectedRouter<Record<string, string>, any>;
- }) => {
- const client = new QueryClient();
- return (
- <QueryClientProvider client={client}>
- <RouteContext.Provider value={{router, ...router}}>
- <TransactionSummary {...props} />
- </RouteContext.Provider>
- </QueryClientProvider>
- );
- };
- describe('Performance > TransactionSummary', function () {
- beforeEach(function () {
- // @ts-ignore no-console
- // eslint-disable-next-line no-console
- jest.spyOn(console, 'error').mockImplementation(jest.fn());
- MockApiClient.clearMockResponses();
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/projects/',
- body: [],
- });
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/tags/',
- body: [],
- });
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/tags/user.email/values/',
- body: [],
- });
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/events-stats/',
- body: {data: [[123, []]]},
- });
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/releases/stats/',
- body: [],
- });
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/issues/?limit=5&project=2&query=is%3Aunresolved%20transaction%3A%2Fperformance&sort=new&statsPeriod=14d',
- body: [],
- });
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/users/',
- body: [],
- });
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/recent-searches/',
- body: [],
- });
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/recent-searches/',
- method: 'POST',
- body: [],
- });
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/sdk-updates/',
- body: [],
- });
- MockApiClient.addMockResponse({
- url: '/prompts-activity/',
- body: {},
- });
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/events-facets-performance/',
- body: {},
- });
- // Mock totals for the sidebar and other summary data
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/eventsv2/',
- body: {
- meta: {
- count: 'number',
- apdex: 'number',
- count_miserable_user: 'number',
- user_misery: 'number',
- count_unique_user: 'number',
- p95: 'number',
- failure_rate: 'number',
- tpm: 'number',
- project_threshold_config: 'string',
- },
- data: [
- {
- count: 2,
- apdex: 0.6,
- count_miserable_user: 122,
- user_misery: 0.114,
- count_unique_user: 1,
- p95: 750.123,
- failure_rate: 1,
- tpm: 1,
- project_threshold_config: ['duration', 300],
- },
- ],
- },
- match: [
- (_url, options) => {
- return options.query?.field?.includes('p95()');
- },
- ],
- });
- // Eventsv2 Transaction list response
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/eventsv2/',
- headers: {
- Link:
- '<http://localhost/api/0/organizations/org-slug/eventsv2/?cursor=2:0:0>; rel="next"; results="true"; cursor="2:0:0",' +
- '<http://localhost/api/0/organizations/org-slug/eventsv2/?cursor=1:0:0>; rel="previous"; results="false"; cursor="1:0:0"',
- },
- body: {
- meta: {
- id: 'string',
- 'user.display': 'string',
- 'transaction.duration': 'duration',
- 'project.id': 'integer',
- timestamp: 'date',
- },
- data: [
- {
- id: 'deadbeef',
- 'user.display': 'uhoh@example.com',
- 'transaction.duration': 400,
- 'project.id': 2,
- timestamp: '2020-05-21T15:31:18+00:00',
- },
- ],
- },
- match: [
- (_url, options) => {
- return options.query?.field?.includes('user.display');
- },
- ],
- });
- // Eventsv2 Mock totals for status breakdown
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/eventsv2/',
- body: {
- meta: {
- 'transaction.status': 'string',
- count: 'number',
- },
- data: [
- {
- count: 2,
- 'transaction.status': 'ok',
- },
- ],
- },
- match: [
- (_url, options) => {
- return options.query?.field?.includes('transaction.status');
- },
- ],
- });
- // Events Mock totals for the sidebar and other summary data
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/events/',
- body: {
- meta: {
- fields: {
- 'count()': 'number',
- 'apdex()': 'number',
- 'count_miserable_user()': 'number',
- 'user_misery()': 'number',
- 'count_unique_user()': 'number',
- 'p95()': 'number',
- 'failure_rate()': 'number',
- 'tpm()': 'number',
- project_threshold_config: 'string',
- },
- },
- data: [
- {
- 'count()': 2,
- 'apdex()': 0.6,
- 'count_miserable_user()': 122,
- 'user_misery()': 0.114,
- 'count_unique_user()': 1,
- 'p95()': 750.123,
- 'failure_rate()': 1,
- 'tpm()': 1,
- project_threshold_config: ['duration', 300],
- },
- ],
- },
- match: [
- (_url, options) => {
- return options.query?.field?.includes('p95()');
- },
- ],
- });
- // Events Transaction list response
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/events/',
- headers: {
- Link:
- '<http://localhost/api/0/organizations/org-slug/events/?cursor=2:0:0>; rel="next"; results="true"; cursor="2:0:0",' +
- '<http://localhost/api/0/organizations/org-slug/events/?cursor=1:0:0>; rel="previous"; results="false"; cursor="1:0:0"',
- },
- body: {
- meta: {
- fields: {
- id: 'string',
- 'user.display': 'string',
- 'transaction.duration': 'duration',
- 'project.id': 'integer',
- timestamp: 'date',
- },
- },
- data: [
- {
- id: 'deadbeef',
- 'user.display': 'uhoh@example.com',
- 'transaction.duration': 400,
- 'project.id': 2,
- timestamp: '2020-05-21T15:31:18+00:00',
- },
- ],
- },
- match: [
- (_url, options) => {
- return options.query?.field?.includes('user.display');
- },
- ],
- });
- // Events Mock totals for status breakdown
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/events/',
- body: {
- meta: {
- fields: {
- 'transaction.status': 'string',
- 'count()': 'number',
- },
- },
- data: [
- {
- 'count()': 2,
- 'transaction.status': 'ok',
- },
- ],
- },
- match: [
- (_url, options) => {
- return options.query?.field?.includes('transaction.status');
- },
- ],
- });
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/events-facets/',
- body: [
- {
- key: 'release',
- topValues: [{count: 3, value: 'abcd123', name: 'abcd123'}],
- },
- {
- key: 'environment',
- topValues: [{count: 2, value: 'dev', name: 'dev'}],
- },
- {
- key: 'foo',
- topValues: [{count: 1, value: 'bar', name: 'bar'}],
- },
- {
- key: 'user',
- topValues: [{count: 1, value: 'id:100', name: '100'}],
- },
- ],
- });
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/project-transaction-threshold-override/',
- method: 'GET',
- body: {
- threshold: '800',
- metric: 'lcp',
- },
- });
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/events-vitals/',
- body: {
- 'measurements.fcp': {
- poor: 3,
- meh: 100,
- good: 47,
- total: 150,
- p75: 1500,
- },
- 'measurements.lcp': {
- poor: 2,
- meh: 38,
- good: 40,
- total: 80,
- p75: 2750,
- },
- 'measurements.fid': {
- poor: 2,
- meh: 53,
- good: 5,
- total: 60,
- p75: 1000,
- },
- 'measurements.cls': {
- poor: 3,
- meh: 10,
- good: 4,
- total: 17,
- p75: 0.2,
- },
- },
- });
- MockApiClient.addMockResponse({
- method: 'GET',
- url: `/organizations/org-slug/key-transactions-list/`,
- body: teams.map(({id}) => ({
- team: id,
- count: 0,
- keyed: [],
- })),
- });
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/events-has-measurements/',
- body: {measurements: false},
- });
- jest.spyOn(MEPSetting, 'get').mockImplementation(() => MEPState.auto);
- });
- afterEach(function () {
- MockApiClient.clearMockResponses();
- ProjectsStore.reset();
- jest.clearAllMocks();
- // @ts-ignore no-console
- // eslint-disable-next-line no-console
- console.error.mockRestore();
- });
- describe('with eventsv2', function () {
- it('renders basic UI elements', async function () {
- const {organization, router, routerContext} = initializeData();
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- // It shows the header
- await screen.findByText('Transaction Summary');
- expect(screen.getByRole('heading', {name: '/performance'})).toBeInTheDocument();
- // It shows a chart
- expect(
- screen.getByRole('button', {name: 'Display Duration Breakdown'})
- ).toBeInTheDocument();
- // It shows a searchbar
- expect(screen.getByLabelText('Search events')).toBeInTheDocument();
- // It shows a table
- expect(screen.getByTestId('transactions-table')).toBeInTheDocument();
- // Ensure open in discover button exists.
- expect(screen.getByTestId('transaction-events-open')).toBeInTheDocument();
- // Ensure open issues button exists.
- expect(screen.getByRole('button', {name: 'Open in Issues'})).toBeInTheDocument();
- // Ensure transaction filter button exists
- expect(screen.getByText('Filter').closest('button')).toBeInTheDocument();
- // Ensure create alert from discover is hidden without metric alert
- expect(
- screen.queryByRole('button', {name: 'Create Alert'})
- ).not.toBeInTheDocument();
- // Ensure status breakdown exists
- expect(screen.getByText('Status Breakdown')).toBeInTheDocument();
- });
- it('renders feature flagged UI elements', function () {
- const {organization, router, routerContext} = initializeData({
- features: ['incidents'],
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- // Ensure create alert from discover is shown with metric alerts
- expect(screen.getByRole('button', {name: 'Create Alert'})).toBeInTheDocument();
- });
- it('renders Web Vitals widget', async function () {
- const {organization, router, routerContext} = initializeData({
- project: TestStubs.Project({teams, platform: 'javascript'}),
- query: {
- query:
- 'transaction.duration:<15m transaction.op:pageload event.type:transaction transaction:/organizations/:orgId/issues/',
- },
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- // It renders the web vitals widget
- await screen.findByRole('heading', {name: 'Web Vitals'});
- const vitalStatues = screen.getAllByTestId('vital-status');
- expect(vitalStatues).toHaveLength(3);
- expect(vitalStatues[0]).toHaveTextContent('31%');
- expect(vitalStatues[1]).toHaveTextContent('65%');
- expect(vitalStatues[2]).toHaveTextContent('3%');
- });
- it('renders sidebar widgets', async function () {
- const {organization, router, routerContext} = initializeData();
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- // Renders Apdex widget
- await screen.findByRole('heading', {name: 'Apdex'});
- expect(await screen.findByTestId('apdex-summary-value')).toHaveTextContent('0.6');
- // Renders Failure Rate widget
- expect(screen.getByRole('heading', {name: 'Failure Rate'})).toBeInTheDocument();
- expect(screen.getByTestId('failure-rate-summary-value')).toHaveTextContent('100%');
- // Renders TPM widget
- expect(screen.getByRole('heading', {name: 'TPM'})).toBeInTheDocument();
- expect(screen.getByTestId('tpm-summary-value')).toHaveTextContent('1 tpm');
- });
- it('fetches transaction threshold', function () {
- const {organization, router, routerContext} = initializeData();
- const getTransactionThresholdMock = MockApiClient.addMockResponse({
- url: '/organizations/org-slug/project-transaction-threshold-override/',
- method: 'GET',
- body: {
- threshold: '800',
- metric: 'lcp',
- },
- });
- const getProjectThresholdMock = MockApiClient.addMockResponse({
- url: '/projects/org-slug/project-slug/transaction-threshold/configure/',
- method: 'GET',
- body: {
- threshold: '200',
- metric: 'duration',
- },
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- expect(getTransactionThresholdMock).toHaveBeenCalledTimes(1);
- expect(getProjectThresholdMock).not.toHaveBeenCalled();
- });
- it('fetches project transaction threshdold', async function () {
- const {organization, router, routerContext} = initializeData();
- const getTransactionThresholdMock = MockApiClient.addMockResponse({
- url: '/organizations/org-slug/project-transaction-threshold-override/',
- method: 'GET',
- statusCode: 404,
- });
- const getProjectThresholdMock = MockApiClient.addMockResponse({
- url: '/projects/org-slug/project-slug/transaction-threshold/configure/',
- method: 'GET',
- body: {
- threshold: '200',
- metric: 'duration',
- },
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- await screen.findByText('Transaction Summary');
- expect(getTransactionThresholdMock).toHaveBeenCalledTimes(1);
- expect(getProjectThresholdMock).toHaveBeenCalledTimes(1);
- });
- it('triggers a navigation on search', function () {
- const {organization, router, routerContext} = initializeData();
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- // Fill out the search box, and submit it.
- userEvent.type(screen.getByLabelText('Search events'), 'user.email:uhoh*{enter}');
- // Check the navigation.
- expect(browserHistory.push).toHaveBeenCalledTimes(1);
- expect(browserHistory.push).toHaveBeenCalledWith({
- pathname: undefined,
- query: {
- transaction: '/performance',
- project: '2',
- statsPeriod: '14d',
- query: 'user.email:uhoh*',
- transactionCursor: '1:0:0',
- },
- });
- });
- it('can mark a transaction as key', async function () {
- const {organization, router, routerContext} = initializeData();
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- const mockUpdate = MockApiClient.addMockResponse({
- url: `/organizations/org-slug/key-transactions/`,
- method: 'POST',
- body: {},
- });
- await screen.findByRole('button', {name: 'Star for Team'});
- // Click the key transaction button
- userEvent.click(screen.getByRole('button', {name: 'Star for Team'}));
- userEvent.click(screen.getByText('team1'), undefined, {
- skipPointerEventsCheck: true,
- });
- // Ensure request was made.
- expect(mockUpdate).toHaveBeenCalled();
- });
- it('triggers a navigation on transaction filter', async function () {
- const {organization, router, routerContext} = initializeData();
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- await screen.findByText('Transaction Summary');
- // Open the transaction filter dropdown
- userEvent.click(
- screen.getByRole('button', {name: 'Filter Slow Transactions (p95)'})
- );
- userEvent.click(screen.getAllByText('Slow Transactions (p95)')[1]);
- // Check the navigation.
- expect(browserHistory.push).toHaveBeenCalledWith({
- pathname: undefined,
- query: {
- transaction: '/performance',
- project: '2',
- showTransactions: 'slow',
- transactionCursor: undefined,
- },
- });
- });
- it('renders pagination buttons', async function () {
- const {organization, router, routerContext} = initializeData();
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- await screen.findByText('Transaction Summary');
- expect(await screen.findByLabelText('Previous')).toBeInTheDocument();
- // Click the 'next' button
- userEvent.click(screen.getByLabelText('Next'));
- // Check the navigation.
- expect(browserHistory.push).toHaveBeenCalledWith({
- pathname: undefined,
- query: {
- transaction: '/performance',
- project: '2',
- transactionCursor: '2:0:0',
- },
- });
- });
- it('forwards conditions to related issues', async function () {
- const issueGet = MockApiClient.addMockResponse({
- url: '/organizations/org-slug/issues/?limit=5&project=2&query=tag%3Avalue%20is%3Aunresolved%20transaction%3A%2Fperformance&sort=new&statsPeriod=14d',
- body: [],
- });
- const {organization, router, routerContext} = initializeData({
- query: {query: 'tag:value'},
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- await screen.findByText('Transaction Summary');
- expect(issueGet).toHaveBeenCalled();
- });
- it('does not forward event type to related issues', async function () {
- const issueGet = MockApiClient.addMockResponse({
- url: '/organizations/org-slug/issues/?limit=5&project=2&query=tag%3Avalue%20is%3Aunresolved%20transaction%3A%2Fperformance&sort=new&statsPeriod=14d',
- body: [],
- match: [
- (_, options) => {
- // event.type must NOT be in the query params
- return !options.query?.query?.includes('event.type');
- },
- ],
- });
- const {organization, router, routerContext} = initializeData({
- query: {query: 'tag:value event.type:transaction'},
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- await screen.findByText('Transaction Summary');
- expect(issueGet).toHaveBeenCalled();
- });
- it('renders the suspect spans table if the feature is enabled', async function () {
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/events-spans-performance/',
- body: [],
- });
- const {organization, router, routerContext} = initializeData({
- features: ['performance-suspect-spans-view'],
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- expect(await screen.findByText('Suspect Spans')).toBeInTheDocument();
- });
- it('adds search condition on transaction status when clicking on status breakdown', async function () {
- const {organization, router, routerContext} = initializeData();
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- await screen.findByTestId('status-ok');
- userEvent.click(screen.getByTestId('status-ok'));
- expect(browserHistory.push).toHaveBeenCalledTimes(1);
- expect(browserHistory.push).toHaveBeenCalledWith(
- expect.objectContaining({
- query: expect.objectContaining({
- query: expect.stringContaining('transaction.status:ok'),
- }),
- })
- );
- });
- it('appends tag value to existing query when clicked', async function () {
- const {organization, router, routerContext} = initializeData();
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- await screen.findByText('Tag Summary');
- userEvent.click(
- screen.getByLabelText('Add the environment dev segment tag to the search query')
- );
- userEvent.click(
- screen.getByLabelText('Add the foo bar segment tag to the search query')
- );
- userEvent.click(
- screen.getByLabelText('Add the user id:100 segment tag to the search query')
- );
- expect(router.push).toHaveBeenCalledTimes(3);
- expect(router.push).toHaveBeenNthCalledWith(1, {
- query: {
- project: '2',
- query: 'tags[environment]:dev',
- transaction: '/performance',
- transactionCursor: '1:0:0',
- },
- });
- expect(router.push).toHaveBeenNthCalledWith(2, {
- query: {
- project: '2',
- query: 'foo:bar',
- transaction: '/performance',
- transactionCursor: '1:0:0',
- },
- });
- expect(router.push).toHaveBeenNthCalledWith(3, {
- query: {
- project: '2',
- query: 'user:"id:100"',
- transaction: '/performance',
- transactionCursor: '1:0:0',
- },
- });
- });
- });
- describe('with events', function () {
- it('renders basic UI elements', async function () {
- const {organization, router, routerContext} = initializeData({
- features: ['performance-frontend-use-events-endpoint'],
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- // It shows the header
- await screen.findByText('Transaction Summary');
- expect(screen.getByRole('heading', {name: '/performance'})).toBeInTheDocument();
- // It shows a chart
- expect(
- screen.getByRole('button', {name: 'Display Duration Breakdown'})
- ).toBeInTheDocument();
- // It shows a searchbar
- expect(screen.getByLabelText('Search events')).toBeInTheDocument();
- // It shows a table
- expect(screen.getByTestId('transactions-table')).toBeInTheDocument();
- // Ensure open in discover button exists.
- expect(screen.getByTestId('transaction-events-open')).toBeInTheDocument();
- // Ensure open issues button exists.
- expect(screen.getByRole('button', {name: 'Open in Issues'})).toBeInTheDocument();
- // Ensure transaction filter button exists
- expect(screen.getByText('Filter').closest('button')).toBeInTheDocument();
- // Ensure create alert from discover is hidden without metric alert
- expect(
- screen.queryByRole('button', {name: 'Create Alert'})
- ).not.toBeInTheDocument();
- // Ensure status breakdown exists
- expect(screen.getByText('Status Breakdown')).toBeInTheDocument();
- });
- it('renders feature flagged UI elements', function () {
- const {organization, router, routerContext} = initializeData({
- features: ['incidents', 'performance-frontend-use-events-endpoint'],
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- // Ensure create alert from discover is shown with metric alerts
- expect(screen.getByRole('button', {name: 'Create Alert'})).toBeInTheDocument();
- });
- it('renders Web Vitals widget', async function () {
- const {organization, router, routerContext} = initializeData({
- features: ['performance-frontend-use-events-endpoint'],
- project: TestStubs.Project({teams, platform: 'javascript'}),
- query: {
- query:
- 'transaction.duration:<15m transaction.op:pageload event.type:transaction transaction:/organizations/:orgId/issues/',
- },
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- // It renders the web vitals widget
- await screen.findByRole('heading', {name: 'Web Vitals'});
- const vitalStatues = screen.getAllByTestId('vital-status');
- expect(vitalStatues).toHaveLength(3);
- expect(vitalStatues[0]).toHaveTextContent('31%');
- expect(vitalStatues[1]).toHaveTextContent('65%');
- expect(vitalStatues[2]).toHaveTextContent('3%');
- });
- it('renders sidebar widgets', async function () {
- const {organization, router, routerContext} = initializeData({
- features: ['performance-frontend-use-events-endpoint'],
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- // Renders Apdex widget
- await screen.findByRole('heading', {name: 'Apdex'});
- expect(await screen.findByTestId('apdex-summary-value')).toHaveTextContent('0.6');
- // Renders Failure Rate widget
- expect(screen.getByRole('heading', {name: 'Failure Rate'})).toBeInTheDocument();
- expect(screen.getByTestId('failure-rate-summary-value')).toHaveTextContent('100%');
- // Renders TPM widget
- expect(screen.getByRole('heading', {name: 'TPM'})).toBeInTheDocument();
- expect(screen.getByTestId('tpm-summary-value')).toHaveTextContent('1 tpm');
- });
- it('fetches transaction threshold', function () {
- const {organization, router, routerContext} = initializeData({
- features: ['performance-frontend-use-events-endpoint'],
- });
- const getTransactionThresholdMock = MockApiClient.addMockResponse({
- url: '/organizations/org-slug/project-transaction-threshold-override/',
- method: 'GET',
- body: {
- threshold: '800',
- metric: 'lcp',
- },
- });
- const getProjectThresholdMock = MockApiClient.addMockResponse({
- url: '/projects/org-slug/project-slug/transaction-threshold/configure/',
- method: 'GET',
- body: {
- threshold: '200',
- metric: 'duration',
- },
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- expect(getTransactionThresholdMock).toHaveBeenCalledTimes(1);
- expect(getProjectThresholdMock).not.toHaveBeenCalled();
- });
- it('fetches project transaction threshdold', async function () {
- const {organization, router, routerContext} = initializeData({
- features: ['performance-frontend-use-events-endpoint'],
- });
- const getTransactionThresholdMock = MockApiClient.addMockResponse({
- url: '/organizations/org-slug/project-transaction-threshold-override/',
- method: 'GET',
- statusCode: 404,
- });
- const getProjectThresholdMock = MockApiClient.addMockResponse({
- url: '/projects/org-slug/project-slug/transaction-threshold/configure/',
- method: 'GET',
- body: {
- threshold: '200',
- metric: 'duration',
- },
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- await screen.findByText('Transaction Summary');
- expect(getTransactionThresholdMock).toHaveBeenCalledTimes(1);
- expect(getProjectThresholdMock).toHaveBeenCalledTimes(1);
- });
- it('triggers a navigation on search', function () {
- const {organization, router, routerContext} = initializeData({
- features: ['performance-frontend-use-events-endpoint'],
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- // Fill out the search box, and submit it.
- userEvent.type(screen.getByLabelText('Search events'), 'user.email:uhoh*{enter}');
- // Check the navigation.
- expect(browserHistory.push).toHaveBeenCalledTimes(1);
- expect(browserHistory.push).toHaveBeenCalledWith({
- pathname: undefined,
- query: {
- transaction: '/performance',
- project: '2',
- statsPeriod: '14d',
- query: 'user.email:uhoh*',
- transactionCursor: '1:0:0',
- },
- });
- });
- it('can mark a transaction as key', async function () {
- const {organization, router, routerContext} = initializeData({
- features: ['performance-frontend-use-events-endpoint'],
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- const mockUpdate = MockApiClient.addMockResponse({
- url: `/organizations/org-slug/key-transactions/`,
- method: 'POST',
- body: {},
- });
- await screen.findByRole('button', {name: 'Star for Team'});
- // Click the key transaction button
- userEvent.click(screen.getByRole('button', {name: 'Star for Team'}));
- userEvent.click(screen.getByText('team1'), undefined, {
- skipPointerEventsCheck: true,
- });
- // Ensure request was made.
- expect(mockUpdate).toHaveBeenCalled();
- });
- it('triggers a navigation on transaction filter', async function () {
- const {organization, router, routerContext} = initializeData({
- features: ['performance-frontend-use-events-endpoint'],
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- await screen.findByText('Transaction Summary');
- // Open the transaction filter dropdown
- userEvent.click(
- screen.getByRole('button', {name: 'Filter Slow Transactions (p95)'})
- );
- userEvent.click(screen.getAllByText('Slow Transactions (p95)')[1]);
- // Check the navigation.
- expect(browserHistory.push).toHaveBeenCalledWith({
- pathname: undefined,
- query: {
- transaction: '/performance',
- project: '2',
- showTransactions: 'slow',
- transactionCursor: undefined,
- },
- });
- });
- it('renders pagination buttons', async function () {
- const {organization, router, routerContext} = initializeData({
- features: ['performance-frontend-use-events-endpoint'],
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- await screen.findByText('Transaction Summary');
- expect(await screen.findByLabelText('Previous')).toBeInTheDocument();
- // Click the 'next' button
- userEvent.click(screen.getByLabelText('Next'));
- // Check the navigation.
- expect(browserHistory.push).toHaveBeenCalledWith({
- pathname: undefined,
- query: {
- transaction: '/performance',
- project: '2',
- transactionCursor: '2:0:0',
- },
- });
- });
- it('forwards conditions to related issues', async function () {
- const issueGet = MockApiClient.addMockResponse({
- url: '/organizations/org-slug/issues/?limit=5&project=2&query=tag%3Avalue%20is%3Aunresolved%20transaction%3A%2Fperformance&sort=new&statsPeriod=14d',
- body: [],
- });
- const {organization, router, routerContext} = initializeData({
- features: ['performance-frontend-use-events-endpoint'],
- query: {query: 'tag:value'},
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- await screen.findByText('Transaction Summary');
- expect(issueGet).toHaveBeenCalled();
- });
- it('does not forward event type to related issues', async function () {
- const issueGet = MockApiClient.addMockResponse({
- url: '/organizations/org-slug/issues/?limit=5&project=2&query=tag%3Avalue%20is%3Aunresolved%20transaction%3A%2Fperformance&sort=new&statsPeriod=14d',
- body: [],
- match: [
- (_, options) => {
- // event.type must NOT be in the query params
- return !options.query?.query?.includes('event.type');
- },
- ],
- });
- const {organization, router, routerContext} = initializeData({
- features: ['performance-frontend-use-events-endpoint'],
- query: {query: 'tag:value event.type:transaction'},
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- await screen.findByText('Transaction Summary');
- expect(issueGet).toHaveBeenCalled();
- });
- it('renders the suspect spans table if the feature is enabled', async function () {
- MockApiClient.addMockResponse({
- url: '/organizations/org-slug/events-spans-performance/',
- body: [],
- });
- const {organization, router, routerContext} = initializeData({
- features: [
- 'performance-suspect-spans-view',
- 'performance-frontend-use-events-endpoint',
- ],
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- expect(await screen.findByText('Suspect Spans')).toBeInTheDocument();
- });
- it('adds search condition on transaction status when clicking on status breakdown', async function () {
- const {organization, router, routerContext} = initializeData({
- features: ['performance-frontend-use-events-endpoint'],
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- await screen.findByTestId('status-ok');
- userEvent.click(screen.getByTestId('status-ok'));
- expect(browserHistory.push).toHaveBeenCalledTimes(1);
- expect(browserHistory.push).toHaveBeenCalledWith(
- expect.objectContaining({
- query: expect.objectContaining({
- query: expect.stringContaining('transaction.status:ok'),
- }),
- })
- );
- });
- it('appends tag value to existing query when clicked', async function () {
- const {organization, router, routerContext} = initializeData({
- features: ['performance-frontend-use-events-endpoint'],
- });
- render(<TestComponent router={router} location={router.location} />, {
- context: routerContext,
- organization,
- });
- await screen.findByText('Tag Summary');
- userEvent.click(
- screen.getByLabelText('Add the environment dev segment tag to the search query')
- );
- userEvent.click(
- screen.getByLabelText('Add the foo bar segment tag to the search query')
- );
- expect(router.push).toHaveBeenCalledTimes(2);
- expect(router.push).toHaveBeenNthCalledWith(1, {
- query: {
- project: '2',
- query: 'tags[environment]:dev',
- transaction: '/performance',
- transactionCursor: '1:0:0',
- },
- });
- expect(router.push).toHaveBeenNthCalledWith(2, {
- query: {
- project: '2',
- query: 'foo:bar',
- transaction: '/performance',
- transactionCursor: '1:0:0',
- },
- });
- });
- });
- });
|