[XY Plugin] Add unit tests (#89582)

* [XY Plugin] Add unit tests

* More unit tests

* Address PR comments

* Update license

* Resolve PR comments

* A nice improvement

* Apply new type everywhere

* Cleaning up

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/vis_type_xy/public/components/detailed_tooltip.mock.ts

@@ -0,0 +1,189 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const aspects = {
+  x: {
+    accessor: 'col-0-3',
+    column: 0,
+    title: 'timestamp per 3 hours',
+    format: {
+      id: 'date',
+      params: {
+        pattern: 'YYYY-MM-DD HH:mm',
+      },
+    },
+    aggType: 'date_histogram',
+    aggId: '3',
+    params: {
+      date: true,
+      intervalESUnit: 'h',
+      intervalESValue: 3,
+      interval: 10800000,
+      format: 'YYYY-MM-DD HH:mm',
+    },
+  },
+  y: [
+    {
+      accessor: 'col-1-1',
+      column: 1,
+      title: 'Count',
+      format: {
+        id: 'number',
+      },
+      aggType: 'count',
+      aggId: '1',
+      params: {},
+    },
+  ],
+};
+
+export const aspectsWithSplitColumn = {
+  x: {
+    accessor: 'col-0-3',
+    column: 0,
+    title: 'timestamp per 3 hours',
+    format: {
+      id: 'date',
+      params: {
+        pattern: 'YYYY-MM-DD HH:mm',
+      },
+    },
+    aggType: 'date_histogram',
+    aggId: '3',
+    params: {
+      date: true,
+      intervalESUnit: 'h',
+      intervalESValue: 3,
+      interval: 10800000,
+      format: 'YYYY-MM-DD HH:mm',
+    },
+  },
+  y: [
+    {
+      accessor: 'col-2-1',
+      column: 2,
+      title: 'Count',
+      format: {
+        id: 'number',
+      },
+      aggType: 'count',
+      aggId: '1',
+      params: {},
+    },
+  ],
+  splitColumn: {
+    accessor: 'col-1-4',
+    column: 1,
+    title: 'Cancelled: Descending',
+    format: {
+      id: 'terms',
+      params: {
+        id: 'boolean',
+        otherBucketLabel: 'Other',
+        missingBucketLabel: 'Missing',
+      },
+    },
+    aggType: 'terms',
+    aggId: '4',
+    params: {},
+  },
+};
+
+export const aspectsWithSplitRow = {
+  x: {
+    accessor: 'col-0-3',
+    column: 0,
+    title: 'timestamp per 3 hours',
+    format: {
+      id: 'date',
+      params: {
+        pattern: 'YYYY-MM-DD HH:mm',
+      },
+    },
+    aggType: 'date_histogram',
+    aggId: '3',
+    params: {
+      date: true,
+      intervalESUnit: 'h',
+      intervalESValue: 3,
+      interval: 10800000,
+      format: 'YYYY-MM-DD HH:mm',
+    },
+  },
+  y: [
+    {
+      accessor: 'col-3-1',
+      column: 2,
+      title: 'Count',
+      format: {
+        id: 'number',
+      },
+      aggType: 'count',
+      aggId: '1',
+      params: {},
+    },
+  ],
+  splitRow: {
+    accessor: 'col-1-5',
+    column: 1,
+    title: 'Carrier: Descending',
+    format: {
+      id: 'terms',
+      params: {
+        id: 'string',
+        otherBucketLabel: 'Other',
+        missingBucketLabel: 'Missing',
+      },
+    },
+    aggType: 'terms',
+    aggId: '4',
+    params: {},
+  },
+};
+
+export const header = {
+  seriesIdentifier: {
+    key:
+      'groupId{__pseudo_stacked_group-ValueAxis-1__}spec{area-col-1-1}yAccessor{col-1-1}splitAccessors{}smV{__ECH_DEFAULT_SINGLE_PANEL_SM_VALUE__}smH{__ECH_DEFAULT_SINGLE_PANEL_SM_VALUE__}',
+    specId: 'area-col-1-1',
+    yAccessor: 'col-1-1',
+    splitAccessors: {},
+    seriesKeys: ['col-1-1'],
+    smVerticalAccessorValue: '__ECH_DEFAULT_SINGLE_PANEL_SM_VALUE__',
+    smHorizontalAccessorValue: '__ECH_DEFAULT_SINGLE_PANEL_SM_VALUE__',
+  },
+  valueAccessor: 'y1',
+  label: 'Count',
+  value: 1611817200000,
+  formattedValue: '1611817200000',
+  markValue: null,
+  color: '#54b399',
+  isHighlighted: false,
+  isVisible: true,
+};
+
+export const value = {
+  seriesIdentifier: {
+    key:
+      'groupId{__pseudo_stacked_group-ValueAxis-1__}spec{area-col-1-1}yAccessor{col-1-1}splitAccessors{}smV{__ECH_DEFAULT_SINGLE_PANEL_SM_VALUE__}smH{__ECH_DEFAULT_SINGLE_PANEL_SM_VALUE__}',
+    specId: 'area-col-1-1',
+    yAccessor: 'col-1-1',
+    splitAccessors: [],
+    seriesKeys: ['col-1-1'],
+    smVerticalAccessorValue: 'kibana',
+    smHorizontalAccessorValue: 'false',
+  },
+  valueAccessor: 'y1',
+  label: 'Count',
+  value: 52,
+  formattedValue: '52',
+  markValue: null,
+  color: '#54b399',
+  isHighlighted: true,
+  isVisible: true,
+};

src/plugins/vis_type_xy/public/components/detailed_tooltip.test.tsx

@@ -0,0 +1,62 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { getTooltipData } from './detailed_tooltip';
+import {
+  aspects,
+  aspectsWithSplitColumn,
+  aspectsWithSplitRow,
+  header,
+  value,
+} from './detailed_tooltip.mock';
+
+describe('getTooltipData', () => {
+  it('returns an array with the header and data information', () => {
+    const tooltipData = getTooltipData(aspects, header, value);
+    expect(tooltipData).toStrictEqual([
+      {
+        label: 'timestamp per 3 hours',
+        value: '1611817200000',
+      },
+      {
+        label: 'Count',
+        value: '52',
+      },
+    ]);
+  });
+
+  it('returns an array with the data information if the header is not applied', () => {
+    const tooltipData = getTooltipData(aspects, null, value);
+    expect(tooltipData).toStrictEqual([
+      {
+        label: 'Count',
+        value: '52',
+      },
+    ]);
+  });
+
+  it('returns an array with the split column information if it is provided', () => {
+    const tooltipData = getTooltipData(aspectsWithSplitColumn, null, value);
+    expect(tooltipData).toStrictEqual([
+      {
+        label: 'Cancelled: Descending',
+        value: 'false',
+      },
+    ]);
+  });
+
+  it('returns an array with the split row information if it is provided', () => {
+    const tooltipData = getTooltipData(aspectsWithSplitRow, null, value);
+    expect(tooltipData).toStrictEqual([
+      {
+        label: 'Carrier: Descending',
+        value: 'kibana',
+      },
+    ]);
+  });
+});

src/plugins/vis_type_xy/public/components/detailed_tooltip.tsx

@@ -30,7 +30,7 @@ interface TooltipData {
 // TODO: replace when exported from elastic/charts
 const DEFAULT_SINGLE_PANEL_SM_VALUE = '__ECH_DEFAULT_SINGLE_PANEL_SM_VALUE__';
 
-const getTooltipData = (
+export const getTooltipData = (
   aspects: Aspects,
   header: TooltipValue | null,
   value: TooltipValue

src/plugins/vis_type_xy/public/editor/components/common/truncate_labels.test.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { mountWithIntl } from '@kbn/test/jest';
+import { ReactWrapper } from 'enzyme';
+import { TruncateLabelsOption, TruncateLabelsOptionProps } from './truncate_labels';
+import { findTestSubject } from '@elastic/eui/lib/test';
+
+describe('TruncateLabelsOption', function () {
+  let props: TruncateLabelsOptionProps;
+  let component: ReactWrapper<TruncateLabelsOptionProps>;
+
+  beforeAll(() => {
+    props = {
+      disabled: false,
+      value: 20,
+      setValue: jest.fn(),
+    };
+  });
+
+  it('renders an input type number', () => {
+    component = mountWithIntl(<TruncateLabelsOption {...props} />);
+    expect(findTestSubject(component, 'xyLabelTruncateInput').length).toBe(1);
+  });
+
+  it('renders the value on the input number', () => {
+    component = mountWithIntl(<TruncateLabelsOption {...props} />);
+    const input = findTestSubject(component, 'xyLabelTruncateInput');
+    expect(input.props().value).toBe(20);
+  });
+
+  it('disables the input if disabled prop is given', () => {
+    const newProps = { ...props, disabled: true };
+    component = mountWithIntl(<TruncateLabelsOption {...newProps} />);
+    const input = findTestSubject(component, 'xyLabelTruncateInput');
+    expect(input.props().disabled).toBeTruthy();
+  });
+
+  it('should set the new value', () => {
+    component = mountWithIntl(<TruncateLabelsOption {...props} />);
+    const input = findTestSubject(component, 'xyLabelTruncateInput');
+    input.simulate('change', { target: { value: 100 } });
+    expect(props.setValue).toHaveBeenCalled();
+  });
+});

src/plugins/vis_type_xy/public/editor/components/common/truncate_labels.tsx

@@ -10,7 +10,7 @@ import React, { ChangeEvent } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
 
-interface TruncateLabelsOptionProps {
+export interface TruncateLabelsOptionProps {
   disabled?: boolean;
   value?: number | null;
   setValue: (paramName: 'truncate', value: null | number) => void;
@@ -29,6 +29,7 @@ function TruncateLabelsOption({ disabled, value = null, setValue }: TruncateLabe
       display="rowCompressed"
     >
       <EuiFieldNumber
+        data-test-subj="xyLabelTruncateInput"
         disabled={disabled}
         value={value === null ? '' : value}
         onChange={onChange}