import {mount} from "@vue/test-utils"
import {describe,expect,test} from "vitest"
import Alert from "../alert.vue"

const ALERTDESC="渲染alert组件"

describe("Alert.vue",()=>{
  // 测试默认slot
  test("defalut slot",()=>{
    const wrapper=mount(Alert,{
      slots:{
        default:ALERTDESC
      }
    });
    expect(wrapper.find('.haloe-alert-message').text()).toEqual(ALERTDESC)
  })

  // props type
  test("type",()=>{
    const wrapper=mount(Alert,{
      props:{
        type:'success'
      }
    })
    expect(wrapper.find('.haloe-alert').classes()).toContain('haloe-alert-success')
    expect(wrapper.find('.haloe-icon').classes()).toContain('haloe-icon-check-circle-filled')
  })

  // props description
  test('description',()=>{
    const wrapper=mount(Alert,{
      slots:{
        desc:ALERTDESC
      }
    });
    expect(wrapper.find('.haloe-alert-desc').text()).toEqual(ALERTDESC)
  })

  //props showIcon
  test("showIcon",()=>{
    const wrapper=mount(Alert,{
      props:{
        showIcon:false
      }
    })
    expect(wrapper.find('.haloe-alert-with-icon').exists()).toBe(false)
  })

  //methods
  test('on-close',async()=>{
    const wrapper=mount(Alert,{
      props:{
        closable:false
      }
    })
    const closeBtn=wrapper.find('.haloe-alert-close')
    expect(closeBtn.exists()).toBe(false) 

    //更新props
    await wrapper.setProps({
      closable:true
    })
    //重新获取到btn
    const closeBtn1=wrapper.find('.haloe-alert-close')
    expect(closeBtn1.exists()).toBe(true) 
    await closeBtn1.trigger('click')
    expect(wrapper.emitted()).toBeDefined()
  })
})