decide.nolog.cz/tests/integration/components/create-options-test.js

import { run } from '@ember/runloop';
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, findAll, blur, fillIn, focus } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';

module('Integration | Component | create options', function(hooks) {
  setupRenderingTest(hooks);

  hooks.beforeEach(function() {
    this.store = this.owner.lookup('service:store');
  });

  test('shows validation errors if options are not unique (makeAPoll)', async function(assert) {
    assert.expect(5);

    // validation is based on validation of every option fragment
    // which validates according to poll model it belongs to
    // therefore each option needs to be pushed to poll model to have it as
    // it's owner
    let poll;
    run(() => {
      poll = this.store.createRecord('poll', {
        pollType: 'MakeAPoll',
      });
    });
    this.set('poll', poll);
    this.set('options', poll.get('options'));

    await render(hbs`
      <CreateOptions
        @options={{this.options}}
        @isDateTime={{false}}
        @isFindADate={{this.poll.isFindADate}}
        @isMakeAPoll={{this.poll.isMakeAPoll}}
      />
    `);

    assert.dom('.form-group').exists({ count: 2 }, 'assumption: renders two form groups');

    await fillIn('.form-group:nth-child(1) input', 'foo');
    await blur('.form-group:nth-child(1) input');
    await fillIn('.form-group:nth-child(2) input', 'foo');
    await blur('.form-group:nth-child(2) input');
    assert.dom('.form-group:nth-child(2) input')
      .hasClass('is-invalid', 'second input field has validation error');
    assert.dom('.form-group:nth-child(2) .invalid-feedback')
      .exists('validation error is shown');

    await fillIn(findAll('input')[0], 'bar');
    await blur(findAll('input')[0]);
    assert.dom('.form-group .invalid-feedback')
      .doesNotExist('there is no validation error anymore after a unique value is entered');
    assert.dom('.form-group .is-invalid')
      .doesNotExist('.is-invalid classes are removed');
  });

  test('shows validation errors if option is empty (makeAPoll)', async function(assert) {
    // validation is based on validation of every option fragment
    // which validates according to poll model it belongs to
    // therefore each option needs to be pushed to poll model to have it as
    // it's owner
    let poll;
    run(() => {
      poll = this.store.createRecord('poll', {
        pollType: 'MakeAPoll',
      });
    });
    this.set('poll', poll);
    this.set('options', poll.get('options'));

    await render(hbs`
      <CreateOptions
        @options={{this.options}}
        @isDateTime={{false}}
        @isFindADate={{this.poll.isFindADate}}
        @isMakeAPoll={{this.poll.isMakeAPoll}}
      />
    `);

    assert.equal(
      findAll('.form-group.has-error').length, 0
    );

    await focus(findAll('input')[0]);
    await blur(findAll('input')[0]);
    await focus(findAll('input')[1]);
    await blur(findAll('input')[1]);
    assert.dom('.form-group .invalid-feedback').exists({ count: 2 });

    await fillIn(findAll('input')[0], 'foo');
    await blur(findAll('input')[0]);
    assert.dom('.form-group .invalid-feedback').exists({ count: 1 });

    await fillIn(findAll('input')[1], 'bar');
    await blur(findAll('input')[1]);
    assert.dom('.form-group .invalid-feedback').doesNotExist();
  });
});