[Secrets sync] update sync test selectors

ui/lib/core/addon/components/empty-state.hbs

@@ -13,7 +13,7 @@
         </p>
       </div>
       {{#if @subTitle}}
-        <p class="empty-state-subTitle" data-test-empty-state-subText>
+        <p class="empty-state-subTitle" data-test-empty-state-subtitle>
           {{@subTitle}}
         </p>
       {{/if}}
@@ -22,7 +22,7 @@
         {{@title}}
       </p>
       {{#if @subTitle}}
-        <p class="empty-state-subTitle" data-test-empty-state-subText>
+        <p class="empty-state-subTitle" data-test-empty-state-subtitle>
           {{@subTitle}}
         </p>
       {{/if}}

ui/tests/acceptance/clients/counts/overview-test.js

@@ -61,9 +61,11 @@ module('Acceptance | clients | overview', function (hooks) {
   test('it should update charts when querying date ranges', async function (assert) {
     // query for single, historical month with no new counts (July 2023)
     await click(CLIENT_COUNT.rangeDropdown);
-    await click('[data-test-show-calendar]');
-    await click('[data-test-previous-year]');
-    await click(`[data-test-calendar-month=${ARRAY_OF_MONTHS[LICENSE_START.getMonth()]}]`);
+    await click(CLIENT_COUNT.calendarWidget.customEndMonth);
+    await click(CLIENT_COUNT.calendarWidget.previousYear);
+
+    const month = ARRAY_OF_MONTHS[LICENSE_START.getMonth()];
+    await click(CLIENT_COUNT.calendarWidget.calendarMonth(month));
     assert
       .dom(CLIENT_COUNT.usageStats('Vault client counts'))
       .doesNotExist('running total single month stat boxes do not show');
@@ -72,24 +74,24 @@ module('Acceptance | clients | overview', function (hooks) {
       .doesNotExist('running total month over month charts do not show');
     assert.dom(CLIENT_COUNT.attributionBlock).exists('attribution area shows');
     assert
-      .dom('[data-test-chart-container="new-clients"] [data-test-component="empty-state"]')
+      .dom(`${CHARTS.container('new-clients')} ${GENERAL.emptyStateTitle}`)
       .exists('new client attribution has empty state');
     assert
-      .dom('[data-test-empty-state-subtext]')
+      .dom(GENERAL.emptyStateSubtitle)
       .hasText('There are no new clients for this namespace during this time period.    ');
-    assert.dom('[data-test-chart-container="total-clients"]').exists('total client attribution chart shows');
+    assert.dom(CHARTS.container('total-clients')).exists('total client attribution chart shows');
 
     // reset to billing period
     await click(CLIENT_COUNT.rangeDropdown);
-    await click('[data-test-current-billing-period]');
+    await click(CLIENT_COUNT.currentBillingPeriod);
 
     // change billing start to month/year of upgrade to 1.10
     await click(CLIENT_COUNT.counts.startEdit);
     await click(CLIENT_COUNT.monthDropdown);
-    await click(`[data-test-dropdown-month="${ARRAY_OF_MONTHS[UPGRADE_DATE.getMonth()]}"]`);
+    await click(CLIENT_COUNT.dateDropdown.selectMonth(ARRAY_OF_MONTHS[UPGRADE_DATE.getMonth()]));
     await click(CLIENT_COUNT.yearDropdown);
-    await click(`[data-test-dropdown-year="${UPGRADE_DATE.getFullYear()}"]`);
-    await click('[data-test-date-dropdown-submit]');
+    await click(CLIENT_COUNT.dateDropdown.selectYear(UPGRADE_DATE.getFullYear()));
+    await click(CLIENT_COUNT.dateDropdown.submit);
     assert.dom(CLIENT_COUNT.attributionBlock).exists('Shows attribution area');
     assert
       .dom(CHARTS.container('Vault client counts'))
@@ -101,10 +103,10 @@ module('Acceptance | clients | overview', function (hooks) {
 
     // query for single, historical month (upgrade month)
     await click(CLIENT_COUNT.rangeDropdown);
-    await click('[data-test-show-calendar]');
-    assert.dom('[data-test-display-year]').hasText('2024');
-    await click('[data-test-previous-year]');
-    await click('[data-test-calendar-month="September"]');
+    await click(CLIENT_COUNT.calendarWidget.customEndMonth);
+    assert.dom(CLIENT_COUNT.calendarWidget.displayYear).hasText('2024');
+    await click(CLIENT_COUNT.calendarWidget.previousYear);
+    await click(CLIENT_COUNT.calendarWidget.calendarMonth('September'));
     assert
       .dom(CLIENT_COUNT.usageStats('Vault client counts'))
       .exists('running total single month usage stats show');
@@ -117,8 +119,8 @@ module('Acceptance | clients | overview', function (hooks) {
 
     // query historical date range (from September 2023 to December 2023)
     await click(CLIENT_COUNT.rangeDropdown);
-    await click('[data-test-show-calendar]');
-    await click('[data-test-calendar-month="December"]');
+    await click(CLIENT_COUNT.calendarWidget.customEndMonth);
+    await click(CLIENT_COUNT.calendarWidget.calendarMonth('December'));
 
     assert.dom(CLIENT_COUNT.attributionBlock).exists('Shows attribution area');
     assert
@@ -132,14 +134,14 @@ module('Acceptance | clients | overview', function (hooks) {
 
     // reset to billing period
     await click(CLIENT_COUNT.rangeDropdown);
-    await click('[data-test-current-billing-period]');
+    await click(CLIENT_COUNT.currentBillingPeriod);
     // query month older than count start date
     await click(CLIENT_COUNT.counts.startEdit);
     await click(CLIENT_COUNT.monthDropdown);
-    await click(`[data-test-dropdown-month="${ARRAY_OF_MONTHS[LICENSE_START.getMonth()]}"]`);
+    await click(CLIENT_COUNT.dateDropdown.selectMonth(ARRAY_OF_MONTHS[LICENSE_START.getMonth()]));
     await click(CLIENT_COUNT.yearDropdown);
-    await click(`[data-test-dropdown-year="${LICENSE_START.getFullYear() - 3}"]`);
-    await click('[data-test-date-dropdown-submit]');
+    await click(CLIENT_COUNT.dateDropdown.selectYear(LICENSE_START.getFullYear() - 3));
+    await click(CLIENT_COUNT.dateDropdown.submit);
     assert
       .dom(CLIENT_COUNT.counts.startDiscrepancy)
       .hasTextContaining(

ui/tests/acceptance/clients/counts/sync-test.js

@@ -15,82 +15,81 @@ import authPage from 'vault/tests/pages/auth';
 import { GENERAL } from 'vault/tests/helpers/general-selectors';
 import { CLIENT_COUNT, CHARTS } from 'vault/tests/helpers/clients/client-count-selectors';
 
-module('Acceptance | clients | sync | activated', function (hooks) {
+module('Acceptance | clients | sync', function (hooks) {
   setupApplicationTest(hooks);
   setupMirage(hooks);
 
-  hooks.before(function () {
-    sinon.stub(timestamp, 'now').callsFake(() => STATIC_NOW);
-  });
+  module('sync activated', function (hooks) {
+    hooks.before(function () {
+      sinon.stub(timestamp, 'now').callsFake(() => STATIC_NOW);
+    });
 
-  hooks.beforeEach(async function () {
-    syncHandler(this.server);
-    await authPage.login();
-    return visit('/vault/clients/counts/sync');
-  });
+    hooks.beforeEach(async function () {
+      syncHandler(this.server);
+      await authPage.login();
+      return visit('/vault/clients/counts/sync');
+    });
 
-  hooks.after(function () {
-    timestamp.now.restore();
-  });
+    hooks.after(function () {
+      timestamp.now.restore();
+    });
 
-  test('it should render charts when secrets sync is activated', async function (assert) {
-    syncHandler(this.server);
-    assert.dom(CHARTS.chart('Secrets sync usage')).exists('Secrets sync usage chart is rendered');
-    assert.dom(CLIENT_COUNT.statText('Total sync clients')).exists('Total sync clients chart is rendered');
-    assert.dom(GENERAL.emptyStateTitle).doesNotExist();
+    test('it should render charts when secrets sync is activated', async function (assert) {
+      syncHandler(this.server);
+      assert.dom(CHARTS.chart('Secrets sync usage')).exists('Secrets sync usage chart is rendered');
+      assert.dom(CLIENT_COUNT.statText('Total sync clients')).exists('Total sync clients chart is rendered');
+      assert.dom(GENERAL.emptyStateTitle).doesNotExist();
+    });
   });
-});
 
-module('Acceptance | clients | sync | not activated', function (hooks) {
-  setupApplicationTest(hooks);
-  setupMirage(hooks);
+  module('sync not activated', function (hooks) {
+    hooks.before(function () {
+      sinon.stub(timestamp, 'now').callsFake(() => STATIC_NOW);
+    });
 
-  hooks.before(function () {
-    sinon.stub(timestamp, 'now').callsFake(() => STATIC_NOW);
-  });
+    hooks.beforeEach(async function () {
+      await authPage.login();
+      return visit('/vault/clients/counts/sync');
+    });
 
-  hooks.beforeEach(async function () {
-    await authPage.login();
-    return visit('/vault/clients/counts/sync');
-  });
+    hooks.after(function () {
+      timestamp.now.restore();
+    });
 
-  hooks.after(function () {
-    timestamp.now.restore();
-  });
+    test('it should show an empty state when secrets sync is not activated', async function (assert) {
+      assert.expect(3);
+
+      // ensure secret_syncs clients activity is 0
+      this.server.get('/sys/internal/counters/activity', () => {
+        // return only the things that determine whether to show/hide secrets sync
+        return {
+          data: {
+            total: {
+              secret_syncs: 0,
+            },
+          },
+        };
+      });
 
-  test('it should show an empty state when secrets sync is not activated', async function (assert) {
-    assert.expect(3);
+      this.server.get('/sys/activation-flags', () => {
+        assert.true(true, '/sys/activation-flags/ is called to check if secrets-sync is activated');
 
-    // ensure secret_syncs clients activity is 0
-    this.server.get('/sys/internal/counters/activity', () => {
-      // return only the things that determine whether to show/hide secrets sync
-      return {
-        data: {
-          total: {
-            secret_syncs: 0,
+        return {
+          data: {
+            activated: [],
+            unactivated: ['secrets-sync'],
           },
-        },
-      };
-    });
+        };
+      });
 
-    this.server.get('/sys/activation-flags', () => {
-      assert.true(true, '/sys/activation-flags/ is called to check if secrets-sync is activated');
+      assert.dom(GENERAL.emptyStateTitle).exists('Shows empty state when secrets-sync is not activated');
 
-      return {
-        data: {
-          activated: [],
-          unactivated: ['secrets-sync'],
-        },
-      };
+      await click(`${GENERAL.emptyStateActions} .hds-link-standalone`);
+      assert.strictEqual(
+        currentURL(),
+        '/vault/sync/secrets/overview',
+        'action button navigates to secrets sync overview page'
+      );
     });
-
-    assert.dom(GENERAL.emptyStateTitle).exists('Shows empty state when secrets-sync is not activated');
-
-    await click(`${GENERAL.emptyStateActions} .hds-link-standalone`);
-    assert.strictEqual(
-      currentURL(),
-      '/vault/sync/secrets/overview',
-      'action button navigates to secrets sync overview page'
-    );
   });
 });

ui/tests/acceptance/mfa-login-test.js

@@ -8,6 +8,7 @@ import { setupApplicationTest } from 'ember-qunit';
 import { click, currentRouteName, fillIn, visit, waitUntil, find, waitFor } from '@ember/test-helpers';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import mfaLoginHandler, { validationHandler } from '../../mirage/handlers/mfa-login';
+import { GENERAL } from '../helpers/general-selectors';
 
 module('Acceptance | mfa-login', function (hooks) {
   setupApplicationTest(hooks);
@@ -181,7 +182,7 @@ module('Acceptance | mfa-login', function (hooks) {
     assert.dom('[data-test-auth-form]').doesNotExist('Auth form hidden when mfa fails');
     assert.dom('[data-test-empty-state-title]').hasText('Unauthorized', 'Error title renders');
     assert
-      .dom('[data-test-empty-state-subText]')
+      .dom(GENERAL.emptyStateSubtitle)
       .hasText('PingId MFA validation failed', 'Error message from server renders');
     assert
       .dom('[data-test-empty-state-message]')

ui/tests/helpers/clients/client-count-selectors.ts

@@ -41,6 +41,7 @@ export const CLIENT_COUNT = {
     customEndMonth: '[data-test-show-calendar]',
     previousYear: '[data-test-previous-year]',
     nextYear: '[data-test-next-year]',
+    displayYear: '[data-test-display-year]',
     calendarMonth: (month: string) => `[data-test-calendar-month="${month}"]`,
   },
   selectedAuthMount: 'div#mounts-search-select [data-test-selected-option] div',

ui/tests/helpers/general-selectors.ts

@@ -24,6 +24,7 @@ export const GENERAL = {
   confirmButton: '[data-test-confirm-button]',
   confirmTrigger: '[data-test-confirm-action-trigger]',
   emptyStateTitle: '[data-test-empty-state-title]',
+  emptyStateSubtitle: '[data-test-empty-state-subtitle]',
   emptyStateMessage: '[data-test-empty-state-message]',
   emptyStateActions: '[data-test-empty-state-actions]',
   menuTrigger: '[data-test-popup-menu-trigger]',

ui/tests/integration/components/clients/line-chart-test.js

@@ -10,6 +10,7 @@ import { find, render, findAll } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
 import { format, formatRFC3339, subMonths } from 'date-fns';
 import timestamp from 'core/utils/timestamp';
+import { GENERAL } from 'vault/tests/helpers/general-selectors';
 
 module('Integration | Component | clients/line-chart', function (hooks) {
   setupRenderingTest(hooks);
@@ -273,7 +274,7 @@ module('Integration | Component | clients/line-chart', function (hooks) {
 
     assert.dom('[data-test-component="empty-state"]').exists('renders empty state when no data');
     assert
-      .dom('[data-test-empty-state-subtext]')
+      .dom(GENERAL.emptyStateSubtitle)
       .hasText(
         `this is a custom message to explain why you're not seeing a line chart`,
         'custom message renders'