Repository: thenewboston-developers/Website
File: src/components/ContributorTasks/ContributorTasks.test.tsx (TypeScript)

Code before:
        repository: 'Kotlin-SDK',
        title: 'Sofware engineer',
      },
      {
        amount_paid: '2800',
        completed_by: 'contributor 2',
        completed_date: new Date(Date.now()),
        issue_id: '333',
        pr_id: '444',
        repository: 'Website',
        title: 'Front End Developer',
      },
    ],
  };

  it('renders without crashing', () => {
    render(<ContributorTasks {...props} />);

    expect(screen.getByTestId('ContributorTasks')).toBeTruthy();
  });

  it('renders with default className', () => {
    render(<ContributorTasks {...props} />);
    const taskComp = screen.getByTestId('ContributorTasks');

    expect(taskComp).toHaveClass('ContributorTasks');
  });

  it('renders with passed in className', () => {
    render(<ContributorTasks {...props} />);
    const taskComp = screen.getByTestId('ContributorTasks');

    expect(taskComp).toHaveClass('test');
  });

  it('renders all tasks', () => {
    render(<ContributorTasks {...props} />);
    const tasks = screen.getAllByTestId('ContributorTasks--row');

    expect(tasks.length).toBe(props.tasks.length);
  });

  it('renders rows with title', () => {
    render(<ContributorTasks {...props} />);
    const tasks = screen.getAllByTestId('ContributorTasks__task-title');

    const validTitle = tasks.every((task, i) => task.textContent === props.tasks[i].title);

    expect(validTitle).toBeTruthy();
  });


Review comment (suggestion):
can you add more `expect`s here? test for the other DOM elements that you gave `data-testid` to (if they have a default className)

Code after:
    {
      amount_paid: '2800',
      completed_by: 'contributor 2',
      completed_date: new Date('2021/02/24'),
      issue_id: '333',
      pr_id: '444',
      repository: 'Website',
      title: 'Front End Developer',
    },
  ],
};

const testIdTask = 'ContributorTasks';
const testIdRow = 'ContributorTasks__row';
const testIdTitle = 'ContributorTasks__task-title';
const testIdLink = 'A';
const testIdRepo = 'ContributorTasks__repository';
const testIdDate = 'ContributorTasks__date-completed';
const testIdAmount = 'ContributorTasks__amount';

describe('ContributorTasks', () => {
  it('renders without crashing', () => {
    render(<ContributorTasks {...props} />);

    expect(screen.getByTestId(testIdTask)).toBeTruthy();
  });

  it('renders all tasks', () => {
    render(<ContributorTasks {...props} />);
    const tasks = screen.getAllByTestId(testIdRow);

    expect(tasks.length).toBe(2);
  });

  it('renders with default className', () => {
    render(<ContributorTasks {...props} />);
    const taskComp = screen.getByTestId(testIdTask);
    const taskTitle = screen.getAllByTestId(testIdTitle);
    const issueLink = screen.getAllByTestId(testIdLink);
    const repo = screen.getAllByTestId(testIdRepo);
    const dateCompleted = screen.getAllByTestId(testIdDate);
    const amount = screen.getAllByTestId(testIdAmount);

    expect(taskComp).toHaveClass(testIdTask);

    expect(taskTitle[0]).toHaveClass(testIdTitle);
    expect(taskTitle[1]).toHaveClass(testIdTitle);

    expect(issueLink[0]).toHaveClass('ContributorTasks__issue-link');
    expect(issueLink[1]).toHaveClass('ContributorTasks__issue-link');