import React from 'react';
import { render, wait } from '@testing-library/react';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import axios from 'axios';
import PetitionDetail from './PetitionDetail';

jest.mock('axios');

describe('<PetitionDetail />', () => {
  test('renders PetitionDetail on successful response', async () => {
    const mockData = {
      data: {
        data: {
          id: 1,
          identifier: 'petition-for-Firstname-Lastname',
          title: 'Petition For Firstname Lastname',
          description:
            'Help bring justice to Firstname Lastname by signing this petition',
          outcome: null,
          link: 'https://www.google.com',
          outcome_img_url: 'https://www.google.com',
          banner_img_url: 'https://www.google.com',
          sharable_links: {
            base: 'https://www.google.com',
            facebook: 'https://www.google.com',
            twitter: 'https://www.google.com',
            whatsapp: 'https://www.google.com'
          },
          person: {
            id: 1,
            full_name: 'Firstname Lastname',
            identifier: 'Firstname-Lastname',
            date_of_incident: 'YYYY-MM-DD',
            number_of_children: 1,
            age: 1,
            city: 'City',
            country: 'Country',
            their_story: 'Their Story',
            outcome: null,
            biography: null,
            images: [
              {
                id: 1,
                person_id: 1,
                image_url: 'https://www.google.com'
              }
            ],
            sharable_links: {
              base: 'https://www.google.com',
              facebook: 'https://www.google.com',
              twitter: 'https://www.google.com',
              whatsapp: 'https://www.google.com'
            },
            media: [
              {
                id: 1,
                person_id: 1,
                image_url: 'https://www.google.com'
              }
            ]
          },
          type: { id: 1, type: 'Victims' },
          hash_tags: [
            {
              tag: '#petitionforFirstnameLastname',
              link: 'https://www.google.com'
            }
          ]
        }
      }
    };

    axios.get.mockImplementationOnce(() => Promise.resolve(mockData));
    const history = createMemoryHistory();

    const { getByText, getByLabelText } = render(
      <Router history={history}>
        <PetitionDetail match={{ params: { id: '1' } }} />
      </Router>
    );

    /**
     * BackNavigation already tested
     * ActionDetailsHeader already tested
     * ActionDetailsContent already tested
     */
    expect(getByLabelText('audio-loading'));
    await wait(() => expect(getByText('BACK TO PETITIONS')));
  });

  test('renders PetitionDetail on failed response', async () => {
    axios.get.mockImplementationOnce(() => Promise.reject(new Error('error')));
    const history = createMemoryHistory();

    const { getByText } = render(
      <Router history={history}>
        <PetitionDetail match={{ params: { id: '1' } }} />
      </Router>
    );

    await wait(() => expect(getByText('Oops!!! Something went wrong')));
    await wait(() => expect(getByText('Unable to load petition detail')));
  });
});