superset-frontend/src/pages/ChartCreation/ChartCreation.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,
  userEvent,
  waitFor,
} from 'spec/helpers/testing-library';
import fetchMock from 'fetch-mock';
import { createMemoryHistory } from 'history';
import { ChartCreation } from 'src/pages/ChartCreation';
import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
import { supersetTheme } from '@superset-ui/core';

jest.mock('src/components/DynamicPlugins', () => ({
  usePluginContext: () => ({
    mountedPluginMetadata: { table: { name: 'Table', tags: [] } },
  }),
}));

const mockDatasourceResponse = {
  result: [
    {
      id: 'table_1',
      table_name: 'table',
      datasource_type: 'table',
      database: { database_name: 'test_db' },
      schema: 'public',
    },
  ],
  count: 1,
};

fetchMock.get(/\/api\/v1\/dataset\/\?q=.*/, {
  body: mockDatasourceResponse,
  status: 200,
});

const mockUser: UserWithPermissionsAndRoles = {
  createdOn: '2021-04-27T18:12:38.952304',
  email: 'admin',
  firstName: 'admin',
  isActive: true,
  lastName: 'admin',
  permissions: {},
  roles: { Admin: Array(173) },
  userId: 1,
  username: 'admin',
  isAnonymous: false,
};

const mockUserWithDatasetWrite: UserWithPermissionsAndRoles = {
  createdOn: '2021-04-27T18:12:38.952304',
  email: 'admin',
  firstName: 'admin',
  isActive: true,
  lastName: 'admin',
  permissions: {},
  roles: { Admin: [['can_write', 'Dataset']] },
  userId: 1,
  username: 'admin',
  isAnonymous: false,
};
const history = createMemoryHistory();

history.push = jest.fn();

const routeProps = {
  history,
  location: {} as any,
  match: {} as any,
};

async function renderComponent(user = mockUser) {
  const rendered = render(
    <ChartCreation
      user={user}
      addSuccessToast={() => null}
      theme={supersetTheme}
      {...routeProps}
    />,
    {
      useRedux: true,
      useRouter: true,
    },
  );
  await waitFor(() => new Promise(resolve => setTimeout(resolve, 0)));
  return rendered;
}

test('renders a select and a VizTypeGallery', async () => {
  await renderComponent();
  expect(screen.getByRole('combobox', { name: 'Dataset' })).toBeInTheDocument();
  expect(screen.getByText(/choose chart type/i)).toBeInTheDocument();
});

test('renders dataset help text when user lacks dataset write permissions', async () => {
  await renderComponent();
  expect(screen.queryByText('Add a dataset')).not.toBeInTheDocument();
  expect(screen.getByText('view instructions')).toBeInTheDocument();
});

test('renders dataset help text when user has dataset write permissions', async () => {
  await renderComponent(mockUserWithDatasetWrite);
  expect(screen.getByText('Add a dataset')).toBeInTheDocument();
  expect(screen.queryByText('view instructions')).toBeInTheDocument();
});

test('renders create chart button', async () => {
  await renderComponent();
  expect(
    screen.getByRole('button', { name: 'Create new chart' }),
  ).toBeInTheDocument();
});

test('renders a disabled button if no datasource is selected', async () => {
  await renderComponent();
  expect(
    screen.getByRole('button', { name: 'Create new chart' }),
  ).toBeDisabled();
});

test('renders an enabled button if datasource and viz type are selected', async () => {
  await renderComponent();

  const datasourceSelect = screen.getByRole('combobox', { name: 'Dataset' });
  userEvent.click(datasourceSelect);
  userEvent.click(await screen.findByText(/test_db/i));

  userEvent.click(
    screen.getByRole('tab', {
      name: /All charts/i,
    }),
  );
  userEvent.click(await screen.findByText('Table'));

  expect(
    screen.getByRole('button', { name: 'Create new chart' }),
  ).toBeEnabled();
});

test('double-click viz type does nothing if no datasource is selected', async () => {
  await renderComponent();

  userEvent.click(
    screen.getByRole('tab', {
      name: /All charts/i,
    }),
  );
  userEvent.dblClick(await screen.findByText('Table'));

  expect(
    screen.getByRole('button', { name: 'Create new chart' }),
  ).toBeDisabled();
  expect(history.push).not.toHaveBeenCalled();
});

test('double-click viz type submits with formatted URL if datasource is selected', async () => {
  await renderComponent();

  const datasourceSelect = screen.getByRole('combobox', { name: 'Dataset' });

  userEvent.click(datasourceSelect);
  userEvent.click(await screen.findByText(/test_db/i));

  userEvent.click(
    screen.getByRole('tab', {
      name: /All charts/i,
    }),
  );
  userEvent.dblClick(await screen.findByText('Table'));

  expect(
    screen.getByRole('button', { name: 'Create new chart' }),
  ).toBeEnabled();
  const formattedUrl = '/explore/?viz_type=table&datasource=table_1__table';
  expect(history.push).toHaveBeenCalledWith(formattedUrl);
});