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

const mount = (r: any = {}, m: any = {}) => {
    let row = {
        label: '测试',
        model: 'startTime, endTime',
        dateType: () => 'daterange',
        startPlaceholder: '开始日期',
        endPlaceholder: '结束日期',
        methods: cy.spy().as('timeChange')
    }
    if (r) {
        Object.assign(row, r)
    }

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

    if (m) {
        Object.assign(modelData, m)
    }

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

describe('<InfoDatePicker/>', () => {
    it('当用户选择日期时更新值', () => {
        mount()
        // Get the date picker element
        cy.get('.el-date-editor--daterange').as('datePicker')
        cy.get('@datePicker').click()
        cy.get('.today').should('have.text', new Date().getDate())
        cy.get('.end-date').should('have.text', new Date().getDate() + 1)
        cy.get('.el-date-table-cell')
            .contains(moment(globalGetDate.addDay(moment(), 2)).format('DD'))
            .click()
        cy.get('.el-date-table-cell')
            .contains(moment(globalGetDate.addDay(moment(), 3)).format('DD'))
            .click()
        cy.get('.el-range-input').should('have.value', moment(globalGetDate.addDay(moment(), 2)).format('YYYY-MM-DD'))
        cy.get('@timeChange').should('have.been.called')
    })

    it('formate属性', () => {
        const format = 'YYYY/MM/DD'
        mount(
            {
                model: 'time',
                dateType: () => 'datetime',
                startPlaceholder: '开始日期',
                format: () => format
            },
            {
                time: globalGetDate.valueOf()
            }
        )

        cy.get('.el-date-editor').as('datePicker')
        cy.get('@datePicker').click()
        cy.get('.today').should('have.text', moment(globalGetDate.valueOf()).format('D'))
        cy.get('.el-date-table-cell')
            .contains(moment(globalGetDate.addDay(moment(), 2)).format('DD'))
            .click()
        cy.get('.is-plain').click()
        cy.get('.el-input__inner').should('have.value', moment(globalGetDate.addDay(moment(), 2)).format(format))
    })

    it('disabled属性', () => {
        const format = 'YYYY/MM/DD'
        mount(
            {
                model: 'time',
                dateType: () => 'datetime',
                startPlaceholder: '开始日期',
                format: () => format,
                disabled: () => true
            },
            {
                time: globalGetDate.valueOf()
            }
        )
        cy.get('.is-disabled').should('have.length', 1)
    })

    // 切换月份
    it('切换月份', () => {
        mount({
            model: 'time',
            dateType: () => 'datetime'
        })
        cy.get('.el-date-editor').as('datePicker')
        cy.get('@datePicker').click()
        cy.get('.arrow-left').click()
        // 取前一个月份英文
        const prevMonth = moment(globalGetDate.valueOf()).subtract(1, 'month').format('MMMM')
        cy.get('.el-date-picker__header > :nth-child(3)').should('have.text', prevMonth)
    })

    // 切换年份
    it('切换年份', () => {
        mount({
            model: 'time',
            dateType: () => 'datetime'
        })
        cy.get('.el-date-editor').as('datePicker')
        cy.get('@datePicker').click()
        cy.get('.d-arrow-left').click()
        // 取前一个年份
        const prevYear = moment(globalGetDate.valueOf()).subtract(1, 'year').format('YYYY')
        cy.get('.el-date-picker__header > :nth-child(2)')
            .invoke('text')
            .then((text) => {
                const trimmedText = text.trim()
                expect(trimmedText).to.equal(prevYear)
            })
    })
})