Ember Test Example (medium++)

report-rating-container-test.js

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, click, fillIn } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
import { resolve } from 'rsvp';

const SetUpComponent = async function (context, params) {
  context.setProperties({
    parentReportModel: params.parentReportModel,
    rating: params.rating,
    showOutlineIcon: params.showOutlineIcon
  });

  await render(hbs`
    <ReportRatingContainer
      @parentReportModel={{this.parentReportModel}}
      @rating={{this.rating}}
      @showOutlineIcon={{this.showOutlineIcon}}
    />
  `);
};

module('Integration | Component | report-rating-container', function (hooks) {
  setupRenderingTest(hooks);

  test('it renders', async function (assert) {
    await SetUpComponent(this, {
      parentReportModel: {
        id: '1'
      },
      showOutlineIcon: true,
      rating: null
    });

    assert.dom('#report-rating-container').exists('Component exists');
    assert.dom('#rating-stars').exists('Stars component exists');
    assert.dom('.star-container').exists({ count: 5 },'It show 5 inactive stars');
    assert.dom('.rateLabel').hasText('Rate out of 5 stars', 'It shows rate label');
  });

  module('hasReportRating prop', function() {
    test('it shows question title', async function (assert) {
      await SetUpComponent(this, {
        parentReportModel: {
          id: '1'
        },
        showOutlineIcon: true,
        rating: null
      });

      assert.dom('.cta__header').hasText('How would you rate this report?', 'It shows question title');
    });

    test('it shows rated title', async function (assert) {
      await SetUpComponent(this, {
        parentReportModel: {
          id: '1'
        },
        showOutlineIcon: true,
        rating: 1
      });

      assert.dom('.cta__header').hasText('You rated this report as', 'It shows rated title');
    });
  });

  module('rating prop', function () {
    test('it shows 1 active star', async function (assert) {
      await SetUpComponent(this, {
        showOutlineIcon: true,
        rating: 1
      });

      assert.dom('.rating-star').exists({ count: 1 });
    });

    test('it shows 2 active stars', async function (assert) {
      await SetUpComponent(this, {
        rating: 2
      });

      assert.dom('.rating-star').exists({ count: 2 });
    });

    test('it shows 3 active stars', async function (assert) {
      await SetUpComponent(this, {
        rating: 3
      });

      assert.dom('.rating-star').exists({ count: 3 });
    });

    test('it shows 4 active stars', async function (assert) {
      await SetUpComponent(this, {
        rating: 4
      });

      assert.dom('.rating-star').exists({ count: 4 });
    });

    test('it shows 5 active stars', async function (assert) {
      await SetUpComponent(this, {
        rating: 5
      });

      assert.dom('.rating-star').exists({ count: 5 });
    });
  });

  module('clicking on stars', function () {
    test('it shows 1 active star', async function (assert) {
      await SetUpComponent(this, {
        showOutlineIcon: true,
        rating: null
      });

      assert.dom('.star-set-container > .star-container').hasNoClass('active');

      await click('.star-set-container > .star-container');

      assert.dom('.star-set-container > .star-container').hasClass('active');
    });

    test('it shows form', async function (assert) {
      await SetUpComponent(this, {
        showOutlineIcon: true,
        rating: null
      });

      await click('.star-set-container > .star-container');

      assert.dom('#rating-report-textarea').exists();
      assert.dom('.btn-rating').exists();
    });
  });

  module('submiting feedback', function (hooks) {
    hooks.beforeEach(async function () {
      const reportRating = this.owner.lookup('service:report-rating');
      // this.spyOnProcessRating = sinon.spy(reportRating, 'processRating');
      this.spyOnProcessRating = sinon.stub(reportRating, 'processRating').returns(resolve());

      await SetUpComponent(this, {
        parentReportModel: {
          id: '1'
        },
        showOutlineIcon: true,
        rating: null
      });
      await click('.star-set-container > .star-container');
    });

    test('with comment', async function (assert) {
      await fillIn('#rating-report-textarea', 'Testing feedback');

      await click('.btn-rating');

      assert.ok(this.spyOnProcessRating.calledWith({
        report: {
          rating: 1,
          comments: 'Testing feedback',
          permalink: '1',
          client: 'web-desktop'
        }
      }));
    });

    test('without comment', async function (assert) {
      await click('.btn-rating');

      assert.ok(this.spyOnProcessRating.calledWith({
        report: {
          rating: 1,
          comments: "",
          permalink: '1',
          client: 'web-desktop'
        }
      }));
    });

    test('it should hide the form after click', async function (assert) {
      assert.dom('.rating-report-comments').exists();
      await click('.btn-rating');
      assert.dom('.rating-report-comments').doesNotExist();
    });
  });
});