Add unit tests

x-pack/plugins/security_solution/public/cases/components/callout/callout.test.tsx

@@ -0,0 +1,70 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { mount } from 'enzyme';
+
+import { CallOut } from './callout';
+import { ErrorMessage } from './types';
+
+describe('Callout', () => {
+  const defaultProps = {
+    id: 'md5-hex',
+    type: 'primary' as NonNullable<ErrorMessage['errorType']>,
+    title: 'a tittle',
+    messages: [
+      {
+        id: 'generic-error',
+        title: 'message-one',
+        description: <p>{'error'}</p>,
+      },
+    ],
+    showCallOut: true,
+    handleDismissCallout: jest.fn(),
+  };
+
+  it('It renders the callout', () => {
+    const wrapper = mount(<CallOut {...defaultProps} />);
+    expect(wrapper.find(`[data-test-subj="case-callout-md5-hex"]`).exists()).toBeTruthy();
+    expect(wrapper.find(`[data-test-subj="callout-messages-md5-hex"]`).exists()).toBeTruthy();
+    expect(wrapper.find(`[data-test-subj="callout-dismiss-md5-hex"]`).exists()).toBeTruthy();
+  });
+
+  it('hides the callout', () => {
+    const wrapper = mount(<CallOut {...defaultProps} showCallOut={false} />);
+    expect(wrapper.find(`[data-test-subj="case-callout-md5-hex"]`).exists()).toBeFalsy();
+  });
+
+  it('does not shows any messages when the list is empty', () => {
+    const wrapper = mount(<CallOut {...defaultProps} messages={[]} />);
+    expect(wrapper.find(`[data-test-subj="callout-messages-md5-hex"]`).exists()).toBeFalsy();
+  });
+
+  it('transform the button color correctly', () => {
+    let wrapper = mount(<CallOut {...defaultProps} />);
+    expect(wrapper.find(`[data-test-subj="callout-dismiss-md5-hex"]`).first().prop('color')).toBe(
+      'primary'
+    );
+
+    wrapper = mount(<CallOut {...defaultProps} type={'success'} />);
+    expect(wrapper.find(`[data-test-subj="callout-dismiss-md5-hex"]`).first().prop('color')).toBe(
+      'secondary'
+    );
+
+    wrapper = mount(<CallOut {...defaultProps} type={'danger'} />);
+    expect(wrapper.find(`[data-test-subj="callout-dismiss-md5-hex"]`).first().prop('color')).toBe(
+      'danger'
+    );
+  });
+
+  it('dismiss the button correctly', () => {
+    const wrapper = mount(<CallOut {...defaultProps} messages={[]} />);
+    expect(wrapper.find(`[data-test-subj="callout-dismiss-md5-hex"]`).exists()).toBeTruthy();
+    wrapper.find(`button[data-test-subj="callout-dismiss-md5-hex"]`).simulate('click');
+    wrapper.update();
+    expect(defaultProps.handleDismissCallout).toHaveBeenCalledWith('md5-hex');
+  });
+});

x-pack/plugins/security_solution/public/cases/components/callout/callout.tsx

