open-nomad/ui/tests/integration/components/trigger-test.js

/* eslint-disable ember-a11y-testing/a11y-audit-called */
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render, click, waitFor } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';

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

  module('Synchronous Interactions', function() {
    test('it can trigger a synchronous action', async function(assert) {
      this.set('name', 'Tomster');
      this.set('changeName', () => this.set('name', 'Zoey'));
      await render(hbs`
      <Trigger @do={{this.changeName}} as |trigger|>
        <h2 data-test-name>{{this.name}}</h2>
        <button data-test-button type="button" {{on "click" trigger.fns.do}}>Change my name.</button>
      </Trigger>
      `);
      assert.dom('[data-test-name]').hasText('Tomster', 'Initial state renders correctly.');

      await click('[data-test-button]');

      assert
        .dom('[data-test-name]')
        .hasText('Zoey', 'The name property changes when the button is clicked');
    });

    test('it sets the result of the action', async function(assert) {
      this.set('tomster', () => 'Tomster');
      await render(hbs`
      <Trigger @do={{this.tomster}} as |trigger|>
        {{#if trigger.data.result}}
          <h2 data-test-name>{{trigger.data.result}}</h2>
        {{/if}}
        <button data-test-button {{on "click" trigger.fns.do}}>Generate</button>
      </Trigger>
      `);
      assert
        .dom('[data-test-name]')
        .doesNotExist('Initial state does not render because there is no result yet.');

      await click('[data-test-button]');

      assert
        .dom('[data-test-name]')
        .hasText('Tomster', 'The result state updates after the triggered action');
    });
  });

  module('Asynchronous Interactions', function() {
    test('it can trigger an asynchronous action', async function(assert) {
      this.set(
        'onTrigger',
        () =>
          new Promise(resolve => {
            this.set('resolve', resolve);
          })
      );

      await render(hbs`
      <Trigger @do={{this.onTrigger}} as |trigger|>
        {{#if trigger.data.isBusy}}
          <div data-test-div-loading>...Loading</div>
        {{/if}}
        {{#if trigger.data.isSuccess}}
          <div data-test-div>Success!</div>
        {{/if}}
        <button data-test-button {{on "click" trigger.fns.do}}>Click Me</button>
      </Trigger>
      `);

      assert
        .dom('[data-test-div]')
        .doesNotExist('The div does not render until after the action dispatches successfully');

      await click('[data-test-button]');
      assert
        .dom('[data-test-div-loading]')
        .exists('Loading state is displayed when the action hasnt resolved yet');
      assert
        .dom('[data-test-div]')
        .doesNotExist('Success message does not display until after promise resolves');

      this.resolve();
      await waitFor('[data-test-div]');
      assert
        .dom('[data-test-div-loading]')
        .doesNotExist(
          'Loading state is no longer rendered after state changes from busy to success'
        );
      assert
        .dom('[data-test-div]')
        .exists('Action has dispatched successfully after the promise resolves');

      await click('[data-test-button]');
      assert
        .dom('[data-test-div]')
        .doesNotExist('Aftering clicking the button, again, the state is reset');
      assert
        .dom('[data-test-div-loading]')
        .exists('After clicking the button, again, we are back in the loading state');

      this.resolve();
      await waitFor('[data-test-div]');

      assert
        .dom('[data-test-div]')
        .exists(
          'An new action and new promise resolve after clicking the button for the second time'
        );
    });

    test('it handles the success state', async function(assert) {
      this.set(
        'onTrigger',
        () =>
          new Promise(resolve => {
            this.set('resolve', resolve);
          })
      );
      this.set('onSuccess', () => assert.step('On success happened'));

      await render(hbs`
      <Trigger @do={{this.onTrigger}} @onSuccess={{this.onSuccess}} as |trigger|>
          {{#if trigger.data.isSuccess}}
            <span data-test-div>Success!</span>
          {{/if}}
        <button data-test-button {{on "click" trigger.fns.do}}>Click Me</button>
      </Trigger>
      `);

      assert
        .dom('[data-test-div]')
        .doesNotExist('No text should appear until after the onSuccess callback is fired');
      await click('[data-test-button]');
      this.resolve();
      await waitFor('[data-test-div]');
      assert.verifySteps(['On success happened']);
    });

    test('it handles the error state', async function(assert) {
      this.set(
        'onTrigger',
        () =>
          new Promise((_, reject) => {
            this.set('reject', reject);
          })
      );
      this.set('onError', () => {
        assert.step('On error happened');
      });

      await render(hbs`
      <Trigger @do={{this.onTrigger}} @onError={{this.onError}} as |trigger|>
          {{#if trigger.data.isBusy}}
            <div data-test-div-loading>...Loading</div>
          {{/if}}
          {{#if trigger.data.isError}}
            <span data-test-span>Error!</span>
          {{/if}}
        <button data-test-button {{on "click" trigger.fns.do}}>Click Me</button>
      </Trigger>
      `);

      await click('[data-test-button]');
      assert
        .dom('[data-test-div-loading]')
        .exists('Loading state is displayed when the action hasnt resolved yet');

      assert
        .dom('[data-test-div]')
        .doesNotExist('No text should appear until after the onError callback is fired');

      this.reject();
      await waitFor('[data-test-span]');
      assert.verifySteps(['On error happened']);

      await click('[data-test-button]');

      assert
        .dom('[data-test-div-loading]')
        .exists('The previous error state was cleared and we show loading, again.');

      assert.dom('[data-test-div]').doesNotExist('The error state is cleared');

      this.reject();
      await waitFor('[data-test-span]');
      assert.verifySteps(['On error happened'], 'The error dispatches');
    });
  });
});