import * as React from 'react'
import renderer from 'react-test-renderer'
import { Image } from '../src'

const renderImageWithProps = (props = {}) => {
  const tree = renderer
    .create(
      <Image
        src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Michelangelo_Buonarroti_017.jpg"
        {...props}
      />
    )
    .toJSON()
  expect(tree).toMatchSnapshot()
}

describe('<Image />', () => {
  test('renders without crashing', () => {
    renderImageWithProps()
  })

  test('component accepts default html atrributs', () => {
    renderImageWithProps({
      alt: 'foo bar',
      'data-test': 'foo bar',
      className: 'foo bar'
    })
  })

  test('width and height gets to url', () => {
    renderImageWithProps({
      width: 700,
      height: 200
    })
  })
  test('only height', () => {
    renderImageWithProps({
      height: 200
    })
  })
  test('only width', () => {
    renderImageWithProps({
      width: 700
    })
  })

  test('quality - right input', () => {
    renderImageWithProps({
      quality: 90
    })
  })

  test('quality - input not number', () => {
    renderImageWithProps({
      quality: '90'
    })
  })

  test('quality - input out of scope', () => {
    renderImageWithProps({
      quality: 120
    })
  })

  test('scaleMode - input not string', () => {
    renderImageWithProps({
      scaleMode: 120,
      width: 700,
      height: 200
    })
  })

  test('scaleMode - input fillSouthwest', () => {
    renderImageWithProps({
      scaleMode: 'fillSouthwest',
      width: 700,
      height: 200
    })
  })

  test('progressive - input not boolean', () => {
    renderImageWithProps({ progressive: 'foo' })
  })
  test('progressive', () => {
    renderImageWithProps({ progressive: true })
  })
  test('progressive false', () => {
    renderImageWithProps({ progressive: false })
  })

  test('rotate', () => {
    renderImageWithProps({ rotate: 90 })
  })
  test('rotate - wrong input', () => {
    renderImageWithProps({ rotate: 95 })
  })

  test('flip', () => {
    renderImageWithProps({ flip: 'x' })
  })
  test('flip - wrong input', () => {
    renderImageWithProps({ flip: true })
  })

  test('blur - input not number', () => {
    renderImageWithProps({ blur: true })
  })
  test('blur - input out of scope', () => {
    renderImageWithProps({ blur: 10000 })
  })
  test('blur 10', () => {
    renderImageWithProps({ blur: 10, output: 'webp' })
  })

  test('responsive width', () => {
    renderImageWithProps({ width: [320, 375] }) 
  })
})