import InfoForm from './infoForm.vue'

/* global cy */
describe('<InfoForm/> from表单组件', () => {
  it('挂载表单组件', () => {
    // 模拟一个表单配置和数据
    const config = {
      rule: [
        {
          label: 'Username',
          model: 'username',
          type: 'infoInput',
          show: () => true
        },
        {
          label: 'Password',
          model: 'password',
          type: 'infoInput',
          show: () => true
        }
      ],
      customFormStyle: {
        backgroundColor: '#f5f5f5'
      },
      labelWidth: '100px',
      size: 'medium',
      labelPosition: 'right',
      inline: false,
      validate: {
        username: [{ required: true, message: 'Please enter username', trigger: 'blur' }],
        password: [{ required: true, message: 'Please enter password', trigger: 'blur' }]
      },
      disabled: () => false,
      validateCallback: () => { }
    }
    const modelData = {
      username: '',
      password: ''
    }

    // 渲染组件
    cy.mount(InfoForm, {
      props: {
        config,
        modelData
      }
    })

    // 断言表单元素是否正确渲染
    cy.get('.el-form').should('exist')
    cy.get('.el-form-item').should('have.length', 2)
    cy.get('.el-form-item__label').eq(0).should('have.text', 'Username')
    cy.get('.el-form-item__label').eq(1).should('have.text', 'Password')
    cy.get('.el-input__inner').should('have.length', 2)
    cy.get('.el-form-item__error').should('not.exist')
  })

  it('表单验证', () => {
    // 模拟一个表单配置和数据
    const config = {
      rule: [
        {
          label: 'Username',
          model: 'username',
          type: 'infoInput',
          show: () => true
        },
        {
          label: 'Password',
          model: 'password',
          type: 'infoInput',
          show: () => true
        }
      ],
      customFormStyle: {
        backgroundColor: '#f5f5f5'
      },
      labelWidth: '100px',
      size: 'medium',
      labelPosition: 'right',
      inline: false,
      validate: {
        username: [{ required: true, message: 'Please enter username', trigger: 'blur' }],
        password: [{ required: true, message: 'Please enter password', trigger: 'blur' }]
      },
      disabled: () => false,
      validateCallback: () => {
        console.log('2131232131')
      }
    }
    const modelData = {
      username: '',
      password: ''
    }

    // 渲染组件
    cy.mount(InfoForm, {
      props: {
        config,
        modelData
      }
    }).then((r: any) => {
      if(r){
        r.vm?.validate()
      }
      // 在表单元素上触发验证事件
      // cy.get('.el-form').trigger('validate')
      // 断言错误信息是否正确显示
      cy.get('.el-form-item__error').should('have.length', 2)
      cy.get('.el-form-item__error').eq(0).should('have.text', 'Please enter username')
      cy.get('.el-form-item__error').eq(1).should('have.text', 'Please enter password')

    })

  })
})