@vue/test-utils#VueWrapper TypeScript Examples

The following examples show how to use @vue/test-utils#VueWrapper. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: useTitle.test.ts From vhook with MIT License

6 votes

describe('test useTitle when restoreOnUnMount is true', () => {
  let wrapper: VueWrapper<any>, setTitle: (title: string) => void
  beforeEach(() => {
    const comp = defineComponent({
      template: '<div>test</div>',
      setup () {
        setTitle = useTitle('test', true)
      }
    })
    document.title = 'init'
    wrapper = mount(comp)
  })

  test('useTitle should be defined', () => {
    expect(useTitle).toBeDefined()
  })

  test('document.title should be test after component mounted', () => {
    expect(document.title).toBe('test')
  })

  test('document.title should change after invoking setTitle', (done) => {
    setTitle('change')
    nextTick(() => {
      expect(document.title).toBe('change')
      done()
    })
  })

  test('document.title should be reset to init after component unmounted', () => {
    wrapper.unmount()
    expect(document.title).toBe('init')
  })
})

Example #2

Source File: useEvent.test.ts From vhook with MIT License

5 votes

function testUseEvent(description: string, targetFn: () => Target, isRef = false) {
  describe(description, () => {
    let wrapper: VueWrapper<any>
    let clear: () => void
    let target: IEventTarget
    let testRef: Ref<Element | null>
    beforeEach(() => {
      if (isRef) {
        testRef = targetFn() as Ref<Element>
      }
      wrapper = invokeHook(() => {
        onMounted(() => {
          [target, clear] = useEvent(
            'click',
            handler,
            true,
            !isRef ? targetFn() : testRef
          )
        })
        return {
          test: testRef
        }
      })
    })
    test('target should be equal to the target parameter', () => {
      expect(target.value).toEqual(document.getElementById('test'))
    })
    test('addEventListener should be called after mounted', () => {
      expect(add).toHaveBeenCalledTimes(1)
      expect(add).toHaveBeenCalledWith('click', handler, true)
    })
    test('callback should be called after firing an event', () => {
      const target = wrapper.find('#test')
      target.trigger('click')
      expect(handler).toHaveBeenCalledTimes(1)
    })
    test('removeEventListener should be called after invoking clear', () => {
      clear()
      expect(remove).toHaveBeenCalledTimes(1)
      expect(remove).toHaveBeenCalledWith('click', handler, true)
    })
    test('callback should not be called after invoking clear', () => {
      const target = wrapper.find('#test')
      clear()
      target.trigger('click')
      expect(handler).not.toBeCalled()
    })
    test('target.value should be null after invoking clear', () => {
      clear()
      expect(target.value).toBeNull()
    })
    test('event should be removed after unmounted', () => {
      const targetDiv = wrapper.find('#test')
      wrapper.unmount()
      expect(remove).toHaveBeenCalledTimes(1)
      expect(remove).toHaveBeenCalledWith('click', handler, true)
      targetDiv.trigger('click')
      expect(handler).not.toBeCalled()
      expect(target.value).toBeNull()
    })
    if (isRef) {
      test('removeEventListener should be called when ref is manually set to null', async () => {
        const targetDiv = wrapper.find('#test')
        testRef.value = null
        await nextTick()
        expect(remove).toHaveBeenCalledTimes(1)
        expect(remove).toHaveBeenCalledWith('click', handler, true)
        targetDiv.trigger('click')
        expect(handler).not.toBeCalled()
        expect(target.value).toBeNull()
      })
    }
  })
}

Example #3

Source File: useEventRef.test.ts From vhook with MIT License

5 votes

describe('test useEventRef', () => {
  let wrapper: VueWrapper<any>
  let clear: () => void
  beforeEach(() => {
    wrapper = invokeHook(() => {
      const [target, clearFn] = useEventRef(
        'click',
        handler,
        true
      )
      clear = clearFn
      return {
        test: target
      }
    })
  })
  test('addEventListener should be called after mounted', () => {
    expect(add).toHaveBeenCalledTimes(1)
    expect(add).toHaveBeenCalledWith('click', handler, true)
  })
  test('callback should be called after firing an event', () => {
    const target = wrapper.find('#test')
    target.trigger('click')
    expect(handler).toHaveBeenCalledTimes(1)
  })
  test('removeEventListener should be called after invoking clear', () => {
    clear()
    expect(remove).toHaveBeenCalledTimes(1)
    expect(remove).toHaveBeenCalledWith('click', handler, true)
  })
  test('callback should not be called after invoking clear', () => {
    const target = wrapper.find('#test')
    clear()
    target.trigger('click')
    expect(handler).not.toBeCalled()
  })
  test('event should be removed after unmounted', () => {
    const targetDiv = wrapper.find('#test')
    wrapper.unmount()
    expect(remove).toHaveBeenCalledTimes(1)
    expect(remove).toHaveBeenCalledWith('click', handler, true)
    targetDiv.trigger('click')
    expect(handler).not.toBeCalled()
  })
})

Example #4

Source File: useResize.test.ts From vhook with MIT License

5 votes

wrapper: VueWrapper<any>

Example #5

Source File: useWindowScroll.test.ts From vhook with MIT License

5 votes

wrapper: VueWrapper<any>