bigbuffet-rw/app/soapbox/features/ui/components/__tests__/who-to-follow-panel.test.tsx

import { Map as ImmutableMap, fromJS } from 'immutable';
import React from 'react';

import { render, screen } from '../../../../jest/test-helpers';
import WhoToFollowPanel from '../who-to-follow-panel';

describe('<WhoToFollow />', () => {
  it('renders suggested accounts', () => {
    const store = {
      accounts: ImmutableMap({
        '1': ImmutableMap({
          id: '1',
          acct: 'username',
          display_name_html: 'My name',
          avatar: 'test.jpg',
        }),
      }),
      suggestions: ImmutableMap({
        items: fromJS([{
          source: 'staff',
          account: '1',
        }]),
      }),
    };

    render(<WhoToFollowPanel limit={1} />, null, store);
    expect(screen.getByTestId('account')).toHaveTextContent(/my name/i);
  });

  it('renders multiple accounts', () => {
    const store = {
      accounts: ImmutableMap({
        '1': ImmutableMap({
          id: '1',
          acct: 'username',
          display_name_html: 'My name',
          avatar: 'test.jpg',
        }),
        '2': ImmutableMap({
          id: '1',
          acct: 'username2',
          display_name_html: 'My other name',
          avatar: 'test.jpg',
        }),
      }),
      suggestions: ImmutableMap({
        items: fromJS([
          {
            source: 'staff',
            account: '1',
          },
          {
            source: 'staff',
            account: '2',
          },
        ]),
      }),
    };

    render(<WhoToFollowPanel limit={3} />, null, store);
    expect(screen.queryAllByTestId('account')).toHaveLength(2);
  });

  it('respects the limit prop', () => {
    const store = {
      accounts: ImmutableMap({
        '1': ImmutableMap({
          id: '1',
          acct: 'username',
          display_name_html: 'My name',
          avatar: 'test.jpg',
        }),
        '2': ImmutableMap({
          id: '1',
          acct: 'username2',
          display_name_html: 'My other name',
          avatar: 'test.jpg',
        }),
      }),
      suggestions: ImmutableMap({
        items: fromJS([
          {
            source: 'staff',
            account: '1',
          },
          {
            source: 'staff',
            account: '2',
          },
        ]),
      }),
    };

    render(<WhoToFollowPanel limit={1} />, null, store);
    expect(screen.queryAllByTestId('account')).toHaveLength(1);
  });

  it('renders empty', () => {
    const store = {
      accounts: ImmutableMap({
        '1': ImmutableMap({
          id: '1',
          acct: 'username',
          display_name_html: 'My name',
          avatar: 'test.jpg',
        }),
        '2': ImmutableMap({
          id: '1',
          acct: 'username2',
          display_name_html: 'My other name',
          avatar: 'test.jpg',
        }),
      }),
      suggestions: ImmutableMap({
        items: fromJS([]),
      }),
    };

    render(<WhoToFollowPanel limit={1} />, null, store);
    expect(screen.queryAllByTestId('account')).toHaveLength(0);
  });
});