import {mount} from "@vue/test-utils"
import {describe,expect,it} from "vitest"
import Badge from "../badge.vue"

const BADGE_SLOT="<p id='slots'>badge defalut slot</p>"

describe('Badge.vue',()=>{
  // props count
  it("props count",()=>{
    const wrapper=mount(Badge,{
      props:{
        count:20
      },
      slots:{
        default:BADGE_SLOT
      }
    });
    
    expect(wrapper.find(".haloe-badge-count").text()).toEqual('20')
    expect(wrapper.find("#slots").html()).toContain("badge defalut slot")
  })

  // props overflowCount
  it("props overflowCount",()=>{
    const wrapper=mount(Badge,{
      props:{
        count:120,
        overflowCount:100
      }
    })
    expect(wrapper.find(".haloe-badge-count").text()).toEqual("100+")
  })

  //props dot
  it("props dot",async ()=>{
    const wrapper=mount(Badge,{
      props:{
        dot:false
      },
      slots:{
        default:BADGE_SLOT
      }
    })

    expect(wrapper.find("#slots").html()).toContain("badge defalut slot")
    expect(wrapper.find(".haloe-badge-dot").exists()).toEqual(false)

    await wrapper.setProps({
      dot:true
    })
    expect(wrapper.find(".haloe-badge-dot").exists()).toEqual(true)
  })

  //props text
  it("props text",async()=>{
    const wrapper=mount(Badge,{
      props:{
        text:"hot"
      }
    })
    expect(wrapper.find(".haloe-badge-count").text()).toEqual("hot")
  })

  //props className
  it("props class-name",()=>{
    const wrapper=mount(Badge,{
      props:{
        className:'demo-badge-alone',
        count:5
      }
    })
    expect(wrapper.find(".demo-badge-alone").exists()).toEqual(true)
  })

  //props type
  it("props type",()=>{
    const wrapper=mount(Badge,{
      props:{
        type:"success",
        count:5
      }
    })

    expect(wrapper.find(".haloe-badge-count-success").exists()).toEqual(true)
    expect(wrapper.find(".haloe-badge-count-success").text()).toEqual("5")
  })

  //props status
  it("props status",()=>{
    const wrapper=mount(Badge,{
      props:{
        status:"success"
      }
    })

    expect(wrapper.find(".haloe-badge-status-success").exists()).toEqual(true)
  })

  //props show-zero
  it("props show-zero",async()=>{
    const wrapper=mount(Badge,{
      props:{
        count:0,
        showZero:false
      }
    })
    expect(wrapper.find(".haloe-badge-count").exists()).toEqual(false)

    await wrapper.setProps({
      showZero:true
    })

    expect(wrapper.find(".haloe-badge-count").exists()).toEqual(true)
  })

  //props color
  it("props color",()=>{
    const wrapper=mount(Badge,{
      props:{
        color:'orange',
      }
    })

    expect(wrapper.find(".haloe-badge-status-orange").exists()).toEqual(true)
  })

  //props offset
  it("props offset",()=>{
    const wrapper=mount(Badge,{
      props:{
        offset:[15,1],
        count:5
      }
    })

    expect(wrapper.find(".haloe-badge-count").html()).toContain('margin-top: 15px; margin-right: 1px;')
  })
})