import { Text } from 'react-native';
import { render } from '@testing-library/react-native';
import React from 'react';

import ListItem from '../ListItem';

describe('ListItem', () => {
  describe('title', () => {
    it('should render correctly', () => {
      const wrapper = render(
        <ListItem
          leftElement={<Text>leftElement</Text>}
          rightElement={<Text>rightElement</Text>}
          subtitle="subtitle"
          subtitleStyle={{ backgroundColor: 'yellow' }}
          testID="testID"
          title="title"
          titleStyle={{ backgroundColor: 'green' }}
          wrapperStyle={{ backgroundColor: 'blue' }}
        />,
      );

      expect(wrapper.toJSON()).toMatchSnapshot();
      expect(wrapper.queryAllByText('leftElement')).toHaveLength(1);
      expect(wrapper.queryAllByText('rightElement')).toHaveLength(1);
      expect(wrapper.queryAllByText('subtitle')).toHaveLength(1);
      expect(wrapper.queryAllByText('title')).toHaveLength(1);
    });
  });

  describe('titleElement', () => {
    it('should render correctly', () => {
      const wrapper = render(
        <ListItem
          leftElement={<Text>leftElement</Text>}
          rightElement={<Text>rightElement</Text>}
          subtitle="subtitle"
          subtitleElement={<Text>subtitleElement</Text>}
          subtitleStyle={{ backgroundColor: 'yellow' }}
          testID="testID"
          title="title"
          titleElement={<Text>titleElement</Text>}
          titleStyle={{ backgroundColor: 'green' }}
          wrapperStyle={{ backgroundColor: 'blue' }}
        />,
      );

      expect(wrapper.toJSON()).toMatchSnapshot();
      expect(wrapper.queryAllByText('leftElement')).toHaveLength(1);
      expect(wrapper.queryAllByText('rightElement')).toHaveLength(1);
      expect(wrapper.queryAllByText('subtitle')).toHaveLength(0);
      expect(wrapper.queryAllByText('subtitleElement')).toHaveLength(1);
      expect(wrapper.queryAllByText('title')).toHaveLength(0);
      expect(wrapper.queryAllByText('titleElement')).toHaveLength(1);
    });
  });
});