ant-design-vue/components/alert/__tests__/index.test.js

import { mount } from '@vue/test-utils'
import Alert from '..'

describe('Alert', () => {
  beforeAll(() => {
    jest.useFakeTimers()
  })

  afterAll(() => {
    jest.useRealTimers()
  })

  it('could be closed', () => {
    const onClose = jest.fn()
    const afterClose = jest.fn()
    const wrapper = mount({
      render () {
        return <Alert
          message='Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text'
          type='warning'
          closable
          onClose={onClose}
          afterClose={afterClose}
          ref='alert'
        />
      },
    })
    wrapper.find('.ant-alert-close-icon').trigger('click')
    expect(onClose).toBeCalled()
    jest.runAllTimers()
    wrapper.vm.$refs.alert.animationEnd()
    expect(afterClose).toBeCalled()
  })

  describe('data and aria props', () => {
    it('sets data attributes on input', () => {
      const wrapper = mount({
        render () {
          return <Alert data-test='test-id' data-id='12345' />
        },
      })
      const input = wrapper.find('.ant-alert').element
      expect(input.getAttribute('data-test')).toBe('test-id')
      expect(input.getAttribute('data-id')).toBe('12345')
    })

    it('sets aria attributes on input', () => {
      const wrapper = mount({
        render () {
          return <Alert aria-describedby='some-label' />
        },
      })

      const input = wrapper.find('.ant-alert').element
      expect(input.getAttribute('aria-describedby')).toBe('some-label')
    })

    it('sets role attribute on input', () => {
      const wrapper = mount({
        render () {
          return <Alert role='status' />
        },
      })

      const input = wrapper.find('.ant-alert').element
      expect(input.getAttribute('role')).toBe('status')
    })
  })
})