From f3925ed38bd47c0b546db72381d9e39cce7fec70 Mon Sep 17 00:00:00 2001 From: Petar Dimov Date: Wed, 15 May 2024 11:26:52 +0300 Subject: [PATCH 1/9] fix(ui5-notification-list-item): focus is no longer trapped in loading item --- .../fiori/src/NotificationListGroupItem.hbs | 79 +++++---- .../fiori/src/NotificationListGroupItem.ts | 4 + packages/fiori/src/NotificationListItem.hbs | 156 +++++++++--------- packages/fiori/src/NotificationListItem.ts | 5 + .../src/themes/NotificationListGroupItem.css | 12 +- .../fiori/src/themes/NotificationListItem.css | 11 +- .../src/themes/NotificationListItemBase.css | 8 - 7 files changed, 152 insertions(+), 123 deletions(-) diff --git a/packages/fiori/src/NotificationListGroupItem.hbs b/packages/fiori/src/NotificationListGroupItem.hbs index cd0dc1e838a5..a000f8aced0d 100644 --- a/packages/fiori/src/NotificationListGroupItem.hbs +++ b/packages/fiori/src/NotificationListGroupItem.hbs @@ -7,45 +7,54 @@ aria-labelledby="{{ariaLabelledBy}}" aria-description="{{accInvisibleText}}" aria-level="1" + aria-busy="{{loading}}" > -
- -
- {{titleText}} -
- -
-
- - - - - {{#if loading}} + > + {{> content}} + + {{else}} + {{> content}} {{/if}} - \ No newline at end of file + + +{{#*inline "content"}} +
+
+ +
+ {{titleText}} +
+ +
+
+ + + + +
+{{/inline}} diff --git a/packages/fiori/src/NotificationListGroupItem.ts b/packages/fiori/src/NotificationListGroupItem.ts index 6a29ad0273b4..a557b05fad83 100644 --- a/packages/fiori/src/NotificationListGroupItem.ts +++ b/packages/fiori/src/NotificationListGroupItem.ts @@ -156,6 +156,10 @@ class NotificationListGroupItem extends NotificationListItemBase { } get ariaLabelledBy() { + if (this.loading) { + return null; + } + const id = this._id; return this.hasTitleText ? `${id}-title-text` : ""; diff --git a/packages/fiori/src/NotificationListItem.hbs b/packages/fiori/src/NotificationListItem.hbs index 51962211f6b6..d8041a6196a2 100644 --- a/packages/fiori/src/NotificationListItem.hbs +++ b/packages/fiori/src/NotificationListItem.hbs @@ -9,94 +9,102 @@ aria-labelledby="{{ariaLabelledBy}}" aria-describedby="{{ariaDescribedBy}}" aria-level="2" + aria-busy="{{loading}}" > - -
- + {{#if loading}} + + {{> content}} + + {{else}} + {{> content}} + {{/if}} + + +{{#*inline "content"}} +
+
{{#if hasImportance}} {{importanceText}} - {{/if}} -
- {{#if hasState}} - - {{/if}} -
- {{stateText}} - {{titleText}} -
-
+
+ {{#if hasState}} + + + {{/if}} - {{#if hasDesc}} -
- +
+ {{stateText}} + {{titleText}} +
- {{/if}} - + + + {{showMoreText}} + +
-
- {{#if showMenu}} - - {{/if}} - {{#if showClose}} - - {{/if}} -
+ {{accInvisibleText}} +
- +
+ {{#if showMenu}} + + {{/if}} + {{#if showClose}} + + {{/if}} +
- + - {{#if loading}} - - {{/if}} - \ No newline at end of file + +
+{{/inline}} \ No newline at end of file diff --git a/packages/fiori/src/NotificationListItem.ts b/packages/fiori/src/NotificationListItem.ts index 5499abd4ec79..322938bc7e92 100644 --- a/packages/fiori/src/NotificationListItem.ts +++ b/packages/fiori/src/NotificationListItem.ts @@ -371,6 +371,11 @@ class NotificationListItem extends NotificationListItemBase { get ariaLabelledBy() { const id = this._id; + + if (this.loading) { + return null; + } + const ids = []; if (this.hasTitleText) { diff --git a/packages/fiori/src/themes/NotificationListGroupItem.css b/packages/fiori/src/themes/NotificationListGroupItem.css index f2c66e3835ae..31fac923caee 100644 --- a/packages/fiori/src/themes/NotificationListGroupItem.css +++ b/packages/fiori/src/themes/NotificationListGroupItem.css @@ -10,13 +10,21 @@ } .ui5-nli-group-root { - display: flex; - flex-direction: column; position: relative; width: 100%; box-sizing: border-box; } +.ui5-nli-group-content-wrapper { + width: 100%; + display: flex; + flex-direction: column; +} + +[ui5-busy-indicator] { + width: 100%; +} + .ui5-nli-group-header { height: 2.75rem; position: relative; diff --git a/packages/fiori/src/themes/NotificationListItem.css b/packages/fiori/src/themes/NotificationListItem.css index 33a50acb2844..03c969fe6c3b 100644 --- a/packages/fiori/src/themes/NotificationListItem.css +++ b/packages/fiori/src/themes/NotificationListItem.css @@ -61,12 +61,8 @@ /* End */ .ui5-nli-root { - display: flex; - flex-direction: row-reverse; position: relative; width: 100%; - padding-inline: var(--_ui5-notification_item-root-padding-inline); - padding-block: 1rem; box-sizing: border-box; cursor: pointer; border-radius: var(--_ui5-notification_item-border-radius); @@ -84,6 +80,13 @@ border: var(--_ui5-notification_item-border-active); } +.ui5-nli-content-wrapper { + display: flex; + flex-direction: row-reverse; + padding-inline: var(--_ui5-notification_item-root-padding-inline); + padding-block: 1rem; +} + .ui5-nli-content { display: flex; flex-direction: column; diff --git a/packages/fiori/src/themes/NotificationListItemBase.css b/packages/fiori/src/themes/NotificationListItemBase.css index 914815392829..d600be18d4ad 100644 --- a/packages/fiori/src/themes/NotificationListItemBase.css +++ b/packages/fiori/src/themes/NotificationListItemBase.css @@ -26,12 +26,4 @@ :host([loading]) { opacity: 0.6; - pointer-events: none; } - -:host([loading]) .ui5-nli-loading { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} \ No newline at end of file From cd490841672f511e4278b4f5d27937e420b86011 Mon Sep 17 00:00:00 2001 From: Petar Dimov Date: Thu, 20 Jun 2024 10:41:12 +0300 Subject: [PATCH 2/9] fix: only add loading span to aria-labelledby --- .../fiori/src/NotificationListGroupItem.hbs | 7 +- .../fiori/src/NotificationListGroupItem.ts | 9 +- packages/fiori/src/NotificationListItem.hbs | 158 +++++++++--------- packages/fiori/src/NotificationListItem.ts | 6 +- .../fiori/src/NotificationListItemBase.ts | 4 - .../fiori/src/themes/NotificationListItem.css | 4 + packages/main/src/themes/BusyIndicator.css | 6 + 7 files changed, 93 insertions(+), 101 deletions(-) diff --git a/packages/fiori/src/NotificationListGroupItem.hbs b/packages/fiori/src/NotificationListGroupItem.hbs index e999078a454c..118a06eda0b3 100644 --- a/packages/fiori/src/NotificationListGroupItem.hbs +++ b/packages/fiori/src/NotificationListGroupItem.hbs @@ -6,9 +6,9 @@ aria-labelledby="{{ariaLabelledBy}}" aria-description="{{accInvisibleText}}" aria-level="1" - aria-busy="{{loading}}" > {{#if loading}} + {{loadingText}} {{titleText}}
- - {{#if isLoading}} - {{loadingText}} - {{/if}} -
diff --git a/packages/fiori/src/NotificationListGroupItem.ts b/packages/fiori/src/NotificationListGroupItem.ts index e3bc6a29c2b7..ad7ca44311c5 100644 --- a/packages/fiori/src/NotificationListGroupItem.ts +++ b/packages/fiori/src/NotificationListGroupItem.ts @@ -144,17 +144,14 @@ class NotificationListGroupItem extends NotificationListItemBase { } get ariaLabelledBy() { + const id = this._id; + if (this.loading) { - return null; + return `${id}-loading`; } - const id = this._id; const ids = []; - if (this.isLoading) { - ids.push(`${id}-loading`); - } - if (this.hasTitleText) { ids.push(`${id}-title-text`); } diff --git a/packages/fiori/src/NotificationListItem.hbs b/packages/fiori/src/NotificationListItem.hbs index fb0c2a8ed316..3726401b1be2 100644 --- a/packages/fiori/src/NotificationListItem.hbs +++ b/packages/fiori/src/NotificationListItem.hbs @@ -7,9 +7,9 @@ tabindex="{{forcedTabIndex}}" aria-labelledby="{{ariaLabelledBy}}" aria-level="2" - aria-busy="{{loading}}" > {{#if loading}} + {{loadingText}} {{#*inline "content"}} -
- {{#if hasImportance}} - - - {{importanceText}} - - {{/if}} - -
- {{#if hasState}} - - +
+
+ {{#if hasImportance}} + + + {{importanceText}} + {{/if}} -
- {{stateText}} - {{titleText}} +
+ {{#if hasState}} + + + {{/if}} + +
+ {{stateText}} + {{titleText}} +
-
- {{#if isLoading}} - {{loadingText}} - {{/if}} + {{readText}} - {{readText}} + {{#if hasDesc}} +
+ +
+ {{/if}} - {{#if hasDesc}} -
- + - {{/if}} +
- -
- {{#if showMenu}} - - {{/if}} - {{#if showClose}} - - {{/if}} -
+ - - - {{/inline}} \ No newline at end of file diff --git a/packages/fiori/src/NotificationListItem.ts b/packages/fiori/src/NotificationListItem.ts index 6372537f6ea1..5560904ccc4b 100644 --- a/packages/fiori/src/NotificationListItem.ts +++ b/packages/fiori/src/NotificationListItem.ts @@ -380,7 +380,7 @@ class NotificationListItem extends NotificationListItemBase { const id = this._id; if (this.loading) { - return null; + return `${id}-loading`; } const ids = []; @@ -393,10 +393,6 @@ class NotificationListItem extends NotificationListItemBase { ids.push(`${id}-title-text`); } - if (this.isLoading) { - ids.push(`${id}-loading`); - } - ids.push(`${id}-read`); if (this.hasDesc) { diff --git a/packages/fiori/src/NotificationListItemBase.ts b/packages/fiori/src/NotificationListItemBase.ts index 5bab8d9199f4..fd16111ab8e2 100644 --- a/packages/fiori/src/NotificationListItemBase.ts +++ b/packages/fiori/src/NotificationListItemBase.ts @@ -70,10 +70,6 @@ class NotificationListItemBase extends ListItemBase { return NotificationListItemBase.i18nFioriBundle.getText(NOTIFICATION_LIST_ITEM_LOADING); } - get isLoading() { - return this.loading; - } - /** * Event handlers */ diff --git a/packages/fiori/src/themes/NotificationListItem.css b/packages/fiori/src/themes/NotificationListItem.css index 0b17b1ac972b..20822ce413a8 100644 --- a/packages/fiori/src/themes/NotificationListItem.css +++ b/packages/fiori/src/themes/NotificationListItem.css @@ -196,3 +196,7 @@ bottom: var(--_ui5-notification_item-focus-offset); left: var(--_ui5-notification_item-focus-offset); } + +[ui5-busy-indicator] { + border-radius: var(--_ui5-notification_item-border-radius); +} diff --git a/packages/main/src/themes/BusyIndicator.css b/packages/main/src/themes/BusyIndicator.css index 50f131d5a566..be72e2d6b4c2 100644 --- a/packages/main/src/themes/BusyIndicator.css +++ b/packages/main/src/themes/BusyIndicator.css @@ -2,6 +2,10 @@ display: inline-block; } +:host { + border-radius: unset; +} + :host([_is-busy]) { color: var(--_ui5_busy_indicator_color); } @@ -73,6 +77,7 @@ position: relative; background-color: inherit; height: inherit; + border-radius: inherit; } .ui5-busy-indicator-busy-area { @@ -87,6 +92,7 @@ align-items: center; background-color: inherit; flex-direction: column; + border-radius: inherit; } :host(:not(:empty)) .ui5-busy-indicator-busy-area { From 41e202ba88daf9345a78f12ba7dbd0bef3782fff Mon Sep 17 00:00:00 2001 From: Petar Dimov Date: Thu, 20 Jun 2024 12:08:10 +0300 Subject: [PATCH 3/9] fix: make busy indicator non-interactive --- packages/fiori/src/NotificationListGroupItem.hbs | 1 + packages/fiori/src/NotificationListItem.hbs | 1 + packages/fiori/src/themes/NotificationListGroupItem.css | 4 ++-- packages/fiori/src/themes/NotificationListItem.css | 4 ++++ packages/fiori/src/themes/NotificationListItemBase.css | 4 ---- 5 files changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/fiori/src/NotificationListGroupItem.hbs b/packages/fiori/src/NotificationListGroupItem.hbs index 118a06eda0b3..11f1bd7e96ab 100644 --- a/packages/fiori/src/NotificationListGroupItem.hbs +++ b/packages/fiori/src/NotificationListGroupItem.hbs @@ -13,6 +13,7 @@ delay="{{loadingDelay}}" active class="ui5-nli-loading" + inert > {{> content}} diff --git a/packages/fiori/src/NotificationListItem.hbs b/packages/fiori/src/NotificationListItem.hbs index 3726401b1be2..bae1cacfa1f8 100644 --- a/packages/fiori/src/NotificationListItem.hbs +++ b/packages/fiori/src/NotificationListItem.hbs @@ -15,6 +15,7 @@ delay="{{loadingDelay}}" active class="ui5-nli-loading" + inert > {{> content}} diff --git a/packages/fiori/src/themes/NotificationListGroupItem.css b/packages/fiori/src/themes/NotificationListGroupItem.css index 6055c9f822c9..549b7201c142 100644 --- a/packages/fiori/src/themes/NotificationListGroupItem.css +++ b/packages/fiori/src/themes/NotificationListGroupItem.css @@ -10,12 +10,12 @@ } .ui5-nli-group-root { - position: relative; width: 100%; - box-sizing: border-box; } .ui5-nli-group-content-wrapper { + position: relative; + box-sizing: border-box; width: 100%; display: flex; flex-direction: column; diff --git a/packages/fiori/src/themes/NotificationListItem.css b/packages/fiori/src/themes/NotificationListItem.css index 20822ce413a8..7c04f303f839 100644 --- a/packages/fiori/src/themes/NotificationListItem.css +++ b/packages/fiori/src/themes/NotificationListItem.css @@ -82,10 +82,13 @@ } .ui5-nli-content-wrapper { + width: 100%; display: flex; flex-direction: row-reverse; padding-inline: var(--_ui5-notification_item-root-padding-inline); padding-block: 1rem; + position: relative; + box-sizing: border-box; } .ui5-nli-content { @@ -198,5 +201,6 @@ } [ui5-busy-indicator] { + width: 100%; border-radius: var(--_ui5-notification_item-border-radius); } diff --git a/packages/fiori/src/themes/NotificationListItemBase.css b/packages/fiori/src/themes/NotificationListItemBase.css index 727a4415f5a1..8d1fe1d44d88 100644 --- a/packages/fiori/src/themes/NotificationListItemBase.css +++ b/packages/fiori/src/themes/NotificationListItemBase.css @@ -23,7 +23,3 @@ left: 0; pointer-events: none; } - -:host([loading]) { - opacity: 0.6; -} From bde5e381c8a9c48441df89414f8aca27ff5f0631 Mon Sep 17 00:00:00 2001 From: Petar Dimov Date: Thu, 20 Jun 2024 13:47:48 +0300 Subject: [PATCH 4/9] refactor: replace hbs partials with busy indicator active attribute --- .../fiori/src/NotificationListGroupItem.hbs | 81 ++++---- packages/fiori/src/NotificationListItem.hbs | 183 +++++++++--------- 2 files changed, 124 insertions(+), 140 deletions(-) diff --git a/packages/fiori/src/NotificationListGroupItem.hbs b/packages/fiori/src/NotificationListGroupItem.hbs index 11f1bd7e96ab..99baf070c552 100644 --- a/packages/fiori/src/NotificationListGroupItem.hbs +++ b/packages/fiori/src/NotificationListGroupItem.hbs @@ -9,50 +9,43 @@ > {{#if loading}} {{loadingText}} - - {{> content}} - - {{else}} - {{> content}} {{/if}} - - -{{#*inline "content"}} -
-
- -
- {{titleText}} + +
+
+ +
+ {{titleText}} +
+
-
+ + +
- - - - -
-{{/inline}} + + \ No newline at end of file diff --git a/packages/fiori/src/NotificationListItem.hbs b/packages/fiori/src/NotificationListItem.hbs index bae1cacfa1f8..294cea04e5e9 100644 --- a/packages/fiori/src/NotificationListItem.hbs +++ b/packages/fiori/src/NotificationListItem.hbs @@ -10,108 +10,99 @@ > {{#if loading}} {{loadingText}} - - {{> content}} - - {{else}} - {{> content}} - {{/if}} - - -{{#*inline "content"}} -
-
- {{#if hasImportance}} - - - {{importanceText}} - - {{/if}} - -
- {{#if hasState}} - - + {{#/if}} + +
+
+ {{#if hasImportance}} + + + {{importanceText}} + {{/if}} -
- {{stateText}} - {{titleText}} +
+ {{#if hasState}} + + + {{/if}} + +
+ {{stateText}} + {{titleText}} +
-
- {{readText}} + {{readText}} - {{#if hasDesc}} -
- -
- {{/if}} + {{#if hasDesc}} +
+ +
+ {{/if}} - - -
- {{#if showMenu}} - - {{/if}} - {{#if showClose}} - - {{/if}} -
- - - - -
-{{/inline}} \ No newline at end of file + + \ No newline at end of file From 3b3b956c5fd641c2a633618354629a1f48c62e0a Mon Sep 17 00:00:00 2001 From: Petar Dimov Date: Thu, 20 Jun 2024 14:57:06 +0300 Subject: [PATCH 5/9] fix: template typo --- packages/fiori/src/NotificationListItem.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fiori/src/NotificationListItem.hbs b/packages/fiori/src/NotificationListItem.hbs index 294cea04e5e9..9ced3eeb07e4 100644 --- a/packages/fiori/src/NotificationListItem.hbs +++ b/packages/fiori/src/NotificationListItem.hbs @@ -10,7 +10,7 @@ > {{#if loading}} {{loadingText}} - {{#/if}} + {{/if}} Date: Mon, 1 Jul 2024 15:23:39 +0300 Subject: [PATCH 6/9] test: adapt failing tests --- packages/fiori/test/specs/NotificationList.spec.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/fiori/test/specs/NotificationList.spec.js b/packages/fiori/test/specs/NotificationList.spec.js index 6b49a3d262a7..471d41c3db62 100644 --- a/packages/fiori/test/specs/NotificationList.spec.js +++ b/packages/fiori/test/specs/NotificationList.spec.js @@ -234,11 +234,7 @@ describe("Notification List Item Tests", () => { const EXPECTED_ARIA_LABELLED_BY3 = `${importantId3} ${titleTextId3} ${readId3} ${descriptionId3} ${footerId3}`; const loadingId4 = `${await loadingItem.getProperty("_id")}-loading`; - const titleTextId4 = `${await loadingItem.getProperty("_id")}-title-text`; - const readId4 = `${await loadingItem.getProperty("_id")}-read`; - const descriptionId4 = `${await loadingItem.getProperty("_id")}-description`; - const footerId4 = `${await loadingItem.getProperty("_id")}-footnotes`; - const EXPECTED_ARIA_LABELLED_BY4 = `${titleTextId4} ${loadingId4} ${readId4} ${descriptionId4} ${footerId4}`; + const EXPECTED_LOADING_ARIA_LABELLED_BY = `${loadingId4}`; // assert assert.strictEqual(await firstItemRoot.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLED_BY, @@ -249,7 +245,7 @@ describe("Notification List Item Tests", () => { assert.strictEqual(await thirdItemRoot.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLED_BY3, "The ariaLabelledBy text is correct."); - assert.strictEqual(await loadingItemRoot.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLED_BY4, + assert.strictEqual(await loadingItemRoot.getAttribute("aria-labelledby"), EXPECTED_LOADING_ARIA_LABELLED_BY, "The ariaLabelledBy text is correct."); }); @@ -337,12 +333,11 @@ describe("Notification List Item Tests", () => { const fourthGroupItem = await browser.$("#nlgi4"); const fourthGroupRoot = await browser.$("#nlgi4").shadow$(".ui5-nli-group-root"); const loadingId = `${await fourthGroupItem.getProperty("_id")}-loading`; - const titleId = `${await fourthGroupItem.getProperty("_id")}-title-text`; - const EXPECTED_ARIA_LABELLED_BY = `${loadingId} ${titleId}`; + const EXPECTED_LOADING_ARIA_LABELLED_BY = `${loadingId}`; assert.strictEqual(await firstGroupList.getAttribute("aria-labelledby"), id, "The aria-lebelledby is correct."); assert.strictEqual(await firstGroupRoot.getAttribute("aria-labelledby"), id, "The aria-lebelledby is correct."); - assert.strictEqual(await fourthGroupRoot.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLED_BY, "The aria-lebelledby is correct."); + assert.strictEqual(await fourthGroupRoot.getAttribute("aria-labelledby"), EXPECTED_LOADING_ARIA_LABELLED_BY, "The aria-lebelledby is correct."); }); it("tests Group Item 'aria-description' and 'aria-level'", async () => { @@ -389,7 +384,6 @@ describe("Keyboard navigation", () => { await browser.url(`test/pages/NotificationList_test_page.html`); }); - it("Items navigation", async () => { await browser.executeAsync(done => { document.getElementById("nlgi1").focus(); From 4e393d2848577562509671cdfd44cc065ca8cec6 Mon Sep 17 00:00:00 2001 From: Petar Dimov Date: Mon, 1 Jul 2024 15:48:20 +0300 Subject: [PATCH 7/9] test: add test --- .../pages/NotificationList_test_page.html | 63 +- .../fiori/test/specs/NotificationList.spec.js | 765 +++++++++--------- 2 files changed, 431 insertions(+), 397 deletions(-) diff --git a/packages/fiori/test/pages/NotificationList_test_page.html b/packages/fiori/test/pages/NotificationList_test_page.html index 9230cf7354c9..a214f51aa2d8 100644 --- a/packages/fiori/test/pages/NotificationList_test_page.html +++ b/packages/fiori/test/pages/NotificationList_test_page.html @@ -171,30 +171,47 @@ - + + And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc. + + + Office Notifications + 3 Days + + + + + + + + + - And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc. - - - Office Notifications - 3 Days - - - - - - - + + And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc. + + + +

diff --git a/packages/fiori/test/specs/NotificationList.spec.js b/packages/fiori/test/specs/NotificationList.spec.js index 471d41c3db62..401c2c38f9de 100644 --- a/packages/fiori/test/specs/NotificationList.spec.js +++ b/packages/fiori/test/specs/NotificationList.spec.js @@ -1,383 +1,383 @@ import { assert } from "chai"; -describe("Notification List Item Tests", () => { - before(async () => { - await browser.url(`test/pages/NotificationList_test_page.html`); - }); - - // Notification Group List Item specific tests follows - - it("tests itemToggle fired", async () => { - const toggleInput = await browser.$("#toggleInput"); - const EXPECTED_RESULT = "Orders"; - const firstGroupItem = await browser.$("#nlgi1"); - const btnListGroupItemToggle = await firstGroupItem.shadow$(".ui5-nli-group-header"); - - // act - await btnListGroupItemToggle.click(); - - // assert - assert.strictEqual(await toggleInput.getProperty("value"), EXPECTED_RESULT, - "The itemToggle of list group item has been fired."); - - // reset - await btnListGroupItemToggle.click(); - }); - - it("tests Group List Header keyboard shortcuts ", async () => { - const thirdGroup = await browser.$("#nlgi3"); - const thirdGroupList = thirdGroup.shadow$(".ui5-nli-group-items"); - const thirdGroupRoot= thirdGroup.shadow$(".ui5-nli-group-root") - - assert.strictEqual((await thirdGroupList.getCSSProperty("display")).value, 'none', "The group is collapsed (items are not visible)."); - // act - await thirdGroup.click(); // expand - - assert.strictEqual((await thirdGroupList.getCSSProperty("display")).value, 'block', "The group is expanded (items are visible)."); - // act - await thirdGroup.click(); // collapse - - assert.strictEqual((await thirdGroupList.getCSSProperty("display")).value, 'none', "The group is collapsed (items are not visible)."); - // act - await thirdGroupRoot.keys("ArrowRight"); - - assert.strictEqual((await thirdGroupList.getCSSProperty("display")).value, 'block', "The group is expanded (items are visible)."); - // act - await thirdGroupRoot.keys("ArrowLeft"); - - assert.strictEqual((await thirdGroupList.getCSSProperty("display")).value, 'none', "The group is collapsed (items are not visible)."); - // act - await browser.keys("+"); - - assert.strictEqual((await thirdGroupList.getCSSProperty("display")).value, 'block', "The group is collapsed (items are not visible)."); - // act - await thirdGroupRoot.keys("-"); - - assert.strictEqual((await thirdGroupList.getCSSProperty("display")).value, 'none', "The group is collapsed (items are not visible)."); - // act - await thirdGroupRoot.keys("Space"); - - assert.strictEqual((await thirdGroupList.getCSSProperty("display")).value, 'block', "The group is collapsed (items are not visible)."); - // act - await thirdGroupRoot.click(); - - assert.strictEqual((await thirdGroupList.getCSSProperty("display")).value, 'none', "The group is collapsed (items are not visible)."); - }); - - // Notification List Item specific tests follows - - it("tests itemClick fired", async () => { - const clickInput = await browser.$("#clickInput"); - const EXPECTED_RESULT_1 = "New order #2201"; - const EXPECTED_RESULT_2 = "New order #2202"; - const firstItem = await browser.$("#nli1"); - - - // act - await firstItem.click(); - - // assert - assert.strictEqual(await clickInput.getProperty("value"), EXPECTED_RESULT_1, - "The itemClick has been fired."); - - // act - await firstItem.keys("ArrowDown"); - await firstItem.keys("Enter"); - - // assert - assert.strictEqual(await clickInput.getProperty("value"), EXPECTED_RESULT_2, - "The itemClick has been fired."); - }); - - it("tests itemClose fired", async () => { - const closeInput = await browser.$("#closeInput"); - const EXPECTED_RESULT_1 = "New order #2201"; - const EXPECTED_RESULT_2 = "New order #2202"; - const firstItem = await browser.$("#nli1"); - const btnListItemClose = await firstItem.shadow$("[close-btn]"); - - // act - await btnListItemClose.click(); - - // assert - assert.strictEqual(await closeInput.getProperty("value"), EXPECTED_RESULT_1, - "The itemClose of list item has been fired."); - - // act - await firstItem.click(); - await firstItem.keys("ArrowDown"); - await firstItem.keys("Delete"); - - // assert - assert.strictEqual(await closeInput.getProperty("value"), EXPECTED_RESULT_2, - "The itemClose of list item has been fired."); - }); - - it("tests click on ShowMore", async () => { - const firstItem = await browser.$("#nli3a"); - const btnListItemShowMore = await firstItem.shadow$("[showMore-btn]"); - const content = await firstItem.shadow$(".ui5-nli-content"); - const title = await firstItem.shadow$(".ui5-nli-title-text"); - - const hightBeforeContent = await content.getSize("height"); - const hightBeforeTitle = await title.getSize("height"); - - // act - await btnListItemShowMore.click(); - - const hightAfterContent = await content.getSize("height"); - const hightAfterTitle = await title.getSize("height"); - - // assert - assert.isAbove(hightAfterContent, hightBeforeContent, - "The content has been expanded by the ShowMore button."); - assert.isAbove(hightAfterTitle, hightBeforeTitle, - "The title has been expanded by the ShowMore button."); - - // act - await firstItem.click(); - await firstItem.keys(["Enter", "Shift"]); - - const hightAfterKeysContent = await content.getSize("height"); - const hightAfterKeysTitle = await title.getSize("height"); - // assert - assert.isAbove(hightAfterContent, hightAfterKeysContent, - "The content has been collapsed by the Shift+Enter keyboard combination."); - assert.isAbove(hightAfterTitle, hightAfterKeysTitle, - "The title has been collapsed by the Shift+Enter keyboard combination."); - }); - - it("tests no ShowMore, when truncate is not enabled", async () => { - const thirdItem = await browser.$("#nli3"); - const btnListItemShowMore = await thirdItem.shadow$("[showMore-btn]"); - - assert.strictEqual(await btnListItemShowMore.getAttribute("hidden"), "true", - "The ShowMore button is not displayed."); - }); - - it("tests busy indicator is displayed", async () => { - const busyItem = await browser.$("#nli4"); - const busyIndicator = await busyItem.shadow$(".ui5-nli-loading"); - - assert.ok(await busyIndicator.isExisting(), "The busy indicator is displayed"); - }); - - it("tests state", async () => { - const secondItem = await browser.$("#nli2"); - const thirdItem = await browser.$("#nli3"); - const state2 = await secondItem.shadow$(".ui5-state-icon").getAttribute("name"); - const state3 = await thirdItem.shadow$(".ui5-state-icon").getAttribute("name"); - - assert.strictEqual(state2, "alert", "The 'Warning' state icon is correctly displayed."); - assert.strictEqual(state3, "error", "The 'Error' state icon is correctly displayed."); - - }); - - it("tests importance", async () => { - const secondItem = await browser.$("#nli2"); - const thirdItem = await browser.$("#nli3"); - const importance2nd = await secondItem.shadow$(".ui5-nli-content-with-importance"); - const importance3rd = await thirdItem.shadow$(".ui5-nli-content-with-importance"); - - assert.notOk(await importance2nd.isExisting(), "The importance label is not displayed in the second item."); - assert.ok(await importance3rd.isExisting(), "The importance label is correctly displayed on the third item."); - }); - - it("tests menu", async () => { - const firstItem = await browser.$("#nli1"); - const menuButton = await firstItem.shadow$(".ui5-nli-menu-btn"); - - // act - await menuButton.click(); - const menu1 = await firstItem.$("ui5-menu").hasAttribute("open"); - // assert - assert.ok(await menu1, "There is open menu."); - - // act - await firstItem.click(); - const menu2 = await firstItem.$("ui5-menu").hasAttribute("open"); - // assert - assert.notOk(await menu2, "There is no menu."); - - // act - await firstItem.click(); - await firstItem.keys(["F10", "Shift"]); - const menu3 = await firstItem.$("ui5-menu").hasAttribute("open"); - // assert - assert.ok(await menu3, "There is open menu with shift+F10."); - - }); +// describe("Notification List Item Tests", () => { +// before(async () => { +// await browser.url(`test/pages/NotificationList_test_page.html`); +// }); - // Accessibility tests follows +// // Notification Group List Item specific tests follows - it("tests List Item ACC ariaLabelledBy and ariaDescribedBy", async () => { - const firstItem = await browser.$("#nli1"); - const firstItemRoot = await firstItem.shadow$(".ui5-nli-root"); +// it("tests itemToggle fired", async () => { +// const toggleInput = await browser.$("#toggleInput"); +// const EXPECTED_RESULT = "Orders"; +// const firstGroupItem = await browser.$("#nlgi1"); +// const btnListGroupItemToggle = await firstGroupItem.shadow$(".ui5-nli-group-header"); - const thirdItem = await browser.$("#nli3"); - const thirdItemRoot = await thirdItem.shadow$(".ui5-nli-root"); +// // act +// await btnListGroupItemToggle.click(); + +// // assert +// assert.strictEqual(await toggleInput.getProperty("value"), EXPECTED_RESULT, +// "The itemToggle of list group item has been fired."); + +// // reset +// await btnListGroupItemToggle.click(); +// }); + +// it("tests Group List Header keyboard shortcuts ", async () => { +// const thirdGroup = await browser.$("#nlgi3"); +// const thirdGroupList = thirdGroup.shadow$(".ui5-nli-group-items"); +// const thirdGroupRoot= thirdGroup.shadow$(".ui5-nli-group-root") - const loadingItem = await browser.$("#nli4"); - const loadingItemRoot = await loadingItem.shadow$(".ui5-nli-root"); - - const titleTextId = `${await firstItem.getProperty("_id")}-title-text`; - const readId = `${await firstItem.getProperty("_id")}-read`; - const descriptionId = `${await firstItem.getProperty("_id")}-description`; - const footerId = `${await firstItem.getProperty("_id")}-footnotes`; - const EXPECTED_ARIA_LABELLED_BY = `${titleTextId} ${readId} ${descriptionId} ${footerId}`; - - const importantId3 = `${await thirdItem.getProperty("_id")}-importance`; - const titleTextId3 = `${await thirdItem.getProperty("_id")}-title-text`; - const readId3 = `${await thirdItem.getProperty("_id")}-read`; - const descriptionId3 = `${await thirdItem.getProperty("_id")}-description`; - const footerId3 = `${await thirdItem.getProperty("_id")}-footnotes`; - const EXPECTED_ARIA_LABELLED_BY3 = `${importantId3} ${titleTextId3} ${readId3} ${descriptionId3} ${footerId3}`; - - const loadingId4 = `${await loadingItem.getProperty("_id")}-loading`; - const EXPECTED_LOADING_ARIA_LABELLED_BY = `${loadingId4}`; - - // assert - assert.strictEqual(await firstItemRoot.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLED_BY, - "The ariaLabelledBy text is correct."); - assert.strictEqual(await firstItemRoot.getAttribute("aria-level"), "2", - "The ariaLevel text is correct."); - - assert.strictEqual(await thirdItemRoot.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLED_BY3, - "The ariaLabelledBy text is correct."); - - assert.strictEqual(await loadingItemRoot.getAttribute("aria-labelledby"), EXPECTED_LOADING_ARIA_LABELLED_BY, - "The ariaLabelledBy text is correct."); - }); - - it("tests List Item ACC invisible texts", async () => { - const firstItem = await browser.$("#nli1"); - const secondItem = await browser.$("#nli2"); - const invisibleTextStatus1 = await firstItem.shadow$(".ui5-nli-root").$$(".ui5-hidden-text")[0]; - const tooltipStatus1 = await firstItem.shadow$(".ui5-nli-root").$(".ui5-state-icon"); - const invisibleTextItem1 = await firstItem.shadow$(".ui5-nli-root").$$(".ui5-hidden-text")[1]; - const invisibleTextStatus2 = await secondItem.shadow$(".ui5-nli-root").$$(".ui5-hidden-text")[0]; - const tooltipStatus2 = await secondItem.shadow$(".ui5-nli-root").$(".ui5-state-icon"); - const invisibleTextItem2 = await secondItem.shadow$(".ui5-nli-root").$$(".ui5-hidden-text")[1]; - - // assert - assert.strictEqual(await invisibleTextStatus1.getText(), "Status Positive", "The invisible text for the status is correct."); - assert.strictEqual(await invisibleTextItem1.getText(), "unread", "The invisible text for the Notification item is correct."); - assert.strictEqual(await tooltipStatus1.getAttribute("accessible-name"), "Status Positive", "The tooltip (aria-label) text for the status is correct."); - - assert.strictEqual(await invisibleTextStatus2.getText(), "Status Critical", "The invisible text for the status is correct."); - assert.strictEqual(await invisibleTextItem2.getText(), "read", "The invisible text for the Notification item is correct."); - assert.strictEqual(await tooltipStatus2.getAttribute("accessible-name"), "Status Critical", "The tooltip (aria-label) text for the status is correct."); - }); - - it("tests Menu (actions / '...') button ACC attributes", async () => { - const firstItem = await browser.$("#nli1"); - const menuButton = await firstItem.shadow$(".ui5-nli-menu-btn").shadow$("button"); - const thirdItem = await browser.$("#nli3"); - const btnListItemMenu3 = await thirdItem.shadow$(".ui5-nli-menu-btn"); - - // assert - assert.strictEqual(await menuButton.getAttribute("title"), 'Actions', "The tooltip text is correct."); - assert.strictEqual(await menuButton.getAttribute("aria-haspopup"), 'menu', "The aria-haspopup text is correct."); - - assert.notOk(await btnListItemMenu3.isExisting(), "There is no '...' button rendered"); - }); - - it("tests List Item 'Close' button ACC attributes", async () => { - const firstItem = await browser.$("#nli1"); - const btnListItemClose1 = await firstItem.shadow$("[close-btn]").shadow$("button"); - const thirdItem = await browser.$("#nli3"); - const btnListItemClose3 = await thirdItem.shadow$("[close-btn]"); - - assert.strictEqual(await btnListItemClose1.getAttribute("aria-label"), 'Close', "The aria-label is correct."); - assert.strictEqual(await btnListItemClose1.getAttribute("title"), 'Close', "The title is correct."); - assert.strictEqual(await btnListItemClose1.getAttribute("role"), 'button', "The role is correct."); - - assert.notOk(await btnListItemClose3.isExisting(), "There is no 'Close' button rendered"); - - }); - - it("tests click on ShowMore", async () => { - var firstItem = await browser.$("#nli3a"); - var btnListItemShowMore = await firstItem.shadow$("[showMore-btn]"); - var btnListItemShowMoreRoot = await btnListItemShowMore.shadow$(".ui5-link-root"); - - assert.strictEqual(await btnListItemShowMoreRoot.getAttribute("aria-label"), 'More button. Show the full texts', "The aria-label is correct."); - assert.strictEqual(await btnListItemShowMoreRoot.getAttribute("role"), 'button', "The role is correct."); - assert.strictEqual(await btnListItemShowMoreRoot.getAttribute("aria-expanded"), 'false', "The aria-expanded is correct."); - - // act - await btnListItemShowMore.click(); - - firstItem = await browser.$("#nli3a"); - btnListItemShowMore = await firstItem.shadow$("[showMore-btn]"); - btnListItemShowMoreRoot = await btnListItemShowMore.shadow$(".ui5-link-root"); - - assert.strictEqual(await btnListItemShowMoreRoot.getAttribute("aria-label"), 'Less button. Show the texts with truncation', "The aria-label is correct."); - assert.strictEqual(await btnListItemShowMoreRoot.getAttribute("role"), 'button', "The role is correct."); - assert.strictEqual(await btnListItemShowMoreRoot.getAttribute("aria-expanded"), 'true', "The aria-expanded is correct."); - }); - - it("tests Group Header Text ACC attributes", async () => { - const firstGroupText = await browser.$("#nlgi1").shadow$(".ui5-nli-group-title-text"); - - assert.strictEqual(await firstGroupText.getAttribute("role"), 'heading', "The role is correct."); - assert.strictEqual(await firstGroupText.getAttribute("aria-level"), '2', "The aria-level is correct."); - }); - - it("tests Group List aria-labelledby", async () => { - const firstGroupItem = await browser.$("#nlgi1"); - const firstGroupList = await browser.$("#nlgi1").shadow$(".ui5-nli-group-items"); - const firstGroupRoot = await browser.$("#nlgi1").shadow$(".ui5-nli-group-root"); - const id = `${await firstGroupItem.getProperty("_id")}-title-text`; - - const fourthGroupItem = await browser.$("#nlgi4"); - const fourthGroupRoot = await browser.$("#nlgi4").shadow$(".ui5-nli-group-root"); - const loadingId = `${await fourthGroupItem.getProperty("_id")}-loading`; - const EXPECTED_LOADING_ARIA_LABELLED_BY = `${loadingId}`; +// assert.strictEqual((await thirdGroupList.getCSSProperty("display")).value, 'none', "The group is collapsed (items are not visible)."); +// // act +// await thirdGroup.click(); // expand + +// assert.strictEqual((await thirdGroupList.getCSSProperty("display")).value, 'block', "The group is expanded (items are visible)."); +// // act +// await thirdGroup.click(); // collapse + +// assert.strictEqual((await thirdGroupList.getCSSProperty("display")).value, 'none', "The group is collapsed (items are not visible)."); +// // act +// await thirdGroupRoot.keys("ArrowRight"); + +// assert.strictEqual((await thirdGroupList.getCSSProperty("display")).value, 'block', "The group is expanded (items are visible)."); +// // act +// await thirdGroupRoot.keys("ArrowLeft"); + +// assert.strictEqual((await thirdGroupList.getCSSProperty("display")).value, 'none', "The group is collapsed (items are not visible)."); +// // act +// await browser.keys("+"); + +// assert.strictEqual((await thirdGroupList.getCSSProperty("display")).value, 'block', "The group is collapsed (items are not visible)."); +// // act +// await thirdGroupRoot.keys("-"); + +// assert.strictEqual((await thirdGroupList.getCSSProperty("display")).value, 'none', "The group is collapsed (items are not visible)."); +// // act +// await thirdGroupRoot.keys("Space"); + +// assert.strictEqual((await thirdGroupList.getCSSProperty("display")).value, 'block', "The group is collapsed (items are not visible)."); +// // act +// await thirdGroupRoot.click(); + +// assert.strictEqual((await thirdGroupList.getCSSProperty("display")).value, 'none', "The group is collapsed (items are not visible)."); +// }); + +// // Notification List Item specific tests follows + +// it("tests itemClick fired", async () => { +// const clickInput = await browser.$("#clickInput"); +// const EXPECTED_RESULT_1 = "New order #2201"; +// const EXPECTED_RESULT_2 = "New order #2202"; +// const firstItem = await browser.$("#nli1"); + + +// // act +// await firstItem.click(); + +// // assert +// assert.strictEqual(await clickInput.getProperty("value"), EXPECTED_RESULT_1, +// "The itemClick has been fired."); + +// // act +// await firstItem.keys("ArrowDown"); +// await firstItem.keys("Enter"); + +// // assert +// assert.strictEqual(await clickInput.getProperty("value"), EXPECTED_RESULT_2, +// "The itemClick has been fired."); +// }); + +// it("tests itemClose fired", async () => { +// const closeInput = await browser.$("#closeInput"); +// const EXPECTED_RESULT_1 = "New order #2201"; +// const EXPECTED_RESULT_2 = "New order #2202"; +// const firstItem = await browser.$("#nli1"); +// const btnListItemClose = await firstItem.shadow$("[close-btn]"); + +// // act +// await btnListItemClose.click(); + +// // assert +// assert.strictEqual(await closeInput.getProperty("value"), EXPECTED_RESULT_1, +// "The itemClose of list item has been fired."); + +// // act +// await firstItem.click(); +// await firstItem.keys("ArrowDown"); +// await firstItem.keys("Delete"); + +// // assert +// assert.strictEqual(await closeInput.getProperty("value"), EXPECTED_RESULT_2, +// "The itemClose of list item has been fired."); +// }); + +// it("tests click on ShowMore", async () => { +// const firstItem = await browser.$("#nli3a"); +// const btnListItemShowMore = await firstItem.shadow$("[showMore-btn]"); +// const content = await firstItem.shadow$(".ui5-nli-content"); +// const title = await firstItem.shadow$(".ui5-nli-title-text"); + +// const hightBeforeContent = await content.getSize("height"); +// const hightBeforeTitle = await title.getSize("height"); + +// // act +// await btnListItemShowMore.click(); + +// const hightAfterContent = await content.getSize("height"); +// const hightAfterTitle = await title.getSize("height"); + +// // assert +// assert.isAbove(hightAfterContent, hightBeforeContent, +// "The content has been expanded by the ShowMore button."); +// assert.isAbove(hightAfterTitle, hightBeforeTitle, +// "The title has been expanded by the ShowMore button."); + +// // act +// await firstItem.click(); +// await firstItem.keys(["Enter", "Shift"]); + +// const hightAfterKeysContent = await content.getSize("height"); +// const hightAfterKeysTitle = await title.getSize("height"); +// // assert +// assert.isAbove(hightAfterContent, hightAfterKeysContent, +// "The content has been collapsed by the Shift+Enter keyboard combination."); +// assert.isAbove(hightAfterTitle, hightAfterKeysTitle, +// "The title has been collapsed by the Shift+Enter keyboard combination."); +// }); + +// it("tests no ShowMore, when truncate is not enabled", async () => { +// const thirdItem = await browser.$("#nli3"); +// const btnListItemShowMore = await thirdItem.shadow$("[showMore-btn]"); + +// assert.strictEqual(await btnListItemShowMore.getAttribute("hidden"), "true", +// "The ShowMore button is not displayed."); +// }); + +// it("tests busy indicator is displayed", async () => { +// const busyItem = await browser.$("#nli4"); +// const busyIndicator = await busyItem.shadow$(".ui5-nli-loading"); + +// assert.ok(await busyIndicator.isExisting(), "The busy indicator is displayed"); +// }); + +// it("tests state", async () => { +// const secondItem = await browser.$("#nli2"); +// const thirdItem = await browser.$("#nli3"); +// const state2 = await secondItem.shadow$(".ui5-state-icon").getAttribute("name"); +// const state3 = await thirdItem.shadow$(".ui5-state-icon").getAttribute("name"); + +// assert.strictEqual(state2, "alert", "The 'Warning' state icon is correctly displayed."); +// assert.strictEqual(state3, "error", "The 'Error' state icon is correctly displayed."); + +// }); + +// it("tests importance", async () => { +// const secondItem = await browser.$("#nli2"); +// const thirdItem = await browser.$("#nli3"); +// const importance2nd = await secondItem.shadow$(".ui5-nli-content-with-importance"); +// const importance3rd = await thirdItem.shadow$(".ui5-nli-content-with-importance"); + +// assert.notOk(await importance2nd.isExisting(), "The importance label is not displayed in the second item."); +// assert.ok(await importance3rd.isExisting(), "The importance label is correctly displayed on the third item."); +// }); + +// it("tests menu", async () => { +// const firstItem = await browser.$("#nli1"); +// const menuButton = await firstItem.shadow$(".ui5-nli-menu-btn"); + +// // act +// await menuButton.click(); +// const menu1 = await firstItem.$("ui5-menu").hasAttribute("open"); +// // assert +// assert.ok(await menu1, "There is open menu."); + +// // act +// await firstItem.click(); +// const menu2 = await firstItem.$("ui5-menu").hasAttribute("open"); +// // assert +// assert.notOk(await menu2, "There is no menu."); + +// // act +// await firstItem.click(); +// await firstItem.keys(["F10", "Shift"]); +// const menu3 = await firstItem.$("ui5-menu").hasAttribute("open"); +// // assert +// assert.ok(await menu3, "There is open menu with shift+F10."); + +// }); + +// // Accessibility tests follows + +// it("tests List Item ACC ariaLabelledBy and ariaDescribedBy", async () => { +// const firstItem = await browser.$("#nli1"); +// const firstItemRoot = await firstItem.shadow$(".ui5-nli-root"); + +// const thirdItem = await browser.$("#nli3"); +// const thirdItemRoot = await thirdItem.shadow$(".ui5-nli-root"); + +// const loadingItem = await browser.$("#nli4"); +// const loadingItemRoot = await loadingItem.shadow$(".ui5-nli-root"); + +// const titleTextId = `${await firstItem.getProperty("_id")}-title-text`; +// const readId = `${await firstItem.getProperty("_id")}-read`; +// const descriptionId = `${await firstItem.getProperty("_id")}-description`; +// const footerId = `${await firstItem.getProperty("_id")}-footnotes`; +// const EXPECTED_ARIA_LABELLED_BY = `${titleTextId} ${readId} ${descriptionId} ${footerId}`; + +// const importantId3 = `${await thirdItem.getProperty("_id")}-importance`; +// const titleTextId3 = `${await thirdItem.getProperty("_id")}-title-text`; +// const readId3 = `${await thirdItem.getProperty("_id")}-read`; +// const descriptionId3 = `${await thirdItem.getProperty("_id")}-description`; +// const footerId3 = `${await thirdItem.getProperty("_id")}-footnotes`; +// const EXPECTED_ARIA_LABELLED_BY3 = `${importantId3} ${titleTextId3} ${readId3} ${descriptionId3} ${footerId3}`; + +// const loadingId4 = `${await loadingItem.getProperty("_id")}-loading`; +// const EXPECTED_LOADING_ARIA_LABELLED_BY = `${loadingId4}`; + +// // assert +// assert.strictEqual(await firstItemRoot.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLED_BY, +// "The ariaLabelledBy text is correct."); +// assert.strictEqual(await firstItemRoot.getAttribute("aria-level"), "2", +// "The ariaLevel text is correct."); + +// assert.strictEqual(await thirdItemRoot.getAttribute("aria-labelledby"), EXPECTED_ARIA_LABELLED_BY3, +// "The ariaLabelledBy text is correct."); + +// assert.strictEqual(await loadingItemRoot.getAttribute("aria-labelledby"), EXPECTED_LOADING_ARIA_LABELLED_BY, +// "The ariaLabelledBy text is correct."); +// }); + +// it("tests List Item ACC invisible texts", async () => { +// const firstItem = await browser.$("#nli1"); +// const secondItem = await browser.$("#nli2"); +// const invisibleTextStatus1 = await firstItem.shadow$(".ui5-nli-root").$$(".ui5-hidden-text")[0]; +// const tooltipStatus1 = await firstItem.shadow$(".ui5-nli-root").$(".ui5-state-icon"); +// const invisibleTextItem1 = await firstItem.shadow$(".ui5-nli-root").$$(".ui5-hidden-text")[1]; +// const invisibleTextStatus2 = await secondItem.shadow$(".ui5-nli-root").$$(".ui5-hidden-text")[0]; +// const tooltipStatus2 = await secondItem.shadow$(".ui5-nli-root").$(".ui5-state-icon"); +// const invisibleTextItem2 = await secondItem.shadow$(".ui5-nli-root").$$(".ui5-hidden-text")[1]; + +// // assert +// assert.strictEqual(await invisibleTextStatus1.getText(), "Status Positive", "The invisible text for the status is correct."); +// assert.strictEqual(await invisibleTextItem1.getText(), "unread", "The invisible text for the Notification item is correct."); +// assert.strictEqual(await tooltipStatus1.getAttribute("accessible-name"), "Status Positive", "The tooltip (aria-label) text for the status is correct."); + +// assert.strictEqual(await invisibleTextStatus2.getText(), "Status Critical", "The invisible text for the status is correct."); +// assert.strictEqual(await invisibleTextItem2.getText(), "read", "The invisible text for the Notification item is correct."); +// assert.strictEqual(await tooltipStatus2.getAttribute("accessible-name"), "Status Critical", "The tooltip (aria-label) text for the status is correct."); +// }); + +// it("tests Menu (actions / '...') button ACC attributes", async () => { +// const firstItem = await browser.$("#nli1"); +// const menuButton = await firstItem.shadow$(".ui5-nli-menu-btn").shadow$("button"); +// const thirdItem = await browser.$("#nli3"); +// const btnListItemMenu3 = await thirdItem.shadow$(".ui5-nli-menu-btn"); + +// // assert +// assert.strictEqual(await menuButton.getAttribute("title"), 'Actions', "The tooltip text is correct."); +// assert.strictEqual(await menuButton.getAttribute("aria-haspopup"), 'menu', "The aria-haspopup text is correct."); + +// assert.notOk(await btnListItemMenu3.isExisting(), "There is no '...' button rendered"); +// }); + +// it("tests List Item 'Close' button ACC attributes", async () => { +// const firstItem = await browser.$("#nli1"); +// const btnListItemClose1 = await firstItem.shadow$("[close-btn]").shadow$("button"); +// const thirdItem = await browser.$("#nli3"); +// const btnListItemClose3 = await thirdItem.shadow$("[close-btn]"); + +// assert.strictEqual(await btnListItemClose1.getAttribute("aria-label"), 'Close', "The aria-label is correct."); +// assert.strictEqual(await btnListItemClose1.getAttribute("title"), 'Close', "The title is correct."); +// assert.strictEqual(await btnListItemClose1.getAttribute("role"), 'button', "The role is correct."); + +// assert.notOk(await btnListItemClose3.isExisting(), "There is no 'Close' button rendered"); + +// }); + +// it("tests click on ShowMore", async () => { +// var firstItem = await browser.$("#nli3a"); +// var btnListItemShowMore = await firstItem.shadow$("[showMore-btn]"); +// var btnListItemShowMoreRoot = await btnListItemShowMore.shadow$(".ui5-link-root"); + +// assert.strictEqual(await btnListItemShowMoreRoot.getAttribute("aria-label"), 'More button. Show the full texts', "The aria-label is correct."); +// assert.strictEqual(await btnListItemShowMoreRoot.getAttribute("role"), 'button', "The role is correct."); +// assert.strictEqual(await btnListItemShowMoreRoot.getAttribute("aria-expanded"), 'false', "The aria-expanded is correct."); + +// // act +// await btnListItemShowMore.click(); + +// firstItem = await browser.$("#nli3a"); +// btnListItemShowMore = await firstItem.shadow$("[showMore-btn]"); +// btnListItemShowMoreRoot = await btnListItemShowMore.shadow$(".ui5-link-root"); + +// assert.strictEqual(await btnListItemShowMoreRoot.getAttribute("aria-label"), 'Less button. Show the texts with truncation', "The aria-label is correct."); +// assert.strictEqual(await btnListItemShowMoreRoot.getAttribute("role"), 'button', "The role is correct."); +// assert.strictEqual(await btnListItemShowMoreRoot.getAttribute("aria-expanded"), 'true', "The aria-expanded is correct."); +// }); + +// it("tests Group Header Text ACC attributes", async () => { +// const firstGroupText = await browser.$("#nlgi1").shadow$(".ui5-nli-group-title-text"); + +// assert.strictEqual(await firstGroupText.getAttribute("role"), 'heading', "The role is correct."); +// assert.strictEqual(await firstGroupText.getAttribute("aria-level"), '2', "The aria-level is correct."); +// }); + +// it("tests Group List aria-labelledby", async () => { +// const firstGroupItem = await browser.$("#nlgi1"); +// const firstGroupList = await browser.$("#nlgi1").shadow$(".ui5-nli-group-items"); +// const firstGroupRoot = await browser.$("#nlgi1").shadow$(".ui5-nli-group-root"); +// const id = `${await firstGroupItem.getProperty("_id")}-title-text`; + +// const fourthGroupItem = await browser.$("#nlgi4"); +// const fourthGroupRoot = await browser.$("#nlgi4").shadow$(".ui5-nli-group-root"); +// const loadingId = `${await fourthGroupItem.getProperty("_id")}-loading`; +// const EXPECTED_LOADING_ARIA_LABELLED_BY = `${loadingId}`; - assert.strictEqual(await firstGroupList.getAttribute("aria-labelledby"), id, "The aria-lebelledby is correct."); - assert.strictEqual(await firstGroupRoot.getAttribute("aria-labelledby"), id, "The aria-lebelledby is correct."); - assert.strictEqual(await fourthGroupRoot.getAttribute("aria-labelledby"), EXPECTED_LOADING_ARIA_LABELLED_BY, "The aria-lebelledby is correct."); - }); - - it("tests Group Item 'aria-description' and 'aria-level'", async () => { - const firstGroupItemRoot = await browser.$("#nlgi1").shadow$(".ui5-nli-group-root"); - const EXPECTED_TEXT_1 = "Notification group Expanded"; - const thirdGroupItemRoot = await browser.$("#nlgi3").shadow$(".ui5-nli-group-root"); - const EXPECTED_TEXT_3 = "Notification group Collapsed"; - - assert.strictEqual(await firstGroupItemRoot.getAttribute("aria-description"), EXPECTED_TEXT_1, "The aria-description text is correct."); - assert.strictEqual(await thirdGroupItemRoot.getAttribute("aria-description"), EXPECTED_TEXT_3, "The aria-description text is correct."); - assert.strictEqual(await firstGroupItemRoot.getAttribute("aria-level"), "1", "The aria-level is correct."); - }); - - it("tests List Group Header ACC attributes when collapsed and expanded", async () => { - const groupItem2 = await browser.$("#nlgi2"); - const groupItemsList2ID = await groupItem2.shadow$(".ui5-nli-group-items").getAttribute("id"); - const groupItemHeader = await groupItem2.shadow$(".ui5-nli-group-header"); - const groupItemHeaderIcon = await groupItem2.shadow$(".ui5-nli-group-toggle-icon").shadow$("svg"); - - // assert - assert.strictEqual(await groupItemHeader.getAttribute("aria-expanded"), "true", "The aria-expanded value is correct."); - assert.strictEqual(await groupItemHeader.getAttribute("aria-controls"), groupItemsList2ID, "The aria-controls value is correct."); - assert.strictEqual(await groupItemHeader.getAttribute("role"), "button", "The tooltip value is correct."); - assert.strictEqual(await groupItemHeader.getAttribute("title"), "Expand/Collapse", "The title of the header is correct."); - assert.strictEqual(await groupItemHeaderIcon.getAttribute("aria-hidden"), "true", "The aria-hidden of the icon is correct."); - - // act - await groupItemHeader.click(); - - // assert - assert.strictEqual(await groupItemHeader.getAttribute("aria-expanded"), "false", "The aria-expanded value is correct."); - assert.strictEqual(await groupItemHeader.getAttribute("aria-controls"), groupItemsList2ID, "The aria-controls value is correct."); - assert.strictEqual(await groupItemHeader.getAttribute("role"), "button", "The tooltip value is correct."); - assert.strictEqual(await groupItemHeader.getAttribute("title"), "Expand/Collapse", "The title of the header is correct."); - assert.strictEqual(await groupItemHeaderIcon.getAttribute("aria-hidden"), "true", "The aria-hidden of the icon is correct."); - - // reset - await groupItemHeader.click(); - }); -}); +// assert.strictEqual(await firstGroupList.getAttribute("aria-labelledby"), id, "The aria-lebelledby is correct."); +// assert.strictEqual(await firstGroupRoot.getAttribute("aria-labelledby"), id, "The aria-lebelledby is correct."); +// assert.strictEqual(await fourthGroupRoot.getAttribute("aria-labelledby"), EXPECTED_LOADING_ARIA_LABELLED_BY, "The aria-lebelledby is correct."); +// }); + +// it("tests Group Item 'aria-description' and 'aria-level'", async () => { +// const firstGroupItemRoot = await browser.$("#nlgi1").shadow$(".ui5-nli-group-root"); +// const EXPECTED_TEXT_1 = "Notification group Expanded"; +// const thirdGroupItemRoot = await browser.$("#nlgi3").shadow$(".ui5-nli-group-root"); +// const EXPECTED_TEXT_3 = "Notification group Collapsed"; + +// assert.strictEqual(await firstGroupItemRoot.getAttribute("aria-description"), EXPECTED_TEXT_1, "The aria-description text is correct."); +// assert.strictEqual(await thirdGroupItemRoot.getAttribute("aria-description"), EXPECTED_TEXT_3, "The aria-description text is correct."); +// assert.strictEqual(await firstGroupItemRoot.getAttribute("aria-level"), "1", "The aria-level is correct."); +// }); + +// it("tests List Group Header ACC attributes when collapsed and expanded", async () => { +// const groupItem2 = await browser.$("#nlgi2"); +// const groupItemsList2ID = await groupItem2.shadow$(".ui5-nli-group-items").getAttribute("id"); +// const groupItemHeader = await groupItem2.shadow$(".ui5-nli-group-header"); +// const groupItemHeaderIcon = await groupItem2.shadow$(".ui5-nli-group-toggle-icon").shadow$("svg"); + +// // assert +// assert.strictEqual(await groupItemHeader.getAttribute("aria-expanded"), "true", "The aria-expanded value is correct."); +// assert.strictEqual(await groupItemHeader.getAttribute("aria-controls"), groupItemsList2ID, "The aria-controls value is correct."); +// assert.strictEqual(await groupItemHeader.getAttribute("role"), "button", "The tooltip value is correct."); +// assert.strictEqual(await groupItemHeader.getAttribute("title"), "Expand/Collapse", "The title of the header is correct."); +// assert.strictEqual(await groupItemHeaderIcon.getAttribute("aria-hidden"), "true", "The aria-hidden of the icon is correct."); + +// // act +// await groupItemHeader.click(); + +// // assert +// assert.strictEqual(await groupItemHeader.getAttribute("aria-expanded"), "false", "The aria-expanded value is correct."); +// assert.strictEqual(await groupItemHeader.getAttribute("aria-controls"), groupItemsList2ID, "The aria-controls value is correct."); +// assert.strictEqual(await groupItemHeader.getAttribute("role"), "button", "The tooltip value is correct."); +// assert.strictEqual(await groupItemHeader.getAttribute("title"), "Expand/Collapse", "The title of the header is correct."); +// assert.strictEqual(await groupItemHeaderIcon.getAttribute("aria-hidden"), "true", "The aria-hidden of the icon is correct."); + +// // reset +// await groupItemHeader.click(); +// }); +// }); describe("Keyboard navigation", () => { before(async () => { @@ -397,11 +397,28 @@ describe("Keyboard navigation", () => { assert.ok(await browser.$("#nli2").isFocused(), "Second item is focused."); await browser.keys("ArrowDown"); - assert.ok(await browser.$("#nlgi2").isFocused(), "Second group is focused."); + assert.ok(await browser.$("#nlgi2").isFocused(), "Second group is focused."); await browser.keys("ArrowDown"); assert.ok(await browser.$("#nli3").isFocused(), "Second group first item is focused."); + await browser.keys("ArrowDown"); + assert.ok(await browser.$("#nli3a").isFocused(), "Second group second item is focused."); + + await browser.keys("ArrowDown"); + assert.ok(await browser.$("#nli4").isFocused(), "Second group third item (loading) is focused."); + + await browser.keys("ArrowDown"); + await browser.keys("ArrowDown"); + await browser.keys("ArrowDown"); + await browser.keys("ArrowDown"); + assert.ok(await browser.$("#nlgi5").isFocused(), "Last group is focused."); + + await browser.keys("ArrowUp"); + await browser.keys("ArrowUp"); + await browser.keys("ArrowUp"); + await browser.keys("ArrowUp"); + await browser.keys("ArrowUp"); await browser.keys("ArrowUp"); assert.ok(await browser.$("#nlgi2").isFocused(), "Second group is focused."); From b2bb95ad4334155e9253af3ee777d93ebd754ce8 Mon Sep 17 00:00:00 2001 From: Petar Dimov Date: Mon, 1 Jul 2024 15:49:13 +0300 Subject: [PATCH 8/9] fix: getEnabledItems now excludes children of busy groups --- packages/fiori/src/NotificationListInternal.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fiori/src/NotificationListInternal.ts b/packages/fiori/src/NotificationListInternal.ts index 37679fa6b350..796a4030fd68 100644 --- a/packages/fiori/src/NotificationListInternal.ts +++ b/packages/fiori/src/NotificationListInternal.ts @@ -26,7 +26,7 @@ class NotificationListInternal extends List { this.getItems().forEach(item => { items.push(item); - if (item instanceof NotificationListGroupItem && !item.collapsed) { + if (item instanceof NotificationListGroupItem && !item.collapsed && !item.loading) { item.items.forEach(subItem => { items.push(subItem); }); From 5ad98e54df04d7a886856f191e79e30d0aff79d4 Mon Sep 17 00:00:00 2001 From: Petar Dimov Date: Mon, 8 Jul 2024 14:01:22 +0300 Subject: [PATCH 9/9] test: add title before every list in the test page --- packages/fiori/test/pages/NotificationListItem.html | 7 +++---- packages/fiori/test/specs/NotificationList.spec.js | 4 ---- 2 files changed, 3 insertions(+), 8 deletions(-) diff --git a/packages/fiori/test/pages/NotificationListItem.html b/packages/fiori/test/pages/NotificationListItem.html index b584ded0c882..8a59a1af5d9e 100644 --- a/packages/fiori/test/pages/NotificationListItem.html +++ b/packages/fiori/test/pages/NotificationListItem.html @@ -17,6 +17,7 @@ +

Notification List with Menu

+

Notification List

- -

- +

Notification List 2

- { const EXPECTED_RESULT_2 = "New order #2202"; const firstItem = await browser.$("#nli1"); - // act await firstItem.click(); @@ -170,7 +169,6 @@ describe("Notification List Item Tests", () => { assert.strictEqual(state2, "alert", "The 'Warning' state icon is correctly displayed."); assert.strictEqual(state3, "error", "The 'Error' state icon is correctly displayed."); - }); it("tests importance", async () => { @@ -205,7 +203,6 @@ describe("Notification List Item Tests", () => { const menu3 = await firstItem.$("ui5-menu").hasAttribute("open"); // assert assert.ok(await menu3, "There is open menu with shift+F10."); - }); // Accessibility tests follows @@ -293,7 +290,6 @@ describe("Notification List Item Tests", () => { assert.strictEqual(await btnListItemClose1.getAttribute("role"), 'button', "The role is correct."); assert.notOk(await btnListItemClose3.isExisting(), "There is no 'Close' button rendered"); - }); it("tests aria attributes click on ShowMore", async () => {