test: DataTableControl (#13668)

* Tests for DataTableControl

* Update superset-frontend/src/explore/components/DataTableControl/RowCount.test.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* Update superset-frontend/src/explore/components/DataTableControl/RowCount.test.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

superset-frontend/src/explore/components/DataTableControl/CopyButton.test.tsx

@@ -0,0 +1,28 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+
+import { CopyButton } from '.';
+
+test('Render a button', () => {
+  render(<CopyButton>btn</CopyButton>);
+  expect(screen.getByRole('button')).toBeInTheDocument();
+  expect(screen.getByRole('button')).toHaveClass('superset-button');
+});

superset-frontend/src/explore/components/DataTableControl/CopyToClipboardButton.test.tsx

@@ -0,0 +1,41 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import { CopyToClipboardButton } from '.';
+
+test('Render a button', () => {
+  render(<CopyToClipboardButton data={{ copy: 'data', data: 'copy' }} />, {
+    useRedux: true,
+  });
+  expect(screen.getByRole('button')).toBeInTheDocument();
+});
+
+test('Should copy to clipboard', () => {
+  document.execCommand = jest.fn();
+
+  render(<CopyToClipboardButton data={{ copy: 'data', data: 'copy' }} />, {
+    useRedux: true,
+  });
+
+  expect(document.execCommand).toHaveBeenCalledTimes(0);
+  userEvent.click(screen.getByRole('button'));
+  expect(document.execCommand).toHaveBeenCalledWith('copy');
+});

superset-frontend/src/explore/components/DataTableControl/FilterInput.test.tsx

@@ -0,0 +1,37 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import { FilterInput } from '.';
+
+jest.mock('lodash/debounce', () => ({
+  __esModule: true,
+  default: (fuc: Function) => fuc,
+}));
+
+test('Render a FilterInput', async () => {
+  const onChangeHandler = jest.fn();
+  render(<FilterInput onChangeHandler={onChangeHandler} />);
+
+  expect(onChangeHandler).toBeCalledTimes(0);
+  userEvent.type(screen.getByRole('textbox'), 'test');
+
+  expect(onChangeHandler).toBeCalledTimes(4);
+});

superset-frontend/src/explore/components/DataTableControl/RowCount.test.tsx

@@ -0,0 +1,31 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { render, screen } from 'spec/helpers/testing-library';
+import { RowCount } from '.';
+
+test('Render a RowCount', () => {
+  render(<RowCount data={[{}, {}, {}]} loading={false} />);
+  expect(screen.getByText('3 rows retrieved')).toBeInTheDocument();
+});
+
+test('Render a RowCount on loading', () => {
+  render(<RowCount data={[{}, {}, {}]} loading />);
+  expect(screen.getByText('Loading...')).toBeInTheDocument();
+});

superset-frontend/src/explore/components/DataTableControl/index.tsx

@@ -0,0 +1,143 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React, { useMemo } from 'react';
+import { styled, t } from '@superset-ui/core';
+import { FormControl } from 'react-bootstrap';
+import { Column } from 'react-table';
+import debounce from 'lodash/debounce';
+
+import {
+  BOOL_FALSE_DISPLAY,
+  BOOL_TRUE_DISPLAY,
+  SLOW_DEBOUNCE,
+} from 'src/constants';
+import Button from 'src/components/Button';
+import {
+  applyFormattingToTabularData,
+  prepareCopyToClipboardTabularData,
+} from 'src/utils/common';
+import CopyToClipboard from 'src/components/CopyToClipboard';
+import RowCountLabel from 'src/explore/components/RowCountLabel';
+
+export const CopyButton = styled(Button)`
+  font-size: ${({ theme }) => theme.typography.sizes.s}px;
+
+  // needed to override button's first-of-type margin: 0
+  && {
+    margin: 0 ${({ theme }) => theme.gridUnit * 2}px;
+  }
+
+  i {
+    padding: 0 ${({ theme }) => theme.gridUnit}px;
+  }
+`;
+
+const CopyNode = (
+  <CopyButton buttonSize="xsmall">
+    <i className="fa fa-clipboard" />
+  </CopyButton>
+);
+
+export const CopyToClipboardButton = ({
+  data,
+}: {
+  data?: Record<string, any>;
+}) => (
+  <CopyToClipboard
+    text={data ? prepareCopyToClipboardTabularData(data) : ''}
+    wrapped={false}
+    copyNode={CopyNode}
+  />
+);
+
+export const FilterInput = ({
+  onChangeHandler,
+}: {
+  onChangeHandler(filterText: string): void;
+}) => {
+  const debouncedChangeHandler = debounce(onChangeHandler, SLOW_DEBOUNCE);
+  return (
+    <FormControl
+      placeholder={t('Search')}
+      bsSize="sm"
+      onChange={(event: any) => {
+        const filterText = event.target.value;
+        debouncedChangeHandler(filterText);
+      }}
+    />
+  );
+};
+
+export const RowCount = ({
+  data,
+  loading,
+}: {
+  data?: Record<string, any>[];
+  loading: boolean;
+}) => (
+  <RowCountLabel
+    rowcount={data?.length ?? 0}
+    loading={loading}
+    suffix={t('rows retrieved')}
+  />
+);
+
+export const useFilteredTableData = (
+  filterText: string,
+  data?: Record<string, any>[],
+) =>
+  useMemo(() => {
+    if (!data?.length) {
+      return [];
+    }
+    const formattedData = applyFormattingToTabularData(data);
+    return formattedData.filter((row: Record<string, any>) =>
+      Object.values(row).some(value =>
+        value?.toString().toLowerCase().includes(filterText.toLowerCase()),
+      ),
+    );
+  }, [data, filterText]);
+
+export const useTableColumns = (
+  data?: Record<string, any>[],
+  moreConfigs?: { [key: string]: Partial<Column> },
+) =>
+  useMemo(
+    () =>
+      data?.length
+        ? Object.keys(data[0]).map(
+            key =>
+              ({
+                accessor: key,
+                Header: key,
+                Cell: ({ value }) => {
+                  if (value === true) {
+                    return BOOL_TRUE_DISPLAY;
+                  }
+                  if (value === false) {
+                    return BOOL_FALSE_DISPLAY;
+                  }
+                  return String(value);
+                },
+                ...moreConfigs?.[key],
+              } as Column),
+          )
+        : [],
+    [data, moreConfigs],
+  );

superset-frontend/src/explore/components/DataTableControl/useFilteredTableData.test.ts

@@ -0,0 +1,57 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { renderHook } from '@testing-library/react-hooks';
+import { useFilteredTableData } from '.';
+
+const data = [
+  { col01: 'some', col02: 'data' },
+  { col01: 'any', col02: 'data' },
+  { col01: 'some', col02: 'thing' },
+  { col01: 'any', col02: 'things' },
+];
+
+test('Empty filter', () => {
+  const hook = renderHook(() => useFilteredTableData('', data));
+  expect(hook.result.current).toEqual(data);
+});
+
+test('Filter by the word "data"', () => {
+  const hook = renderHook(() => useFilteredTableData('data', data));
+  expect(hook.result.current).toEqual([
+    { col01: 'some', col02: 'data' },
+    { col01: 'any', col02: 'data' },
+  ]);
+});
+
+test('Filter by the word "thing"', () => {
+  const hook = renderHook(() => useFilteredTableData('thing', data));
+  expect(hook.result.current).toEqual([
+    { col01: 'some', col02: 'thing' },
+    { col01: 'any', col02: 'things' },
+  ]);
+});
+
+test('Filter by the word "any"', () => {
+  const hook = renderHook(() => useFilteredTableData('any', data));
+  expect(hook.result.current).toEqual([
+    { col01: 'any', col02: 'data' },
+    { col01: 'any', col02: 'things' },
+  ]);
+});

superset-frontend/src/explore/components/DataTableControl/useTableColumns.test.ts

@@ -0,0 +1,64 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { renderHook } from '@testing-library/react-hooks';
+import { useTableColumns } from '.';
+
+const data = [
+  { col01: 'some', col02: 'data' },
+  { col01: 'any', col02: 'data' },
+  { col01: 'some', col02: 'thing' },
+  { col01: 'any', col02: 'things', col03: 'secret' },
+];
+
+test('useTableColumns with no options', () => {
+  const hook = renderHook(() => useTableColumns(data));
+  expect(hook.result.current).toEqual([
+    { Cell: expect.any(Function), Header: 'col01', accessor: 'col01' },
+    { Cell: expect.any(Function), Header: 'col02', accessor: 'col02' },
+  ]);
+});
+
+test('use only the first record columns', () => {
+  const hook = renderHook(() => useTableColumns(data));
+  expect(hook.result.current).toEqual([
+    { Cell: expect.any(Function), Header: 'col01', accessor: 'col01' },
+    { Cell: expect.any(Function), Header: 'col02', accessor: 'col02' },
+  ]);
+
+  const hook2 = renderHook(() => useTableColumns([data[3], data[0]]));
+  expect(hook2.result.current).toEqual([
+    { Cell: expect.any(Function), Header: 'col01', accessor: 'col01' },
+    { Cell: expect.any(Function), Header: 'col02', accessor: 'col02' },
+    { Cell: expect.any(Function), Header: 'col03', accessor: 'col03' },
+  ]);
+});
+
+test('useTableColumns with options', () => {
+  const hook = renderHook(() => useTableColumns(data, { col01: { id: 'ID' } }));
+  expect(hook.result.current).toEqual([
+    {
+      Cell: expect.any(Function),
+      Header: 'col01',
+      accessor: 'col01',
+      id: 'ID',
+    },
+    { Cell: expect.any(Function), Header: 'col02', accessor: 'col02' },
+  ]);
+});