Skip to content

Commit 0273523

Browse files
NicholasPerettiNicholasPeretti
committed
Refactor test from enzyme to react-testing-library
1 parent 7669ccd commit 0273523

1 file changed

Lines changed: 157 additions & 127 deletions

File tree

  • x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/timeline_actions

‎x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/alert_context_menu.test.tsx‎

Lines changed: 157 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
* 2.0.
66
*/
77

8-
import { mount, type ComponentType as EnzymeComponentType } from 'enzyme';
8+
import { render, waitFor } from '@testing-library/react';
9+
import { userEvent } from '@testing-library/user-event';
910
import { AlertContextMenu } from './alert_context_menu';
1011
import { TestProviders } from '../../../../common/mock';
1112
import React from 'react';
@@ -103,72 +104,89 @@ jest.mock('../../../containers/detection_engine/alerts/use_alerts_privileges', (
103104
useAlertsPrivileges: jest.fn().mockReturnValue({ hasIndexWrite: true, hasKibanaCRUD: true }),
104105
}));
105106

106-
const actionMenuButton = '[data-test-subj="timeline-context-menu-button"] button';
107-
const addToExistingCaseButton = '[data-test-subj="add-to-existing-case-action"]';
108-
const addToNewCaseButton = '[data-test-subj="add-to-new-case-action"]';
109-
const markAsOpenButton = '[data-test-subj="open-alert-status"]';
110-
const markAsAcknowledgedButton = '[data-test-subj="acknowledged-alert-status"]';
111-
const markAsClosedButton = '[data-test-subj="close-alert-status"]';
112-
const addEndpointEventFilterButton = '[data-test-subj="add-event-filter-menu-item"]';
113-
const applyAlertTagsButton = '[data-test-subj="alert-tags-context-menu-item"]';
114-
const applyAlertAssigneesButton = '[data-test-subj="alert-assignees-context-menu-item"]';
107+
const actionMenuButton = 'timeline-context-menu-button';
108+
const addToExistingCaseButton = 'add-to-existing-case-action';
109+
const addToNewCaseButton = 'add-to-new-case-action';
110+
const markAsOpenButton = 'open-alert-status';
111+
const markAsAcknowledgedButton = 'acknowledged-alert-status';
112+
const markAsClosedButton = 'close-alert-status';
113+
const addEndpointEventFilterButton = 'add-event-filter-menu-item';
114+
const applyAlertTagsButton = 'alert-tags-context-menu-item';
115+
const applyAlertAssigneesButton = 'alert-assignees-context-menu-item';
115116

