diff options
Diffstat (limited to 'spec/frontend/ide/components/commit_sidebar/message_field_spec.js')
| -rw-r--r-- | spec/frontend/ide/components/commit_sidebar/message_field_spec.js | 138 |
1 files changed, 50 insertions, 88 deletions
diff --git a/spec/frontend/ide/components/commit_sidebar/message_field_spec.js b/spec/frontend/ide/components/commit_sidebar/message_field_spec.js index 1514fbc2c3b..e66de6bb0b0 100644 --- a/spec/frontend/ide/components/commit_sidebar/message_field_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/message_field_spec.js @@ -1,4 +1,4 @@ -import Vue from 'vue'; +import Vue, { nextTick } from 'vue'; import createComponent from 'helpers/vue_mount_component_helper'; import CommitMessageField from '~/ide/components/commit_sidebar/message_field.vue'; @@ -23,34 +23,23 @@ describe('IDE commit message field', () => { vm.$destroy(); }); - it('adds is-focused class on focus', (done) => { + it('adds is-focused class on focus', async () => { vm.$el.querySelector('textarea').focus(); - vm.$nextTick(() => { - expect(vm.$el.querySelector('.is-focused')).not.toBeNull(); - - done(); - }); + await nextTick(); + expect(vm.$el.querySelector('.is-focused')).not.toBeNull(); }); - it('removed is-focused class on blur', (done) => { + it('removed is-focused class on blur', async () => { vm.$el.querySelector('textarea').focus(); - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelector('.is-focused')).not.toBeNull(); - - vm.$el.querySelector('textarea').blur(); + await nextTick(); + expect(vm.$el.querySelector('.is-focused')).not.toBeNull(); - return vm.$nextTick(); - }) - .then(() => { - expect(vm.$el.querySelector('.is-focused')).toBeNull(); + vm.$el.querySelector('textarea').blur(); - done(); - }) - .then(done) - .catch(done.fail); + await nextTick(); + expect(vm.$el.querySelector('.is-focused')).toBeNull(); }); it('emits input event on input', () => { @@ -66,105 +55,78 @@ describe('IDE commit message field', () => { describe('highlights', () => { describe('subject line', () => { - it('does not highlight less than 50 characters', (done) => { + it('does not highlight less than 50 characters', async () => { vm.text = 'text less than 50 chars'; - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelector('.highlights span').textContent).toContain( - 'text less than 50 chars', - ); + await nextTick(); + expect(vm.$el.querySelector('.highlights span').textContent).toContain( + 'text less than 50 chars', + ); - expect(vm.$el.querySelector('mark').style.display).toBe('none'); - }) - .then(done) - .catch(done.fail); + expect(vm.$el.querySelector('mark').style.display).toBe('none'); }); - it('highlights characters over 50 length', (done) => { + it('highlights characters over 50 length', async () => { vm.text = 'text less than 50 chars that should not highlighted. text more than 50 should be highlighted'; - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelector('.highlights span').textContent).toContain( - 'text less than 50 chars that should not highlighte', - ); - - expect(vm.$el.querySelector('mark').style.display).not.toBe('none'); - expect(vm.$el.querySelector('mark').textContent).toBe( - 'd. text more than 50 should be highlighted', - ); - }) - .then(done) - .catch(done.fail); + await nextTick(); + expect(vm.$el.querySelector('.highlights span').textContent).toContain( + 'text less than 50 chars that should not highlighte', + ); + + expect(vm.$el.querySelector('mark').style.display).not.toBe('none'); + expect(vm.$el.querySelector('mark').textContent).toBe( + 'd. text more than 50 should be highlighted', + ); }); }); describe('body text', () => { - it('does not highlight body text less tan 72 characters', (done) => { + it('does not highlight body text less tan 72 characters', async () => { vm.text = 'subject line\nbody content'; - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2); - expect(vm.$el.querySelectorAll('mark')[1].style.display).toBe('none'); - }) - .then(done) - .catch(done.fail); + await nextTick(); + expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2); + expect(vm.$el.querySelectorAll('mark')[1].style.display).toBe('none'); }); - it('highlights body text more than 72 characters', (done) => { + it('highlights body text more than 72 characters', async () => { vm.text = 'subject line\nbody content that will be highlighted when it is more than 72 characters in length'; - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2); - expect(vm.$el.querySelectorAll('mark')[1].style.display).not.toBe('none'); - expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length'); - }) - .then(done) - .catch(done.fail); + await nextTick(); + expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2); + expect(vm.$el.querySelectorAll('mark')[1].style.display).not.toBe('none'); + expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length'); }); - it('highlights body text & subject line', (done) => { + it('highlights body text & subject line', async () => { vm.text = 'text less than 50 chars that should not highlighted\nbody content that will be highlighted when it is more than 72 characters in length'; - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2); - expect(vm.$el.querySelectorAll('mark').length).toBe(2); + await nextTick(); + expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2); + expect(vm.$el.querySelectorAll('mark').length).toBe(2); - expect(vm.$el.querySelectorAll('mark')[0].textContent).toContain('d'); - expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length'); - }) - .then(done) - .catch(done.fail); + expect(vm.$el.querySelectorAll('mark')[0].textContent).toContain('d'); + expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length'); }); }); }); describe('scrolling textarea', () => { - it('updates transform of highlights', (done) => { + it('updates transform of highlights', async () => { vm.text = 'subject line\n\n\n\n\n\n\n\n\n\n\nbody content'; - vm.$nextTick() - .then(() => { - vm.$el.querySelector('textarea').scrollTo(0, 50); - - vm.handleScroll(); - }) - .then(vm.$nextTick) - .then(() => { - expect(vm.scrollTop).toBe(50); - expect(vm.$el.querySelector('.highlights').style.transform).toBe( - 'translate3d(0, -50px, 0)', - ); - }) - .then(done) - .catch(done.fail); + await nextTick(); + vm.$el.querySelector('textarea').scrollTo(0, 50); + + vm.handleScroll(); + + await nextTick(); + expect(vm.scrollTop).toBe(50); + expect(vm.$el.querySelector('.highlights').style.transform).toBe('translate3d(0, -50px, 0)'); }); }); }); |