const u = require('./testUtil')
window.locale = 'FI'
window.IS_TEST = true
mocha.setup({
    ui: 'bdd',
//    reporter: WebConsole
})
window.expect = chai.expect

describe('math editor', () => {
    const $el = {}
    const pasteEventMock = {
        type: 'paste', originalEvent: {
            clipboardData: {
                getData: () => {
                }
            }
        }
    }

    before('wait for tools to hide', u.waitUntil(() => isOutsideViewPort($('[data-js="tools"]'))))
    before(() => {
        $el.answer1 = $('.answer1')
        $el.latexField = $('[data-js="latexField"]')
        $el.equationField = $('[data-js="equationField"]')
        $el.mathToolbar = $('[data-js="mathToolbar"]')
        $el.tools = $('[data-js="tools"]')
        $el.mathEditor = $('[data-js="mathEditor"]')
    })
    describe('init', () => {
        it('answer field is contenteditable', () => {
            expect($el.answer1).to.have.attr('contenteditable', 'true')
        })
    })

    describe('when focusing rich text', () => {
        before('focus', () => $el.answer1.focus())
        before('wait for tools visible', u.waitUntil(() => $el.tools.is(':visible')))

        it('shows character list', () => expect($('[data-js="charactersList"]')).to.be.visible)
        it('hide math tools', () => expect($el.mathToolbar).to.be.hidden)

        describe('when pasting images', () => {
            describe('png', () => {
                before('paste image', done => {
                    $el.answer1
                        .append(u.PNG_IMAGE)
                    $el.answer1.find('img:last').get(0).onload = e => {
                        if (~e.target.src.indexOf('http')) done()
                    }
                    $el.answer1.trigger(pasteEventMock)
                })
                it('saves pasted image', () => {
                    expect($el.answer1.find('img:last')).to.have.attr('src').match(/\/screenshot/)
                })
            })
            describe('not png', () => {
                let currentImgAmout
                before('#3', done => {
                    currentImgAmout = $el.answer1.find('img').length
                    $el.answer1
                        .append('<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">')
                    $('.answer1 img:last').get(0).onload = e => {
                        done()
                    }
                    $el.answer1.trigger(pasteEventMock)
                })
                it('ignores other than png images', () => {
                    expect($el.answer1.find('img').length).to.equal(currentImgAmout)
                })
            })
        })

        describe('start math', () => {
            before(() => $el.answer1.focus())
            before('wait for tools visible', u.waitUntil(() => $el.tools.is(':visible')))
            before(() => $('[data-js="newEquation"]').mousedown())

            it('shows math tools', () => expect($el.mathToolbar).to.be.visible)
            it('shows math editor', () => expect($el.mathEditor).to.be.visible)

            describe('keeps equation field in sync', () => {
                before('type', () => $el.latexField.focus().val('xy').trigger('input'))
                before('suspend', done => setTimeout(done, 0))
                before('focus', () => $el.answer1.focus())

                it('shows math in equation field', () => {
                    expect($el.equationField).to.have.text('xy')
                })
                it('shows math in img', () => expect($('img:first')).to.have.attr('src', '/math.svg?latex=xy'))
            })

            describe('keeps latex field in sync', () => {
                before(() => $('img:first').trigger({type: 'click', which: 1}))
                before(() => $el.latexField.val('').trigger('input'))
                before(() => $el.equationField.find('textarea').val('a+b').trigger('paste'))
                before(done => setTimeout(done, 100))
                before(() => $el.answer1.focus())

                it('shows math in latex field', () => {
                    expect($el.latexField).to.have.value('a+b')
                })
                it('shows math in img', () => expect($('img:first')).to.have.attr('src', '/math.svg?latex=a%2Bb'))
            })

            describe('equation click opens and esc closes math editor', () => {
                before(() => $('img:first').trigger({type: 'click', which: 1}))
                it('editor is visible and then hidden', () => {
                    expect($el.mathEditor).to.be.visible
                    $el.answer1.trigger({type: 'keydown', keyCode: 27})
                    expect($el.mathEditor).to.be.hidden
                })
            })

            describe('when clicking special character from toolbar', () => {
                before(() => $('.rich-text-editor-toolbar-characters-group button:first').mousedown())

                it('inserts special character to answer body', () => {
                    expect($el.answer1).to.have.text('°')
                })
            })
        })
    })
})

function isOutsideViewPort($elem) {
    return $elem.length > 0 && $elem.position().top < 0
}


@@ -482,24 +482,119 @@
 ools%22%5D'))))%0A
+    before('wait for tools to hide', u.waitUntil(() =%3E $('.answer1').attr('contenteditable')))%0A
     before((
@@ -3228,32 +3228,64 @@
 on field in sync
+ when typing or clicking buttons
 ', () =%3E %7B%0A     
@@ -3426,24 +3426,127 @@
 t(done, 0))%0A
+                before(() =%3E $('.rich-text-editor-toolbar-characters-group button:eq(2)').mousedown())%0A
             
@@ -3649,38 +3649,16 @@
 ', () =%3E
- %7B%0A                   
  expect(
@@ -3692,17 +3692,19 @@
 text('xy
-'
+%C2%B1')
 )%0A      
@@ -3705,33 +3705,116 @@
                 
-%7D
+it('shows math in latex field', () =%3E expect($el.latexField).to.have.value('xy%5C%5Cpm')
 )%0A              
@@ -4278,24 +4278,127 @@
 done, 100))%0A
+                before(() =%3E $('.rich-text-editor-toolbar-characters-group button:eq(3)').mousedown())%0A
             
@@ -4462,37 +4462,40 @@
 ('shows math in 
-latex
+equation
  field', () =%3E %7B
@@ -4493,37 +4493,117 @@
 , () =%3E 
-%7B%0A                   
+expect($el.equationField).to.have.text('a+b%E2%88%9E'))%0A                it('shows math in latex field', () =%3E
  expect(
@@ -4636,36 +4636,25 @@
 lue('a+b
-')%0A                %7D
+%5C%5Cinfty')
 )%0A      

Test toolbar buttons