diff --git a/x-pack/plugins/apm/jest.config.js b/x-pack/plugins/apm/jest.config.js index 4fd2e72776943..66b4b164a794c 100644 --- a/x-pack/plugins/apm/jest.config.js +++ b/x-pack/plugins/apm/jest.config.js @@ -11,7 +11,10 @@ module.exports = { preset: '@kbn/test', rootDir: path.resolve(__dirname, '../../..'), roots: ['/x-pack/plugins/apm'], - setupFiles: ['/x-pack/plugins/apm/.storybook/jest_setup.js'], + setupFiles: [ + '/x-pack/plugins/apm/jest_setup.js', + '/x-pack/plugins/apm/.storybook/jest_setup.js', + ], coverageDirectory: '/target/kibana-coverage/jest/x-pack/plugins/apm', coverageReporters: ['text', 'html'], collectCoverageFrom: [ diff --git a/x-pack/plugins/apm/jest_setup.js b/x-pack/plugins/apm/jest_setup.js new file mode 100644 index 0000000000000..df8ba56cdc1c3 --- /dev/null +++ b/x-pack/plugins/apm/jest_setup.js @@ -0,0 +1,14 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +/* global jest */ + +// When a `console.error` is encountered, throw the error to make the test fail. +// This effectively treats logged errors during the test run as failures. +jest.spyOn(console, 'error').mockImplementation((message) => { + throw new Error(message); +}); diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.test.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.test.tsx index 0e9639de4aa74..acee2a964d1eb 100644 --- a/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.test.tsx +++ b/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.test.tsx @@ -5,6 +5,7 @@ * 2.0. */ +import { __IntlProvider as IntlProvider } from '@kbn/i18n/react'; import { render, screen, waitFor } from '@testing-library/react'; import { createMemoryHistory } from 'history'; import React, { ReactNode } from 'react'; @@ -49,25 +50,27 @@ function Wrapper({ children }: { children?: ReactNode }) { }) as unknown as ApmPluginContextValue; return ( - - - - + + + - {children} - - - - + + {children} + + + + + ); } @@ -93,13 +96,13 @@ describe('transaction_details/distribution', () => { })); render( - - - + , + + { wrapper: Wrapper } ); await waitFor(() => { diff --git a/x-pack/plugins/apm/public/components/shared/backend_link.stories.tsx b/x-pack/plugins/apm/public/components/shared/backend_link.stories.tsx index 31bc2f2302798..500aa983b8b1d 100644 --- a/x-pack/plugins/apm/public/components/shared/backend_link.stories.tsx +++ b/x-pack/plugins/apm/public/components/shared/backend_link.stories.tsx @@ -31,6 +31,12 @@ export const Example: Story = (args) => { }; Example.args = { backendName: 'postgres', + query: { + environment: 'ENVIRONMENT_ALL', + kuery: '', + rangeFrom: 'now-15m', + rangeTo: 'now', + }, type: 'db', subtype: 'postgresql', }; diff --git a/x-pack/plugins/apm/public/components/shared/backend_link.test.tsx b/x-pack/plugins/apm/public/components/shared/backend_link.test.tsx new file mode 100644 index 0000000000000..683fec3a41725 --- /dev/null +++ b/x-pack/plugins/apm/public/components/shared/backend_link.test.tsx @@ -0,0 +1,19 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { composeStories } from '@storybook/testing-react'; +import { render } from '@testing-library/react'; +import React from 'react'; +import * as stories from './backend_link.stories'; + +const { Example } = composeStories(stories); + +describe('BackendLink', () => { + it('renders', () => { + expect(() => render()).not.toThrowError(); + }); +}); diff --git a/x-pack/plugins/apm/public/components/shared/charts/latency_chart/latency_chart.stories.tsx b/x-pack/plugins/apm/public/components/shared/charts/latency_chart/latency_chart.stories.tsx index ad51e66f1959c..e1921aca8d9ef 100644 --- a/x-pack/plugins/apm/public/components/shared/charts/latency_chart/latency_chart.stories.tsx +++ b/x-pack/plugins/apm/public/components/shared/charts/latency_chart/latency_chart.stories.tsx @@ -20,18 +20,18 @@ import { ALERT_RULE_UUID, ALERT_RULE_NAME, ALERT_RULE_CATEGORY, + ALERT_RULE_CONSUMER, ALERT_RULE_PRODUCER, + SPACE_IDS, } from '@kbn/rule-data-utils'; -import { StoryContext } from '@storybook/react'; -import React, { ComponentType } from 'react'; -import { MemoryRouter, Route } from 'react-router-dom'; +import { Meta, Story } from '@storybook/react'; +import React from 'react'; +import { MemoryRouter } from 'react-router-dom'; import { KibanaContextProvider } from '../../../../../../../../src/plugins/kibana_react/public'; import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values'; import { LatencyAggregationType } from '../../../../../common/latency_aggregation_types'; -import { - ApmPluginContext, - ApmPluginContextValue, -} from '../../../../context/apm_plugin/apm_plugin_context'; +import type { ApmPluginContextValue } from '../../../../context/apm_plugin/apm_plugin_context'; +import { MockApmPluginContextWrapper } from '../../../../context/apm_plugin/mock_apm_plugin_context'; import { APMServiceContext } from '../../../../context/apm_service/apm_service_context'; import { ChartPointerEventContextProvider } from '../../../../context/chart_pointer_event/chart_pointer_event_context'; import { MockUrlParamsContextProvider } from '../../../../context/url_params_context/mock_url_params_context_provider'; @@ -46,7 +46,7 @@ interface Args { latencyChartResponse: APIReturnType<'GET /internal/apm/services/{serviceName}/transactions/charts/latency'>; } -export default { +const stories: Meta = { title: 'shared/charts/LatencyChart', component: LatencyChart, argTypes: { @@ -57,7 +57,7 @@ export default { }, }, decorators: [ - (Story: ComponentType, { args }: StoryContext) => { + (StoryComponent, { args }) => { const { alertsResponse, latencyChartResponse } = args as Args; const serviceName = 'testService'; @@ -88,44 +88,46 @@ export default { const transactionType = `${Math.random()}`; // So we don't memoize return ( - - - - + + + - - - - - - - - - - - + + + + + + + + ); }, ], }; -export function Example(_args: Args) { +export default stories; + +export const Example: Story = () => { return ( ); -} +}; Example.args = { alertsResponse: { alerts: [ @@ -139,6 +141,7 @@ Example.args = { tags: ['apm', 'service.name:frontend-rum'], 'transaction.type': ['page-load'], [ALERT_RULE_PRODUCER]: ['apm'], + [ALERT_RULE_CONSUMER]: ['apm'], [ALERT_UUID]: ['af2ae371-df79-4fca-b0eb-a2dbd9478180'], [ALERT_RULE_UUID]: ['82e0ee40-c2f4-11eb-9a42-a9da66a1722f'], 'event.action': ['active'], @@ -149,9 +152,11 @@ Example.args = { [ALERT_START]: ['2021-06-02T04:00:00.000Z'], 'event.kind': ['state'], [ALERT_RULE_CATEGORY]: ['Latency threshold'], + [SPACE_IDS]: [], }, { [ALERT_RULE_TYPE_ID]: ['apm.transaction_duration'], + [ALERT_EVALUATION_VALUE]: [2001708.19], 'service.name': ['frontend-rum'], [ALERT_RULE_NAME]: ['Latency threshold | frontend-rum'], @@ -160,6 +165,7 @@ Example.args = { tags: ['apm', 'service.name:frontend-rum'], 'transaction.type': ['page-load'], [ALERT_RULE_PRODUCER]: ['apm'], + [ALERT_RULE_CONSUMER]: ['apm'], [ALERT_SEVERITY]: ['warning'], [ALERT_UUID]: ['af2ae371-df79-4fca-b0eb-a2dbd9478181'], [ALERT_RULE_UUID]: ['82e0ee40-c2f4-11eb-9a42-a9da66a1722f'], @@ -171,9 +177,11 @@ Example.args = { [ALERT_START]: ['2021-06-02T10:45:00.000Z'], 'event.kind': ['state'], [ALERT_RULE_CATEGORY]: ['Latency threshold'], + [SPACE_IDS]: [], }, { [ALERT_RULE_TYPE_ID]: ['apm.transaction_duration'], + [ALERT_EVALUATION_VALUE]: [2001708.19], 'service.name': ['frontend-rum'], [ALERT_RULE_NAME]: ['Latency threshold | frontend-rum'], @@ -182,6 +190,7 @@ Example.args = { tags: ['apm', 'service.name:frontend-rum'], 'transaction.type': ['page-load'], [ALERT_RULE_PRODUCER]: ['apm'], + [ALERT_RULE_CONSUMER]: ['apm'], [ALERT_SEVERITY]: ['critical'], [ALERT_UUID]: ['af2ae371-df79-4fca-b0eb-a2dbd9478182'], [ALERT_RULE_UUID]: ['82e0ee40-c2f4-11eb-9a42-a9da66a1722f'], @@ -193,6 +202,7 @@ Example.args = { [ALERT_START]: ['2021-06-02T16:50:00.000Z'], 'event.kind': ['state'], [ALERT_RULE_CATEGORY]: ['Latency threshold'], + [SPACE_IDS]: [], }, ], }, @@ -801,19 +811,24 @@ Example.args = { }, ], }, - previousPeriod: { latencyTimeseries: [] }, + previousPeriod: { latencyTimeseries: [], overallAvgDuration: null }, }, }; -export function NoData(_args: Args) { +export const NoData: Story = () => { return ( ); -} +}; NoData.args = { alertsResponse: { alerts: [] }, latencyChartResponse: { - currentPeriod: { latencyTimeseries: [] }, - previousPeriod: { latencyTimeseries: [] }, + anomalyTimeseries: { + jobId: 'apm-production-00aa-high_mean_transaction_duration', + anomalyScore: [], + anomalyBoundaries: [], + }, + currentPeriod: { latencyTimeseries: [], overallAvgDuration: null }, + previousPeriod: { latencyTimeseries: [], overallAvgDuration: null }, }, }; diff --git a/x-pack/plugins/apm/public/components/shared/charts/latency_chart/latency_chart.test.tsx b/x-pack/plugins/apm/public/components/shared/charts/latency_chart/latency_chart.test.tsx new file mode 100644 index 0000000000000..f5f7c87ed22de --- /dev/null +++ b/x-pack/plugins/apm/public/components/shared/charts/latency_chart/latency_chart.test.tsx @@ -0,0 +1,21 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { composeStories } from '@storybook/testing-react'; +import { render, waitFor } from '@testing-library/react'; +import React from 'react'; +import * as stories from './latency_chart.stories'; + +const { Example } = composeStories(stories); + +describe('LatencyChart', () => { + it('renders', async () => { + await waitFor(() => { + expect(() => render()).not.toThrowError(); + }); + }); +}); diff --git a/x-pack/plugins/apm/public/components/shared/service_link.stories.tsx b/x-pack/plugins/apm/public/components/shared/service_link.stories.tsx index f25838a3552f4..c50c1911afe79 100644 --- a/x-pack/plugins/apm/public/components/shared/service_link.stories.tsx +++ b/x-pack/plugins/apm/public/components/shared/service_link.stories.tsx @@ -31,5 +31,11 @@ export const Example: Story = (args) => { }; Example.args = { agentName: 'java', + query: { + environment: 'ENVIRONMENT_ALL', + kuery: '', + rangeFrom: 'now-15m', + rangeTo: 'now', + }, serviceName: 'opbeans-java', }; diff --git a/x-pack/plugins/apm/public/components/shared/service_link.test.tsx b/x-pack/plugins/apm/public/components/shared/service_link.test.tsx new file mode 100644 index 0000000000000..63311b306e6bb --- /dev/null +++ b/x-pack/plugins/apm/public/components/shared/service_link.test.tsx @@ -0,0 +1,19 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { composeStories } from '@storybook/testing-react'; +import { render } from '@testing-library/react'; +import React from 'react'; +import * as stories from './service_link.stories'; + +const { Example } = composeStories(stories); + +describe('ServiceLink', () => { + it('renders', () => { + expect(() => render()).not.toThrowError(); + }); +});