From d72582ce296ff79dfa12303305e6ad7769afb3d2 Mon Sep 17 00:00:00 2001 From: cameronperera Date: Tue, 8 Oct 2024 11:06:36 -0500 Subject: [PATCH 1/4] =?UTF-8?q?test:=20=F0=9F=92=8D=20move=20list=20tests?= =?UTF-8?q?=20from=20read=20to=20auth-method/list-test?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✅ Closes: https://hashicorp.atlassian.net/browse/ICU-15265 --- .../acceptance/auth-methods/list-test.js | 29 +++++++++++++++++-- .../acceptance/auth-methods/read-test.js | 18 ------------ 2 files changed, 26 insertions(+), 21 deletions(-) diff --git a/ui/admin/tests/acceptance/auth-methods/list-test.js b/ui/admin/tests/acceptance/auth-methods/list-test.js index 9984296e61..30236b2b12 100644 --- a/ui/admin/tests/acceptance/auth-methods/list-test.js +++ b/ui/admin/tests/acceptance/auth-methods/list-test.js @@ -4,10 +4,11 @@ */ import { module, test } from 'qunit'; -import { visit, click, waitFor, fillIn } from '@ember/test-helpers'; +import { visit, click, waitFor, fillIn, currentURL } from '@ember/test-helpers'; import { setupApplicationTest } from 'ember-qunit'; import setupMirage from 'ember-cli-mirage/test-support/setup-mirage'; import { setupIndexedDb } from 'api/test-support/helpers/indexed-db'; +import a11yAudit from 'ember-a11y-testing/test-support/audit'; import { authenticateSession, // These are left here intentionally for future reference. @@ -47,6 +48,8 @@ module('Acceptance | auth-methods | list', function (hooks) { globalScope: null, orgScope: null, authMethods: null, + orgAuthMethods: null, + globalAuthMethods: null, passwordAuthMethod: null, oidcAuthMethod: null, }; @@ -69,13 +72,15 @@ module('Acceptance | auth-methods | list', function (hooks) { scope: instances.scopes.org, type: TYPE_AUTH_METHOD_OIDC, }); - urls.globalScope = `/scopes/global/scopes`; + urls.globalScope = `/scopes/global`; urls.orgScope = `/scopes/${instances.scopes.org.id}`; urls.authMethods = `/scopes/${instances.scopes.org.id}/auth-methods`; + urls.globalAuthMethods = `${urls.globalScope}/auth-methods`; + urls.orgAuthMethods = `${urls.orgScope}/auth-methods`; urls.passwordAuthMethod = `${urls.authMethods}/${instances.passwordAuthMethod.id}`; urls.oidcAuthMethod = `${urls.authMethods}/${instances.oidcAuthMethod.id}`; - authenticateSession({}); + authenticateSession({ username: 'admin' }); }); test('users can navigate to auth methods with proper authorization', async function (assert) { @@ -116,6 +121,24 @@ module('Acceptance | auth-methods | list', function (hooks) { assert.dom(`[href="${urls.authMethods}"]`).exists(); }); + test('visiting auth methods in org scope', async function (assert) { + await visit(urls.orgScope); + + await click(`[href="${urls.orgAuthMethods}"]`); + await a11yAudit(); + + assert.strictEqual(currentURL(), urls.orgAuthMethods); + }); + + test('visiting auth methods in global scope', async function (assert) { + await visit(urls.globalScope); + + await click(`[href="${urls.globalAuthMethods}"]`); + await a11yAudit(); + + assert.strictEqual(currentURL(), urls.globalAuthMethods); + }); + test('user can search for a specifc auth-method by id', async function (assert) { await visit(urls.orgScope); diff --git a/ui/admin/tests/acceptance/auth-methods/read-test.js b/ui/admin/tests/acceptance/auth-methods/read-test.js index 338d9cd61c..4016ca9100 100644 --- a/ui/admin/tests/acceptance/auth-methods/read-test.js +++ b/ui/admin/tests/acceptance/auth-methods/read-test.js @@ -72,24 +72,6 @@ module('Acceptance | auth-methods | read', function (hooks) { urls.oidcAuthMethodGlobal = `${urls.globalAuthMethods}/${instances.oidcAuthMethodGlobal.id}`; }); - test('visiting auth methods in org scope', async function (assert) { - await visit(urls.orgScope); - - await click(`[href="${urls.orgAuthMethods}"]`); - await a11yAudit(); - - assert.strictEqual(currentURL(), urls.orgAuthMethods); - }); - - test('visiting auth methods in global scope', async function (assert) { - await visit(urls.globalScope); - - await click(`[href="${urls.globalAuthMethods}"]`); - await a11yAudit(); - - assert.strictEqual(currentURL(), urls.globalAuthMethods); - }); - test('can navigate to an auth method form in org scope', async function (assert) { await visit(urls.orgScope); From a407f9947d568622a47540ddcfae752065ff351d Mon Sep 17 00:00:00 2001 From: cameronperera Date: Tue, 8 Oct 2024 14:17:05 -0500 Subject: [PATCH 2/4] =?UTF-8?q?test:=20=F0=9F=92=8D=20add=20a11yAudit=20mo?= =?UTF-8?q?dule=20to=20auth-method=20list?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✅ Closes: https://hashicorp.atlassian.net/browse/ICU-15265 --- .../acceptance/auth-methods/list-test.js | 69 +++++++++++++++++-- 1 file changed, 63 insertions(+), 6 deletions(-) diff --git a/ui/admin/tests/acceptance/auth-methods/list-test.js b/ui/admin/tests/acceptance/auth-methods/list-test.js index 30236b2b12..f45376c507 100644 --- a/ui/admin/tests/acceptance/auth-methods/list-test.js +++ b/ui/admin/tests/acceptance/auth-methods/list-test.js @@ -10,11 +10,10 @@ import setupMirage from 'ember-cli-mirage/test-support/setup-mirage'; import { setupIndexedDb } from 'api/test-support/helpers/indexed-db'; import a11yAudit from 'ember-a11y-testing/test-support/audit'; import { + currentSession, authenticateSession, - // These are left here intentionally for future reference. - //currentSession, - //invalidateSession, } from 'ember-simple-auth/test-support'; +import { Response } from 'miragejs'; import { TYPE_AUTH_METHOD_PASSWORD, TYPE_AUTH_METHOD_OIDC, @@ -83,6 +82,66 @@ module('Acceptance | auth-methods | list', function (hooks) { authenticateSession({ username: 'admin' }); }); + module('a11yAudit', function () { + test.each('auth-methods', ['light', 'dark'], async function (assert, data) { + assert.expect(0); + currentSession().set('data.theme', data); + await visit(urls.authMethods); + + // open new dropdown + await click('.rose-layout-page-actions button'); + await a11yAudit(); + + // open dropdown at last row + await click('td:last-child button'); + await a11yAudit(); + + // open primary filter + await click('.hds-segmented-group div[name="primary"] div button'); + await a11yAudit(); + + // check 'yes' + await click( + '.hds-segmented-group div[name="primary"] div:last-child input', + ); + await a11yAudit(); + + // filter selected + await click(FILTER_DROPDOWN_SELECTOR('type')); + await click(`input[value="${TYPE_AUTH_METHOD_PASSWORD}"]`); + await click(FILTER_APPLY_BUTTON_SELECTOR); + await a11yAudit(); + + // "no results" message + await fillIn( + SEARCH_INPUT_SELECTOR, + 'fake auth method that does not exist', + ); + await a11yAudit(); + }); + + test('API error', async function (assert) { + assert.expect(0); + this.server.get('/auth-methods', () => { + return new Response( + 418, + {}, + { + status: 418, + code: "I'm a teapot", + message: 'Ope, sorry about that!', + }, + ); + }); + + await visit(urls.globalAuthMethods); + await a11yAudit(); + + currentSession().set('data.theme', 'dark'); + await a11yAudit(); + }); + }); + test('users can navigate to auth methods with proper authorization', async function (assert) { await visit(urls.globalScope); @@ -125,7 +184,6 @@ module('Acceptance | auth-methods | list', function (hooks) { await visit(urls.orgScope); await click(`[href="${urls.orgAuthMethods}"]`); - await a11yAudit(); assert.strictEqual(currentURL(), urls.orgAuthMethods); }); @@ -134,7 +192,6 @@ module('Acceptance | auth-methods | list', function (hooks) { await visit(urls.globalScope); await click(`[href="${urls.globalAuthMethods}"]`); - await a11yAudit(); assert.strictEqual(currentURL(), urls.globalAuthMethods); }); @@ -162,7 +219,7 @@ module('Acceptance | auth-methods | list', function (hooks) { assert.dom(`[href="${urls.passwordAuthMethod}"]`).exists(); assert.dom(`[href="${urls.oidcAuthMethod}"]`).exists(); - await fillIn(SEARCH_INPUT_SELECTOR, 'fake target that does not exist'); + await fillIn(SEARCH_INPUT_SELECTOR, 'fake auth method that does not exist'); await waitFor(NO_RESULTS_MSG_SELECTOR, { count: 1 }); assert.dom(`[href="${urls.passwordAuthMethod}"]`).doesNotExist(); From 5c307e4d41d1a27903286e0a740fe0c5f9faa7e8 Mon Sep 17 00:00:00 2001 From: cameronperera Date: Tue, 8 Oct 2024 16:32:11 -0500 Subject: [PATCH 3/4] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20add=20a11y=20a?= =?UTF-8?q?udit=20section=20to=20documentation/README?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✅ Closes: https://hashicorp.atlassian.net/browse/ICU-15265 --- documentation/README.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/documentation/README.md b/documentation/README.md index f3c3b175a3..b2f1b5951d 100644 --- a/documentation/README.md +++ b/documentation/README.md @@ -20,4 +20,10 @@ To learn how to add a translation, [check documentation](https://ember-intl.gith All our translations files are located [in the translations folder](https://github.com/hashicorp/boundary-ui/tree/main/addons/core/translations) within Core Addon, check the specific [translations Readme](https://github.com/hashicorp/boundary-ui/blob/main/addons/core/translations/README.md) to learn more about it. -To learn more how to use a translation on the templates checkout [the `t` helper documentation](https://ember-intl.github.io/ember-intl/docs/helpers/t). \ No newline at end of file +To learn more how to use a translation on the templates checkout [the `t` helper documentation](https://ember-intl.github.io/ember-intl/docs/helpers/t). + +### A11y Auditing + +We use `a11yAudit()` in our acceptance tests to verify that we have no a11y violations in our app. Every route needs to be audited along with each change on the DOM. For example, we should audit the listing of auth methods and audit when we filter auth methods. As well as any dropdowns or modals that may show up on the page. + +Admin UI and Desktop both have light and dark color themes that each need to be audited. To address this effectively, we use `test.each()` to loop over a11y test. Once for light theme and again for dark theme. See [auth-methods list](https://github.com/hashicorp/boundary-ui/blob/main/ui/admin/tests/acceptance/auth-methods/list-test.js) for how these tests should be structured. From acf5161a3073b3f1d90b9dc7bfcdc81e79444fec Mon Sep 17 00:00:00 2001 From: cameronperera Date: Mon, 14 Oct 2024 11:46:49 -0500 Subject: [PATCH 4/4] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20changes=20to?= =?UTF-8?q?=20a11y=20audit=20README?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✅ Closes: https://hashicorp.atlassian.net/browse/ICU-15265 --- documentation/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/documentation/README.md b/documentation/README.md index b2f1b5951d..2edb5eac3e 100644 --- a/documentation/README.md +++ b/documentation/README.md @@ -24,6 +24,6 @@ To learn more how to use a translation on the templates checkout [the `t` helper ### A11y Auditing -We use `a11yAudit()` in our acceptance tests to verify that we have no a11y violations in our app. Every route needs to be audited along with each change on the DOM. For example, we should audit the listing of auth methods and audit when we filter auth methods. As well as any dropdowns or modals that may show up on the page. +We use `a11yAudit()` in our acceptance tests to verify that we have no a11y violations in our app, for both light and dark theme. Every route needs to be audited along with each change on the DOM. If a user can take an action that causes the UI to change within the scope of that route, we should audit that change. For example, we should audit the listing of auth methods, audit when we filter auth methods, and when any dropdowns or modals show up on the page. -Admin UI and Desktop both have light and dark color themes that each need to be audited. To address this effectively, we use `test.each()` to loop over a11y test. Once for light theme and again for dark theme. See [auth-methods list](https://github.com/hashicorp/boundary-ui/blob/main/ui/admin/tests/acceptance/auth-methods/list-test.js) for how these tests should be structured. +Since the Admin UI and Desktop both have light and dark color themes we must audit both. To address this effectively, we use `test.each()` to loop over a11y test. Once for light theme and again for dark theme. See [auth-methods list](https://github.com/hashicorp/boundary-ui/blob/main/ui/admin/tests/acceptance/auth-methods/list-test.js) for how these tests should be structured.