a85f5fae35
no issue - fix lint errors in lib/gh-koenig - fix ghost:base eslint errors - update ember plugin refs, remove ember-suave plugin refs - remove old jshint refs - add `lint:js` script - switch to `eslint-plugin-ghost` extending `plugin:ghost/ember`
92 lines
3.4 KiB
JavaScript
92 lines
3.4 KiB
JavaScript
import $ from 'jquery';
|
|
import hbs from 'htmlbars-inline-precompile';
|
|
import wait from 'ember-test-helpers/wait';
|
|
import {click, find, triggerEvent} from 'ember-native-dom-helpers';
|
|
import {describe, it} from 'mocha';
|
|
import {expect} from 'chai';
|
|
import {setupComponentTest} from 'ember-mocha';
|
|
|
|
// NOTE: If the browser window is not focused/visible CodeMirror (or Chrome?) will
|
|
// take longer to respond to/fire events so it's possible that some of these tests
|
|
// will take 1-3 seconds
|
|
|
|
describe('Integration: Component: gh-cm-editor', function () {
|
|
setupComponentTest('gh-cm-editor', {
|
|
integration: true
|
|
});
|
|
|
|
it('handles change event', function () {
|
|
this.set('text', '');
|
|
|
|
this.render(hbs`{{gh-cm-editor text class="gh-input" update=(action (mut text))}}`);
|
|
// access CodeMirror directly as it doesn't pick up changes to the textarea
|
|
let cm = find('.gh-input .CodeMirror').CodeMirror;
|
|
cm.setValue('Testing');
|
|
|
|
return wait().then(() => {
|
|
expect(this.get('text'), 'text value after CM editor change')
|
|
.to.equal('Testing');
|
|
});
|
|
});
|
|
|
|
it('handles focus event', function (done) {
|
|
// CodeMirror's events are triggered outside of anything we can watch for
|
|
// in the tests so let's run the class check when we know the event has
|
|
// been fired and timeout if it's not fired as we expect
|
|
let onFocus = () => {
|
|
// wait for runloop to finish so that the new class has been rendered
|
|
wait().then(() => {
|
|
expect($(find('.gh-input')).hasClass('focus'), 'has focused class on first render with autofocus')
|
|
.to.be.true;
|
|
|
|
done();
|
|
});
|
|
};
|
|
|
|
this.set('onFocus', onFocus);
|
|
this.set('text', '');
|
|
|
|
this.render(hbs`{{gh-cm-editor text class="gh-input" update=(action (mut text)) focus-in=(action onFocus)}}`);
|
|
|
|
// CodeMirror polls the input for changes every 100ms
|
|
click('textarea');
|
|
triggerEvent('textarea', 'focus');
|
|
});
|
|
|
|
it('handles blur event', async function () {
|
|
this.set('text', '');
|
|
this.render(hbs`{{gh-cm-editor text class="gh-input" update=(action (mut text))}}`);
|
|
|
|
expect($(find('.gh-input')).hasClass('focus')).to.be.false;
|
|
|
|
await click('textarea');
|
|
await triggerEvent('textarea', 'focus');
|
|
|
|
expect($(find('.gh-input')).hasClass('focus')).to.be.true;
|
|
|
|
await triggerEvent('textarea', 'blur');
|
|
|
|
expect($(find('.gh-input')).hasClass('focus')).to.be.false;
|
|
});
|
|
|
|
it('can autofocus', function (done) {
|
|
// CodeMirror's events are triggered outside of anything we can watch for
|
|
// in the tests so let's run the class check when we know the event has
|
|
// been fired and timeout if it's not fired as we expect
|
|
let onFocus = () => {
|
|
// wait for runloop to finish so that the new class has been rendered
|
|
wait().then(() => {
|
|
expect(this.$('.gh-input').hasClass('focus'), 'has focused class on first render with autofocus')
|
|
.to.be.true;
|
|
|
|
done();
|
|
});
|
|
};
|
|
|
|
this.set('onFocus', onFocus);
|
|
this.set('text', '');
|
|
|
|
this.render(hbs`{{gh-cm-editor text class="gh-input" update=(action (mut text)) autofocus=true focus-in=(action onFocus)}}`);
|
|
});
|
|
});
|