grafana/public/app/features/plugins/admin/components/PluginDetailsPage.test.tsx

import { render, screen } from 'test/test-utils';

import { PluginSignatureStatus, PluginSignatureType, PluginType } from '@grafana/data';
import { config } from '@grafana/runtime';

import { CatalogPlugin } from '../types';

import { PluginDetailsPage } from './PluginDetailsPage';

const plugin: CatalogPlugin = {
  description: 'Test plugin description',
  downloads: 1000,
  hasUpdate: false,
  id: 'test-plugin',
  info: {
    logos: {
      small: 'small-logo-url',
      large: 'large-logo-url',
    },
    keywords: ['test', 'plugin'],
  },
  isDev: false,
  isCore: false,
  isEnterprise: false,
  isInstalled: true,
  isDisabled: false,
  isDeprecated: false,
  isManaged: false,
  isPreinstalled: { found: false, withVersion: false },
  isPublished: true,
  name: 'Test Plugin',
  orgName: 'Test Org',
  signature: PluginSignatureStatus.valid,
  signatureType: PluginSignatureType.grafana,
  signatureOrg: 'Test Signature Org',
  popularity: 4,
  publishedAt: '2023-01-01',
  type: PluginType.app,
  updatedAt: '2023-12-01',
  installedVersion: '1.0.0',
  details: {
    readme: 'Test readme',
    versions: [
      {
        version: '1.0.0',
        createdAt: '2023-01-01',
        isCompatible: true,
        grafanaDependency: '>=9.0.0',
        angularDetected: false,
      },
    ],
    links: [
      {
        name: 'Website',
        url: 'https://test-plugin.com',
      },
    ],
    grafanaDependency: '>=9.0.0',
    statusContext: 'stable',
    changelog: 'Test changelog',
  },
  angularDetected: false,
  isFullyInstalled: true,
  accessControl: {},
};

jest.mock('../state/hooks', () => ({
  useGetSingle: jest.fn(),
  useFetchStatus: jest.fn().mockReturnValue({ isLoading: false }),
  useFetchDetailsStatus: () => ({ isLoading: false }),
  useIsRemotePluginsAvailable: () => false,
  useInstallStatus: () => ({ error: null, isInstalling: false }),
  useUninstallStatus: () => ({ error: null, isUninstalling: false }),
  useInstall: () => jest.fn(),
  useUninstall: () => jest.fn(),
  useUnsetInstall: () => jest.fn(),
  useFetchDetailsLazy: () => jest.fn(),
}));

jest.mock('../hooks/usePluginConfig', () => ({
  usePluginConfig: jest.fn().mockReturnValue({ value: {}, loading: false }),
}));

const mockUseGetSingle = jest.requireMock('../state/hooks').useGetSingle;
const mockUsePluginConfig = jest.requireMock('../hooks/usePluginConfig').usePluginConfig;

describe('PluginDetailsPage', () => {
  beforeEach(() => {
    jest.spyOn(console, 'error').mockImplementation();
    mockUseGetSingle.mockReturnValue(plugin);
  });

  afterEach(() => {
    jest.clearAllMocks();
  });

  it('should show loader when fetching plugin details', () => {
    jest.requireMock('../state/hooks').useFetchStatus.mockReturnValueOnce({ isLoading: true });
    render(<PluginDetailsPage pluginId="test-plugin" />);
    expect(screen.getByText('Loading...')).toBeInTheDocument();
  });

  it('should show not found component when plugin doesnt exist', () => {
    mockUseGetSingle.mockReturnValue(undefined);
    render(<PluginDetailsPage pluginId="not-exist" />);
    expect(screen.getByText('Plugin not found')).toBeInTheDocument();
  });

  it('should show right panel when screen is wide', () => {
    window.matchMedia = jest.fn().mockImplementation((query) => ({
      matches: query !== '(max-width: 600px)',
      media: query,
      onchange: null,
      addEventListener: jest.fn(),
      removeEventListener: jest.fn(),
      dispatchEvent: jest.fn(),
    }));

    render(<PluginDetailsPage pluginId="test-plugin" />);
    expect(screen.getByTestId('plugin-details-panel')).toBeInTheDocument();
  });

  it('should show "Plugin details" tab when screen is narrow', () => {
    window.matchMedia = jest.fn().mockImplementation((query) => ({
      matches: query === '(max-width: 600px)',
      media: query,
      onchange: null,
      addEventListener: jest.fn(),
      removeEventListener: jest.fn(),
      dispatchEvent: jest.fn(),
    }));

    render(<PluginDetailsPage pluginId="test-plugin" />);
    expect(screen.getByRole('tab', { name: 'Plugin details' })).toBeInTheDocument();
  });

  it('should show "Datasource connections" tab when plugin is type of datasource', () => {
    config.featureToggles.datasourceConnectionsTab = true;
    mockUseGetSingle.mockReturnValue({ ...plugin, type: PluginType.datasource });
    mockUsePluginConfig.mockReturnValue({ value: {}, loading: false });
    render(<PluginDetailsPage pluginId={plugin.id} />);
    expect(screen.getByRole('tab', { name: 'Data source connections' })).toBeVisible();
  });

  it('should not show version and changelog tabs when plugin is core', () => {
    mockUseGetSingle.mockReturnValue({ ...plugin, isCore: true });
    render(<PluginDetailsPage pluginId={plugin.id} />);
    expect(screen.queryByRole('tab', { name: 'Version history' })).not.toBeInTheDocument();
    expect(screen.queryByRole('tab', { name: 'Changelog' })).not.toBeInTheDocument();
  });

  it('should not show last version in plugin details panel when plugin is core', () => {
    window.matchMedia = jest.fn().mockImplementation((query) => ({
      matches: query !== '(max-width: 600px)',
      media: query,
      onchange: null,
      addEventListener: jest.fn(),
      removeEventListener: jest.fn(),
      dispatchEvent: jest.fn(),
    }));

    mockUseGetSingle.mockReturnValue({ ...plugin, isCore: true, latestVersion: '1.2.0' });

    render(<PluginDetailsPage pluginId={plugin.id} />);
    expect(screen.queryByText('Latest Version:')).not.toBeInTheDocument();
  });
});