@@ -31,12 +31,12 @@ const CallOutComponent = ({
   const handleCallOut = useCallback(() => handleDismissCallout(id), [handleDismissCallout]);
 
   return showCallOut ? (
-    <EuiCallOut title={title} color={type} iconType="gear" data-test-subj={`case-call-out-${type}`}>
+    <EuiCallOut title={title} color={type} iconType="gear" data-test-subj={`case-callout-${id}`}>
       {!isEmpty(messages) && (
-        <EuiDescriptionList data-test-subj={`callout-messages-${type}`} listItems={messages} />
+        <EuiDescriptionList data-test-subj={`callout-messages-${id}`} listItems={messages} />
       )}
       <EuiButton
-        data-test-subj={`callout-dismiss-${type}`}
+        data-test-subj={`callout-dismiss-${id}`}
         color={type === 'success' ? 'secondary' : type}
         onClick={handleCallOut}
       >

x-pack/plugins/security_solution/public/cases/components/callout/helpers.test.tsx

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import md5 from 'md5';
+import { createCalloutId } from './helpers';
+
+describe('createCalloutId', () => {
+  it('creates id correctly with one id', () => {
+    const digest = md5('one');
+    const id = createCalloutId(['one']);
+    expect(id).toBe(digest);
+  });
+
+  it('creates id correctly with multiples ids', () => {
+    const digest = md5('one|two|three');
+    const id = createCalloutId(['one', 'two', 'three']);
+    expect(id).toBe(digest);
+  });
+
+  it('creates id correctly with multiples ids and delimiter', () => {
+    const digest = md5('one,two,three');
+    const id = createCalloutId(['one', 'two', 'three'], ',');
+    expect(id).toBe(digest);
+  });
+});

x-pack/plugins/security_solution/public/cases/components/callout/helpers.tsx

@@ -4,9 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import md5 from 'md5';
 import * as i18n from './translations';
 
 export const savedObjectReadOnly = {
   title: i18n.READ_ONLY_SAVED_OBJECT_TITLE,
   description: i18n.READ_ONLY_SAVED_OBJECT_MSG,
 };
+
+export const createCalloutId = (ids: string[], delimiter: string = '|'): string =>
+  md5(ids.join(delimiter));

x-pack/plugins/security_solution/public/cases/components/callout/index.test.tsx

@@ -7,104 +7,150 @@
 import React from 'react';
 import { mount } from 'enzyme';
 
+import { useSecurityLocalStorage } from '../../../common/containers/use_local_storage';
+import { TestProviders } from '../../../common/mock';
+import { createCalloutId } from './helpers';
 import { CaseCallOut } from '.';
 
+jest.mock('../../../common/containers/use_local_storage');
+
+const useSecurityLocalStorageMock = useSecurityLocalStorage as jest.Mock;
+const securityLocalStorageMock = {
+  getCallouts: jest.fn(() => []),
+  persistDismissCallout: jest.fn(),
+};
+
 const defaultProps = {
   title: 'hey title',
 };
 
 describe('CaseCallOut ', () => {
+  beforeEach(() => {
+    useSecurityLocalStorageMock.mockReset();
+    useSecurityLocalStorageMock.mockImplementation(() => securityLocalStorageMock);
+  });
+
   it('Renders single message callout', () => {
     const props = {
       ...defaultProps,
       message: 'we have one message',
     };
 
-    const wrapper = mount(<CaseCallOut {...props} />);
+    const wrapper = mount(
+      <TestProviders>
+        <CaseCallOut {...props} />
+      </TestProviders>
+    );
 
     expect(wrapper.find(`[data-test-subj="callout-message-primary"]`).last().exists()).toBeTruthy();
   });
 
   it('Renders multi message callout', () => {
     const props = {
       ...defaultProps,
+      message: 'we have one message',
       messages: [
-        { ...defaultProps, description: <p>{'we have two messages'}</p> },
-        { ...defaultProps, description: <p>{'for real'}</p> },
+        { id: 'message-one', title: 'title', description: <p>{'we have two messages'}</p> },
+        { id: 'message-two', title: 'title', description: <p>{'for real'}</p> },
       ],
     };
-    const wrapper = mount(<CaseCallOut {...props} />);
-    expect(wrapper.find(`[data-test-subj="callout-message-primary"]`).last().exists()).toBeFalsy();
-    expect(
-      wrapper.find(`[data-test-subj="callout-messages-primary"]`).last().exists()
-    ).toBeTruthy();
+    const wrapper = mount(
+      <TestProviders>
+        <CaseCallOut {...props} />
+      </TestProviders>
+    );
+
+    const id = createCalloutId(['message-one', 'message-two', 'generic-message-error']);
+
+    expect(wrapper.find(`[data-test-subj="callout-messages-${id}"]`).last().exists()).toBeTruthy();
   });
 
-  it('it shows the correct type of callouts', () => {
+  it('shows the correct type of callouts', () => {
     const props = {
       ...defaultProps,
       messages: [
         {
-          ...defaultProps,
+          id: 'message-one',
+          title: 'title one',
           description: <p>{'we have two messages'}</p>,
           errorType: 'danger' as 'primary' | 'success' | 'warning' | 'danger',
         },
-        { ...defaultProps, description: <p>{'for real'}</p> },
+        { id: 'message-two', title: 'title two', description: <p>{'for real'}</p> },
       ],
     };
-    const wrapper = mount(<CaseCallOut {...props} />);
-    expect(wrapper.find(`[data-test-subj="callout-messages-danger"]`).last().exists()).toBeTruthy();
 
+    const wrapper = mount(
+      <TestProviders>
+        <CaseCallOut {...props} />
+      </TestProviders>
+    );
+
+    const idDanger = createCalloutId(['message-one']);
+    const idPrimary = createCalloutId(['message-two']);
+
+    expect(
+      wrapper.find(`[data-test-subj="case-callout-${idPrimary}"]`).last().exists()
+    ).toBeTruthy();
     expect(
-      wrapper.find(`[data-test-subj="callout-messages-primary"]`).last().exists()
+      wrapper.find(`[data-test-subj="case-callout-${idDanger}"]`).last().exists()
     ).toBeTruthy();
   });
 
-  it('it applies the correct color to button', () => {
+  it('Dismisses callout', () => {
     const props = {
       ...defaultProps,
-      messages: [
-        {
-          ...defaultProps,
-          description: <p>{'one'}</p>,
-          errorType: 'danger' as 'primary' | 'success' | 'warning' | 'danger',
-        },
-        {
-          ...defaultProps,
-          description: <p>{'two'}</p>,
-          errorType: 'success' as 'primary' | 'success' | 'warning' | 'danger',
-        },
-        {
-          ...defaultProps,
-          description: <p>{'three'}</p>,
-          errorType: 'primary' as 'primary' | 'success' | 'warning' | 'danger',
-        },
-      ],
+      message: 'we have one message',
     };
+    const wrapper = mount(
+      <TestProviders>
+        <CaseCallOut {...props} />
+      </TestProviders>
+    );
 
-    const wrapper = mount(<CaseCallOut {...props} />);
+    const id = createCalloutId(['generic-message-error']);
 
-    expect(wrapper.find(`[data-test-subj="callout-dismiss-danger"]`).first().prop('color')).toBe(
-      'danger'
-    );
+    expect(wrapper.find(`[data-test-subj="case-callout-${id}"]`).last().exists()).toBeTruthy();
+    wrapper.find(`[data-test-subj="callout-dismiss-${id}"]`).last().simulate('click');
+    expect(wrapper.find(`[data-test-subj="case-callout-${id}"]`).exists()).toBeFalsy();
+  });
 
-    expect(wrapper.find(`[data-test-subj="callout-dismiss-success"]`).first().prop('color')).toBe(
-      'secondary'
-    );
+  it('persist the callout when dismissed', () => {
+    const props = {
+      ...defaultProps,
+      message: 'we have one message',
+    };
 
-    expect(wrapper.find(`[data-test-subj="callout-dismiss-primary"]`).first().prop('color')).toBe(
-      'primary'
+    const wrapper = mount(
+      <TestProviders>
+        <CaseCallOut {...props} />
+      </TestProviders>
     );
+
+    const id = createCalloutId(['generic-message-error']);
+    expect(securityLocalStorageMock.getCallouts).toHaveBeenCalledWith('case');
+    wrapper.find(`[data-test-subj="callout-dismiss-${id}"]`).last().simulate('click');
+    expect(securityLocalStorageMock.persistDismissCallout).toHaveBeenCalledWith('case', id);
   });
 
-  it('Dismisses callout', () => {
+  it('do not show the callout if is in the localStorage', () => {
     const props = {
       ...defaultProps,
       message: 'we have one message',
     };
-    const wrapper = mount(<CaseCallOut {...props} />);
-    expect(wrapper.find(`[data-test-subj="case-call-out-primary"]`).exists()).toBeTruthy();
-    wrapper.find(`[data-test-subj="callout-dismiss-primary"]`).last().simulate('click');
-    expect(wrapper.find(`[data-test-subj="case-call-out-primary"]`).exists()).toBeFalsy();
+
+    const id = createCalloutId(['generic-message-error']);
+
+    useSecurityLocalStorageMock.mockImplementation(() => ({
+      ...securityLocalStorageMock,
+      getCallouts: jest.fn(() => [id]),
+    }));
+
+    const wrapper = mount(
+      <TestProviders>
+        <CaseCallOut {...props} />
+      </TestProviders>
+    );
+
+    expect(wrapper.find(`[data-test-subj="case-callout-${id}"]`).last().exists()).toBeFalsy();
   });
 });

x-pack/plugins/security_solution/public/cases/components/callout/index.tsx

@@ -4,13 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import md5 from 'md5';
 import { EuiSpacer } from '@elastic/eui';
 import React, { memo, useCallback, useState } from 'react';
 
 import { useSecurityLocalStorage } from '../../../common/containers/use_local_storage';
 import { CallOut } from './callout';
 import { ErrorMessage } from './types';
+import { createCalloutId } from './helpers';
 
 export * from './helpers';
 
@@ -82,7 +82,7 @@ const CaseCallOutComponent = ({ title, message, messages }: CaseCallOutProps) =>
     <>
       {(Object.keys(groupedByTypeErrorMessages) as Array<keyof ErrorMessage['errorType']>).map(
         (type: NonNullable<ErrorMessage['errorType']>) => {
-          const id = md5(groupedByTypeErrorMessages[type].messagesId.join('|'));
+          const id = createCalloutId(groupedByTypeErrorMessages[type].messagesId);
           return (
             <React.Fragment key={id}>
               <CallOut