From 96c5723d28af6214c6c9cbb0568adc5588b77f75 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Wed, 29 Jul 2020 16:09:40 +0200 Subject: [PATCH] ui: Ensure URLs for tabs change when selecting a different DC (#8397) * ui: Add URLs to tabs to we can assert them * Add dcs to the service show page, temporarily There is an ongoing PR which removes the need to do this by adding a dcs property to the navigation, hence temporary * Add a step to assert on whether text _contains_ rather than exact match * Test whether the URL of the instance tab changes when the user switches dcs using the main navigation menu * Recompute href-to's on URL change, just like is-href --- ui-v2/app/components/tab-nav/pageobject.js | 3 ++- ui-v2/app/helpers/href-to.js | 6 +++++ .../dc/services/show/dc-switch.feature | 27 +++++++++++++++++++ .../steps/dc/services/show/dc-switch-steps.js | 10 +++++++ ui-v2/tests/pages.js | 11 +++++++- ui-v2/tests/pages/dc/services/show.js | 15 ++++++++++- ui-v2/tests/steps/assertions/page.js | 23 ++++++++++------ 7 files changed, 84 insertions(+), 11 deletions(-) create mode 100644 ui-v2/tests/acceptance/dc/services/show/dc-switch.feature create mode 100644 ui-v2/tests/acceptance/steps/dc/services/show/dc-switch-steps.js diff --git a/ui-v2/app/components/tab-nav/pageobject.js b/ui-v2/app/components/tab-nav/pageobject.js index e25cc9ac3b..19d371f3be 100644 --- a/ui-v2/app/components/tab-nav/pageobject.js +++ b/ui-v2/app/components/tab-nav/pageobject.js @@ -1,4 +1,4 @@ -import { is, clickable } from 'ember-cli-page-object'; +import { is, clickable, attribute } from 'ember-cli-page-object'; import ucfirst from 'consul-ui/utils/ucfirst'; export default function(name, items, blankKey = 'all') { return items.reduce(function(prev, item, i, arr) { @@ -17,6 +17,7 @@ export default function(name, items, blankKey = 'all') { ...prev, ...{ [`${key}IsSelected`]: is('.selected', `[data-test-tab="${name}_${item}"]`), + [`${key}Url`]: attribute('href', `[data-test-tab="${name}_${item}"] a`), [key]: clickable(`[data-test-tab="${name}_${item}"] a`), }, }; diff --git a/ui-v2/app/helpers/href-to.js b/ui-v2/app/helpers/href-to.js index 8dc551dcf3..d04f8cc42f 100644 --- a/ui-v2/app/helpers/href-to.js +++ b/ui-v2/app/helpers/href-to.js @@ -1,8 +1,11 @@ +/*eslint ember/no-observers: "warn"*/ +// TODO: Remove ^ // This helper requires `ember-href-to` for the moment at least // It's similar code but allows us to check on the type of route // (dynamic or wildcard) and encode or not depending on the type import { inject as service } from '@ember/service'; import Helper from '@ember/component/helper'; +import { observer } from '@ember/object'; import { hrefTo as _hrefTo } from 'ember-href-to/helpers/href-to'; import wildcard from 'consul-ui/utils/routing/wildcard'; @@ -39,4 +42,7 @@ export default Helper.extend({ compute(params, hash) { return hrefTo(this, this.router, params, hash); }, + onURLChange: observer('router.currentURL', function() { + this.recompute(); + }), }); diff --git a/ui-v2/tests/acceptance/dc/services/show/dc-switch.feature b/ui-v2/tests/acceptance/dc/services/show/dc-switch.feature new file mode 100644 index 0000000000..9debd4a213 --- /dev/null +++ b/ui-v2/tests/acceptance/dc/services/show/dc-switch.feature @@ -0,0 +1,27 @@ +@setupApplicationTest +Feature: dc / services / show / dc-switch : Switching Datacenters + Scenario: Seeing all services when switching datacenters + Given 2 datacenter models from yaml + --- + - dc-1 + - dc-2 + --- + And 1 node model + And 1 service model from yaml + --- + - Service: + Service: consul + Kind: ~ + --- + + When I visit the service page for yaml + --- + dc: dc-1 + service: consul + --- + Then the url should be /dc-1/services/consul/instances + And I see instancesUrl on the tabs contains "/dc-1/services/consul/instances" + When I click dc on the navigation + And I click dcs.1.name + Then the url should be /dc-2/services/consul/instances + And I see instancesUrl on the tabs contains "/dc-2/services/consul/instances" diff --git a/ui-v2/tests/acceptance/steps/dc/services/show/dc-switch-steps.js b/ui-v2/tests/acceptance/steps/dc/services/show/dc-switch-steps.js new file mode 100644 index 0000000000..3231912b98 --- /dev/null +++ b/ui-v2/tests/acceptance/steps/dc/services/show/dc-switch-steps.js @@ -0,0 +1,10 @@ +import steps from '../../../steps'; + +// step definitions that are shared between features should be moved to the +// tests/acceptance/steps/steps.js file + +export default function(assert) { + return steps(assert).then('I should find a file', function() { + assert.ok(true, this.step); + }); +} diff --git a/ui-v2/tests/pages.js b/ui-v2/tests/pages.js index af64436c8b..40f737bf02 100644 --- a/ui-v2/tests/pages.js +++ b/ui-v2/tests/pages.js @@ -150,7 +150,16 @@ export default { ) ), service: create( - service(visitable, attribute, collection, text, consulIntentionList, catalogToolbar, tabgroup) + service( + visitable, + clickable, + attribute, + collection, + text, + consulIntentionList, + catalogToolbar, + tabgroup + ) ), instance: create(instance(visitable, attribute, collection, text, tabgroup)), nodes: create(nodes(visitable, clickable, attribute, collection, catalogFilter)), diff --git a/ui-v2/tests/pages/dc/services/show.js b/ui-v2/tests/pages/dc/services/show.js index e9b101bab9..8510dbc692 100644 --- a/ui-v2/tests/pages/dc/services/show.js +++ b/ui-v2/tests/pages/dc/services/show.js @@ -1,4 +1,13 @@ -export default function(visitable, attribute, collection, text, intentions, filter, tabs) { +export default function( + visitable, + clickable, + attribute, + collection, + text, + intentions, + filter, + tabs +) { const page = { visit: visitable('/:dc/services/:service'), externalSource: attribute('data-test-external-source', '[data-test-external-source]', { @@ -17,6 +26,10 @@ export default function(visitable, attribute, collection, text, intentions, filt ]), filter: filter(), + dcs: collection('[data-test-datacenter-picker]', { + name: clickable('a'), + }), + // TODO: These need to somehow move to subpages instances: collection('.consul-service-instance-list > ul > li:not(:first-child)', { address: text('[data-test-address]'), diff --git a/ui-v2/tests/steps/assertions/page.js b/ui-v2/tests/steps/assertions/page.js index 47d20bea72..795f8cd7fc 100644 --- a/ui-v2/tests/steps/assertions/page.js +++ b/ui-v2/tests/steps/assertions/page.js @@ -159,10 +159,10 @@ export default function(scenario, assert, find, currentPage) { }) .then( [ - 'I see $property on the $component like "$value"', - "I see $property on the $component like '$value'", + `I see $property on the $component (contains|like) "$value"`, + `I see $property on the $component (contains|like) '$value'`, ], - function(property, component, value) { + function(property, component, containsLike, value) { let target; try { if (typeof component === 'string') { @@ -172,11 +172,18 @@ export default function(scenario, assert, find, currentPage) { } catch (e) { throw e; } - assert.equal( - target, - value, - `Expected to see ${property} on ${component} as ${value}, was ${target}` - ); + if (containsLike === 'like') { + assert.equal( + target, + value, + `Expected to see ${property} on ${component} as ${value}, was ${target}` + ); + } else { + assert.ok( + target.indexOf(value) !== -1, + `Expected to see ${property} on ${component} within ${value}, was ${target}` + ); + } } ) .then(['I see $property like "$value"'], function(property, value) {