Sidebranch: component and acceptance tests

ui/app/styles/components/replication-dashboard.scss

@@ -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;
@@ -43,6 +41,10 @@
       .grid-item-left {
         grid-column: 1/1;
         grid-row: 2/2;
+
+        height: 75px;
+        max-height: 75px;
+        overflow: auto;
       }
       .grid-item-right {
         grid-column: 2/2;

ui/app/templates/vault/cluster/replication-dr-promote/details.hbs

@@ -6,7 +6,7 @@
         />
         {{#if Page.isDisabled}}
           <EmptyState
-            @title="Disaster Recovery secondary not set up"
+            @title="{{Page.replicationMode}} secondary not set up"
             @message={{Page.message}}
             @icon="alert-circle-outline"
             @bottomBorder={{true}}

ui/lib/core/addon/components/replication-dashboard.js

@@ -8,7 +8,6 @@ export default Component.extend({
   data: null,
   replicationDetails: null,
   isSecondary: null,
-  dr: null,
   isSyncing: computed('replicationDetails', 'isSecondary', function() {
     const { state } = this.replicationDetails;
     const isSecondary = this.isSecondary;

ui/lib/core/addon/components/replication-header.js

@@ -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,
 });

ui/lib/core/addon/components/replication-secondary-card.js

@@ -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,
@@ -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;
 

ui/lib/core/addon/templates/components/alert-inline.hbs

@@ -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>

ui/lib/core/addon/templates/components/replication-dashboard.hbs

@@ -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
@@ -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}}
@@ -37,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>

ui/lib/core/addon/templates/components/replication-header.hbs

@@ -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

ui/lib/core/addon/templates/components/replication-page.hbs

@@ -1,8 +1,9 @@
-<div class="replication-page">
+<div class="replication-page" data-test-replication-page>
 {{yield (hash
   header=(component 'replication-header' data=model title=replicationMode isSecondary=isSecondary)
   toggle=(component 'replication-toggle')
   dashboard=(component 'replication-dashboard' data=model isSecondary=isSecondary replicationDetails=replicationDetails clusterMode=clusterMode)
+  replicationMode=replicationMode
   isDisabled=isDisabled
   message=message
 )}}

ui/lib/core/addon/templates/components/replication-secondary-card.hbs

@@ -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>
@@ -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." />
@@ -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">
@@ -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|>
@@ -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>

ui/tests/acceptance/enterprise-replication-test.js

@@ -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');
 
@@ -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"]');
@@ -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');
@@ -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'
@@ -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'
+    );
+  });
 });

ui/tests/acceptance/replication/dr/secondary-test.js

@@ -4,7 +4,7 @@ import { currentURL, visit } from '@ember/test-helpers';
 
 import authPage from 'vault/tests/pages/auth';
 
-module('Acceptance | DR secondary details', function(hooks) {
+module('Acceptance| Enterprise | DR secondary details', function(hooks) {
   setupApplicationTest(hooks);
 
   hooks.beforeEach(function() {

ui/tests/integration/components/replication-dashboard-test.js

@@ -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('componentToRender', 'replication-secondary-card');
+    this.set('replicationDetailsSyncing', REPLICATION_DETAILS_SYNCING);
+
+    await render(hbs`<ReplicationDashboard 
+    @replicationDetails={{replicationDetailsSyncing}} 
+    @clusterMode={{clusterMode}}
+    @isSecondary={{isSecondary}}
+    @componentToRender={{componentToRender}}
+    />`);
+
+    assert.dom('[data-test-isSyncing]').exists();
+  });
+});