/* global cy */
import AceEditor from './index.vue'

describe('<AceEditor/>', () => {
    it('正确显示组件', () => {
        cy.mount(AceEditor, {
          propsData: {
            row: {
                model: 'querySql',
                height: '200px',
                sqlFormatter: false
            },
            modelData: {
                querySql: ''
            }
          }
        })
      cy.get('.editor').should('exist')
    })

    it('应该允许用户输入t', () => {
        cy.mount(AceEditor, {
            propsData: {
              row: {
                  model: 'querySql',
                  height: '200px',
                  sqlFormatter: false
              },
              modelData: {
                  querySql: ''
              }
            }
        })
        const input = 'SELECT * FROM users;'
        cy.get('.editor')
            .type(input)
        cy.get('.editor .ace_scroller .ace_content .ace_line').should('have.text', input)
    })

    it('应该格式化SQL代码', () => {
        cy.mount(AceEditor, {
            propsData: {
              row: {
                  model: 'querySql',
                  height: '200px',
                  lang: 'sql',
                  sqlFormatter: true
              },
              modelData: {
                  querySql: 'SELECT * FROM users WHERE id = 1;'
              }
            }
        })
      cy.get('.editor')
      .find('.ace_line_group')
      .should('have.length', 6)
    })

    it('应该格式化XML代码', () => {
        cy.mount(AceEditor, {
            propsData: {
              row: {
                  model: 'querySql',
                  height: '200px',
                  lang: 'xml'
              },
              modelData: {
                  querySql: '<root><child>text</child></root>'
              }
            }
        })
      cy.get('.editor')
      .find('.ace_line_group')
      .should('have.length', 5)
    })
  })