import React from 'react'
import renderer from 'react-test-renderer'
import { MockedProvider } from '@apollo/react-testing'

import SignupForm from '../signup'
import { USER_SIGNUP } from '../graphql'

const { act } = renderer

it('should render without error', () => {
  renderer.create(
    <MockedProvider mocks={[]} addTypename={false}>
      <SignupForm />
    </MockedProvider>
  )
})

it('should render loading state initially', () => {
  const mocks = [
    {
      request: {
        query: USER_SIGNUP,
        variables: {
          email: 'test@email.com',
          password: '1234',
          name: 'Test Person'
        }
      },
      result: {
        data: {
          user: {
            id: '1',
            email: 'test@email.com',
            name: 'Test Person',
            password: '$2a$10$wCQ1GP/U4BCLzKVtXYKxAeHOQto/nDRw2A5kDxdtQlNEglMWXFmh6',
            createdAt: '2019-12-13T12:00:00.000Z',
            comments: [],
            ratings: [],
            permissions: [],
            interests: []
          }
        }
      }
    }
  ]

  const component = renderer.create(
    <MockedProvider mocks={mocks} addTypename={false}>
      <SignupForm />
    </MockedProvider>
  )

  const form = component.root.findByType('form')
  act(() => {
    form.props.onSubmit()
  })

  const submit = component.root.findByType('button').toJSON
  console.log(submit)
})