[Data Table] Add unit tests (elastic#90173)

* Move formatting columns into response handler

* Use shared csv export

* Cleanup files

* Fix type

* Fix translation

* Filter out non-dimension values

* Add unit tests for tableVisResponseHandler

* Add unit tests for createFormattedTable

* Add unit tests for addPercentageColumn

* Add unit tests for usePagination

* Add unit tests for useUiState

* Add unit tests for table visualization

* Add unit tests for TableVisBasic

* Add unit tests for cell

* Update license

Co-authored-by: Kibana Machine <[email protected]>

src/plugins/vis_type_table/public/components/table_vis_basic.test.tsx

@@ -0,0 +1,130 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { TableVisBasic } from './table_vis_basic';
+import { FormattedColumn, TableVisConfig, TableVisUiState } from '../types';
+import { DatatableColumn } from 'src/plugins/expressions';
+import { createTableVisCell } from './table_vis_cell';
+import { createGridColumns } from './table_vis_columns';
+
+jest.mock('./table_vis_columns', () => ({
+  createGridColumns: jest.fn(() => []),
+}));
+jest.mock('./table_vis_cell', () => ({
+  createTableVisCell: jest.fn(() => () => {}),
+}));
+
+describe('TableVisBasic', () => {
+  const props = {
+    fireEvent: jest.fn(),
+    table: {
+      columns: [],
+      rows: [],
+      formattedColumns: {
+        test: {
+          formattedTotal: 100,
+        } as FormattedColumn,
+      },
+    },
+    visConfig: {} as TableVisConfig,
+    uiStateProps: {
+      sort: {
+        columnIndex: null,
+        direction: null,
+      },
+      columnsWidth: [],
+      setColumnsWidth: jest.fn(),
+      setSort: jest.fn(),
+    },
+  };
+
+  it('should init data grid', () => {
+    const comp = shallow(<TableVisBasic {...props} />);
+    expect(comp).toMatchSnapshot();
+  });
+
+  it('should init data grid with title provided - for split mode', () => {
+    const title = 'My data table';
+    const comp = shallow(<TableVisBasic {...props} title={title} />);
+    expect(comp).toMatchSnapshot();
+  });
+
+  it('should render the toolbar', () => {
+    const comp = shallow(
+      <TableVisBasic
+        {...props}
+        visConfig={{ ...props.visConfig, title: 'My saved vis', showToolbar: true }}
+      />
+    );
+    expect(comp).toMatchSnapshot();
+  });
+
+  it('should sort rows by column and pass the sorted rows for consumers', () => {
+    const uiStateProps = {
+      ...props.uiStateProps,
+      sort: {
+        columnIndex: 1,
+        direction: 'desc',
+      } as TableVisUiState['sort'],
+    };
+    const table = {
+      columns: [{ id: 'first' }, { id: 'second' }] as DatatableColumn[],
+      rows: [
+        { first: 1, second: 2 },
+        { first: 3, second: 4 },
+        { first: 5, second: 6 },
+      ],
+      formattedColumns: {},
+    };
+    const sortedRows = [
+      { first: 5, second: 6 },
+      { first: 3, second: 4 },
+      { first: 1, second: 2 },
+    ];
+    const comp = shallow(
+      <TableVisBasic
+        {...props}
+        table={table}
+        uiStateProps={uiStateProps}
+        visConfig={{ ...props.visConfig, showToolbar: true }}
+      />
+    );
+    expect(createTableVisCell).toHaveBeenCalledWith(sortedRows, table.formattedColumns);
+    expect(createGridColumns).toHaveBeenCalledWith(
+      table.columns,
+      sortedRows,
+      table.formattedColumns,
+      uiStateProps.columnsWidth,
+      props.fireEvent
+    );
+
+    const { onSort } = comp.find('EuiDataGrid').prop('sorting');
+    // sort the first column
+    onSort([{ id: 'first', direction: 'asc' }]);
+    expect(uiStateProps.setSort).toHaveBeenCalledWith({ columnIndex: 0, direction: 'asc' });
+    // sort the second column - should erase the first column sorting since there is only one level sorting available
+    onSort([
+      { id: 'first', direction: 'asc' },
+      { id: 'second', direction: 'desc' },
+    ]);
+    expect(uiStateProps.setSort).toHaveBeenCalledWith({ columnIndex: 1, direction: 'desc' });
+  });
+
+  it('should pass renderFooterCellValue for the total row', () => {
+    const comp = shallow(
+      <TableVisBasic {...props} visConfig={{ ...props.visConfig, showTotal: true }} />
+    );
+    const renderFooterCellValue: (props: any) => void = comp
+      .find('EuiDataGrid')
+      .prop('renderFooterCellValue');
+    expect(renderFooterCellValue).toEqual(expect.any(Function));
+    expect(renderFooterCellValue({ columnId: 'test' })).toEqual(100);
+  });
+});

src/plugins/vis_type_table/public/components/table_vis_cell.test.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import { EuiDataGridCellValueElementProps } from '@elastic/eui';
+import { createTableVisCell } from './table_vis_cell';
+import { FormattedColumns } from '../types';
+
+describe('table vis cell', () => {
+  it('should return a cell component with data in scope', () => {
+    const rows = [{ first: 1, second: 2 }];
+    const formattedColumns = ({
+      second: {
+        formatter: {
+          convert: jest.fn(),
+        },
+      },
+    } as unknown) as FormattedColumns;
+    const Cell = createTableVisCell(rows, formattedColumns);
+    const cellProps = {
+      rowIndex: 0,
+      columnId: 'second',
+    } as EuiDataGridCellValueElementProps;
+
+    const comp = shallow(<Cell {...cellProps} />);
+
+    expect(comp).toMatchSnapshot();
+    expect(formattedColumns.second.formatter.convert).toHaveBeenLastCalledWith(2, 'html');
+  });
+});

src/plugins/vis_type_table/public/components/table_visualization.test.tsx

@@ -0,0 +1,69 @@
+/*
+ * 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.
+ */
+
+jest.mock('../utils', () => ({
+  useUiState: jest.fn(() => 'uiState'),
+}));
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
+import { coreMock } from '../../../../core/public/mocks';
+import { TableVisConfig, TableVisData } from '../types';
+import TableVisualizationComponent from './table_visualization';
+import { useUiState } from '../utils';
+
+describe('TableVisualizationComponent', () => {
+  const coreStartMock = coreMock.createStart();
+  const handlers = ({
+    done: jest.fn(),
+    uiState: 'uiState',
+    event: 'event',
+  } as unknown) as IInterpreterRenderHandlers;
+  const visData: TableVisData = {
+    table: {
+      columns: [],
+      rows: [],
+      formattedColumns: {},
+    },
+    tables: [],
+  };
+  const visConfig = ({} as unknown) as TableVisConfig;
+
+  it('should render the basic table', () => {
+    const comp = shallow(
+      <TableVisualizationComponent
+        core={coreStartMock}
+        handlers={handlers}
+        visData={visData}
+        visConfig={visConfig}
+      />
+    );
+    expect(useUiState).toHaveBeenLastCalledWith(handlers.uiState);
+    expect(comp.find('.tbvChart__splitColumns').exists()).toBeFalsy();
+    expect(comp.find('.tbvChart__split').exists()).toBeTruthy();
+  });
+
+  it('should render split table', () => {
+    const comp = shallow(
+      <TableVisualizationComponent
+        core={coreStartMock}
+        handlers={handlers}
+        visData={{
+          direction: 'column',
+          tables: [],
+        }}
+        visConfig={visConfig}
+      />
+    );
+    expect(useUiState).toHaveBeenLastCalledWith(handlers.uiState);
+    expect(comp.find('.tbvChart__splitColumns').exists()).toBeTruthy();
+    expect(comp.find('.tbvChart__split').exists()).toBeFalsy();
+    expect(comp.find('[data-test-subj="tbvChart"]').children().prop('tables')).toEqual([]);
+  });
+});