116117
describe('Alert table context menu', () => {
117118
describe('Case actions', () => {
118-
test('it render AddToCase context menu item if timelineId === TimelineId.detectionsPage', () => {
119-
const wrapper = mount(<AlertContextMenu {...props} scopeId={TableId.alertsOnAlertsPage} />, {
120-
wrappingComponent: TestProviders as EnzymeComponentType<{}>,
121-
});
119+
test('it render AddToCase context menu item if timelineId === TimelineId.detectionsPage', async () => {
120+
const wrapper = render(
121+
<TestProviders>
122+
<AlertContextMenu {...props} scopeId={TableId.alertsOnAlertsPage} />
123+
</TestProviders>
124+
);
125+
126+
await userEvent.click(wrapper.getByTestId(actionMenuButton));
122127

123-
wrapper.find(actionMenuButton).simulate('click');
124-
expect(wrapper.find(addToExistingCaseButton).first().exists()).toEqual(true);
125-
expect(wrapper.find(addToNewCaseButton).first().exists()).toEqual(true);
128+
await waitFor(() => {
129+
expect(wrapper.getByTestId(addToExistingCaseButton)).toBeTruthy();
130+
expect(wrapper.getByTestId(addToNewCaseButton)).toBeTruthy();
131+
});
126132
});
127133

128-
test('it render AddToCase context menu item if timelineId === TimelineId.detectionsRulesDetailsPage', () => {
129-
const wrapper = mount(
130-
<AlertContextMenu {...props} scopeId={TableId.alertsOnRuleDetailsPage} />,
131-
{
132-
wrappingComponent: TestProviders as EnzymeComponentType<{}>,
133-
}
134+
test('it render AddToCase context menu item if timelineId === TimelineId.detectionsRulesDetailsPage', async () => {
135+
const wrapper = render(
136+
<TestProviders>
137+
<AlertContextMenu {...props} scopeId={TableId.alertsOnRuleDetailsPage} />
138+
</TestProviders>
134139
);
135140

136-
wrapper.find(actionMenuButton).simulate('click');
137-
expect(wrapper.find(addToExistingCaseButton).first().exists()).toEqual(true);
138-
expect(wrapper.find(addToNewCaseButton).first().exists()).toEqual(true);
139-
});
141+
await userEvent.click(wrapper.getByTestId(actionMenuButton));
140142

141-
test('it render AddToCase context menu item if timelineId === TimelineId.active', () => {
142-
const wrapper = mount(<AlertContextMenu {...props} scopeId={TimelineId.active} />, {
143-
wrappingComponent: TestProviders as EnzymeComponentType<{}>,
143+
await waitFor(() => {
144+
expect(wrapper.getByTestId(addToExistingCaseButton)).toBeTruthy();
145+
expect(wrapper.getByTestId(addToNewCaseButton)).toBeTruthy();
144146
});
145-
146-
wrapper.find(actionMenuButton).simulate('click');
147-
expect(wrapper.find(addToExistingCaseButton).first().exists()).toEqual(true);
148-
expect(wrapper.find(addToNewCaseButton).first().exists()).toEqual(true);
149147
});
150148

151-
test('it does NOT render AddToCase context menu item when timelineId is not in the allowed list', () => {
152-
const wrapper = mount(<AlertContextMenu {...props} scopeId="timeline-test" />, {
153-
wrappingComponent: TestProviders as EnzymeComponentType<{}>,
149+
test('it render AddToCase context menu item if timelineId === TimelineId.active', async () => {
150+
const wrapper = render(
151+
<TestProviders>
152+
<AlertContextMenu {...props} scopeId={TimelineId.active} />
153+
</TestProviders>
154+
);
155+
156+
await userEvent.click(wrapper.getByTestId(actionMenuButton));
157+
158+
await waitFor(() => {
159+
expect(wrapper.getByTestId(addToExistingCaseButton)).toBeTruthy();
160+
expect(wrapper.getByTestId(addToNewCaseButton)).toBeTruthy();
154161
});
155-
wrapper.find(actionMenuButton).simulate('click');
156-
expect(wrapper.find(addToExistingCaseButton).first().exists()).toEqual(false);
157-
expect(wrapper.find(addToNewCaseButton).first().exists()).toEqual(false);
162+
});
163+
164+
test('it does NOT render AddToCase context menu item when timelineId is not in the allowed list', async () => {
165+
const wrapper = render(
166+
<TestProviders>
167+
<AlertContextMenu {...props} scopeId="timeline-test" />
168+
</TestProviders>
169+
);
170+
await userEvent.click(wrapper.getByTestId(actionMenuButton));
171+
172+
expect(wrapper.queryByTestId(addToExistingCaseButton)).toBeNull();
173+
expect(wrapper.queryByTestId(addToNewCaseButton)).toBeNull();
158174
});
159175
});
160176

161177
describe('Alert status actions', () => {
162-
test('it renders the correct status action buttons', () => {
163-
const wrapper = mount(<AlertContextMenu {...props} scopeId={TimelineId.active} />, {
164-
wrappingComponent: TestProviders as EnzymeComponentType<{}>,
165-
});
178+
test('it renders the correct status action buttons', async () => {
179+
const wrapper = render(
180+
<TestProviders>
181+
<AlertContextMenu {...props} scopeId={TimelineId.active} />
182+
</TestProviders>
183+
);
166184

167-
wrapper.find(actionMenuButton).simulate('click');
185+
await userEvent.click(wrapper.getByTestId(actionMenuButton));
168186

169-
expect(wrapper.find(markAsOpenButton).first().exists()).toEqual(false);
170-
expect(wrapper.find(markAsAcknowledgedButton).first().exists()).toEqual(true);
171-
expect(wrapper.find(markAsClosedButton).first().exists()).toEqual(true);
187+
expect(wrapper.queryByTestId(markAsOpenButton)).toBeNull();
188+
expect(wrapper.getByTestId(markAsAcknowledgedButton)).toBeInTheDocument();
189+
expect(wrapper.getByTestId(markAsClosedButton)).toBeInTheDocument();
172190
});
173191
});
174192

@@ -187,81 +205,87 @@ describe('Alert table context menu', () => {
187205
});
188206
});
189207

190-
test('it disables AddEndpointEventFilter when timeline id is not host events page', () => {
191-
const wrapper = mount(
192-
<AlertContextMenu {...endpointEventProps} scopeId={TimelineId.active} />,
193-
{
194-
wrappingComponent: TestProviders as EnzymeComponentType<{}>,
195-
}
208+
test('it disables AddEndpointEventFilter when timeline id is not host events page', async () => {
209+
const wrapper = render(
210+
<TestProviders>
211+
<AlertContextMenu {...endpointEventProps} scopeId={TimelineId.active} />
212+
</TestProviders>
196213
);
197214

198-
wrapper.find(actionMenuButton).simulate('click');
199-
expect(wrapper.find(addEndpointEventFilterButton).first().exists()).toEqual(true);
200-
expect(wrapper.find(addEndpointEventFilterButton).first().props().disabled).toEqual(true);
215+
await userEvent.click(wrapper.getByTestId(actionMenuButton));
216+
217+
const button = wrapper.getByTestId(addEndpointEventFilterButton);
218+
219+
expect(button).toBeInTheDocument();
220+
expect(button).toBeDisabled();
201221
});
202222

203-
test('it enables AddEndpointEventFilter when timeline id is host events page', () => {
204-
const wrapper = mount(
205-
<AlertContextMenu {...endpointEventProps} scopeId={TableId.hostsPageEvents} />,
206-
{
207-
wrappingComponent: TestProviders as EnzymeComponentType<{}>,
208-
}
223+
test('it enables AddEndpointEventFilter when timeline id is host events page', async () => {
224+
const wrapper = render(
225+
<TestProviders>
226+
<AlertContextMenu {...endpointEventProps} scopeId={TableId.hostsPageEvents} />
227+
</TestProviders>
209228
);
210229

211-
wrapper.find(actionMenuButton).simulate('click');
212-
expect(wrapper.find(addEndpointEventFilterButton).first().exists()).toEqual(true);
213-
expect(wrapper.find(addEndpointEventFilterButton).first().props().disabled).toEqual(
214-
false
215-
);
230+
await userEvent.click(wrapper.getByTestId(actionMenuButton));
231+
232+
const button = wrapper.getByTestId(addEndpointEventFilterButton);
233+
234+
expect(button).toBeInTheDocument();
235+
expect(button).not.toBeDisabled();
216236
});
217237

218-
test('it disables AddEndpointEventFilter when timeline id is host events page but is not from endpoint', () => {
238+
test('it disables AddEndpointEventFilter when timeline id is host events page but is not from endpoint', async () => {
219239
const customProps = {
220240
...props,
221241
ecsRowData: { ...ecsRowData, agent: { type: ['other'] }, event: { kind: ['event'] } },
222242
};
223-
const wrapper = mount(
224-
<AlertContextMenu {...customProps} scopeId={TableId.hostsPageEvents} />,
225-
{
226-
wrappingComponent: TestProviders as EnzymeComponentType<{}>,
227-
}
243+
const wrapper = render(
244+
<TestProviders>
245+
<AlertContextMenu {...customProps} scopeId={TableId.hostsPageEvents} />
246+
</TestProviders>
228247
);
229248

230-
wrapper.find(actionMenuButton).simulate('click');
231-
expect(wrapper.find(addEndpointEventFilterButton).first().exists()).toEqual(true);
232-
expect(wrapper.find(addEndpointEventFilterButton).first().props().disabled).toEqual(true);
249+
await userEvent.click(wrapper.getByTestId(actionMenuButton));
250+
251+
const button = wrapper.getByTestId(addEndpointEventFilterButton);
252+
253+
expect(button).toBeInTheDocument();
254+
expect(button).toBeDisabled();
233255
});
234256

235-
test('it enables AddEndpointEventFilter when timeline id is user events page', () => {
236-
const wrapper = mount(
237-
<AlertContextMenu {...endpointEventProps} scopeId={TableId.usersPageEvents} />,
238-
{
239-
wrappingComponent: TestProviders as EnzymeComponentType<{}>,
240-
}
257+
test('it enables AddEndpointEventFilter when timeline id is user events page', async () => {
258+
const wrapper = render(
259+
<TestProviders>
260+
<AlertContextMenu {...endpointEventProps} scopeId={TableId.usersPageEvents} />
261+
</TestProviders>
241262
);
242263

243-
wrapper.find(actionMenuButton).simulate('click');
244-
expect(wrapper.find(addEndpointEventFilterButton).first().exists()).toEqual(true);
245-
expect(wrapper.find(addEndpointEventFilterButton).first().props().disabled).toEqual(
246-
false
247-
);
264+
await userEvent.click(wrapper.getByTestId(actionMenuButton));
265+
266+
const button = wrapper.getByTestId(addEndpointEventFilterButton);
267+
268+
expect(button).toBeInTheDocument();
269+
expect(button).not.toBeDisabled();
248270
});
249271

250-
test('it disables AddEndpointEventFilter when timeline id is user events page but is not from endpoint', () => {
272+
test('it disables AddEndpointEventFilter when timeline id is user events page but is not from endpoint', async () => {
251273
const customProps = {
252274
...props,
253275
ecsRowData: { ...ecsRowData, agent: { type: ['other'] }, event: { kind: ['event'] } },
254276
};
255-
const wrapper = mount(
256-
<AlertContextMenu {...customProps} scopeId={TableId.usersPageEvents} />,
257-
{
258-
wrappingComponent: TestProviders as EnzymeComponentType<{}>,
259-
}
277+
const wrapper = render(
278+
<TestProviders>
279+
<AlertContextMenu {...customProps} scopeId={TableId.usersPageEvents} />
280+
</TestProviders>
260281
);
261282

262-
wrapper.find(actionMenuButton).simulate('click');
263-
expect(wrapper.find(addEndpointEventFilterButton).first().exists()).toEqual(true);
264-
expect(wrapper.find(addEndpointEventFilterButton).first().props().disabled).toEqual(true);
283+
await userEvent.click(wrapper.getByTestId(actionMenuButton));
284+
285+
const button = wrapper.getByTestId(addEndpointEventFilterButton);
286+
287+
expect(button).toBeInTheDocument();
288+
expect(button).toBeDisabled();
265289
});
266290
});
267291

@@ -274,53 +298,59 @@ describe('Alert table context menu', () => {
274298
});
275299

276300
test('it disables actionMenuButton when timeline id is host events page but does not has write event filters privilege', () => {
277-
const wrapper = mount(
278-
<AlertContextMenu {...endpointEventProps} scopeId={TableId.hostsPageEvents} />,
279-
{
280-
wrappingComponent: TestProviders as EnzymeComponentType<{}>,
281-
}
301+
const wrapper = render(
302+
<TestProviders>
303+
<AlertContextMenu {...endpointEventProps} scopeId={TableId.hostsPageEvents} />
304+
</TestProviders>
282305
);
283306

284-
// Entire actionMenuButton is disabled as there is no option available
285-
expect(wrapper.find(actionMenuButton).first().props().disabled).toBe(true);
307+
// <TestProviders>Entire actionMenuButton is disabled as there is no option available
308+
expect(wrapper.getByTestId(actionMenuButton)).toBeDisabled();
286309
});
287310

288311
test('it disables actionMenuButton when timeline id is user events page but does not has write event filters privilege', () => {
289-
const wrapper = mount(
290-
<AlertContextMenu {...endpointEventProps} scopeId={TableId.usersPageEvents} />,
291-
{
292-
wrappingComponent: TestProviders as EnzymeComponentType<{}>,
293-
}
312+
const wrapper = render(
313+
<TestProviders>
314+
<AlertContextMenu {...endpointEventProps} scopeId={TableId.usersPageEvents} />
315+
</TestProviders>
294316
);
295317

296-
// Entire actionMenuButton is disabled as there is no option available
297-
expect(wrapper.find(actionMenuButton).first().props().disabled).toBe(true);
318+
// <TestProviders>Entire actionMenuButton is disabled as there is no option available
319+
expect(wrapper.getByTestId(actionMenuButton)).toBeDisabled();
298320
});
299321
});
300322
});
301-
});
302323

303-
describe('Apply alert tags action', () => {
304-
test('it renders the apply alert tags action button', () => {
305-
const wrapper = mount(<AlertContextMenu {...props} scopeId={TimelineId.active} />, {
306-
wrappingComponent: TestProviders as EnzymeComponentType<{}>,
307-
});
324+
describe('Apply alert tags action', () => {
325+
test('it renders the apply alert tags action button', async () => {
326+
const wrapper = render(
327+
<TestProviders>
328+
<AlertContextMenu {...props} scopeId={TimelineId.active} />
329+
</TestProviders>
330+
);
308331

309-
wrapper.find(actionMenuButton).simulate('click');
332+
await userEvent.click(wrapper.getByTestId(actionMenuButton));
310333

311-
expect(wrapper.find(applyAlertTagsButton).first().exists()).toEqual(true);
334+
await waitFor(() => {
335+
expect(wrapper.getByTestId(applyAlertTagsButton)).toBeTruthy();
336+
});
337+
});
312338
});
313-
});
314339

315-
describe('Assign alert action', () => {
316-
test('it renders the assign alert action button', () => {
317-
const wrapper = mount(<AlertContextMenu {...props} scopeId={TimelineId.active} />, {
318-
wrappingComponent: TestProviders as EnzymeComponentType<{}>,
319-
});
340+
describe('Assign alert action', () => {
341+
test('it renders the assign alert action button', async () => {
342+
const wrapper = render(
343+
<TestProviders>
344+
<AlertContextMenu {...props} scopeId={TimelineId.active} />
345+
</TestProviders>
346+
);
320347

321-
wrapper.find(actionMenuButton).simulate('click');
348+
await userEvent.click(wrapper.getByTestId(actionMenuButton));
322349

323-
expect(wrapper.find(applyAlertAssigneesButton).first().exists()).toEqual(true);
350+
await waitFor(() => {
351+
expect(wrapper.getByTestId(applyAlertAssigneesButton)).toBeTruthy();
352+
});
353+
});
324354
});
325355
});
326356
});

0 commit comments

Comments
 (0)