From b71817156ff599bcb6dc4aecec30bdac4f8b1423 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cau=C3=AA=20Marcondes?=
<55978943+cauemarcondes@users.noreply.github.com>
Date: Thu, 14 May 2020 06:03:55 +0100
Subject: [PATCH] [APM] Cannot click through to details of an error on the
waterfall page if the error is missing `transaction.id` (#66386)
* removing transaction from link when it isnt defined
* refacroting test
* refacroting test
---
.../{__test__ => }/AgentMarker.test.tsx | 4 +-
.../Timeline/Marker/ErrorMarker.test.tsx | 79 +++++++++++++++++++
.../charts/Timeline/Marker/ErrorMarker.tsx | 12 ++-
.../__snapshots__/AgentMarker.test.tsx.snap | 0
.../index.test.tsx.snap} | 0
.../Marker/__test__/ErrorMarker.test.tsx | 30 -------
.../__snapshots__/ErrorMarker.test.tsx.snap | 49 ------------
.../Marker.test.tsx => index.test.tsx} | 6 +-
8 files changed, 93 insertions(+), 87 deletions(-)
rename x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/{__test__ => }/AgentMarker.test.tsx (76%)
create mode 100644 x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx
rename x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/{__test__ => }/__snapshots__/AgentMarker.test.tsx.snap (100%)
rename x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/{__test__/__snapshots__/Marker.test.tsx.snap => __snapshots__/index.test.tsx.snap} (100%)
delete mode 100644 x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/ErrorMarker.test.tsx
delete mode 100644 x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/__snapshots__/ErrorMarker.test.tsx.snap
rename x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/{__test__/Marker.test.tsx => index.test.tsx} (78%)
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/AgentMarker.test.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.test.tsx
similarity index 76%
rename from x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/AgentMarker.test.tsx
rename to x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.test.tsx
index 718bbc5e38419..cfee8ee1e2fd8 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/__test__/AgentMarker.test.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.test.tsx
@@ -6,8 +6,8 @@
import { shallow } from 'enzyme';
import React from 'react';
-import { AgentMarker } from '../AgentMarker';
-import { AgentMark } from '../../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
+import { AgentMarker } from './AgentMarker';
+import { AgentMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
describe('AgentMarker', () => {
const mark = {
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx
new file mode 100644
index 0000000000000..e3c7c64bd096a
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.test.tsx
@@ -0,0 +1,79 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { ErrorMarker } from './ErrorMarker';
+import { ErrorMark } from '../../../../app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Marks/get_error_marks';
+import { render, fireEvent } from '@testing-library/react';
+import { act } from '@testing-library/react-hooks';
+import { expectTextsInDocument } from '../../../../../utils/testHelpers';
+
+describe('ErrorMarker', () => {
+ const mark = {
+ id: 'agent',
+ offset: 10000,
+ type: 'errorMark',
+ verticalLine: true,
+ error: {
+ trace: { id: '123' },
+ transaction: { id: '456' },
+ error: { grouping_key: '123' },
+ service: { name: 'bar' }
+ },
+ serviceColor: '#fff'
+ } as ErrorMark;
+
+ function openPopover(errorMark: ErrorMark) {
+ const component = render();
+ act(() => {
+ fireEvent.click(component.getByTestId('popover'));
+ });
+ expectTextsInDocument(component, ['10,000 μs']);
+ return component;
+ }
+ function getKueryDecoded(url: string) {
+ return decodeURIComponent(url.substring(url.indexOf('kuery='), url.length));
+ }
+ it('renders link with trace and transaction', () => {
+ const component = openPopover(mark);
+ const errorLink = component.getByTestId('errorLink') as HTMLAnchorElement;
+ expect(getKueryDecoded(errorLink.hash)).toEqual(
+ 'kuery=trace.id : "123" and transaction.id : "456"'
+ );
+ });
+ it('renders link with trace', () => {
+ const { transaction, ...withoutTransaction } = mark.error;
+ const newMark = {
+ ...mark,
+ error: withoutTransaction
+ } as ErrorMark;
+ const component = openPopover(newMark);
+ const errorLink = component.getByTestId('errorLink') as HTMLAnchorElement;
+ expect(getKueryDecoded(errorLink.hash)).toEqual('kuery=trace.id : "123"');
+ });
+ it('renders link with transaction', () => {
+ const { trace, ...withoutTrace } = mark.error;
+ const newMark = {
+ ...mark,
+ error: withoutTrace
+ } as ErrorMark;
+ const component = openPopover(newMark);
+ const errorLink = component.getByTestId('errorLink') as HTMLAnchorElement;
+ expect(getKueryDecoded(errorLink.hash)).toEqual(
+ 'kuery=transaction.id : "456"'
+ );
+ });
+ it('renders link without trance and transaction', () => {
+ const { trace, transaction, ...withoutTraceAndTransaction } = mark.error;
+ const newMark = {
+ ...mark,
+ error: withoutTraceAndTransaction
+ } as ErrorMark;
+ const component = openPopover(newMark);
+ const errorLink = component.getByTestId('errorLink') as HTMLAnchorElement;
+ expect(getKueryDecoded(errorLink.hash)).toEqual('kuery=');
+ });
+});
diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx
index 51368a4fb946d..0bb3d17199654 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx
@@ -50,6 +50,7 @@ export const ErrorMarker: React.FC = ({ mark }) => {
const button = (