Na}{

File Content: `PluginListItem.test.tsx`

import { render, screen } from '@testing-library/react';
import React from 'react';

import { PluginErrorCode, PluginSignatureStatus, PluginType } from '@grafana/data';

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

import { PluginListItem } from './PluginListItem';

/**
 * The whole Icon component needs to be mock
 * currently is using react-inlinesvg that does not render the icon svg in the test.
 *
 * There is solution to mock the library on __mocks__
 * https://github.com/gilbarbara/react-inlinesvg/issues/145
 * But unfortunately that causes conflict with DashboardSearch.test.tsx
 */

jest.mock('@grafana/ui', () => {
  const IconMock = ({ title }: { title: string }) => {
    return (
      <svg>
        <title> {title} </title>
      </svg>
    );
  };
  IconMock.displayName = 'Icon';
  return Object.assign({}, jest.requireActual('@grafana/ui'), { Icon: IconMock });
});

describe('PluginListItem', () => {
  afterEach(() => {
    jest.clearAllMocks();
  });

  const plugin: CatalogPlugin = {
    description: 'The test plugin',
    downloads: 5,
    id: 'test-plugin',
    info: {
      logos: {
        small: 'https://grafana.com/api/plugins/test-plugin/versions/0.0.10/logos/small',
        large: 'https://grafana.com/api/plugins/test-plugin/versions/0.0.10/logos/large',
      },
      keywords: ['test', 'plugin'],
    },
    name: 'Testing Plugin',
    orgName: 'Test',
    popularity: 0,
    signature: PluginSignatureStatus.valid,
    publishedAt: '2020-09-01',
    updatedAt: '2021-06-28',
    hasUpdate: false,
    isInstalled: false,
    isCore: false,
    isDev: false,
    isEnterprise: false,
    isDisabled: false,
    isDeprecated: false,
    isPublished: true,
  };

  /** As Grid */
  it('renders a card with link, image, name, orgName and badges', () => {
    render(<PluginListItem plugin={plugin} pathName="/plugins" />);

    expect(screen.getByRole('link')).toHaveAttribute('href', '/plugins/test-plugin');

    const logo = screen.getByRole('img');
    expect(logo).toHaveAttribute('src', plugin.info.logos.small);

    expect(screen.getByRole('heading', { name: /testing plugin/i })).toBeVisible();
    expect(screen.getByText(`By ${plugin.orgName}`)).toBeVisible();
    expect(screen.getByText(/signed/i)).toBeVisible();
    expect(screen.queryByLabelText(/icon/i)).not.toBeInTheDocument();
  });

  it('renders a datasource plugin with correct icon', () => {
    const datasourcePlugin = { ...plugin, type: PluginType.datasource };
    render(<PluginListItem plugin={datasourcePlugin} pathName="" />);

    expect(screen.getByTitle(/datasource plugin/i)).toBeInTheDocument();
  });

  it('renders a panel plugin with correct icon', () => {
    const panelPlugin = { ...plugin, type: PluginType.panel };
    render(<PluginListItem plugin={panelPlugin} pathName="" />);

    expect(screen.getByTitle(/panel plugin/i)).toBeInTheDocument();
  });

  it('renders an app plugin with correct icon', () => {
    const appPlugin = { ...plugin, type: PluginType.app };
    render(<PluginListItem plugin={appPlugin} pathName="" />);

    expect(screen.getByTitle(/app plugin/i)).toBeInTheDocument();
  });

  it('renders a disabled plugin with a badge to indicate its error', () => {
    const pluginWithError = { ...plugin, isDisabled: true, error: PluginErrorCode.modifiedSignature };
    render(<PluginListItem plugin={pluginWithError} pathName="" />);

    expect(screen.getByText(/disabled/i)).toBeVisible();
  });

  /** As List */
  it('renders a row with link, image, name, orgName and badges', () => {
    render(<PluginListItem plugin={plugin} pathName="/plugins" displayMode={PluginListDisplayMode.List} />);

    expect(screen.getByRole('link')).toHaveAttribute('href', '/plugins/test-plugin');

    const logo = screen.getByRole('img');
    expect(logo).toHaveAttribute('src', plugin.info.logos.small);

    expect(screen.getByRole('heading', { name: /testing plugin/i })).toBeVisible();
    expect(screen.getByText(`By ${plugin.orgName}`)).toBeVisible();
    expect(screen.getByText(/signed/i)).toBeVisible();
    expect(screen.queryByLabelText(/icon/i)).not.toBeInTheDocument();
  });

  it('renders a datasource plugin with correct icon', () => {
    const datasourcePlugin = { ...plugin, type: PluginType.datasource };
    render(<PluginListItem plugin={datasourcePlugin} pathName="" displayMode={PluginListDisplayMode.List} />);

    expect(screen.getByTitle(/datasource plugin/i)).toBeInTheDocument();
  });

  it('renders a panel plugin with correct icon', () => {
    const panelPlugin = { ...plugin, type: PluginType.panel };
    render(<PluginListItem plugin={panelPlugin} pathName="" displayMode={PluginListDisplayMode.List} />);

    expect(screen.getByTitle(/panel plugin/i)).toBeInTheDocument();
  });

  it('renders an app plugin with correct icon', () => {
    const appPlugin = { ...plugin, type: PluginType.app };
    render(<PluginListItem plugin={appPlugin} pathName="" displayMode={PluginListDisplayMode.List} />);

    expect(screen.getByTitle(/app plugin/i)).toBeInTheDocument();
  });

  it('renders a disabled plugin with a badge to indicate its error', () => {
    const pluginWithError = { ...plugin, isDisabled: true, error: PluginErrorCode.modifiedSignature };
    render(<PluginListItem plugin={pluginWithError} pathName="" displayMode={PluginListDisplayMode.List} />);

    expect(screen.getByText(/disabled/i)).toBeVisible();
  });
});

Name	Size	Permission
Badges	---	0755
GetStartedWithPlugin	---	0755
InstallControls	---	0755
AppConfigWrapper.tsx	3864 bytes	0644
HorizontalGroup.tsx	833 bytes	0644
Loader.tsx	297 bytes	0644
PluginActions.tsx	2818 bytes	0644
PluginDashboards.tsx	2820 bytes	0644
PluginDetailsBody.tsx	4721 bytes	0644
PluginDetailsDeprecatedWarning.tsx	1273 bytes	0644
PluginDetailsDisabledError.tsx	2802 bytes	0644
PluginDetailsHeaderDependencies.tsx	1823 bytes	0644
PluginDetailsHeaderSignature.tsx	1384 bytes	0644
PluginDetailsPage.tsx	4489 bytes	0644
PluginDetailsSignature.tsx	2077 bytes	0644
PluginList.test.tsx	2394 bytes	0644
PluginList.tsx	1087 bytes	0644
PluginListItem.test.tsx	5436 bytes	0644
PluginListItem.tsx	4181 bytes	0644
PluginListItemBadges.test.tsx	3304 bytes	0644
PluginListItemBadges.tsx	1539 bytes	0644
PluginLogo.tsx	329 bytes	0644
PluginSignatureDetailsBadge.tsx	2081 bytes	0644
PluginSubtitle.tsx	2203 bytes	0644
PluginUsage.tsx	2355 bytes	0644
SearchField.tsx	1268 bytes	0644
VersionList.tsx	2211 bytes	0644

File Content: PluginListItem.test.tsx

File Content: `PluginListItem.test.tsx`