{"size": 1900, "ext": "js", "max_stars_repo_path": "src/components/test/Todo.test.js", "max_stars_repo_name": "olgunyldz/react-boilerplate", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/test/Todo.test.js", "max_issues_repo_name": "olgunyldz/react-boilerplate", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/test/Todo.test.js", "max_forks_repo_name": "olgunyldz/react-boilerplate", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.1428571429, "max_line_length": 81, "alphanum_fraction": 0.6605263158}
import { screen, render, cleanup } from '@testing-library/react';
import renderer from 'react-test-renderer';
import Todo from '../Todo';

afterEach(() => {
  cleanup();
});

test('should render Todo Component color is green if completed is false', () => {
  const todo = {
    id: 1,
    description: 'React Öğren',
    completed: false,
  };
  render(<Todo todo={todo} />);
  const element = screen.getByTestId('todo-item-1');
  expect(element).toBeInTheDocument();
  expect(element).toHaveTextContent(todo.description);

  expect(element.firstChild).toHaveStyle({ color: 'green' });
});

test('should render Todo Component color is red if completed is true', () => {
  const todo = {
    id: 1,
    description: 'React Öğren',
    completed: true,
  };
  render(<Todo todo={todo} />);
  const element = screen.getByTestId('todo-item-1');
  expect(element).toBeInTheDocument();
  expect(element).toHaveTextContent(todo.description);

  expect(element.firstChild).toHaveStyle({ color: 'red' });
});

test('snapshot should be same if completed true', () => {
  const todo = {
    id: 1,
    description: 'React Öğren',
    completed: true,
  };
  const todoJSON = renderer.create(<Todo todo={todo} />).toJSON();
  expect(todoJSON).toMatchSnapshot();
  console.log(todoJSON);
});

test('snapshot should be same if completed false', () => {
  const todo = {
    id: 2,
    description: 'React Öğren - Advanced',
    completed: false,
  };
  const todoJSON = renderer.create(<Todo todo={todo} />).toJSON();
  expect(todoJSON).toMatchSnapshot();
  console.log(todoJSON);
});

test('should render Todo Component as native', () => {
  const todo = {
    id: 1,
    description: 'React Öğren',
    completed: false,
  };
  render(<Todo todo={todo} />);
  const element = document.getElementById('todo-id-1');
  expect(element).toBeInTheDocument();
  expect(element).toHaveTextContent(todo.description);
});
