Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Cases] Improve functional tests #150117

Merged
merged 5 commits into from
Feb 6, 2023
Merged

[Cases] Improve functional tests #150117

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d5eb6d9
Fixing tests
jonathan-buttner Feb 1, 2023
09e5589
Fixing description tests
jonathan-buttner Feb 2, 2023
f20c15a
Adding retry
jonathan-buttner Feb 6, 2023
9d5f792
Merge branch 'main' of github.com:elastic/kibana into cases-fix-delet…
jonathan-buttner Feb 6, 2023
6a3dd1b
reducing wait for trash icon
jonathan-buttner Feb 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 28 additions & 11 deletions x-pack/plugins/cases/public/components/case_action_bar/actions.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,11 @@ describe('CaseView actions', () => {
);

expect(wrapper.find('[data-test-subj="confirm-delete-case-modal"]').exists()).toBeFalsy();
wrapper.find('button[data-test-subj="property-actions-ellipses"]').first().simulate('click');
wrapper.find('button[data-test-subj="property-actions-trash"]').simulate('click');
wrapper
.find('button[data-test-subj="property-actions-case-ellipses"]')
.first()
.simulate('click');
wrapper.find('button[data-test-subj="property-actions-case-trash"]').simulate('click');
expect(wrapper.find('[data-test-subj="confirm-delete-case-modal"]').exists()).toBeTruthy();
});

Expand All @@ -67,8 +70,11 @@ describe('CaseView actions', () => {
</TestProviders>
);

wrapper.find('button[data-test-subj="property-actions-ellipses"]').first().simulate('click');
wrapper.find('button[data-test-subj="property-actions-copyClipboard"]').simulate('click');
wrapper
.find('button[data-test-subj="property-actions-case-ellipses"]')
.first()
.simulate('click');
wrapper.find('button[data-test-subj="property-actions-case-copyClipboard"]').simulate('click');

expect(navigator.clipboard.writeText).toHaveBeenCalledWith(basicCase.id);

Expand All @@ -85,9 +91,14 @@ describe('CaseView actions', () => {
);

expect(wrapper.find('[data-test-subj="confirm-delete-case-modal"]').exists()).toBeFalsy();
wrapper.find('button[data-test-subj="property-actions-ellipses"]').first().simulate('click');
expect(wrapper.find('[data-test-subj="property-actions-trash"]').exists()).toBeFalsy();
expect(wrapper.find('[data-test-subj="property-actions-copyClipboard"]').exists()).toBeTruthy();
wrapper
.find('button[data-test-subj="property-actions-case-ellipses"]')
.first()
.simulate('click');
expect(wrapper.find('[data-test-subj="property-actions-case-trash"]').exists()).toBeFalsy();
expect(
wrapper.find('[data-test-subj="property-actions-case-copyClipboard"]').exists()
).toBeTruthy();
});

