[Vis Builder] Add additional unit tests

Signed-off-by: Josh Romero <rmerqg@amazon.com>

src/plugins/vis_builder/public/application/components/data_tab/field_details.test.tsx

@@ -45,7 +45,7 @@ const mockOnAddFilter = jest.fn();
 describe('visBuilder sidebar field details', function () {
   const defaultProps = {
     isMetaField: false,
-    details: { buckets: [], error: '', exists: 1, total: 1, columns: [] },
+    details: { buckets: [], error: '', exists: 1, total: 1 },
     onAddFilter: mockOnAddFilter,
   };
 

src/plugins/vis_builder/public/application/components/data_tab/field_selector.test.tsx

@@ -0,0 +1,75 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { FilterManager, IndexPatternField } from '../../../../../data/public';
+import { FieldGroup } from './field_selector';
+
+const mockGetDetails = jest.fn(() => ({
+  buckets: [1, 2, 3].map((n) => ({
+    display: `display-${n}`,
+    value: `value-${n}`,
+    percent: 25,
+    count: 100,
+  })),
+  error: '',
+  exists: 100,
+  total: 150,
+}));
+
+const getFields = (name) => {
+  return new IndexPatternField(
+    {
+      name,
+      type: 'number',
+      esTypes: ['long'],
+      count: 10,
+      scripted: false,
+      searchable: true,
+      aggregatable: true,
+      readFromDocValues: true,
+    },
+    name
+  );
+};
+
+describe('visBuilder sidebar field selector', function () {
+  const defaultProps = {
+    filterManager: {} as FilterManager,
+    getDetails: mockGetDetails,
+    header: 'mockHeader',
+    id: 'mockID',
+  };
+  describe('FieldGroup', () => {
+    it('renders an empty accordion if no fields specified', async () => {
+      const { container } = render(<FieldGroup {...defaultProps} />);
+
+      expect(container).toHaveTextContent(defaultProps.header);
+      expect(container).toHaveTextContent('0');
+      expect(screen.queryAllByTestId('field-selector-field').length).toBeFalsy();
+
+      await fireEvent.click(screen.getByText(defaultProps.header));
+
+      expect(mockGetDetails).not.toHaveBeenCalled();
+    });
+
+    it('renders an accordion with FieldSelectorFields if fields provided', async () => {
+      const props = {
+        ...defaultProps,
+        fields: ['bytes', 'machine.ram', 'memory', 'phpmemory'].map(getFields),
+      };
+      const { container } = render(<FieldGroup {...props} />);
+
+      expect(container).toHaveTextContent(props.header);
+      expect(container).toHaveTextContent(props.fields.length.toString());
+      expect(screen.queryAllByTestId('field-selector-field').length).toBe(props.fields.length);
+
+      await fireEvent.click(screen.getByText('memory'));
+
+      expect(mockGetDetails).toHaveBeenCalledTimes(1);
+    });
+  });
+});

src/plugins/vis_builder/public/application/components/data_tab/field_selector.tsx

@@ -195,7 +195,7 @@ interface FieldGroupProps {
   indexPattern?: IndexPattern;
 }
 
-const FieldGroup = ({ fields, header, id, ...rest }: FieldGroupProps) => {
+export const FieldGroup = ({ fields, header, id, ...rest }: FieldGroupProps) => {
   return (
     <EuiAccordion
       id={id}
@@ -221,9 +221,9 @@ const FieldGroup = ({ fields, header, id, ...rest }: FieldGroupProps) => {
   );
 };
 
-function getFieldCategory({ name, type }: IndexPatternField): keyof IFieldCategories {
+export const getFieldCategory = ({ name, type }: IndexPatternField): keyof IFieldCategories => {
   if (META_FIELDS.includes(name)) return 'meta';
   if (type === OSD_FIELD_TYPES.NUMBER) return 'numerical';
 
   return 'categorical';
-}
+};

src/plugins/vis_builder/public/application/components/data_tab/field_selector_field.test.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { IndexPatternField } from '../../../../../data/public';
+
+import { SelectorFieldButton } from './field_selector_field';
+
+describe('visBuilder sidebar field selector field', function () {
+  describe('SelectorFieldButton', () => {
+    it('should render normal fields without a dragValue specified', async () => {
+      const props = {
+        field: new IndexPatternField(
+          {
+            name: 'bytes',
+            type: 'number',
+            esTypes: ['long'],
+            count: 10,
+            scripted: false,
+            searchable: true,
+            aggregatable: true,
+            readFromDocValues: true,
+          },
+          'bytes'
+        ),
+      };
+      render(<SelectorFieldButton {...props} />);
+
+      expect(screen.getByTestId('field-bytes-showDetails')).toBeDefined();
+    });
+
+    // it('should allow specified dragValue to override the field name');
+
+    // it('should make dots wrappable');
+
+    // it('should use a non-scripted FieldIcon by default');
+  });
+
+  // describe('FieldSelectorField', function () {
+
+  // });
+});

src/plugins/vis_builder/public/application/components/data_tab/field_selector_field.tsx

@@ -94,6 +94,7 @@ export const FieldSelectorField = ({
       anchorPosition="rightUp"
       panelClassName="vbItem__fieldPopoverPanel"
       repositionOnScroll
+      data-test-subj="field-selector-field"
     >
       {infoIsOpen && (
         <VisBuilderFieldDetails
@@ -113,17 +114,17 @@ export interface SelectorFieldButtonProps extends Partial<FieldButtonProps> {
 }
 
 export const SelectorFieldButton = ({ dragValue, field, ...rest }: SelectorFieldButtonProps) => {
-  const { name, displayName, type, scripted = false } = field ?? {};
+  const { name, displayName, type, scripted = false } = field;
   const [dragProps] = useDrag({
     namespace: 'field-data',
     value: dragValue ?? name,
   });
 
-  function wrapOnDot(str?: string) {
+  function wrapOnDot(str: string) {
     // u200B is a non-width white-space character, which allows
     // the browser to efficiently word-wrap right after the dot
     // without us having to draw a lot of extra DOM elements, etc
-    return str ? str.replace(/\./g, '.\u200B') : '';
+    return str.replace(/\./g, '.\u200B');
   }
 
   const defaultIcon = <FieldIcon type={type} scripted={scripted} size="l" />;