/** * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: BUSL-1.1 */ import { module, test } from 'qunit'; import { setupRenderingTest } from 'vault/tests/helpers'; import { click, fillIn, findAll, render, triggerEvent } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; import { setupMirage } from 'ember-cli-mirage/test-support'; import { setRunOptions } from 'ember-a11y-testing/test-support'; import { ACTIVITY_RESPONSE_STUB } from 'vault/tests/helpers/clients/client-count-helpers'; import { filterActivityResponse } from 'vault/mirage/handlers/clients'; import { CLIENT_COUNT } from 'vault/tests/helpers/clients/client-count-selectors'; import { GENERAL } from 'vault/tests/helpers/general-selectors'; module('Integration | Component | clients/page/overview', function (hooks) { setupRenderingTest(hooks); setupMirage(hooks); hooks.beforeEach(async function () { this.server.get('sys/internal/counters/activity', (_, req) => { const namespace = req.requestHeaders['X-Vault-Namespace']; if (namespace === 'no-data') { return { request_id: 'some-activity-id', data: { by_namespace: [], end_time: '2024-08-31T23:59:59Z', months: [], start_time: '2024-01-01T00:00:00Z', total: { distinct_entities: 0, entity_clients: 0, non_entity_tokens: 0, non_entity_clients: 0, clients: 0, secret_syncs: 0, }, }, }; } return { request_id: 'some-activity-id', data: filterActivityResponse(ACTIVITY_RESPONSE_STUB, namespace), }; }); this.store = this.owner.lookup('service:store'); this.mountPath = ''; this.namespace = ''; this.versionHistory = ''; this.activity = await this.store.queryRecord('clients/activity', {}); // Fails on #ember-testing-container setRunOptions({ rules: { 'aria-prohibited-attr': { enabled: false }, }, }); }); test('it shows empty state message upon initial load', async function (assert) { await render(hbs``); assert.dom(GENERAL.selectByAttr('attribution-month')).exists('shows month selection dropdown'); assert .dom(CLIENT_COUNT.card('table empty state')) .exists('shows card for table state') .hasText( 'Select a month to view client attribution View the namespace mount breakdown of clients by selecting a month. Client count documentation', 'Show initial table state message' ); }); test('it shows correct state message when month selection has no data', async function (assert) { await render(hbs``); assert.dom(GENERAL.selectByAttr('attribution-month')).exists('shows month selection dropdown'); await fillIn(GENERAL.selectByAttr('attribution-month'), '6/23'); assert .dom(CLIENT_COUNT.card('table empty state')) .hasText( 'No data is available for the selected month View the namespace mount breakdown of clients by selecting another month. Client count documentation', 'Shows correct message for a month selection with no data' ); }); test('it shows table when month selection has data', async function (assert) { await render(hbs``); assert.dom(GENERAL.selectByAttr('attribution-month')).exists('shows month selection dropdown'); await fillIn(GENERAL.selectByAttr('attribution-month'), '9/23'); assert.dom(CLIENT_COUNT.card('table empty state')).doesNotExist('does not show card when table has data'); assert.dom(GENERAL.table('attribution')).exists('shows table'); assert.dom(GENERAL.paginationInfo).hasText('1–3 of 6', 'shows correct pagination info'); }); test('it filters the table when a namespace filter is applied', async function (assert) { this.namespace = 'ns1'; this.activity = await this.store.queryRecord('clients/activity', { namespace: this.namespace, }); await render(hbs``); await fillIn(GENERAL.selectByAttr('attribution-month'), '9/23'); assert.dom(CLIENT_COUNT.card('table empty state')).doesNotExist('does not show card when table has data'); assert.dom(GENERAL.table('attribution')).exists(); assert.dom(GENERAL.paginationInfo).hasText('1–3 of 3', 'shows correct pagination info'); }); test('it hides the table when a mount filter is applied', async function (assert) { this.namespace = 'ns1'; this.mountPath = 'auth/userpass-0'; this.activity = await this.store.queryRecord('clients/activity', { namespace: this.namespace, mountPath: this.mountPath, }); await render( hbs`` ); assert.dom(CLIENT_COUNT.card('table empty state')).doesNotExist('does not show card when table has data'); assert .dom(GENERAL.table('attribution')) .doesNotExist('does not show table when a mount filter is applied'); }); test('it paginates table data', async function (assert) { await render(hbs``); await fillIn(GENERAL.selectByAttr('attribution-month'), '9/23'); assert .dom(GENERAL.tableRow()) .exists({ count: 3 }, 'Correct number of table rows render based on page size'); assert.dom(GENERAL.tableData(0, 'clients')).hasText('96', 'First page shows data'); assert.dom(GENERAL.pagination).exists('shows pagination'); assert.dom(GENERAL.paginationInfo).hasText('1–3 of 6', 'shows correct pagination info'); await click(GENERAL.nextPage); assert.dom(GENERAL.tableData(0, 'clients')).hasText('53', 'Second page shows new data'); assert.dom(GENERAL.paginationInfo).hasText('4–6 of 6', 'shows correct pagination info'); }); test('it shows correct month options for billing period', async function (assert) { await render(hbs``); assert.dom(GENERAL.selectByAttr('attribution-month')).exists('shows month selection dropdown'); await fillIn(GENERAL.selectByAttr('attribution-month'), ''); await triggerEvent(GENERAL.selectByAttr('attribution-month'), 'change'); // assert that months options in select are those of selected billing period const expectedMonths = this.activity.byMonth.reverse().map((m) => m.month); // '' represents default state of 'Select month' const expectedOptions = ['', ...expectedMonths]; const actualOptions = findAll(`${GENERAL.selectByAttr('attribution-month')} option`).map( (option) => option.value ); assert.deepEqual(actualOptions, expectedOptions, 'All