UI: stabilize replication tests (#28384)

* Add specificity to replication title selectors

* Use specific selectors for replication titles in tests
This commit is contained in:
Chelsea Shaw
2024-09-12 14:50:37 -05:00
committed by GitHub
parent 84c58f66bb
commit 1c16994bc3
7 changed files with 36 additions and 28 deletions

View File

@@ -13,7 +13,7 @@
{{/if}}
</p.top>
<p.levelLeft>
<h1 class="title is-3" data-test-replication-title>
<h1 class="title is-3" data-test-replication-title={{@title}}>
{{@title}}
{{#if @data.anyReplicationEnabled}}
<span class="tag is-light has-text-grey-dark" data-test-mode>

View File

@@ -6,7 +6,7 @@
{{#if @replicationDisabled}}
<PageHeader as |p|>
<p.levelLeft>
<h1 class="title is-3" data-test-replication-title>
<h1 class="title is-3" data-test-replication-title={{@replicationMode}}>
{{#if (eq @replicationMode "dr")}}
Enable Disaster Recovery Replication
{{else if (eq @replicationMode "performance")}}

View File

@@ -9,7 +9,7 @@
{{! Replication is unsupported in non-enterprise or when using non-transactional storage (eg inmem) }}
<PageHeader as |p|>
<p.levelLeft>
<h1 class="title is-3 has-text-grey" data-test-replication-title>
<h1 class="title is-3 has-text-grey" data-test-replication-title="Replication unsupported">
Replication unsupported
</h1>
</p.levelLeft>
@@ -20,7 +20,7 @@
{{else if this.model.allReplicationDisabled}}
<PageHeader as |p|>
<p.levelLeft>
<h1 class="title is-3" data-test-replication-title>
<h1 class="title is-3" data-test-replication-title="Enable Replication">
Enable Replication
</h1>
</p.levelLeft>
@@ -114,7 +114,7 @@
{{! Renders when at least one mode is not enabled }}
<PageHeader as |p|>
<p.levelLeft>
<h1 class="title is-3" data-test-replication-title>
<h1 class="title is-3" data-test-replication-title="Replication">
Replication
</h1>
</p.levelLeft>

View File

@@ -17,7 +17,7 @@
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="has-top-margin-m title is-3" data-test-replication-title>
<h1 class="has-top-margin-m title is-3" data-test-replication-title={{this.model.replicationModeForDisplay}}>
{{this.model.replicationModeForDisplay}}
<span class="tag is-light has-text-grey-dark" data-test-replication-mode-display>
{{this.model.replicationAttrs.modeForHeader}}

View File

@@ -12,7 +12,7 @@ import { STATUS_DISABLED_RESPONSE, mockReplicationBlock } from 'vault/tests/help
const s = {
navLink: (title) => `[data-test-sidebar-nav-link="${title}"]`,
title: '[data-test-replication-title]',
title: (t) => `[data-test-replication-title="${t}"]`,
detailLink: (mode) => `[data-test-replication-details-link="${mode}"]`,
summaryCard: '[data-test-replication-summary-card]',
dashboard: '[data-test-replication-dashboard]',
@@ -20,6 +20,13 @@ const s = {
knownSecondary: (name) => `[data-test-secondaries-node="${name}"]`,
};
// wait for specific title selector as an attempt to stabilize flaky tests
async function assertTitle(assert, title, altSelector) {
const selector = altSelector || title;
await waitFor(s.title(selector));
assert.dom(s.title(selector)).hasText(title);
}
module('Acceptance | Enterprise | replication modes', function (hooks) {
setupApplicationTest(hooks);
setupMirage(hooks);
@@ -42,7 +49,8 @@ module('Acceptance | Enterprise | replication modes', function (hooks) {
await authPage.login();
await visit('/vault/replication');
assert.dom(s.title).hasText('Replication unsupported', 'it shows the unsupported view');
await assertTitle(assert, 'Replication unsupported');
// Nav links
assert.dom(s.navLink('Performance')).doesNotExist('hides performance link');
@@ -52,7 +60,8 @@ module('Acceptance | Enterprise | replication modes', function (hooks) {
test('replication page when disabled', async function (assert) {
await this.setupMocks(STATUS_DISABLED_RESPONSE);
await visit('/vault/replication');
assert.dom(s.title).hasText('Enable Replication', 'it shows the enable view');
await assertTitle(assert, 'Enable Replication');
// Nav links
assert.dom(s.navLink('Performance')).exists('shows performance link');
@@ -64,7 +73,8 @@ module('Acceptance | Enterprise | replication modes', function (hooks) {
assert.dom(s.enableForm).exists();
await click(s.navLink('Disaster Recovery'));
assert.dom(s.title).hasText('Enable Disaster Recovery Replication', 'it shows the enable view for dr');
await assertTitle(assert, 'Enable Disaster Recovery Replication', 'dr');
});
['primary', 'secondary'].forEach((mode) => {
@@ -75,7 +85,7 @@ module('Acceptance | Enterprise | replication modes', function (hooks) {
});
await visit('/vault/replication');
assert.dom(s.title).hasText('Replication', 'it shows default view');
await assertTitle(assert, 'Replication');
assert.dom(s.detailLink('performance')).hasText('Details', 'CTA to see performance details');
assert.dom(s.detailLink('dr')).hasText('Enable', 'CTA to enable dr');
@@ -89,7 +99,7 @@ module('Acceptance | Enterprise | replication modes', function (hooks) {
assert.dom(s.dashboard).exists(`it shows the replication dashboard`);
await click(s.navLink('Disaster Recovery'));
assert.dom(s.title).hasText('Enable Disaster Recovery Replication', 'it shows the dr title');
await assertTitle(assert, 'Enable Disaster Recovery Replication', 'dr');
assert.dom(s.enableForm).exists('it shows the enable view for dr');
});
});
@@ -100,7 +110,7 @@ module('Acceptance | Enterprise | replication modes', function (hooks) {
performance: mockReplicationBlock(),
});
await visit('/vault/replication');
assert.dom(s.title).hasText('Replication', 'it shows default view');
await assertTitle(assert, 'Replication');
assert.dom(s.detailLink('performance')).hasText('Enable', 'CTA to enable performance');
assert.dom(s.detailLink('dr')).hasText('Details', 'CTA to see dr details');
@@ -114,7 +124,7 @@ module('Acceptance | Enterprise | replication modes', function (hooks) {
assert.dom(s.enableForm).exists('it shows the enable view for performance');
await click(s.navLink('Disaster Recovery'));
assert.dom(s.title).hasText(`Disaster Recovery primary`, 'it shows the dr title');
await assertTitle(assert, 'Disaster Recovery primary', 'Disaster Recovery');
assert.dom(s.dashboard).exists(`it shows the replication dashboard`);
});
@@ -124,15 +134,15 @@ module('Acceptance | Enterprise | replication modes', function (hooks) {
performance: mockReplicationBlock('primary'),
});
await visit('/vault/replication');
assert.dom(s.title).hasText('Disaster Recovery & Performance primary', 'it shows primary view');
await assertTitle(assert, 'Disaster Recovery & Performance primary', 'Disaster Recovery & Performance');
assert.dom(s.summaryCard).exists({ count: 2 }, 'shows 2 summary cards');
await click(s.navLink('Performance'));
assert.dom(s.title).hasText(`Performance primary`, `it shows the performance mode details`);
await assertTitle(assert, 'Performance primary', 'Performance');
assert.dom(s.enableForm).doesNotExist();
await click(s.navLink('Disaster Recovery'));
assert.dom(s.title).hasText(`Disaster Recovery primary`, 'it shows the dr mode details');
await assertTitle(assert, 'Disaster Recovery primary', 'Disaster Recovery');
assert.dom(s.enableForm).doesNotExist();
});
});

View File

@@ -165,14 +165,12 @@ module('Acceptance | Enterprise | replication', function (hooks) {
'shows the correct title of the empty state'
);
assert.ok(
find('[data-test-replication-title]').textContent.includes('Disaster Recovery'),
'it displays the replication type correctly'
);
assert.ok(
find('[data-test-replication-mode-display]').textContent.includes('primary'),
'it displays the cluster mode correctly'
);
assert
.dom('[data-test-replication-title="Disaster Recovery"]')
.includesText('Disaster Recovery', 'it displays the replication type correctly');
assert
.dom('[data-test-replication-mode-display]')
.includesText('primary', 'it displays the cluster mode correctly');
// add dr secondary
await click('[data-test-replication-link="secondaries"]');

View File

@@ -62,11 +62,11 @@ module('Integration | Component | replication-page', function (hooks) {
await render(
hbs`<ReplicationPage @model={{this.model}} as |Page|><Page.header @showTabs={{true}} /></ReplicationPage>`
);
await waitFor('[data-test-replication-title]');
await waitFor('[data-test-replication-title="dr"]');
// Title has spaces and newlines, so we can't use hasText because it won't match exactly
assert.dom('[data-test-replication-title]').includesText('Disaster Recovery');
assert.dom('[data-test-replication-title="dr"]').includesText('Disaster Recovery');
this.set('model', { ...MODEL, replicationMode: 'performance' });
await settled();
assert.dom('[data-test-replication-title]').includesText('Performance');
assert.dom('[data-test-replication-title="performance"]').includesText('Performance');
});
});