Skip to content

Commit

Permalink
updated stories and unit tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@yctercero
yctercero committed Jun 10, 2020
1 parent ad1dbbb commit 5cde937
Show file tree
Hide file tree
Showing 19 changed files with 642 additions and 307 deletions.
13 changes: 1 addition & 12 deletions ...ck/plugins/security_solution/public/alerts/pages/detection_engine/rules/details/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -405,18 +405,7 @@ export const RuleDetailsPageComponent: FC<PropsFromRedux> = ({
ExceptionListType.ENDPOINT,
]}
commentsAccordionId={'ruleDetailsTabExceptions'}
exceptionListsMeta={[
{
id: '5b543420-a6c3-11ea-989f-53aa81611022',
type: 'endpoint',
namespaceType: 'single',
},
{
id: '98440bc0-a750-11ea-989f-53aa81611022',
type: 'detection',
namespaceType: 'single',
},
]}
exceptionListsMeta={[]}
/>
)}
{ruleDetailTab === RuleDetailTabs.failures && <FailureHistory id={rule?.id} />}
Expand Down
70 changes: 0 additions & 70 deletions ...y_solution/public/common/components/exceptions/__examples__/exceptions_search.stories.tsx
View file

This file was deleted.

2 changes: 1 addition & 1 deletion x-pack/plugins/security_solution/public/common/components/exceptions/translations.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,5 +135,5 @@ export const REFRESH = i18n.translate('xpack.securitySolution.exceptions.utility
export const SHOWING_EXCEPTIONS = (items: number) =>
i18n.translate('xpack.securitySolution.exceptions.utilityNumberExceptionsLabel', {
values: { items },
defaultMessage: 'Showing {items} exceptions',
defaultMessage: 'Showing {items} {items, plural, =1 {exception} other {exceptions}}',
});
6 changes: 3 additions & 3 deletions ..._solution/public/common/components/exceptions/viewer/exception_item/exception_details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { DescriptionListItem, ExceptionListItemSchema } from '../../types';
import { getDescriptionListContent } from '../../helpers';
import * as i18n from '../../translations';

const StyledExceptionDetails = styled(EuiFlexItem)`
const MyExceptionDetails = styled(EuiFlexItem)`
${({ theme }) => css`
background-color: ${theme.eui.euiColorLightestShade};
padding: ${theme.eui.euiSize};
Expand Down Expand Up @@ -68,7 +68,7 @@ const ExceptionDetailsComponent = ({
}, [showComments, onCommentsClick, exceptionItem]);

return (
<StyledExceptionDetails grow={2}>
<MyExceptionDetails grow={2}>
<EuiFlexGroup direction="column" alignItems="flexStart">
<EuiFlexItem grow={1}>
<EuiDescriptionList compressed type="column" data-test-subj="exceptionsViewerItemDetails">
Expand All @@ -82,7 +82,7 @@ const ExceptionDetailsComponent = ({
</EuiFlexItem>
<EuiFlexItem grow={false}>{commentsSection}</EuiFlexItem>
</EuiFlexGroup>
</StyledExceptionDetails>
</MyExceptionDetails>
);
};

Expand Down
35 changes: 34 additions & 1 deletion ...tion/public/common/components/exceptions/viewer/exception_item/exception_entries.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ describe('ExceptionEntries', () => {
expect(wrapper.find('[data-test-subj="exceptionsViewerAndBadge"]')).toHaveLength(1);
});

test('it invokes "handlEdit" when edit button clicked', () => {
test('it invokes "onEdit" when edit button clicked', () => {
const mockOnEdit = jest.fn();
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
Expand Down Expand Up @@ -80,6 +80,39 @@ describe('ExceptionEntries', () => {
expect(mockOnDelete).toHaveBeenCalledTimes(1);
});

test('it renders edit button disabled if "disableDelete" is "true"', () => {
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<ExceptionEntries
disableDelete={true}
entries={[getFormattedEntryMock()]}
onDelete={jest.fn()}
onEdit={jest.fn()}
/>
</ThemeProvider>
);
const editBtn = wrapper.find('[data-test-subj="exceptionsViewerEditBtn"] button').at(0);

expect(editBtn.prop('disabled')).toBeTruthy();
});

test('it renders delete button in loading state if "disableDelete" is "true"', () => {
const wrapper = mount(
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
<ExceptionEntries
disableDelete={true}
entries={[getFormattedEntryMock()]}
onDelete={jest.fn()}
onEdit={jest.fn()}
/>
</ThemeProvider>
);
const deleteBtn = wrapper.find('[data-test-subj="exceptionsViewerDeleteBtn"] button').at(0);

expect(deleteBtn.prop('disabled')).toBeTruthy();
expect(deleteBtn.find('.euiLoadingSpinner')).toBeTruthy();
});

test('it renders nested entry', () => {
const parentEntry = getFormattedEntryMock();
parentEntry.operator = null;
Expand Down
24 changes: 12 additions & 12 deletions ..._solution/public/common/components/exceptions/viewer/exception_item/exception_entries.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,27 +22,27 @@ import { getEmptyValue } from '../../../empty_value';
import * as i18n from '../../translations';
import { FormattedEntry } from '../../types';

const EntriesDetails = styled(EuiFlexItem)`
const MyEntriesDetails = styled(EuiFlexItem)`
padding: ${({ theme }) => theme.eui.euiSize};
`;

const StyledEditButton = styled(EuiButton)`
const MyEditButton = styled(EuiButton)`
${({ theme }) => css`
background-color: ${transparentize(0.9, theme.eui.euiColorPrimary)};
border: none;
font-weight: ${theme.eui.euiFontWeightSemiBold};
`}
`;

const StyledRemoveButton = styled(EuiButton)`
const MyRemoveButton = styled(EuiButton)`
${({ theme }) => css`
background-color: ${transparentize(0.9, theme.eui.euiColorDanger)};
border: none;
font-weight: ${theme.eui.euiFontWeightSemiBold};
`}
`;

const AndOrBadgeContainer = styled(EuiFlexItem)`
const MyAndOrBadgeContainer = styled(EuiFlexItem)`
padding-top: ${({ theme }) => theme.eui.euiSizeXL};
`;

Expand Down Expand Up @@ -118,19 +118,19 @@ const ExceptionEntriesComponent = ({
);

return (
<EntriesDetails grow={5}>
<MyEntriesDetails grow={5}>
<EuiFlexGroup direction="column" gutterSize="m">
<EuiFlexItem>
<EuiFlexGroup direction="row" gutterSize="none">
{entries.length > 1 && (
<EuiHideFor sizes={['xs', 's']}>
<AndOrBadgeContainer grow={false}>
<MyAndOrBadgeContainer grow={false}>
<AndOrBadge
type="and"
includeAntennas
data-test-subj="exceptionsViewerAndBadge"
/>
</AndOrBadgeContainer>
</MyAndOrBadgeContainer>
</EuiHideFor>
)}
<EuiFlexItem grow={1}>
Expand All @@ -147,31 +147,31 @@ const ExceptionEntriesComponent = ({
<EuiFlexItem grow={false}>
<EuiFlexGroup gutterSize="s" justifyContent="flexEnd">
<EuiFlexItem grow={false}>
<StyledEditButton
<MyEditButton
size="s"
color="primary"
onClick={onEdit}
isDisabled={disableDelete}
data-test-subj="exceptionsViewerEditBtn"
>
{i18n.EDIT}
</StyledEditButton>
</MyEditButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<StyledRemoveButton
<MyRemoveButton
size="s"
color="danger"
onClick={onDelete}
isLoading={disableDelete}
data-test-subj="exceptionsViewerDeleteBtn"
>
{i18n.REMOVE}
</StyledRemoveButton>
</MyRemoveButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
</EuiFlexGroup>
</EntriesDetails>
</MyEntriesDetails>
);
};

Expand Down
53 changes: 33 additions & 20 deletions ...s/__examples__/exception_item.stories.tsx → ...s/viewer/exception_item/index.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,22 @@
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/
import { storiesOf } from '@storybook/react';
import React, { ReactNode } from 'react';
import { storiesOf, addDecorator } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import React from 'react';
import { ThemeProvider } from 'styled-components';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';

import { ExceptionItem } from '../viewer/exception_item';
import { Operator } from '../types';
import { getExceptionItemMock } from '../mocks';
import { ExceptionItem } from './';
import { Operator } from '../../types';
import { getExceptionItemMock } from '../../mocks';

const withTheme = (storyFn: () => ReactNode) => (
addDecorator((storyFn) => (
<ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>{storyFn()}</ThemeProvider>
);
));

storiesOf('ExceptionItem', module)
.addDecorator(withTheme)
.add('ExceptionItem/with os', () => {
storiesOf('Components|ExceptionItem', module)
.add('with os', () => {
const payload = getExceptionItemMock();
payload.description = '';
payload.comment = [];
Expand All @@ -36,8 +36,8 @@ storiesOf('ExceptionItem', module)
loadingItemIds={[]}
commentsAccordionId={'accordion--comments'}
exceptionItem={payload}
onDeleteException={() => {}}
onEditException={() => {}}
onDeleteException={action('onClick')}
onEditException={action('onClick')}
/>
);
})
Expand All @@ -59,8 +59,8 @@ storiesOf('ExceptionItem', module)
loadingItemIds={[]}
commentsAccordionId={'accordion--comments'}
exceptionItem={payload}
onDeleteException={() => {}}
onEditException={() => {}}
onDeleteException={action('onClick')}
onEditException={action('onClick')}
/>
);
})
Expand All @@ -82,8 +82,8 @@ storiesOf('ExceptionItem', module)
loadingItemIds={[]}
commentsAccordionId={'accordion--comments'}
exceptionItem={payload}
onDeleteException={() => {}}
onEditException={() => {}}
onDeleteException={action('onClick')}
onEditException={action('onClick')}
/>
);
})
Expand All @@ -98,8 +98,8 @@ storiesOf('ExceptionItem', module)
loadingItemIds={[]}
commentsAccordionId={'accordion--comments'}
exceptionItem={payload}
onDeleteException={() => {}}
onEditException={() => {}}
onDeleteException={action('onClick')}
onEditException={action('onClick')}
/>
);
})
Expand All @@ -111,8 +111,21 @@ storiesOf('ExceptionItem', module)
loadingItemIds={[]}
commentsAccordionId={'accordion--comments'}
exceptionItem={payload}
onDeleteException={() => {}}
onEditException={() => {}}
onDeleteException={action('onClick')}
onEditException={action('onClick')}
/>
);
})
.add('with loadingItemIds', () => {
const { id, namespace_type, ...rest } = getExceptionItemMock();

return (
<ExceptionItem
loadingItemIds={[{ id, namespaceType: namespace_type }]}
commentsAccordionId={'accordion--comments'}
exceptionItem={{ id, namespace_type, ...rest }}
onDeleteException={action('onClick')}
onEditException={action('onClick')}
/>
);
});
7 changes: 5 additions & 2 deletions ...ecurity_solution/public/common/components/exceptions/viewer/exception_item/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ describe('ExceptionItem', () => {
const editBtn = wrapper.find('[data-test-subj="exceptionsViewerEditBtn"] button').at(0);
editBtn.simulate('click');

expect(mockOnEditException).toHaveBeenCalledTimes(1);
expect(mockOnEditException).toHaveBeenCalledWith(getExceptionItemMock());
});

it('it invokes "onDeleteException" when delete button clicked', () => {
Expand All @@ -73,7 +73,10 @@ describe('ExceptionItem', () => {
const editBtn = wrapper.find('[data-test-subj="exceptionsViewerDeleteBtn"] button').at(0);
editBtn.simulate('click');

expect(mockOnDeleteException).toHaveBeenCalledTimes(1);
expect(mockOnDeleteException).toHaveBeenCalledWith({
id: 'uuid_here',
namespaceType: 'single',
});
});

it('it renders comment accordion closed to begin with', () => {
Expand Down
Loading

0 comments on commit 5cde937

Please sign in to comment.