test.tsx

import '@testing-library/jest-dom/extend-expect'
import React from 'react'
import { render, RenderResult, fireEvent, wait, createEvent } from '@testing-library/react'
import axios from "axios"

import { Upload, UploadProps } from './upload'

jest.mock('axios')
const mockedAxios = axios as jest.Mocked<typeof axios>
jest.mock('../Icon/icon', () => {
  return ({icon, onClick}) => {
    return <span onClick={onClick}>{icon}</span>
  }
})

const testProps: UploadProps = {
  action: 'dummyurl.com',
  onSuccess: jest.fn(),
  onChange: jest.fn(),
  onError: jest.fn(),
  onRemove: jest.fn(),
  drag: true,
}

let wrapper: RenderResult, fileInput: HTMLInputElement, uploadArea: HTMLElement

const testFile = new File(['xyz'], 'test.png', { type: 'image/png' })
describe('test upload component', () => {
  beforeEach(() => {
    wrapper = render(<Upload {...testProps} >Click to upload</Upload>)
    fileInput = wrapper.container.querySelector('.viking-file-input')
    uploadArea = wrapper.queryByText('Click to upload')
  })
  it('upload process should works fine', async () => {
    mockedAxios.post.mockResolvedValue({'data': 'cool'})
    const { queryByText } = wrapper
    expect(uploadArea).toBeInTheDocument()
    expect(fileInput).not.toBeVisible()
    fireEvent.change(fileInput, { target: { files: [testFile] } })
    expect(queryByText('spinner')).toBeInTheDocument()
    await wait(() => {
      expect(queryByText('test.png')).toBeInTheDocument()
    })
    expect(queryByText('check-circle')).toBeInTheDocument()
    expect(testProps.onSuccess).toHaveBeenCalledWith('cool', testFile)
    expect(testProps.onChange).toHaveBeenCalledWith(testFile)
    // remove one file
    expect(queryByText('times')).toBeInTheDocument()
    fireEvent.click(queryByText('times'))
    expect(testProps.onRemove).toHaveBeenCalledWith(expect.objectContaining({
      raw: testFile
    }))
    expect(queryByText('test.png')).not.toBeInTheDocument()
  })
  it('network error should show error item', async () => {
    const { queryByText } = wrapper
    const error = new Error('network error')
    mockedAxios.post.mockRejectedValue(error)
    fireEvent.change(fileInput, { target: { files: [testFile] } })
    await wait(() => {
      expect(queryByText('test.png')).toBeInTheDocument()
    })
    expect(queryByText('times-circle')).toBeInTheDocument()
    expect(testProps.onError).toHaveBeenCalledWith(error, testFile)
  })
  it('drag and drop files should works fine', async () => {
    const { queryByText } = wrapper
    fireEvent.dragOver(uploadArea)
    expect(uploadArea).toHaveClass('is-dragover')
    fireEvent.dragLeave(uploadArea)
    expect(uploadArea).not.toHaveClass('is-dragover')
    
    const mockDropEvent = createEvent.drop(uploadArea)
    Object.defineProperty(mockDropEvent, "dataTransfer", {
      value: {
        files: [testFile]
      }
    })
    fireEvent(uploadArea, mockDropEvent)
    await wait(() => {
      expect(queryByText('test.png')).toBeInTheDocument()
    })
    expect(testProps.onSuccess).toHaveBeenCalledWith('cool', testFile)
  })
})