Unit tests for expression function and bug fixes

public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/ConfirmUnlinkDetectorModal/ConfirmUnlinkDetectorModal.tsx

@@ -34,7 +34,7 @@ export const ConfirmUnlinkDetectorModal = (
   return (
     <EuiOverlayMask>
       <EuiModal
-        data-test-subj="startDetectorsModal"
+        data-test-subj="unlinkDetectorsModal"
         onClose={props.onHide}
         maxWidth={450}
       >
@@ -52,14 +52,14 @@ export const ConfirmUnlinkDetectorModal = (
         <EuiModalFooter>
           {isLoading ? null : (
             <EuiButtonEmpty
-              data-test-subj="cancelButton"
+              data-test-subj="cancelUnlinkButton"
               onClick={props.onHide}
             >
               Cancel
             </EuiButtonEmpty>
           )}
           <EuiButton
-            data-test-subj="confirmButton"
+            data-test-subj="confirmUnlinkButton"
             color="primary"
             fill
             isLoading={isLoading}

public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/__tests__/ConfirmUnlinkDetectorModal.test.tsx

@@ -0,0 +1,69 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { findAllByTestId, render, waitFor } from '@testing-library/react';
+import { ConfirmUnlinkDetectorModal } from '../index';
+import { getRandomDetector } from '../../../../../../public/redux/reducers/__tests__/utils';
+import { DetectorListItem } from '../../../../../../public/models/interfaces';
+import userEvent from '@testing-library/user-event';
+
+describe('ConfirmUnlinkDetectorModal spec', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const testDetectors = [
+    {
+      id: 'detectorId1',
+      name: 'test-detector-1',
+    },
+    {
+      id: 'detectorId2',
+      name: 'test-detector-2',
+    },
+  ] as DetectorListItem[];
+
+  const ConfirmUnlinkDetectorModalProps = {
+    detector: testDetectors[0],
+    onHide: jest.fn(),
+    onConfirm: jest.fn(),
+    onUnlinkDetector: jest.fn(),
+    isListLoading: false,
+  };
+
+  test('renders the component correctly', () => {
+    const { container, getByText } = render(
+      <ConfirmUnlinkDetectorModal {...ConfirmUnlinkDetectorModalProps} />
+    );
+    getByText('Remove association?');
+    getByText(
+      'Removing association unlinks test-detector-1 detector from the visualization but does not delete it. The detector association can be restored.'
+    );
+  });
+  test('should call onConfirm() when closing', async () => {
+    const { container, getByText, getByTestId } = render(
+      <ConfirmUnlinkDetectorModal {...ConfirmUnlinkDetectorModalProps} />
+    );
+    getByText('Remove association?');
+    userEvent.click(getByTestId('confirmUnlinkButton'));
+    expect(ConfirmUnlinkDetectorModalProps.onConfirm).toHaveBeenCalled();
+  });
+  test('should call onConfirm() when closing', async () => {
+    const { container, getByText, getByTestId } = render(
+      <ConfirmUnlinkDetectorModal {...ConfirmUnlinkDetectorModalProps} />
+    );
+    getByText('Remove association?');
+    userEvent.click(getByTestId('confirmUnlinkButton'));
+    expect(ConfirmUnlinkDetectorModalProps.onConfirm).toHaveBeenCalled();
+  });
+  test('should call onHide() when closing', async () => {
+    const { getByTestId } = render(
+      <ConfirmUnlinkDetectorModal {...ConfirmUnlinkDetectorModalProps} />
+    );
+    userEvent.click(getByTestId('cancelUnlinkButton'));
+    expect(ConfirmUnlinkDetectorModalProps.onHide).toHaveBeenCalled();
+  });
+});

public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/__tests__/EmptyAssociatedDetectorMessage.test.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { findAllByTestId, render, waitFor } from '@testing-library/react';
+import { EmptyAssociatedDetectorMessage } from '../index';
+import { getRandomDetector } from '../../../../../../public/redux/reducers/__tests__/utils';
+import { DetectorListItem } from '../../../../../../public/models/interfaces';
+import userEvent from '@testing-library/user-event';
+
+describe('ConfirmUnlinkDetectorModal spec', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders the component with filter applied', () => {
+    const { container, getByText } = render(
+      <EmptyAssociatedDetectorMessage
+        isFilterApplied={true}
+        embeddableTitle="test-title"
+      />
+    );
+    getByText('There are no detectors matching your search');
+    expect(container).toMatchSnapshot();
+  });
+  test('renders the component with filter applied', () => {
+    const { container, getByText } = render(
+      <EmptyAssociatedDetectorMessage
+        isFilterApplied={false}
+        embeddableTitle="test-title"
+      />
+    );
+    getByText(
+      'There are no anomaly detectors associated with test-title visualization.'
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

public/components/FeatureAnywhereContextMenu/AssociatedDetectors/components/__tests__/__snapshots__/EmptyAssociatedDetectorMessage.test.tsx.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ConfirmUnlinkDetectorModal spec renders the component with filter applied 1`] = `
+<div>
+  <div
+    class="euiEmptyPrompt"
+    data-test-subj="emptyAssociatedDetectorFlyoutMessage"
+    style="max-width: 45em;"
+  >
+    <h3
+      class="euiTitle euiTitle--small"
+    >
+      No anomaly detectors to display
+    </h3>
+    <span
+      class="euiTextColor euiTextColor--subdued"
+    >
+      <div
+        class="euiSpacer euiSpacer--m"
+      />
+      <div
+        class="euiText euiText--medium"
+      >
+        <div
+          class="euiText euiText--medium"
+        >
+          <p>
+            There are no detectors matching your search
+          </p>
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`ConfirmUnlinkDetectorModal spec renders the component with filter applied 2`] = `
+<div>
+  <div
+    class="euiEmptyPrompt"
+    data-test-subj="emptyAssociatedDetectorFlyoutMessage"
+    style="max-width: 45em;"
+  >
+    <h3
+      class="euiTitle euiTitle--small"
+    >
+      No anomaly detectors to display
+    </h3>
+    <span
+      class="euiTextColor euiTextColor--subdued"
+    >
+      <div
+        class="euiSpacer euiSpacer--m"
+      />
+      <div
+        class="euiText euiText--medium"
+      >
+        <div
+          class="euiText euiText--medium"
+        >
+          <p>
+            There are no anomaly detectors associated with test-title visualization.
+          </p>
+        </div>
+      </div>
+    </span>
+  </div>
+</div>
+`;

public/components/FeatureAnywhereContextMenu/AssociatedDetectors/containers/AssociatedDetectors.tsx

@@ -35,7 +35,6 @@ import {
   prettifyErrorMessage,
   NO_PERMISSIONS_KEY_WORD,
 } from '../../../../../server/utils/helpers';
-import { SavedObjectLoader } from '../../../../../../../src/plugins/saved_objects/public';
 import {
   EmptyAssociatedDetectorMessage,
   ConfirmUnlinkDetectorModal,
@@ -138,9 +137,6 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
     getAugmentVisSavedObjs(embeddable.vis.id, savedObjectLoader, uiSettings)
       .then((savedAugmentObjectsArr: any) => {
         if (savedAugmentObjectsArr != undefined) {
-          console.log(
-            'savedAugmentObjectsArr: ' + JSON.stringify(savedAugmentObjectsArr)
-          );
           const curSelectedDetectors = getAssociatedDetectors(
             Object.values(allDetectors),
             savedAugmentObjectsArr
@@ -287,7 +283,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
     <div className="associated-detectors">
       <EuiFlyout ownFocus size="m" paddingSize="m" onClose={closeFlyout}>
         <EuiFlyoutHeader hasBorder>
-          <EuiTitle size="s">
+          <EuiTitle>
             <h2 id="associated-detectors__title">
               Associated anomaly detectors
             </h2>
@@ -306,7 +302,7 @@ function AssociatedDetectors({ embeddable, closeFlyout, setMode }) {
           <EuiFlexGroup alignItems="center">
             <EuiFlexItem component="span">
               <EuiTitle size="xxs">
-                <h3>{embeddableTitle}</h3>
+                <h3>Visualization: {embeddableTitle}</h3>
               </EuiTitle>
             </EuiFlexItem>
             <EuiFlexItem>

public/components/FeatureAnywhereContextMenu/AssociatedDetectors/styles.scss

@@ -16,4 +16,8 @@
   &__flex-group {
     height: 100%;
   }
+
+  &__associate-button {
+    flex: 0 0 auto;
+  }
 }