diff --git a/ui/core/app/templates/scopes/scope/-header-nav.hbs b/ui/core/app/templates/scopes/scope/-header-nav.hbs
index 02b952ec8..809ce6e32 100644
--- a/ui/core/app/templates/scopes/scope/-header-nav.hbs
+++ b/ui/core/app/templates/scopes/scope/-header-nav.hbs
@@ -7,16 +7,12 @@
{{t "titles.global"}}
- {{#each this.scopes.orgs as |scope|}}
-
- {{scope.displayName}}
-
- {{/each}}
- {{else}}
-
- {{this.model.displayName}}
-
{{/if}}
+ {{#each this.scopes.orgs as |scope|}}
+
+ {{scope.displayName}}
+
+ {{/each}}
{{#if this.scopes.selectedProject}}
diff --git a/ui/core/tests/acceptance/scopes-test.js b/ui/core/tests/acceptance/scopes-test.js
new file mode 100644
index 000000000..d1d873a5c
--- /dev/null
+++ b/ui/core/tests/acceptance/scopes-test.js
@@ -0,0 +1,93 @@
+import { module, test } from 'qunit';
+import { visit, currentURL, click } from '@ember/test-helpers';
+import { setupApplicationTest } from 'ember-qunit';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import a11yAudit from 'ember-a11y-testing/test-support/audit';
+import {
+ authenticateSession,
+ // These are left here intentionally for future reference.
+ //currentSession,
+ //invalidateSession,
+} from 'ember-simple-auth/test-support';
+
+module('Acceptance | scopes', function (hooks) {
+ setupApplicationTest(hooks);
+ setupMirage(hooks);
+
+ const instances = {
+ scopes: {
+ global: null,
+ org: null,
+ org2: null,
+ project: null,
+ project2: null,
+ }
+ };
+ const urls = {
+ globalScope: null,
+ orgScope: null,
+ org2Scope: null,
+ projectScope: null,
+ project2Scope: null,
+ };
+
+ hooks.beforeEach(function () {
+ instances.scopes.global = this.server.create('scope', { id: 'global' });
+ instances.scopes.org = this.server.create('scope', {
+ type: 'org',
+ scope: { id: 'global', type: 'global' },
+ });
+ instances.scopes.org2 = this.server.create('scope', {
+ type: 'org',
+ scope: { id: 'global', type: 'global' },
+ });
+ instances.scopes.project = this.server.create('scope', {
+ type: 'project',
+ scope: { id: instances.scopes.org.id, type: 'org' },
+ });
+ instances.scopes.project2 = this.server.create('scope', {
+ type: 'project',
+ scope: { id: instances.scopes.org.id, type: 'org' },
+ });
+ // Generate route URLs for resources
+ urls.globalScope = `/scopes/global`;
+ urls.orgScope = `/scopes/${instances.scopes.org.id}`;
+ urls.org2Scope = `/scopes/${instances.scopes.org2.id}`;
+ urls.projectScope = `/scopes/${instances.scopes.project.id}`;
+ urls.project2Scope = `/scopes/${instances.scopes.project2.id}`;
+ authenticateSession({});
+ });
+
+ test('visiting org scope', async function (assert) {
+ assert.expect(1);
+ await visit(urls.orgScope);
+ await a11yAudit();
+ assert.equal(currentURL(), urls.orgScope);
+ });
+
+ // NOTE: In reality, we'd have a third "Global" item listed in the org
+ // dropdown. But since the mock test authenticator bypasses the auth
+ // normalization step, the UI doesn't know it's authenticated with global
+ // and thus doesn't display the "Global" item in the org nav dropdown.
+ test('can navigate among org scopes via header navigation', async function (assert) {
+ assert.expect(3);
+ await visit(urls.globalScope);
+ await a11yAudit();
+ assert.equal(currentURL(), urls.globalScope);
+ await click('.rose-header-nav .rose-dropdown a:nth-child(1)');
+ assert.equal(currentURL(), urls.orgScope);
+ // In reality, there would be a third item in the list
+ await click('.rose-header-nav .rose-dropdown a:nth-child(2)');
+ assert.equal(currentURL(), urls.org2Scope);
+ });
+
+ test('can navigate among project scopes via header navigation', async function (assert) {
+ assert.expect(2);
+ await visit(urls.projectScope);
+ await a11yAudit();
+ assert.equal(currentURL(), urls.projectScope);
+ await click('.rose-header-nav .rose-dropdown + .rose-dropdown a:nth-child(2)');
+ assert.equal(currentURL(), urls.project2Scope);
+ });
+
+});