superset/superset-frontend/src/dashboard/components/RefreshIntervalModal.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 { isValidElement } from 'react';
import { render, screen } from 'spec/helpers/testing-library';
import userEvent from '@testing-library/user-event';
import fetchMock from 'fetch-mock';

import RefreshIntervalModal from 'src/dashboard/components/RefreshIntervalModal';
import { HeaderActionsDropdown } from 'src/dashboard/components/Header/HeaderActionsDropdown';

const createProps = () => ({
  addSuccessToast: jest.fn(),
  addDangerToast: jest.fn(),
  customCss:
    '.header-with-actions .right-button-panel .ant-dropdown-trigger{margin-left: 100px;}',
  dashboardId: 1,
  dashboardInfo: {
    id: 1,
    dash_edit_perm: true,
    dash_save_perm: true,
    userId: '1',
    metadata: {},
    common: {
      conf: {
        DASHBOARD_AUTO_REFRESH_INTERVALS: [
          [0, "Don't refresh"],
          [10, '10 seconds'],
          [30, '30 seconds'],
          [60, '1 minute'],
          [300, '5 minutes'],
          [1800, '30 minutes'],
          [3600, '1 hour'],
          [21600, '6 hours'],
          [43200, '12 hours'],
          [86400, '24 hours'],
        ],
      },
    },
  },
  dashboardTitle: 'Title',
  editMode: false,
  expandedSlices: {},
  forceRefreshAllCharts: jest.fn(),
  hasUnsavedChanges: false,
  isLoading: false,
  layout: {},
  dataMask: {},
  onChange: jest.fn(),
  onSave: jest.fn(),
  refreshFrequency: 0,
  setRefreshFrequency: jest.fn(),
  shouldPersistRefreshFrequency: false,
  showPropertiesModal: jest.fn(),
  startPeriodicRender: jest.fn(),
  updateCss: jest.fn(),
  userCanEdit: false,
  userCanSave: false,
  userCanShare: false,
  lastModifiedTime: 0,
  isDropdownVisible: true,
});

const editModeOnProps = {
  ...createProps(),
  editMode: true,
};

const setup = (overrides?: any) => (
  <div className="dashboard-header">
    <HeaderActionsDropdown {...editModeOnProps} {...overrides} />
  </div>
);

fetchMock.get('glob:*/csstemplateasyncmodelview/api/read', {});

const openRefreshIntervalModal = async () => {
  const autoRefreshOption = screen.getByText('Set auto-refresh interval');
  userEvent.click(autoRefreshOption);
};

const displayOptions = async () => {
  // Click default refresh interval option to display other options
  userEvent.click(screen.getByText(/don't refresh/i));
};

const defaultRefreshIntervalModalProps = {
  triggerNode: <i className="fa fa-edit" />,
  refreshFrequency: 0,
  onChange: jest.fn(),
  editMode: true,
  addSuccessToast: jest.fn(),
  refreshIntervalOptions: [],
};

test('is valid', () => {
  expect(
    isValidElement(
      <RefreshIntervalModal {...defaultRefreshIntervalModalProps} />,
    ),
  ).toBe(true);
});

test('renders refresh interval modal', async () => {
  render(setup(editModeOnProps));
  await openRefreshIntervalModal();

  // Assert that modal exists by checking for the modal title
  expect(screen.getByText('Refresh interval')).toBeVisible();
});

test('renders refresh interval options', async () => {
  render(setup(editModeOnProps));
  await openRefreshIntervalModal();
  await displayOptions();

  // Assert that both "Don't refresh" instances exist
  // - There will be two at this point, the default option and the dropdown option
  const dontRefreshInstances = screen.getAllByText(/don't refresh/i);
  expect(dontRefreshInstances).toHaveLength(2);
  dontRefreshInstances.forEach(option => {
    expect(option).toBeInTheDocument();
  });

  // Assert that all the other options exist
  const options = [
    screen.getByText(/10 seconds/i),
    screen.getByText(/30 seconds/i),
    screen.getByText(/1 minute/i),
    screen.getByText(/5 minutes/i),
    screen.getByText(/30 minutes/i),
    screen.getByText(/1 hour/i),
    screen.getByText(/6 hours/i),
    screen.getByText(/12 hours/i),
    screen.getByText(/24 hours/i),
  ];
  options.forEach(option => {
    expect(option).toBeInTheDocument();
  });
});

test('should change selected value', async () => {
  render(setup(editModeOnProps));
  await openRefreshIntervalModal();

  // Initial selected value should be "Don't refresh"
  const selectedValue = screen.getByText(/don't refresh/i);
  expect(selectedValue.title).toMatch(/don't refresh/i);

  // Display options and select "10 seconds"
  await displayOptions();
  userEvent.click(screen.getByText(/10 seconds/i));

  // Selected value should now be "10 seconds"
  expect(selectedValue.title).toMatch(/10 seconds/i);
  expect(selectedValue.title).not.toMatch(/don't refresh/i);
});

test('should change selected value to custom value', async () => {
  render(setup(editModeOnProps));
  await openRefreshIntervalModal();

  // Initial selected value should be "Don't refresh"
  const selectedValue = screen.getByText(/don't refresh/i);
  expect(selectedValue.title).toMatch(/don't refresh/i);

  // Display options and select "Custom interval"
  await displayOptions();
  userEvent.click(screen.getByText(/Custom interval/i));

  // Selected value should now be "Custom interval"
  expect(selectedValue.title).toMatch(/Custom interval/i);
  expect(selectedValue.title).not.toMatch(/don't refresh/i);
});

test('should save a newly-selected value', async () => {
  render(setup(editModeOnProps));
  await openRefreshIntervalModal();
  await displayOptions();

  // Select a new interval and click save
  userEvent.click(screen.getByText(/10 seconds/i));
  userEvent.click(screen.getByRole('button', { name: /save/i }));

  expect(editModeOnProps.setRefreshFrequency).toHaveBeenCalled();
  expect(editModeOnProps.setRefreshFrequency).toHaveBeenCalledWith(
    10,
    editModeOnProps.editMode,
  );
  expect(editModeOnProps.addSuccessToast).toHaveBeenCalled();
});

test('should show warning message', async () => {
  const warningProps = {
    ...editModeOnProps,
    refreshLimit: 3600,
    refreshWarning: 'Show warning',
  };

  const { getByRole, queryByRole } = render(setup(warningProps));
  await openRefreshIntervalModal();
  await displayOptions();

  userEvent.click(screen.getByText(/30 seconds/i));
  expect(getByRole('alert')).toBeInTheDocument();
  userEvent.click(screen.getByText(/6 hours/i));
  expect(queryByRole('alert')).not.toBeInTheDocument();
});