vault/ui/tests/integration/components/sync/secrets/page/destinations-test.js

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { setupEngine } from 'ember-engines/test-support';
import { setupMirage } from 'ember-cli-mirage/test-support';
import { render, click } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';
import { allowAllCapabilitiesStub } from 'vault/tests/helpers/stubs';
import sinon from 'sinon';

import { PAGE } from 'vault/tests/helpers/sync/sync-selectors';

const {
  breadcrumb,
  title,
  tab,
  filter,
  searchSelect,
  emptyStateTitle,
  destinations,
  menuTrigger,
  confirmButton,
} = PAGE;

module('Integration | Component | sync | Page::Destinations', function (hooks) {
  setupRenderingTest(hooks);
  setupEngine(hooks, 'sync');
  setupMirage(hooks);

  hooks.beforeEach(function () {
    this.owner.lookup('service:version').type = 'enterprise';

    this.server.post('/sys/capabilities-self', allowAllCapabilitiesStub());

    const store = this.owner.lookup('service:store');
    const modelName = 'sync/destinations/aws-sm';
    const destination = this.server.create('sync-destination', 'aws-sm');
    store.pushPayload(modelName, {
      modelName,
      ...destination,
      id: destination.name,
    });

    this.destinations = store.peekAll(modelName).toArray();
    this.destinations.meta = {
      filteredTotal: this.destinations.length,
      currentPage: 1,
      pageSize: 5,
    };

    this.renderComponent = () => {
      return render(
        hbs`<Secrets::Page::Destinations
          @destinations={{this.destinations}}
          @typeFilter={{this.typeFilter}}
          @nameFilter={{this.nameFilter}}
        />`,
        { owner: this.engine }
      );
    };

    this.transitionStub = sinon.stub(this.owner.lookup('service:router'), 'transitionTo');
    this.clearDatasetStub = sinon.stub(store, 'clearDataset');
  });

  test('it should render header and tabs', async function (assert) {
    await this.renderComponent();
    assert.dom(breadcrumb).includesText('Secrets Sync', 'Breadcrumb renders');
    assert.dom(title).hasText('Secrets Sync', 'Page title renders');
    assert.dom(tab('Overview')).exists('Overview tab renders');
    assert.dom(tab('Destinations')).exists('Destinations tab renders');
  });

  test('it should render toolbar filters and actions', async function (assert) {
    assert.expect(4);

    this.typeFilter = 'aws-sm';
    await this.renderComponent();

    assert.dom(destinations.list.create).includesText('Create new destination', 'Create action renders');
    assert
      .dom(filter('type'))
      .includesText('AWS Secrets Manager', 'Filter is populated for correct initial value');
    await click(searchSelect.removeSelected);

    for (const filterType of ['type', 'name']) {
      await click(`${filter(filterType)} .ember-basic-dropdown-trigger`);
      await click(searchSelect.option(0));

      const value = filterType === 'type' ? 'aws-sm' : 'destination-aws';
      assert.deepEqual(
        this.transitionStub.lastCall.args,
        ['vault.cluster.sync.secrets.destinations', { queryParams: { [filterType]: value } }],
        `${filterType} filter triggered transition with correct query params`
      );
    }
  });

  test('it should render empty state when there are no filtered results', async function (assert) {
    this.destinations = [];
    this.typeFilter = 'foo';
    this.nameFilter = 'bar';

    await this.renderComponent();

    assert
      .dom(emptyStateTitle)
      .hasText(
        'There are no foo destinations matching "bar".',
        'Renders correct empty state when both type and name filters are defined'
      );

    this.set('nameFilter', undefined);
    assert
      .dom(emptyStateTitle)
      .hasText('There are no foo destinations.', 'Renders correct empty state when type filter is defined');

    this.setProperties({
      typeFilter: undefined,
      nameFilter: 'bar',
    });
    assert.dom(emptyStateTitle).hasText('There are no destinations matching "bar".');
  });

  test('it should render destination list items', async function (assert) {
    assert.expect(6);

    this.server.delete('/sys/sync/destinations/aws-sm/destination-aws', () => {
      assert.ok('Request made to delete destination');
      return {};
    });

    await this.renderComponent();

    const { icon, name, type, deleteAction } = destinations.list;

    assert.dom(icon).hasClass('flight-icon-aws-color', 'Correct icon renders');
    assert.dom(name).hasText('destination-aws', 'Name renders');
    assert.dom(type).hasText('AWS Secrets Manager', 'Type renders');

    await click(menuTrigger);

    await click(deleteAction);
    await click(confirmButton);

    assert.propEqual(
      this.transitionStub.lastCall.args,
      ['vault.cluster.sync.secrets.destinations'],
      'Transition is triggered on delete success'
    );
    assert.propEqual(
      this.clearDatasetStub.lastCall.args,
      ['sync/destination'],
      'Store dataset is cleared on delete success'
    );
  });
});