/* global cy */
import { ObjectInterface } from 'script'
import InfoTimePicker from './index.vue'
import { globalGetDate } from '../../../script'
import moment from 'moment'

const mount = (r: ObjectInterface = {}, m: ObjectInterface = {}) => {
    let row = {
        label: '测试',
        model: 'startTime, endTime',
        startPlaceholder: '开始时间',
        endPlaceholder: '结束时间',
        methods: cy.spy().as('timeChange')
    }

    row = Object.assign(row, r)

    let modelData = {
        startTime: globalGetDate.valueOf(),
        endTime: globalGetDate.addDay(moment(), 1)
    }

    Object.assign(modelData, m)

    cy.mount(InfoTimePicker, {
        props: {
            row,
            modelData
        }
    })
}

describe('<InfoTimePicker/>', () => {
    it('当用户选择时间时更新值', () => {
        mount()
        cy.get('.el-date-editor--timerange').as('timePicker')
        cy.get('@timePicker').click()
        cy.contains('OK').click()
        cy.get('@timeChange').should('have.been.called')
    })

    it('formate属性正确返回值', () => {
        const format = 'HH:mm:ss'
        mount(
            {
                format: () => format
            },
            {
                time: globalGetDate.valueOf()
            }
        )
        cy.get('.el-date-editor--timerange').as('timePicker')
        cy.get('@timePicker').click()
        cy.contains('OK').click()
        cy.get('[placeholder="开始时间"]')
            .invoke('val')
            .then((inputValue) => {
                expect(inputValue).to.match(/^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]:[0-5][0-9]$/)
            })
    })
    it('disabled属性', () => {
        mount(
            {
                disabled: () => true
            },
            {
                time: globalGetDate.valueOf()
            }
        )
        cy.get('.is-disabled').should('exist')
    })
})