Jest模拟技术在 wangEditor 中的实践

const fn = jest.fn()
const fn1 = jest.fn().mockImplementation(() => 'fn1')
const fn2 = jest.fn().mockReturnValue(true)

import SoundPlayer from './sound-player';
import SoundPlayerConsumer from './sound-player-consumer';
jest.mock('./sound-player'); 

it('We can check if the consumer called the class constructor', () => {
  const soundPlayerConsumer = new SoundPlayerConsumer();
  expect(SoundPlayer).toHaveBeenCalledTimes(1);
});

import SoundPlayer from './sound-player';
const mockPlaySoundFile = jest.fn();
jest.mock('./sound-player', () => {
  return jest.fn().mockImplementation(() => {
    return {playSoundFile: mockPlaySoundFile};
  });
});

const liParent = $('<ul></ul>')
const li = $('<li></li>')
liParent.append(li)

jest.spyOn(editor.selection, 'getSelectionContainerElem').mockReturnValue(li)

export default function mockCommand (document: Document) {
    document.execCommand = jest.fn()
    document.queryCommandValue = jest.fn()
    document.queryCommandState = jest.fn()
    document.queryCommandSupported = jest.fn().mockReturnValue(true)
}

import mockCommand from '../../helpers/command-mock'

test('调用 createAction 能创建指定行和列的表格', () => {

    mockCommand(document)
    
    const editor = createEditor(document, `div1`)
    const createTableInstance = new CreateTable(editor)
    createTableInstance.createAction(2, 1)
    
    expect(document.execCommand).toBeCalledWith(
    	'insertHTML', 
     false, `<table border="0" width="100%" cellpadding="0" cellspacing="0"><tbody><tr><th></th></tr><tr>			<td></td></tr></tbody></table><p><br></p>`
        )
})

const xhrMockClass = (config: any) => ({
    open: jest.fn(),
    send: jest.fn(),
    setRequestHeader: jest.fn(),
    ontimeout: jest.fn(),
    upload: jest.fn(),
    onreadystatechange: jest.fn(),
    status: config.status,
    readyState: 4,
    responseText: config.res,
})

export default xhrMockClass

test('调用 uploadImg 上传图片失败，支持配置 onError 钩子监听', done => {
        expect.assertions(1)

        const errorFn = jest.fn()
        const alertFn = jest.fn()

        const upload = createUploadImgInstance({
            uploadImgServer,
            uploadImgHooks: {
                error: errorFn,
            },
            customAlert: alertFn,
        })
        const files = createMockFiles()

        const mockXHRObject = mockXHRHttpRequest({ status: 500 })

        upload.uploadImg(files)

        mockXHRObject.onreadystatechange()

        setTimeout(() => {
            expect(errorFn).toBeCalled()
            done()
        })
    })

import { DomElement } from '../../src/utils/dom-core'

const EventType = {
    Event: Event,
    KeyBoardEvent: KeyboardEvent,
    MouseEvent: MouseEvent,
    // jest 没有ClipboardEvent，使用Event替代
    ClipboardEvent: Event,
}

type EventTypeKey = keyof typeof EventType

export default function mockEventTrigger(
    $el: DomElement,
    type: string,
    eventType: EventTypeKey = 'Event',
    option?: any
) {
    const EventConstruct = EventType[eventType]

    const event = new EventConstruct(type, {
        view: window,
        bubbles: true,
        cancelable: true,
        ...option,
    })
    $el.elems[0].dispatchEvent(event)
}

test('编辑器初始化后，编辑器区域会绑定 enter键 keyup 事件，触发执行eventsHook enterUpEvents的函数执行', () => {
        const mockClickFn = jest.fn()

        Object.defineProperty(editor.txt.eventHooks, 'enterUpEvents', {
            value: [mockClickFn, mockClickFn],
        })

        dispatchEvent(editor.$textElem, 'keyup', 'KeyBoardEvent', {
            keyCode: 13,
        })

        // 模拟不是enter键的情况
        dispatchEvent(editor.$textElem, 'keyup', 'KeyBoardEvent', {
            keyCode: 0,
        })

        expect(mockClickFn.mock.calls.length).toEqual(2)
    })

test('编辑器初始化后，编辑器区域会绑定 mouseup mousedown 事件，对range进行处理，如果range不存在，不处理', () => {
    const saveRangeFn = jest.fn()
    const getRangeFn = jest.fn(() => null)
    jest.spyOn(editor.selection, 'saveRange').mockImplementation(saveRangeFn)
    jest.spyOn(editor.selection, 'getRange').mockImplementation(getRangeFn)

    dispatchEvent(editor.$textElem, 'mousedown', 'MouseEvent')
    dispatchEvent(editor.$textElem, 'mouseup', 'MouseEvent')

    expect(saveRangeFn).not.toBeCalled()
})

const imgUrl = 'http://www.wangeditor.com/imgs/logo.jpeg'
const errorUrl = 'error.jpeg'

 Object.defineProperty(global.Image.prototype, 'src', {
        // Define the property setter
        set(src) {
            if (src === errorUrl) {
                // Call with setTimeout to simulate async loading
                setTimeout(() => this.onerror(new Error('mocked error')))
            } else if (src === imgUrl) {
                setTimeout(() => this.onload())
            }
        },
    })
 
 test('调用 insertImg 可以网编辑器里插入图片，插入图片加载失败可以通过customAlert配置错误提示', done => {
        expect.assertions(1)

        const alertFn = jest.fn()

        const uploadImg = createUploadImgInstance({ customAlert: alertFn })

        mockSupportCommand()

        uploadImg.insertImg(errorUrl)

        setTimeout(() => {
            expect(alertFn).toBeCalledWith(
                '插入图片错误',
                'error',
                `wangEditor: 插入图片错误，图片链接 "${errorUrl}"，下载链接失败`
            )
            done()
        }, 200)
    })