From 4448ad86deee6c258c06646dd2011e44fbd0a137 Mon Sep 17 00:00:00 2001 From: Noelle Daley Date: Mon, 18 May 2020 12:30:13 -0700 Subject: [PATCH] Ui/replication/test update (#8995) * make sure progress bar updates and animates * ensure dashboard updates when replication mode has changed * make sure we update isSyncing when state has changed * wip - console log statements to see if components are getting new attrs * Revert "wip - console log statements to see if components are getting new attrs" This reverts commit d05219ba6c14c64a9f2e867892476faf7dad4659. * style progress bar in mozilla; allow testing the progress bar in storybook * test that primary and secondary card container don't display at the same time --- ui/app/styles/core/progress.scss | 14 +++++++-- .../addon/components/replication-dashboard.js | 2 +- ui/lib/core/stories/alert-banner.stories.js | 8 ++++- .../components/replication-dashboard-test.js | 30 +++++++++++++++++-- 4 files changed, 47 insertions(+), 7 deletions(-) diff --git a/ui/app/styles/core/progress.scss b/ui/app/styles/core/progress.scss index c615845dcf79..ceb4f8e9827e 100644 --- a/ui/app/styles/core/progress.scss +++ b/ui/app/styles/core/progress.scss @@ -1,5 +1,8 @@ .progress { + -webkit-appearance: none; + -moz-appearance: none; background: $progress-bar-background-color; + box-shadow: inset 0 0 0 1px $ui-gray-200; border-radius: $radius; margin-bottom: 0; &.is-small { @@ -13,12 +16,19 @@ } } -// style the container +// style the container in chrome .progress[value]::-webkit-progress-bar { box-shadow: inset 0 0 0 1px $ui-gray-200; } -// style the progress bar +// style the bar in chrome .progress[value]::-webkit-progress-value { border-radius: $radius; + transition: width 1s ease-out; +} + +// style the bar in firefox +.progress[value]::-moz-progress-bar { + border-radius: $radius; + transition: width 1s ease-out; } diff --git a/ui/lib/core/addon/components/replication-dashboard.js b/ui/lib/core/addon/components/replication-dashboard.js index 854a78615c1a..e0d3a1ca95f5 100644 --- a/ui/lib/core/addon/components/replication-dashboard.js +++ b/ui/lib/core/addon/components/replication-dashboard.js @@ -9,7 +9,7 @@ export default Component.extend({ data: null, replicationDetails: null, isSecondary: null, - isSyncing: computed('replicationDetails', 'isSecondary', function() { + isSyncing: computed('replicationDetails.{state}', 'isSecondary', function() { const { state } = this.replicationDetails; const isSecondary = this.isSecondary; return isSecondary && state && clusterStates([state]).isSyncing; diff --git a/ui/lib/core/stories/alert-banner.stories.js b/ui/lib/core/stories/alert-banner.stories.js index b479a16ff3b4..9ddc726695a1 100644 --- a/ui/lib/core/stories/alert-banner.stories.js +++ b/ui/lib/core/stories/alert-banner.stories.js @@ -1,10 +1,16 @@ import hbs from 'htmlbars-inline-precompile'; import { storiesOf } from '@storybook/ember'; import notes from './alert-banner.md'; +import { withKnobs, object } from '@storybook/addon-knobs'; import { MESSAGE_TYPES } from '../addon/helpers/message-types.js'; storiesOf('Alerts/AlertBanner/', module) .addParameters({ options: { showPanel: false } }) + .addDecorator( + withKnobs({ + escapeHTML: false, + }) + ) .add( 'AlertBanner', () => ({ @@ -30,7 +36,7 @@ storiesOf('Alerts/AlertBanner/', module) context: { type: 'info', message: 'Here is a message.', - progressBar: { value: 75, max: 100 }, + progressBar: object('Progress Bar', { value: 75, max: 100 }), }, }), { notes } diff --git a/ui/tests/integration/components/replication-dashboard-test.js b/ui/tests/integration/components/replication-dashboard-test.js index 7f012b40a561..54458b531dd1 100644 --- a/ui/tests/integration/components/replication-dashboard-test.js +++ b/ui/tests/integration/components/replication-dashboard-test.js @@ -1,6 +1,7 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; import { render } from '@ember/test-helpers'; +import { assign } from '@ember/polyfills'; import hbs from 'htmlbars-inline-precompile'; const REPLICATION_DETAILS = { @@ -27,13 +28,12 @@ module('Integration | Enterprise | Component | replication-dashboard', function( setupRenderingTest(hooks); hooks.beforeEach(function() { + this.set('replicationDetails', REPLICATION_DETAILS); this.set('clusterMode', 'secondary'); this.set('isSecondary', true); }); test('it renders', async function(assert) { - this.set('replicationDetails', REPLICATION_DETAILS); - await render(hbs``); + + assert.dom('[data-test-selectable-card-container="secondary"]').exists(); + assert.dom('[data-test-selectable-card-container="primary"]').doesNotExist(); + + this.set('clusterMode', 'primary'); + this.set('isSecondary', false); + + assert.dom('[data-test-selectable-card-container="primary"]').exists(); + assert.dom('[data-test-selectable-card-container="secondary"]').doesNotExist(); + }); + test('it renders the primary selectable-card-container when the cluster is a primary', async function(assert) { - this.set('replicationDetails', REPLICATION_DETAILS); this.set('isSecondary', false); await render(hbs``); assert.dom('[data-test-selectable-card-container="primary"]').exists(); + assert.dom('[data-test-selectable-card-container="secondary"]').doesNotExist(); }); test('it renders an alert banner if the dashboard is syncing', async function(assert) { @@ -94,5 +111,12 @@ module('Integration | Enterprise | Component | replication-dashboard', function( IS_REINDEXING.reindex_building_progress, 'shows the reindexing progress inside the alert banner' ); + + const reindexingInProgress = assign({}, IS_REINDEXING, { reindex_building_progress: 27000 }); + this.set('replicationDetails', reindexingInProgress); + + assert + .dom('.message-title>.progress') + .hasValue(reindexingInProgress.reindex_building_progress, 'updates the reindexing progress'); }); });