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 = (