it('toggle delete modal and confirm', async () => {
Expand All @@ -101,8 +112,11 @@ describe('CaseView actions', () => {
</TestProviders>
);

wrapper.find('button[data-test-subj="property-actions-ellipses"]').first().simulate('click');
wrapper.find('button[data-test-subj="property-actions-trash"]').simulate('click');
wrapper
.find('button[data-test-subj="property-actions-case-ellipses"]')
.first()
.simulate('click');
wrapper.find('button[data-test-subj="property-actions-case-trash"]').simulate('click');

expect(wrapper.find('[data-test-subj="confirm-delete-case-modal"]').exists()).toBeTruthy();
wrapper.find('button[data-test-subj="confirmModalConfirmButton"]').simulate('click');
Expand All @@ -126,9 +140,12 @@ describe('CaseView actions', () => {

expect(wrapper.find('[data-test-subj="confirm-delete-case-modal"]').exists()).toBeFalsy();

wrapper.find('button[data-test-subj="property-actions-ellipses"]').first().simulate('click');
wrapper
.find('button[data-test-subj="property-actions-case-ellipses"]')
.first()
.simulate('click');
expect(
wrapper.find('[data-test-subj="property-actions-popout"]').first().prop('aria-label')
wrapper.find('[data-test-subj="property-actions-case-popout"]').first().prop('aria-label')
).toEqual(i18n.VIEW_INCIDENT(basicPush.externalTitle));
});
});
2 changes: 1 addition & 1 deletion x-pack/plugins/cases/public/components/case_action_bar/actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ const ActionsComponent: React.FC<CaseViewActions> = ({ caseData, currentExternal

return (
<EuiFlexItem grow={false} data-test-subj="case-view-actions">
<PropertyActions propertyActions={propertyActions} />
<PropertyActions propertyActions={propertyActions} customDataTestSubj={'case'} />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the single case view we pass in the case value so the data test subject ellipses is unique

{isModalVisible ? (
<ConfirmDeleteCaseModal
totalCasesToBeDeleted={1}
Expand Down
16 changes: 8 additions & 8 deletions x-pack/plugins/cases/public/components/case_action_bar/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,10 +207,10 @@ describe('CaseActionBar', () => {
</TestProviders>
);

userEvent.click(screen.getByTestId('property-actions-ellipses'));
userEvent.click(screen.getByTestId('property-actions-case-ellipses'));
expect(queryByText('Delete case')).not.toBeInTheDocument();
expect(queryByTestId('property-actions-trash')).not.toBeInTheDocument();
expect(queryByTestId('property-actions-copyClipboard')).toBeInTheDocument();
expect(queryByTestId('property-actions-case-trash')).not.toBeInTheDocument();
expect(queryByTestId('property-actions-case-copyClipboard')).toBeInTheDocument();
});

it('should show the the delete item in the menu when the user does have delete privileges', () => {
Expand All @@ -220,7 +220,7 @@ describe('CaseActionBar', () => {
</TestProviders>
);

userEvent.click(screen.getByTestId('property-actions-ellipses'));
userEvent.click(screen.getByTestId('property-actions-case-ellipses'));
expect(queryByText('Delete case')).toBeInTheDocument();
});

Expand All @@ -239,10 +239,10 @@ describe('CaseActionBar', () => {
</TestProviders>
);

userEvent.click(screen.getByTestId('property-actions-ellipses'));
userEvent.click(screen.getByTestId('property-actions-case-ellipses'));

await waitFor(() => {
expect(screen.getByTestId('property-actions-popout')).toBeInTheDocument();
expect(screen.getByTestId('property-actions-case-popout')).toBeInTheDocument();
});
});

Expand All @@ -253,8 +253,8 @@ describe('CaseActionBar', () => {
</TestProviders>
);

userEvent.click(screen.getByTestId('property-actions-ellipses'));
userEvent.click(screen.getByTestId('property-actions-case-ellipses'));

expect(screen.queryByTestId('property-actions-popout')).not.toBeInTheDocument();
expect(screen.queryByTestId('property-actions-case-popout')).not.toBeInTheDocument();
});
});
143 changes: 79 additions & 64 deletions x-pack/plugins/cases/public/components/property_actions/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,86 +17,101 @@ export interface PropertyActionButtonProps {
iconType: string;
label: string;
color?: EuiButtonProps['color'];
customDataTestSubj?: string;
}

const ComponentId = 'property-actions';

const PropertyActionButton = React.memo<PropertyActionButtonProps>(
({ disabled = false, onClick, iconType, label, color }) => (
<EuiButtonEmpty
aria-label={label}
color={color ? color : 'text'}
data-test-subj={`${ComponentId}-${iconType}`}
iconSide="left"
iconType={iconType}
isDisabled={disabled}
onClick={onClick}
>
{label}
</EuiButtonEmpty>
)
({ disabled = false, onClick, iconType, label, color, customDataTestSubj }) => {
const dataTestSubjPrepend = makeDataTestSubjPrepend(customDataTestSubj);

return (
<EuiButtonEmpty
aria-label={label}
color={color ? color : 'text'}
data-test-subj={`${dataTestSubjPrepend}-${iconType}`}
iconSide="left"
iconType={iconType}
isDisabled={disabled}
onClick={onClick}
>
{label}
</EuiButtonEmpty>
);
}
);

PropertyActionButton.displayName = 'PropertyActionButton';

export interface PropertyActionsProps {
propertyActions: PropertyActionButtonProps[];
customDataTestSubj?: string;
}

export const PropertyActions = React.memo<PropertyActionsProps>(({ propertyActions }) => {
const [showActions, setShowActions] = useState(false);
export const PropertyActions = React.memo<PropertyActionsProps>(
({ propertyActions, customDataTestSubj }) => {
const [showActions, setShowActions] = useState(false);

const onButtonClick = useCallback(() => {
setShowActions((prevShowActions) => !prevShowActions);
}, []);
const onButtonClick = useCallback(() => {
setShowActions((prevShowActions) => !prevShowActions);
}, []);

const onClosePopover = useCallback((cb?: () => void) => {
setShowActions(false);
if (cb != null) {
cb();
}
}, []);

return (
<EuiPopover
anchorPosition="downRight"
data-test-subj={ComponentId}
ownFocus
button={
<EuiButtonIcon
data-test-subj={`${ComponentId}-ellipses`}
aria-label={i18n.ACTIONS_ARIA}
iconType="boxesHorizontal"
onClick={onButtonClick}
/>
const onClosePopover = useCallback((cb?: () => void) => {
setShowActions(false);
if (cb != null) {
cb();
}
id="settingsPopover"
isOpen={showActions}
closePopover={onClosePopover}
repositionOnScroll
>
<EuiFlexGroup
alignItems="flexStart"
data-test-subj={`${ComponentId}-group`}
direction="column"
gutterSize="none"
}, []);

const dataTestSubjPrepend = makeDataTestSubjPrepend(customDataTestSubj);

return (
<EuiPopover
anchorPosition="downRight"
data-test-subj={dataTestSubjPrepend}
ownFocus
button={
<EuiButtonIcon
data-test-subj={`${dataTestSubjPrepend}-ellipses`}
aria-label={i18n.ACTIONS_ARIA}
iconType="boxesHorizontal"
onClick={onButtonClick}
/>
}
id="settingsPopover"
isOpen={showActions}
closePopover={onClosePopover}
repositionOnScroll
>
{propertyActions.map((action, key) => (
<EuiFlexItem grow={false} key={`${action.label}${key}`}>
<span>
<PropertyActionButton
disabled={action.disabled}
iconType={action.iconType}
label={action.label}
color={action.color}
onClick={() => onClosePopover(action.onClick)}
/>
</span>
</EuiFlexItem>
))}
</EuiFlexGroup>
</EuiPopover>
);
});
<EuiFlexGroup
alignItems="flexStart"
data-test-subj={`${dataTestSubjPrepend}-group`}
direction="column"
gutterSize="none"
>
{propertyActions.map((action, key) => (
<EuiFlexItem grow={false} key={`${action.label}${key}`}>
<span>
<PropertyActionButton
disabled={action.disabled}
iconType={action.iconType}
label={action.label}
color={action.color}
onClick={() => onClosePopover(action.onClick)}
customDataTestSubj={customDataTestSubj}
/>
</span>
</EuiFlexItem>
))}
</EuiFlexGroup>
</EuiPopover>
);
}
);

PropertyActions.displayName = 'PropertyActions';

const makeDataTestSubjPrepend = (customDataTestSubj?: string) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This allows us to pass in a specific portion of the data test subject

return customDataTestSubj == null ? ComponentId : `${ComponentId}-${customDataTestSubj}`;
};
24 changes: 12 additions & 12 deletions x-pack/plugins/cases/public/components/user_actions/comment/comment.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,13 +223,13 @@ describe('createCommentUserActionBuilder', () => {
);

expect(result.getByText('Solve this fast!')).toBeInTheDocument();
expect(result.getByTestId('property-actions')).toBeInTheDocument();
expect(result.getByTestId('property-actions-user-action')).toBeInTheDocument();

userEvent.click(result.getByTestId('property-actions-ellipses'));
userEvent.click(result.getByTestId('property-actions-user-action-ellipses'));
await waitForEuiPopoverOpen();

expect(result.queryByTestId('property-actions-pencil')).toBeInTheDocument();
userEvent.click(result.getByTestId('property-actions-pencil'));
expect(result.queryByTestId('property-actions-user-action-pencil')).toBeInTheDocument();
userEvent.click(result.getByTestId('property-actions-user-action-pencil'));

await waitFor(() => {
expect(builderArgs.handleManageMarkdownEditId).toHaveBeenCalledWith('basic-comment-id');
Expand All @@ -254,13 +254,13 @@ describe('createCommentUserActionBuilder', () => {
);

expect(result.getByText('Solve this fast!')).toBeInTheDocument();
expect(result.getByTestId('property-actions')).toBeInTheDocument();
expect(result.getByTestId('property-actions-user-action')).toBeInTheDocument();

userEvent.click(result.getByTestId('property-actions-ellipses'));
userEvent.click(result.getByTestId('property-actions-user-action-ellipses'));
await waitForEuiPopoverOpen();

expect(result.queryByTestId('property-actions-quote')).toBeInTheDocument();
userEvent.click(result.getByTestId('property-actions-quote'));
expect(result.queryByTestId('property-actions-user-action-quote')).toBeInTheDocument();
userEvent.click(result.getByTestId('property-actions-user-action-quote'));

await waitFor(() => {
expect(builderArgs.handleManageQuote).toHaveBeenCalledWith('Solve this fast!');
Expand Down Expand Up @@ -769,14 +769,14 @@ describe('createCommentUserActionBuilder', () => {
});

const deleteAttachment = async (result: RenderResult, deleteIcon: string, buttonLabel: string) => {
expect(result.getByTestId('property-actions')).toBeInTheDocument();
expect(result.getByTestId('property-actions-user-action')).toBeInTheDocument();

userEvent.click(result.getByTestId('property-actions-ellipses'));
userEvent.click(result.getByTestId('property-actions-user-action-ellipses'));
await waitForEuiPopoverOpen();

expect(result.queryByTestId(`property-actions-${deleteIcon}`)).toBeInTheDocument();
expect(result.queryByTestId(`property-actions-user-action-${deleteIcon}`)).toBeInTheDocument();

userEvent.click(result.getByTestId(`property-actions-${deleteIcon}`));
userEvent.click(result.getByTestId(`property-actions-user-action-${deleteIcon}`));

await waitFor(() => {
expect(result.queryByTestId('property-actions-confirm-modal')).toBeInTheDocument();
Expand Down
16 changes: 8 additions & 8 deletions x-pack/plugins/cases/public/components/user_actions/description.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,13 +58,13 @@ describe('createDescriptionUserActionBuilder ', () => {
</TestProviders>
);

expect(res.getByTestId('property-actions')).toBeInTheDocument();
expect(res.getByTestId('property-actions-description')).toBeInTheDocument();

userEvent.click(res.getByTestId('property-actions-ellipses'));
userEvent.click(res.getByTestId('property-actions-description-ellipses'));
await waitForEuiPopoverOpen();

expect(res.queryByTestId('property-actions-pencil')).toBeInTheDocument();
userEvent.click(res.getByTestId('property-actions-pencil'));
expect(res.queryByTestId('property-actions-description-pencil')).toBeInTheDocument();
userEvent.click(res.getByTestId('property-actions-description-pencil'));

await waitFor(() => {
expect(builderArgs.handleManageMarkdownEditId).toHaveBeenCalledWith('description');
Expand All @@ -84,13 +84,13 @@ describe('createDescriptionUserActionBuilder ', () => {
</TestProviders>
);

expect(res.getByTestId('property-actions')).toBeInTheDocument();
expect(res.getByTestId('property-actions-description')).toBeInTheDocument();

userEvent.click(res.getByTestId('property-actions-ellipses'));
userEvent.click(res.getByTestId('property-actions-description-ellipses'));
await waitForEuiPopoverOpen();

expect(res.queryByTestId('property-actions-quote')).toBeInTheDocument();
userEvent.click(res.getByTestId('property-actions-quote'));
expect(res.queryByTestId('property-actions-description-quote')).toBeInTheDocument();
userEvent.click(res.getByTestId('property-actions-description-quote'));

await waitFor(() => {
expect(builderArgs.handleManageQuote).toHaveBeenCalledWith('Security banana Issue');
Expand Down
Loading