Skip to content

Commit

Permalink
Sidebranch: component and acceptance tests (#8903)
Browse files Browse the repository at this point in the history
* address secondary card overflow issue

* setup replicaiton header test

* address secondary card overflow issue

* setup replication secondary card test

* setup replicaiton header test

* setup replicaiton page test

* setup replication secondary card test

* setup replication dashboard test

* setup replicaiton page test

* remove unused code

* fix overflow

* finish test for rep dashboard

* update rep secondary card test

* finish rep header test

* fix rep table rows and header test

* fix header test

* fix missing data-test-primary-cluster

* add to secondary test

* remove pauseTest

* add to enterprise replication test

* add mode to dr secondary test

* remove pauseTest

* add enterprise to test

* amend per pr commments

* re organize rep secondary card test

* adjust error heights with design input

* move const around in rep secondary card test

* move const around and message for rep dashboard test

* amend per pr review comments

* remove styling from grid-item-left

* remove dup hasErrorClass key

* quick fix

* test failure fix

* fix test due to merge

* remove hasErrorClass

* modify test message
  • Loading branch information
Monkeychip authored May 7, 2020
1 parent 241c1f0 commit f31dc15
Show file tree
Hide file tree
Showing 14 changed files with 328 additions and 50 deletions.
6 changes: 2 additions & 4 deletions ui/app/styles/components/replication-dashboard.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,12 @@

.card-container {
display: grid;
grid-gap: 2rem;
grid-gap: 1rem;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 0.8fr;
grid-template-rows: 0.2fr 1fr 0.2fr;
padding: $spacing-l;
line-height: 1.5;

height: 230px;

@include until(1320px) {
// prevent an issue with the card descriptions wrapping and expanding height
min-height: 250px;
Expand Down
12 changes: 1 addition & 11 deletions ui/lib/core/addon/components/replication-header.js
Original file line number Diff line number Diff line change
@@ -1,18 +1,8 @@
/**
* @module ReplicationHeader
* ARG TODO: finish
*
* @example
* ```js
* <ReplicationHeader finish/>
* ```
*/

import Component from '@ember/component';
import layout from '../templates/components/replication-header';

export default Component.extend({
layout,
data: null,
isSecondary: null,
'data-test-replication-header': true,
});
16 changes: 15 additions & 1 deletion ui/lib/core/addon/components/replication-secondary-card.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,21 @@ import { computed } from '@ember/object';
import layout from '../templates/components/replication-secondary-card';
import { clusterStates } from 'core/helpers/cluster-states';

/**
* @module ReplicationSecondaryCard
* ReplicationSecondaryCard components
*
* @example
* ```js
* <ReplicationSecondaryCard
@title='States'
@replicationDetails=replicationDetails
/>
* ```
* @param {string} [title=null] - The title to be displayed on the top left corner of the card.
* @param replicationDetails=null{DS.Model.replicationDetails} - An Ember data object off the Ember data model. It is computed at the parent component and passed through to this component.
*/

export default Component.extend({
layout,
title: null,
Expand Down Expand Up @@ -31,7 +46,6 @@ export default Component.extend({
// we should use the clusterStates helper instead
return this.state === 'stream-wals';
}),

hasErrorClass: computed('replicationDetails', 'title', 'state', 'connection', function() {
const { title, state, connection } = this;

Expand Down
2 changes: 1 addition & 1 deletion ui/lib/core/addon/templates/components/alert-inline.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@
@glyph={{this.alertType.glyph}}
class={{this.alertType.glyphClass}}
/>
<p class="{{this.textClass}}">
<p class="{{this.textClass}}" data-test-inline-error-message>
{{@message}}
</p>
14 changes: 8 additions & 6 deletions ui/lib/core/addon/templates/components/replication-dashboard.hbs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="replication-dashboard box is-sideless is-fullwidth is-marginless">
<div class="replication-dashboard box is-sideless is-fullwidth is-marginless" data-test-replication-dashboard>
{{#if isSecondary}}
<h2 class="has-text-weight-semibold is-size-4 has-bottom-margin-xs">
Primary Cluster
Expand All @@ -7,7 +7,7 @@
If you set a primary_cluster_addr when enabling replication, it will appear here.
</p>
{{#if replicationDetails.primaryClusterAddr}}
<code>{{replicationDetails.primaryClusterAddr}}</code>
<code data-test-primary-cluster-address>{{replicationDetails.primaryClusterAddr}}</code>
{{else}}
<code>no known primary cluster address</code>
{{/if}}
Expand All @@ -18,7 +18,8 @@
@title={{concat "Re-indexing in progress" reindexingStage}}
@type="info"
@secondIconType="loading"
@message="This can cause a delay depending on the size of the data store. You can use Vault during this time."/>
@message="This can cause a delay depending on the size of the data store. You can use Vault during this time."
data-test-isReindexing/>
{{/if}}

<div class="selectable-card-container has-top-margin-xl">
Expand All @@ -36,10 +37,11 @@
@type="info"
@secondIconType="loading"
@message="The cluster is syncing. This happens when the secondary is too far behind the primary to use the normal stream-wals state for catching up."
@class="has-top-margin-xl" />
@class="has-top-margin-xl"
data-test-isSyncing/>
{{/if}}
<ReplicationTableRows
@replicationDetails={{replicationDetails}}
@clusterMode={{clusterMode}} />
<ReplicationDocLink />
@clusterMode={{clusterMode}}/>
<ReplicationDocLink data-test-replication-doc-link/>
</div>
6 changes: 3 additions & 3 deletions ui/lib/core/addon/templates/components/replication-header.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -33,18 +33,18 @@
<p.levelLeft>
<h1 class="title is-3">
{{title}}
<span class="tag">
<span class="tag" data-test-mode>
{{if isSecondary 'Secondary' 'Primary'}}
</span>
<span class="tag">
<span class="tag" data-test-clusterId>
{{data.dr.clusterIdDisplay}}
</span>
</h1>
</p.levelLeft>
</PageHeader>

{{#if showTabs}}
<div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless">
<div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless" data-test-tabs>
<nav class="tabs">
<ul>
{{#link-to
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="replication-page">
<div class="replication-page" data-test-replication-page>
{{yield
(hash
header=(component 'replication-header' data=model title=replicationMode isSecondary=isSecondary)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="selectable-card is-rounded card-container {{if hasErrorClass "has-border-danger"}}">
<div class="selectable-card is-rounded card-container {{if hasErrorClass "has-border-danger"}}" data-test-replication-secondary-card>
{{!-- Check if State or WAL Card --}}
{{#if (eq title "States")}}
<h3 class="title is-5 grid-item-title card-title">{{title}}</h3>
Expand All @@ -7,20 +7,20 @@
<h6 class="title is-6">state</h6>
<p class="has-text-grey is-size-8">How this cluster is communicating with others at this moment.</p>
{{else}}
<h6 class="has-text-danger">state</h6>
<h6 class="has-text-danger" data-test-error>state</h6>
<AlertInline
@type="danger"
@message="Please check your server logs." />
{{/if}}
</div>
<div class="grid-item-right">
{{#if (eq connection "transient_failure")}}
<h6 class="title is-6 has-text-danger">connection_state</h6>
<h6 class="title is-6 has-text-danger" data-test-error>connection_state</h6>
<AlertInline
@type="danger"
@message="There has been some transient failure. Your cluster will eventually switch back to connection and try to establish a connection again." />
{{else if (eq connection "shutdown")}}
<h6 class="title is-6 has-text-danger">connection_state</h6>
<h6 class="title is-6 has-text-danger" data-test-error>connection_state</h6>
<AlertInline
@type="danger"
@message="Your connection has shut down. This may be because the application explicitly requested a shutdown or a non-recoverable error has happened during attempts to communicate." />
Expand All @@ -29,11 +29,11 @@
<p class="has-text-grey is-size-8">The health of the connection between this cluster and others.</p>
{{/if}}
</div>
<h2 class="title is-3 grid-item-left-bottom">{{state}}
<h2 class="title is-3 grid-item-left-bottom" data-test-state>{{state}}
{{#if inSyncState }}
<ToolTip @verticalPosition="above" as |T|>
<T.trigger>
<Icon @glyph={{"check-circle-outline" }} @size="m" class={{"has-text-success"}} />
<Icon @glyph={{"check-circle-outline" }} @size="m" class={{"has-text-success"}} data-test-glyph />
</T.trigger>
<T.content @class="tool-tip">
<div class="box">
Expand All @@ -43,7 +43,7 @@
</ToolTip>
{{/if}}
</h2>
<h2 class="title is-3 grid-item-right-bottom">{{connection}}</h2>
<h2 class="title is-3 grid-item-right-bottom" data-test-connection>{{connection}}</h2>
{{else}}
<h3 class="title is-5 grid-item-title card-title">{{title}}
<ToolTip @verticalPosition="above" @closeDelay="2000ms" as |T|>
Expand All @@ -67,12 +67,12 @@
</div>
<div class="grid-item-right">
<h6 class="title is-6">last_wal</h6>
<p class="has-text-grey is-size-8">{{lastWAL}}</p>
<p class="has-text-grey is-size-8" data-test-lastWAL>{{lastWAL}}</p>
</div>
<code class="title is-3 grid-item-left-bottom">{{format-number delta}}</code>
<code class="title is-3 grid-item-left-bottom" data-test-delta>{{format-number delta}}</code>
<div class="grid-item-right-bottom">
<h6 class="title is-6">last_remote_wal</h6>
<p class="has-text-grey is-size-8">{{lastRemoteWAL}}</p>
<p class="has-text-grey is-size-8" data-test-lastRemoteWAL>{{lastRemoteWAL}}</p>
</div>
{{/if}}
</div>
49 changes: 49 additions & 0 deletions ui/tests/acceptance/enterprise-replication-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,19 @@ module('Acceptance | Enterprise | replication', function(hooks) {
const mode = 'deny';
let mountPath;

// confirm unable to visit dr secondary details page when both replications are disabled
await visit('/vault/replication-dr-promote/details');
assert.dom('[data-test-component="empty-state"]').exists();
assert
.dom('[data-test-empty-state-title]')
.includesText('Disaster Recovery secondary not set up', 'shows the correct title of the empty state');

assert.equal(
find('[data-test-empty-state-message]').textContent.trim(),
'This cluster has not been enabled as a Disaster Recovery Secondary. You can do so by enabling replication and adding a secondary from the Disaster Recovery Primary.',
'renders default message specific to when no replication is enabled'
);

await visit('/vault/replication');
assert.equal(currentURL(), '/vault/replication');

Expand All @@ -58,6 +71,10 @@ module('Acceptance | Enterprise | replication', function(hooks) {

await click('[data-test-replication-enable]');
await pollCluster(this.owner);
await settled();

// confirm that the details dashboard shows
assert.dom('[data-test-replication-dashboard]').exists();

// add a secondary with a mount filter config
await click('[data-test-replication-link="secondaries"]');
Expand Down Expand Up @@ -104,6 +121,13 @@ module('Acceptance | Enterprise | replication', function(hooks) {
`/vault/replication/performance/secondaries`,
'redirects to the secondaries page'
);
// nav back to details page and confirm secondary is in the know secondaries table
await click('[data-test-replication-link="details"]');
await settled();
assert
.dom(`[data-test-secondaries-row=${secondaryName}]`)
.exists('shows a table row the recently added secondary');
// ARG TODO when get connected state check here

// nav to DR
await visit('/vault/replication/dr');
Expand All @@ -123,6 +147,15 @@ module('Acceptance | Enterprise | replication', function(hooks) {
await click('button[type="submit"]');

await pollCluster(this.owner);
// empty state inside of know secondaries table
assert.dom('[data-test-empty-state-title]').exists();
assert
.dom('[data-test-empty-state-title]')
.includesText(
'No known dr secondary clusters associated with this cluster',
'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'
Expand Down Expand Up @@ -161,4 +194,20 @@ module('Acceptance | Enterprise | replication', function(hooks) {
await visit('/vault/replication/dr/manage');
assert.ok(findAll('[data-test-demote-warning]').length, 'displays the demotion warning');
});

test('navigating to dr secondary details page', async function(assert) {
// enable dr replication
await visit('/vault/replication/dr');
await fillIn('[data-test-replication-cluster-mode-select]', 'primary');
await click('[data-test-replication-enable]');
await pollCluster(this.owner);

await visit('/vault/replication-dr-promote/details');
assert.dom('[data-test-component="empty-state"]').exists();
assert.equal(
find('[data-test-empty-state-message]').textContent.trim(),
'This Disaster Recovery secondary has not been enabled. You can do so from the Disaster Recovery Primary.',
'renders default message specific to when no replication is enabled'
);
});
});
58 changes: 58 additions & 0 deletions ui/tests/integration/components/replication-dashboard-test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import hbs from 'htmlbars-inline-precompile';

const REPLICATION_DETAILS = {
state: 'stream-wals',
primaryClusterAddr: 'https://127.0.0.1:8201',
};

const REPLICATION_DETAILS_SYNCING = {
state: 'merkle-diff',
primaryClusterAddr: 'https://127.0.0.1:8201',
};

module('Integration | Enterprise | Component | replication-dashboard', function(hooks) {
setupRenderingTest(hooks);

hooks.beforeEach(function() {
this.set('clusterMode', 'secondary');
this.set('isSecondary', true);
});

test('it renders', async function(assert) {
this.set('replicationDetails', REPLICATION_DETAILS);

await render(hbs`<ReplicationDashboard
@replicationDetails={{replicationDetails}}
@clusterMode={{clusterMode}}
@isSecondary={{isSecondary}}
/>`);

assert.dom('[data-test-replication-dashboard]').exists();
assert.dom('[data-test-table-rows').exists();
assert
.dom('[data-test-primary-cluster-address]')
.includesText(
REPLICATION_DETAILS.primaryClusterAddr,
`shows the correct primary cluster address value`
);
assert.dom('[data-test-replication-doc-link]').exists();
assert.dom('[data-test-flash-message]').doesNotExist('no flash message is displayed on render');
});

test('it renders an alert banner if the dashboard is syncing', async function(assert) {
this.set('replicationDetailsSyncing', REPLICATION_DETAILS_SYNCING);

await render(hbs`<ReplicationDashboard
@replicationDetails={{replicationDetailsSyncing}}
@clusterMode={{clusterMode}}
@isSecondary={{isSecondary}}
@componentToRender='replication-secondary-card'
/>`);

assert.dom('[data-test-isSyncing]').exists();
assert.dom('[data-test-isReindexing]').doesNotExist();
});
});
Loading

0 comments on commit f31dc15

Please sign in to comment.