import React from 'react';
import { render, cleanup } from '@testing-library/react';
import { TheLandingProvider } from '../../theme';
import BoardCard from '.';
import { BOARD_THUMBNAIL_DEFAULT_URL } from './constants';

describe('BoardCard', () => {
  it('renders with expected data from props', () => {
    const { getByText, getByTestId } = render(
      <TheLandingProvider>
        <BoardCard
          title="Test Board Title"
          username="test_user"
          thumbnailUrl="https://ik.imagekit.io/landing/1647396229384_tl_arcvVeIdfh5Q"
          avatarUrl="https://ik.imagekit.io/landing/1641326434503_tl_7Ji2qrCTe"
        />
      </TheLandingProvider>
    );
    // renders board title & creator username
    getByText('Test Board Title');
    getByText('@test_user');
    // renders board thumbnail with correct image source
    const thumbnailImg = getByTestId('thumbnail-image') as HTMLImageElement;
    expect(thumbnailImg.src).toContain(
      'https://ik.imagekit.io/landing/1647396229384_tl_arcvVeIdfh5Q'
    );
    // renders user avatar with correct image source
    const avatarImg = getByTestId('avatar-wrapper')
      .firstChild as HTMLImageElement;
    expect(avatarImg?.src).toContain(
      'https://ik.imagekit.io/landing/1641326434503_tl_7Ji2qrCTe'
    );
    cleanup();
  });

  it('renders a text avatar & default board thumbnail if not passed via props', () => {
    const { getByText, getByTestId, getByTitle } = render(
      <TheLandingProvider>
        <BoardCard title="Test Board Title" username="test_user" />
      </TheLandingProvider>
    );
    // renders board title & creator username
    getByText('Test Board Title');
    getByText('@test_user');
    // renders default board thumbnail
    const thumbnailImg = getByTestId('thumbnail-image') as HTMLImageElement;
    expect(thumbnailImg.src).toContain(BOARD_THUMBNAIL_DEFAULT_URL);
    // renders a text avatar
    const textAvatar = getByTestId('avatar-wrapper').firstChild;
    expect(textAvatar).toBeTruthy();
    getByTitle('test_user');
    cleanup();
  });
});