Skip to content

Commit

Permalink
Jest and Storybook fixes (#104991) (#106332)
Browse files Browse the repository at this point in the history
Co-authored-by: Nathan L Smith <nathan.smith@elastic.co>
  • Loading branch information
kibanamachine and smith authored Jul 20, 2021
1 parent 112f03d commit eba4bdc
Show file tree
Hide file tree
Showing 11 changed files with 149 additions and 139 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
* 2.0.
*/

import { Story } from '@storybook/react';
import { cloneDeep, merge } from 'lodash';
import React, { ComponentType } from 'react';
import { MemoryRouter, Route } from 'react-router-dom';
Expand All @@ -14,13 +15,14 @@ import {
mockApmPluginContextValue,
MockApmPluginContextWrapper,
} from '../../../context/apm_plugin/mock_apm_plugin_context';
import { ApmServiceContextProvider } from '../../../context/apm_service/apm_service_context';
import { MockUrlParamsContextProvider } from '../../../context/url_params_context/mock_url_params_context_provider';

export default {
title: 'alerting/TransactionDurationAlertTrigger',
component: TransactionDurationAlertTrigger,
decorators: [
(Story: ComponentType) => {
(StoryComponent: ComponentType) => {
const contextMock = (merge(cloneDeep(mockApmPluginContextValue), {
core: {
http: {
Expand All @@ -39,11 +41,13 @@ export default {

return (
<div style={{ width: 400 }}>
<MemoryRouter initialEntries={['/transactions/test-service-name']}>
<Route path="/transactions/:serviceName">
<MemoryRouter initialEntries={['/services/test-service-name']}>
<Route path="/services/:serviceName">
<MockApmPluginContextWrapper value={contextMock}>
<MockUrlParamsContextProvider>
<Story />
<ApmServiceContextProvider>
<StoryComponent />
</ApmServiceContextProvider>
</MockUrlParamsContextProvider>
</MockApmPluginContextWrapper>
</Route>
Expand All @@ -54,7 +58,7 @@ export default {
],
};

export function Example() {
export const Example: Story = () => {
const params = {
threshold: 1500,
aggregationType: 'avg' as const,
Expand All @@ -67,4 +71,4 @@ export function Example() {
setAlertProperty={() => undefined}
/>
);
}
};
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export function CustomLinkTable({ items = [], onCustomLinkSelected }: Props) {
truncateText: true,
},
{
width: 160,
width: '160px',
align: 'right',
field: '@timestamp',
name: i18n.translate(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { CoreStart } from '../../../../../../../../src/core/public';
import { MockApmPluginContextWrapper } from '../../../../context/apm_plugin/mock_apm_plugin_context';
import { createCallApmApi } from '../../../../services/rest/createCallApmApi';
import { Schema } from './';
import { ConfirmSwitchModal } from './confirm_switch_modal';

interface Args {
hasCloudAgentPolicy: boolean;
Expand Down Expand Up @@ -107,3 +108,18 @@ export default {
export const Example: Story = () => {
return <Schema />;
};

interface ModalArgs {
unsupportedConfigs: Array<{ key: string; value: string }>;
}

export const Modal: Story<ModalArgs> = ({ unsupportedConfigs }) => {
return (
<ConfirmSwitchModal
onCancel={() => {}}
onConfirm={() => {}}
unsupportedConfigs={unsupportedConfigs}
/>
);
};
Modal.args = { unsupportedConfigs: [{ key: 'test', value: '123' }] };
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ function ErrorGroupList({ items, serviceName }: Props) {
),
field: 'groupId',
sortable: false,
width: unit * 6,
width: `${unit * 6}px`,
render: (groupId: string) => {
return (
<GroupIdLink serviceName={serviceName} errorGroupId={groupId}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export function getServiceColumns({
name: i18n.translate('xpack.apm.servicesTable.healthColumnLabel', {
defaultMessage: 'Health',
}),
width: unit * 6,
width: `${unit * 6}px`,
sortable: true,
render: (_, { healthStatus }) => {
return (
Expand Down Expand Up @@ -135,7 +135,7 @@ export function getServiceColumns({
name: i18n.translate('xpack.apm.servicesTable.environmentColumnLabel', {
defaultMessage: 'Environment',
}),
width: unit * 10,
width: `${unit * 10}px`,
sortable: true,
render: (_, { environments }) => (
<EnvironmentBadge environments={environments ?? []} />
Expand All @@ -149,7 +149,7 @@ export function getServiceColumns({
'xpack.apm.servicesTable.transactionColumnLabel',
{ defaultMessage: 'Transaction type' }
),
width: unit * 10,
width: `${unit * 10}px`,
sortable: true,
},
]
Expand All @@ -169,7 +169,7 @@ export function getServiceColumns({
/>
),
align: 'left',
width: unit * 10,
width: `${unit * 10}px`,
},
{
field: 'transactionsPerMinute',
Expand All @@ -186,7 +186,7 @@ export function getServiceColumns({
/>
),
align: 'left',
width: unit * 10,
width: `${unit * 10}px`,
},
{
field: 'transactionErrorRate',
Expand All @@ -209,7 +209,7 @@ export function getServiceColumns({
);
},
align: 'left',
width: unit * 10,
width: `${unit * 10}px`,
},
];
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,10 @@ import { fromQuery } from '../../shared/Links/url_helpers';
import { MockUrlParamsContextProvider } from '../../../context/url_params_context/mock_url_params_context_provider';
import { uiSettingsServiceMock } from '../../../../../../../src/core/public/mocks';

const KibanaReactContext = createKibanaReactContext({
const KibanaReactContext = createKibanaReactContext(({
uiSettings: { get: () => true },
usageCollection: { reportUiCounter: () => {} },
} as Partial<CoreStart>);
} as unknown) as Partial<CoreStart>);

const mockParams = {
rangeFrom: 'now-15m',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,10 @@ import {
import { fromQuery } from '../../shared/Links/url_helpers';
import { TransactionOverview } from './';

const KibanaReactContext = createKibanaReactContext({
const KibanaReactContext = createKibanaReactContext(({
uiSettings: { get: () => true },
usageCollection: { reportUiCounter: () => {} },
} as Partial<CoreStart>);
} as unknown) as Partial<CoreStart>);

const history = createMemoryHistory();
jest.spyOn(history, 'push');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,73 +7,63 @@

import {
EuiCard,
EuiCodeBlock,
EuiFlexGroup,
EuiFlexItem,
EuiImage,
EuiSpacer,
EuiToolTip,
} from '@elastic/eui';
import type { Story } from '@storybook/react';
import React from 'react';
import { AGENT_NAMES } from '../../../../common/agent_name';
import { useTheme } from '../../../hooks/use_theme';
import { getAgentIcon } from './get_agent_icon';
import { AgentIcon } from './index';

export default {
title: 'shared/icons',
title: 'shared/AgentIcon',
component: AgentIcon,
};

export function AgentIcons() {
const theme = useTheme();
export const List: Story = (_args, { globals }) => {
const darkMode = globals.euiTheme.includes('dark');

return (
<>
<EuiCodeBlock language="html" isCopyable paddingSize="m">
{'<AgentIcon agentName="dotnet" />'}
</EuiCodeBlock>

<EuiSpacer />

<EuiFlexGroup gutterSize="l" wrap={true}>
{AGENT_NAMES.map((agentName) => {
return (
<EuiFlexItem key={agentName} grow={false}>
<EuiCard
icon={
<>
<p>
<EuiToolTip
position="top"
content="Icon rendered with `EuiImage`"
>
<EuiImage
size="s"
hasShadow
alt={agentName}
src={getAgentIcon(agentName, theme.darkMode)}
/>
</EuiToolTip>
</p>
</>
}
title={agentName}
description={
<div>
<EuiFlexGroup gutterSize="l" wrap={true}>
{AGENT_NAMES.map((agentName) => {
return (
<EuiFlexItem key={agentName} grow={false}>
<EuiCard
icon={
<>
<p>
<EuiToolTip
position="bottom"
content="Icon rendered with `AgentIcon`"
position="top"
content="Icon rendered with `EuiImage`"
>
<AgentIcon agentName={agentName} />
<EuiImage
size="s"
hasShadow
alt={agentName}
src={getAgentIcon(agentName, darkMode)}
/>
</EuiToolTip>
</div>
}
/>
</EuiFlexItem>
);
})}
</EuiFlexGroup>
</>
</p>
</>
}
title={agentName}
description={
<div>
<EuiToolTip
position="bottom"
content="Icon rendered with `AgentIcon`"
>
<AgentIcon agentName={agentName} />
</EuiToolTip>
</div>
}
/>
</EuiFlexItem>
);
})}
</EuiFlexGroup>
);
}
};
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
ApmPluginContext,
ApmPluginContextValue,
} from '../../../../context/apm_plugin/apm_plugin_context';
import { ApmServiceContextProvider } from '../../../../context/apm_service/apm_service_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';
import {
Expand All @@ -41,6 +41,7 @@ export default {
decorators: [
(Story: ComponentType, { args }: StoryContext) => {
const { alertsResponse, latencyChartResponse } = args as Args;
const serviceName = 'testService';

const apmPluginContextMock = ({
core: {
Expand All @@ -51,10 +52,8 @@ export default {
basePath: { prepend: () => {} },
get: (endpoint: string) => {
switch (endpoint) {
case '/api/apm/services/test-service/transactions/charts/latency':
case `/api/apm/services/${serviceName}/transactions/charts/latency`:
return latencyChartResponse;
case '/api/apm/services/test-service/alerts':
return alertsResponse;
default:
return {};
}
Expand All @@ -68,24 +67,32 @@ export default {

createCallApmApi(apmPluginContextMock.core);

const transactionType = `${Math.random()}`; // So we don't memoize

return (
<ApmPluginContext.Provider value={apmPluginContextMock}>
<MemoryRouter initialEntries={[`/app/apm/services/test-service`]}>
<Route path="/app/apm/services/:serviceName">
<MemoryRouter initialEntries={[`/services/${serviceName}`]}>
<Route path="/services/:serviceName">
<KibanaContextProvider
services={{ ...apmPluginContextMock.core }}
>
<MockUrlParamsContextProvider
params={{
latencyAggregationType: LatencyAggregationType.avg,
transactionType: `${Math.random()}`, // So we don't memoize
}}
>
<ApmServiceContextProvider>
<APMServiceContext.Provider
value={{
alerts: alertsResponse.alerts,
serviceName,
transactionType,
transactionTypes: [],
}}
>
<ChartPointerEventContextProvider>
<Story />
</ChartPointerEventContextProvider>
</ApmServiceContextProvider>
</APMServiceContext.Provider>
</MockUrlParamsContextProvider>
</KibanaContextProvider>
</Route>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export interface ITableColumn<T> {
field?: string;
dataType?: string;
align?: string;
width?: string | number;
width?: string;
sortable?: boolean;
render?: (value: any, item: T) => unknown;
}
Expand Down
Loading

0 comments on commit eba4bdc

Please sign in to comment.