superset-frontend/src/features/home/ChartTable.test.tsx

/**
 * 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 { render, screen, waitFor } from 'spec/helpers/testing-library';
import fetchMock from 'fetch-mock';
import { act } from 'react-dom/test-utils';
import userEvent from '@testing-library/user-event';
import ChartTable from './ChartTable';

const chartsEndpoint = 'glob:*/api/v1/chart/?*';
const chartsInfoEndpoint = 'glob:*/api/v1/chart/_info*';
const chartFavoriteStatusEndpoint = 'glob:*/api/v1/chart/favorite_status*';

const mockCharts = [...new Array(3)].map((_, i) => ({
  changed_on_utc: new Date().toISOString(),
  created_by: 'super user',
  id: i,
  slice_name: `cool chart ${i}`,
  url: 'url',
  viz_type: 'bar',
  datasource_title: `ds${i}`,
  thumbnail_url: '',
}));

fetchMock.get(chartsEndpoint, {
  result: mockCharts,
});

fetchMock.get(chartsInfoEndpoint, {
  permissions: ['can_add', 'can_edit', 'can_delete'],
});

fetchMock.get(chartFavoriteStatusEndpoint, {
  result: [],
});

const mockedProps = {
  addDangerToast: jest.fn(),
  addSuccessToast: jest.fn(),
  user: {
    userId: '2',
  },
  mine: [],
  otherTabData: [],
  otherTabFilters: [],
  otherTabTitle: 'Other',
  showThumbnails: false,
};

const otherTabProps = {
  ...mockedProps,
  otherTabData: mockCharts,
};

const mineTabProps = {
  ...mockedProps,
  mine: mockCharts,
};

const renderOptions = {
  useRedux: true,
  useRouter: true,
};

const renderChartTable = (props: any) =>
  // Use of act here prevents an error about state updates inside tests
  act(async () => {
    render(<ChartTable {...props} />, renderOptions);
  });

test('renders with EmptyState if no data present', async () => {
  await renderChartTable(mockedProps);
  expect(screen.getAllByRole('tab')).toHaveLength(3);
  expect(
    screen.getByText(/other charts will appear here/i),
  ).toBeInTheDocument();
});

test('fetches chart favorites and renders chart cards', async () => {
  await renderChartTable(mockedProps);
  userEvent.click(screen.getByText(/favorite/i));
  await waitFor(() => {
    expect(fetchMock.calls(chartFavoriteStatusEndpoint)).toHaveLength(1);
    expect(screen.getAllByText(/cool chart/i)).toHaveLength(3);
  });
});

test('renders other tab by default', async () => {
  await renderChartTable(otherTabProps);
  expect(screen.getAllByText(/cool chart/i)).toHaveLength(3);
});

test('renders mine tab on click', async () => {
  await renderChartTable(mineTabProps);
  userEvent.click(screen.getByText(/mine/i));
  await waitFor(() => {
    expect(screen.getAllByText(/cool chart/i)).toHaveLength(3);
  });
});