Ember Test Example (medium)

recent-report-item-test.js

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';

const SetUpComponent = async function (context, params) {
  context.setProperties({
    report: params.report,
    editReports: params.editReports,
    isMobileFreeUser: params.isMobileFreeUser,
    showListCta: params.showListCta,
    dummyAction: function () {}
  });

  await render(hbs`
    <RecentReportItem
      @report={{this.report}}
      @editReports={{this.editReports}}
      @isMobileFreeUser={{this.isMobileFreeUser}}
      @showListCta={{this.showListCta}}
      @freePremiumDataAbTestVariation={{true}}
      @deleteReportCallBack={{action dummyAction}}
      @sendMonitorCount={{action dummyAction}}
      @updateStoredReports={{action dummyAction}}
      @updateCurrentUpgradeFlow={{action dummyAction}}
      @setSelectedReport={{action dummyAction}}
      @processFreeUpgrade={{action dummyAction}}
      @modalDataUpgrade={{action dummyAction}}
      @pdfAddonRequired={{action dummyAction}}
    />
  `);
};

module('Integration | Component | recent-report-item', function (hooks) {
  setupRenderingTest(hooks);

  module('when is a person report', function () {
    test('it renders', async function (assert) {
      await SetUpComponent(this, {
        report: {
          isPerson: true,
          detailsFullName: 'Testing T Test',
          details: {
            first_name: 'testing',
            last_name: 'test',
            age: 33
          },
          detailsCityState: 'NY',
          createdAt: '2021-08-08 01:12:16 -0500'
        }
      });

      assert.dom('.recent-reports__report').exists('Recent Report Item exists');
      assert.dom('.recent-reports__report__icon').hasClass('recent-reports__report__icon--person', 'It shows person icon');
      assert.dom('.title').hasText('Testing Test', 'It shows the person name');
      assert.dom('.type').hasText('Person Report', 'It shows the report type');
      assert.dom('.age').containsText('Age 33', 'It shows age info');
      assert.dom('.location').containsText('Known location NY', 'It shows location info');
      assert.dom('.created').containsText('Last updated 08/08/2021', 'It shows created report created date');
      assert.dom('.redirect-btn').exists('Link to report exists');
      assert.dom('.redirect-btn').hasText('View report');
      assert.dom('.report-action-toggles').exists('Report action toggle exists');

    });
  });

    test('it shows lists cta', async function (assert) {
      await SetUpComponent(this, {
        report: {
          isPerson: true
        },
        showListCta: true
      });

      assert.dom('.list-report-cta').exists('List cta exists');
      assert.dom('.report-action-toggles').doesNotExist('Report action toggle does not exists');
    });

    test('it hides action toggles when isMobileFreeUser', async function (assert) {
      await SetUpComponent(this, {
        report: {
          isPerson: true
        },
        isMobileFreeUser: true
      });

      assert.dom('.report-action-toggles').doesNotExist('Report action toggle does not exists');
    });

    test('it shows new info tag', async function (assert) {
      await SetUpComponent(this, {
        report: {
          isPerson: true,
          details: {
            has_new_info: true
          }
        },
      });

      assert.dom('.recent-reports__report__new-info-tag').exists('New info tag exists');
      assert.dom('.recent-reports__report__new-info-tag').hasText('NEW INFO');
    });
});