Files
threshold-ui/ui/admin/tests/acceptance/scopes-test.js
T
Lisbet Alvarez b1b49edb39 Refactor hds side nav to hds app side nav and header (#3032)
* refactor: 💡 use hds app header and app side nav

* style: 💄 fix dark-mode colors for side nav and app header

* style: 💄 cleanup

* style: 💄 simplify selector

* refactor: 💡 move util (param finder) to core addon

* refactor: 💡 move scope picker to core addon

* refactor: 💡 use hds header and app side nav in ui/desktop

* refactor: 💡 clean up ui/desktop files

* refactor: 💡 remove uneeded header components

* refactor: 💡 remove uneeded global layout

* Add missing copyright headers

* style: 💄 adjust foreground and background colors to fix contras

* style: 💄 remove uneeded stylelint disables

* style: 💄 fix dark mode styling in desktop ui

* refactor: 💡 readd user-select style

* test: 💍 fix tests + e2e tests for admin and desktop UIs

* refactor: 💡 clean up uneeded main elements and fix color link

* Add missing copyright headers

* fix: 🐛 e2e test selectors for ui/desktop

* style: 💄 revert link color change

* refactor: 💡 remove hds override

* fix: 🐛 scope dropdown for desktop

* fix: 🐛 max-height to desktop scope dropdown

* Add missing copyright headers

* chore: 🤖 update lockfile due to webpack update
2026-02-25 13:55:36 -08:00

253 lines
8.0 KiB
JavaScript

/**
* Copyright IBM Corp. 2021, 2026
* SPDX-License-Identifier: BUSL-1.1
*/
import { module, test } from 'qunit';
import { click, currentURL, fillIn, visit } from '@ember/test-helpers';
import { setupApplicationTest } from 'admin/tests/helpers';
import { setupSqlite } from 'api/test-support/helpers/sqlite';
import { Response } from 'miragejs';
import * as commonSelectors from 'admin/tests/helpers/selectors';
import { setRunOptions } from 'ember-a11y-testing/test-support';
module('Acceptance | scopes', function (hooks) {
setupApplicationTest(hooks);
setupSqlite(hooks);
let getScopeCount;
const instances = {
scopes: {
org: null,
org2: null,
project: null,
project2: null,
},
};
const urls = {
globalScope: null,
orgScope: null,
orgScopes: null,
newOrgScope: null,
org2Scope: null,
org2Scopes: null,
orgScopeEdit: null,
org2ScopeEdit: null,
projectScope: null,
newProjectScope: null,
project2Scope: null,
projectTargets: null,
project2Targets: null,
};
hooks.beforeEach(async function () {
// Generate resources
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/scopes`;
urls.newOrgScope = `${urls.globalScope}/new`;
urls.orgScope = `/scopes/${instances.scopes.org.id}`;
urls.orgScopes = `${urls.orgScope}/scopes`;
urls.org2Scope = `/scopes/${instances.scopes.org2.id}`;
urls.org2Scopes = `${urls.org2Scope}/scopes`;
urls.orgScopeEdit = `${urls.orgScope}/edit`;
urls.org2ScopeEdit = `${urls.org2Scope}/edit`;
urls.newProjectScope = `${urls.orgScopes}/new`;
urls.projectScope = `/scopes/${instances.scopes.project.id}`;
urls.project2Scope = `/scopes/${instances.scopes.project2.id}`;
urls.projectTargets = `${urls.projectScope}/targets`;
urls.project2Targets = `${urls.project2Scope}/targets`;
// Generate resource counter
getScopeCount = (type) => this.server.schema.scopes.where({ type }).length;
});
test('visiting global scope', async function (assert) {
await visit(urls.globalScope);
assert.strictEqual(currentURL(), urls.globalScope);
});
// TODO: this probably shouldn't be the case, but was setup to enable
// authentication when the global scope couldn't be loaded.
// In order to resolve this, we might hoist authentication routes up from
// under scopes.
test('visiting global scope is successful even when the global scope cannot be fetched', async function (assert) {
this.server.get('/scopes/:id', ({ scopes }, { params: { id } }) => {
const scope = scopes.find(id);
const response = id === 'global' ? new Response(404) : scope;
return response;
});
await visit(urls.globalScope);
assert.strictEqual(currentURL(), urls.globalScope);
});
test('visiting org scope', async function (assert) {
await visit(urls.orgScopes);
assert.strictEqual(currentURL(), urls.orgScopes);
});
test('can navigate among org scopes via side-nav', async function (assert) {
setRunOptions({
rules: {
'color-contrast': {
// [ember-a11y-ignore]: axe rule "color-contrast" automatically ignored on 2025-08-01
enabled: false,
},
'aria-required-children': {
// [ember-a11y-ignore]: axe rule "aria-required-children" automatically ignored on 2025-08-01
enabled: false,
},
listitem: {
// [ember-a11y-ignore]: axe rule "listitem" automatically ignored on 2025-08-01
enabled: false,
},
'target-size': {
// [ember-a11y-ignore]: axe rule "target-size" automatically ignored on 2025-08-01
enabled: false,
},
},
});
await visit(urls.globalScope);
assert.strictEqual(currentURL(), urls.globalScope);
await click(commonSelectors.HEADER_SCOPE_DROPDOWN);
await click(commonSelectors.HEADER_SCOPE_LINK(urls.orgScope));
assert.strictEqual(currentURL(), urls.orgScopes);
await click(commonSelectors.HEADER_SCOPE_DROPDOWN);
await click(commonSelectors.HEADER_SCOPE_LINK(urls.org2Scope));
assert.strictEqual(currentURL(), urls.org2Scopes);
});
test('can navigate among project scopes via side-nav', async function (assert) {
setRunOptions({
rules: {
'color-contrast': {
// [ember-a11y-ignore]: axe rule "color-contrast" automatically ignored on 2025-08-01
enabled: false,
},
'aria-required-children': {
// [ember-a11y-ignore]: axe rule "aria-required-children" automatically ignored on 2025-08-01
enabled: false,
},
listitem: {
// [ember-a11y-ignore]: axe rule "listitem" automatically ignored on 2025-08-01
enabled: false,
},
},
});
await visit(urls.projectScope);
assert.strictEqual(currentURL(), urls.projectTargets);
await click(commonSelectors.HEADER_SCOPE_DROPDOWN);
await click(commonSelectors.HEADER_SCOPE_LINK(urls.project2Scope));
assert.strictEqual(currentURL(), urls.project2Targets);
});
test('can create new org scopes', async function (assert) {
const orgScopeCount = getScopeCount('org');
await visit(urls.globalScope);
await click(commonSelectors.HREF(urls.newOrgScope));
await fillIn(commonSelectors.FIELD_NAME, 'random string');
await click(commonSelectors.SAVE_BTN);
assert.strictEqual(getScopeCount('org'), orgScopeCount + 1);
});
test('can create new project scopes', async function (assert) {
const orgScopeCount = getScopeCount('project');
await visit(urls.orgScopes);
await click(commonSelectors.HREF(urls.newProjectScope));
await fillIn(commonSelectors.FIELD_NAME, 'random string');
await click(commonSelectors.SAVE_BTN);
assert.strictEqual(getScopeCount('project'), orgScopeCount + 1);
});
test('can cancel create new org scopes', async function (assert) {
const orgScopeCount = getScopeCount('org');
await visit(urls.globalScope);
await click(commonSelectors.HREF(urls.newOrgScope));
await fillIn(commonSelectors.FIELD_NAME, 'random string');
await click(commonSelectors.CANCEL_BTN);
assert.strictEqual(currentURL(), urls.globalScope);
assert.strictEqual(getScopeCount('org'), orgScopeCount);
});
test('can cancel create new project scopes', async function (assert) {
const projectScopeCount = getScopeCount('project');
await visit(urls.orgScopes);
await click(commonSelectors.HREF(urls.newProjectScope));
await fillIn(commonSelectors.FIELD_NAME, 'random string');
await click(commonSelectors.CANCEL_BTN);
assert.strictEqual(currentURL(), urls.orgScopes);
assert.strictEqual(getScopeCount('project'), projectScopeCount);
});
test('saving a new scope with invalid fields displays error messages', async function (assert) {
this.server.post('/scopes', () => {
return new Response(
400,
{},
{
status: 400,
code: 'invalid_argument',
message: 'The request was invalid.',
details: {
request_fields: [
{
name: 'name',
description: 'Name is required.',
},
],
},
},
);
});
await visit(urls.globalScope);
await click(commonSelectors.HREF(urls.newOrgScope));
await click(commonSelectors.SAVE_BTN);
assert
.dom(commonSelectors.ALERT_TOAST_BODY)
.hasText('The request was invalid.');
assert.dom(commonSelectors.FIELD_ERROR).hasText('Name is required.');
});
});