[Component Tests] Twitdata - sidebar

[tomsmith8]

Task

Write tests for this file src/components/App/SideBar/TwitData/index.tsx

Boiler plate example:

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import moment from 'moment';
import TwitData from './TwitData'; // Adjust the import path as necessary
import * as DataStore from '~/stores/useDataStore';

jest.mock('~/stores/useDataStore');

const mockSelectedNode = {
  date: moment().unix(),
  boost: 10,
  text: 'Example tweet text',
  name: 'John Doe',
  verified: true,
  profile_picture: 'http://example.com/image.png',
  twitter_handle: 'johndoe',
  ref_id: '1',
  tweet_id: '123456789'
};

describe('TwitData Component', () => {
  beforeEach(() => {
    DataStore.useSelectedNode.mockReturnValue(mockSelectedNode);
  });

  it('renders correctly with selectedNode data', () => {
    const { getByText, getByAltText } = render(<TwitData />);
    expect(getByText('John Doe')).toBeInTheDocument();
    expect(getByAltText('verified')).toBeInTheDocument();
    expect(getByText('@johndoe')).toBeInTheDocument();
    expect(getByText('Example tweet text')).toBeInTheDocument();
    expect(getByText(moment.unix(mockSelectedNode.date).format('ll'))).toBeInTheDocument();
  });

  it('does not render without selectedNode', () => {
    DataStore.useSelectedNode.mockReturnValueOnce(null);
    const { container } = render(<TwitData />);
    expect(container).toBeEmptyDOMElement();
  });

  it('shows verification badge for verified accounts', () => {
    const { getByAltText } = render(<TwitData />);
    expect(getByAltText('verified')).toBeInTheDocument();
  });

  it('displays the Twitter handle if present', () => {
    const { getByText } = render(<TwitData />);
    expect(getByText('@johndoe')).toBeInTheDocument();
  });

  it('boost amount is shown and can be updated', () => {
    const { getByText } = render(<TwitData />);
    // Assuming Booster updates the boost amount upon some interaction
    // This might require mocking Booster or simulating events that lead to boost amount change
    expect(getByText(mockSelectedNode.boost.toString())).toBeInTheDocument();
  });

  it('external link to the tweet is correctly constructed', () => {
    const { getByText } = render(<TwitData />);
    const viewTweetButton = getByText('View Tweet');
    expect(viewTweetButton.closest('a')).toHaveAttribute('href', `https://twitter.com/Interior/status/${mockSelectedNode.tweet_id}?open=system`);
  });
});

Acceptance Criteria

• [ ] Component renders correctly with selectedNode data.
• [ ] Component correctly handles absence of selectedNode.
• [ ] Verification badge is shown for verified accounts.
• [ ] Twitter handle is displayed if present.
• [ ] Tweet text and tweet date are correctly formatted and displayed.
• [ ] Boost amount is shown and updated correctly.
• [ ] External link to the tweet is correctly constructed.

[Fog3211]

@tomsmith8 can i take this?