From 0efcac8476bf2c50a234ef6939aff5745c032517 Mon Sep 17 00:00:00 2001 From: Aagash Raaj <123377167+aagash-ni@users.noreply.github.com> Date: Thu, 19 Sep 2024 17:46:01 +0530 Subject: [PATCH 1/7] Re-enable mention intermittently failed test cases --- .../rich-text/editor/tests/rich-text-editor-mention.spec.ts | 3 +-- .../src/rich-text/models/tests/markdown-serializer.spec.ts | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts b/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts index ed468d0deb..40839a1bd4 100644 --- a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts +++ b/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts @@ -1542,8 +1542,7 @@ describe('RichTextEditorMentionListbox', () => { expect(pageObject.isMentionListboxOpened()).toBeTrue(); }); - // Intermittent, see https://github.com/ni/nimble/issues/2219 - xit('should show mention popup for multiple mention configuration elements', async () => { + it('should show mention popup for multiple mention configuration elements', async () => { await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' }, { key: 'user:2', displayName: 'username2' } diff --git a/packages/nimble-components/src/rich-text/models/tests/markdown-serializer.spec.ts b/packages/nimble-components/src/rich-text/models/tests/markdown-serializer.spec.ts index f086f63fbc..121625c218 100644 --- a/packages/nimble-components/src/rich-text/models/tests/markdown-serializer.spec.ts +++ b/packages/nimble-components/src/rich-text/models/tests/markdown-serializer.spec.ts @@ -337,8 +337,7 @@ Plain text 3`); `); }); - // Intermittent, see https://github.com/ni/nimble/issues/2219 - xit('Mention node', async () => { + it('Mention node', async () => { await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' } ]); From c533f426a17abf3e0551e2af7a643933f8b77165 Mon Sep 17 00:00:00 2001 From: Aagash Raaj <123377167+aagash-ni@users.noreply.github.com> Date: Thu, 19 Sep 2024 18:03:42 +0530 Subject: [PATCH 2/7] Change files --- ...le-components-3798a360-e7c9-425c-b1b9-df4b1015ea4a.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@ni-nimble-components-3798a360-e7c9-425c-b1b9-df4b1015ea4a.json diff --git a/change/@ni-nimble-components-3798a360-e7c9-425c-b1b9-df4b1015ea4a.json b/change/@ni-nimble-components-3798a360-e7c9-425c-b1b9-df4b1015ea4a.json new file mode 100644 index 0000000000..a6d6481be6 --- /dev/null +++ b/change/@ni-nimble-components-3798a360-e7c9-425c-b1b9-df4b1015ea4a.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Re-enable mention intermittently failed test cases", + "packageName": "@ni/nimble-components", + "email": "123377167+aagash-ni@users.noreply.github.com", + "dependentChangeType": "patch" +} From e4f7d66e3010b154d38ec42c341ae6e149c4eb3a Mon Sep 17 00:00:00 2001 From: Aagash Raaj <123377167+aagash-ni@users.noreply.github.com> Date: Thu, 19 Sep 2024 19:13:55 +0530 Subject: [PATCH 3/7] Skip firefox --- .../rich-text/editor/tests/rich-text-editor-mention.spec.ts | 3 ++- .../src/rich-text/models/tests/markdown-serializer.spec.ts | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts b/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts index 40839a1bd4..c3b32f6f3e 100644 --- a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts +++ b/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts @@ -1542,7 +1542,8 @@ describe('RichTextEditorMentionListbox', () => { expect(pageObject.isMentionListboxOpened()).toBeTrue(); }); - it('should show mention popup for multiple mention configuration elements', async () => { + // Firefox skipped, see https://github.com/ni/nimble/issues/2404 + it('should show mention popup for multiple mention configuration elements #SkipFirefox', async () => { await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' }, { key: 'user:2', displayName: 'username2' } diff --git a/packages/nimble-components/src/rich-text/models/tests/markdown-serializer.spec.ts b/packages/nimble-components/src/rich-text/models/tests/markdown-serializer.spec.ts index 121625c218..b77668d9fa 100644 --- a/packages/nimble-components/src/rich-text/models/tests/markdown-serializer.spec.ts +++ b/packages/nimble-components/src/rich-text/models/tests/markdown-serializer.spec.ts @@ -337,7 +337,8 @@ Plain text 3`); `); }); - it('Mention node', async () => { + // Firefox skipped, see https://github.com/ni/nimble/issues/2404 + it('Mention node #SkipFirefox', async () => { await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' } ]); From c691f003e65202fbc1c0b7cc8bbaf1ba3c281821 Mon Sep 17 00:00:00 2001 From: Vivin Krishna <123377523+vivinkrishna-ni@users.noreply.github.com> Date: Thu, 3 Oct 2024 20:21:52 +0530 Subject: [PATCH 4/7] Focus before click --- .../editor/testing/rich-text-editor.pageobject.ts | 5 +++++ .../editor/tests/rich-text-editor-mention.spec.ts | 15 ++++++++++----- .../models/tests/markdown-serializer.spec.ts | 5 +++-- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts b/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts index 1863bd4b87..1b6a4a5023 100644 --- a/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts +++ b/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts @@ -439,6 +439,11 @@ export class RichTextEditorPageObject { } public async clickMentionListboxOption(index: number): Promise { + if (this.isMentionListboxOpened()) { + this.richTextEditorElement.tiptapEditor.commands.focus(); + await waitForUpdatesAsync(); + } + const listOption = this.getAllListItemsInMentionBox()[index]; listOption?.click(); await waitForUpdatesAsync(); diff --git a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts b/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts index c3b32f6f3e..032bb593b1 100644 --- a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts +++ b/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts @@ -1542,29 +1542,34 @@ describe('RichTextEditorMentionListbox', () => { expect(pageObject.isMentionListboxOpened()).toBeTrue(); }); - // Firefox skipped, see https://github.com/ni/nimble/issues/2404 - it('should show mention popup for multiple mention configuration elements #SkipFirefox', async () => { + it('should show mention popup for multiple mention configuration elements', async () => { await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' }, { key: 'user:2', displayName: 'username2' } ]); + await pageObject.setEditorTextContent('@'); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ 'username1', 'username2' ]); - await pageObject.clickMentionListboxOption(0); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); + + await pageObject.sliceEditorContent(0, 2); + await appendTestMentionConfiguration(element, [ { key: 'test:1', displayName: 'testname1' }, { key: 'test:2', displayName: 'testname2' } ]); + await pageObject.setEditorTextContent('!'); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ 'testname1', 'testname2' ]); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); }); it('mention listbox should be closed when cursor position is moved to start and configuration dynamically changes', async () => { diff --git a/packages/nimble-components/src/rich-text/models/tests/markdown-serializer.spec.ts b/packages/nimble-components/src/rich-text/models/tests/markdown-serializer.spec.ts index b77668d9fa..6830c222b8 100644 --- a/packages/nimble-components/src/rich-text/models/tests/markdown-serializer.spec.ts +++ b/packages/nimble-components/src/rich-text/models/tests/markdown-serializer.spec.ts @@ -337,12 +337,13 @@ Plain text 3`); `); }); - // Firefox skipped, see https://github.com/ni/nimble/issues/2404 - it('Mention node #SkipFirefox', async () => { + it('Mention node', async () => { await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' } ]); + await commitFirstMentionBoxOptionIntoEditor('@'); + expect(element.getMarkdown()).toEqual(' '); }); From aed3bebfdfed797926c6814792c79ea2207effbe Mon Sep 17 00:00:00 2001 From: Vivin Krishna <123377523+vivinkrishna-ni@users.noreply.github.com> Date: Fri, 4 Oct 2024 11:38:00 +0530 Subject: [PATCH 5/7] Reuse the focus editor logic in the page object --- .../testing/rich-text-editor.pageobject.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts b/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts index 1b6a4a5023..aac0586e3a 100644 --- a/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts +++ b/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts @@ -248,10 +248,7 @@ export class RichTextEditorPageObject { .run(); await waitForUpdatesAsync(); - if (this.isMentionListboxOpened()) { - this.richTextEditorElement.tiptapEditor.commands.focus(); - await waitForUpdatesAsync(); - } + await this.focusEditorIfMentionListboxOpened(); } public async setCursorPosition(position: number): Promise { @@ -439,10 +436,7 @@ export class RichTextEditorPageObject { } public async clickMentionListboxOption(index: number): Promise { - if (this.isMentionListboxOpened()) { - this.richTextEditorElement.tiptapEditor.commands.focus(); - await waitForUpdatesAsync(); - } + await this.focusEditorIfMentionListboxOpened(); const listOption = this.getAllListItemsInMentionBox()[index]; listOption?.click(); @@ -535,4 +529,11 @@ export class RichTextEditorPageObject { ); return parserMentionConfig; } + + private async focusEditorIfMentionListboxOpened(): Promise { + if (this.isMentionListboxOpened()) { + this.richTextEditorElement.tiptapEditor.commands.focus(); + await waitForUpdatesAsync(); + } + } } From 9db5e67ceddd4da1916cdcbba53d4f33eb8a5f2e Mon Sep 17 00:00:00 2001 From: Vivin Krishna <123377523+vivinkrishna-ni@users.noreply.github.com> Date: Thu, 10 Oct 2024 17:38:10 +0530 Subject: [PATCH 6/7] Focus editor and wait when updating the content of the editor --- .../testing/rich-text-editor.pageobject.ts | 21 +++-- .../tests/rich-text-editor-mention.spec.ts | 82 +++++++++---------- .../editor/tests/rich-text-editor.spec.ts | 20 ++--- 3 files changed, 66 insertions(+), 57 deletions(-) diff --git a/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts b/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts index aac0586e3a..e92b30bdee 100644 --- a/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts +++ b/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts @@ -216,25 +216,29 @@ export class RichTextEditorPageObject { toggleButton.control.dispatchEvent(event); } - public pasteToEditor(text: string): void { + public async pasteToEditor(text: string): Promise { const editor = this.getTiptapEditor(); const pasteEvent = new ClipboardEvent('paste', { clipboardData: new DataTransfer() }); pasteEvent.clipboardData?.setData('text/plain', text); editor.dispatchEvent(pasteEvent); + + await this.focusEditorIfMentionListboxOpened(); } // Simulate the actual pasting of content by passing the extracted HTML string as an argument and setting the format to 'text/html', // as in the [DataFormat](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer) object. // For example, when copying a link, the clipboard stores information that includes the anchor tag, href attribute value etc, and paste it as an HTML string - public pasteHTMLToEditor(htmlString: string): void { + public async pasteHTMLToEditor(htmlString: string): Promise { const editor = this.getTiptapEditor(); const pasteEvent = new ClipboardEvent('paste', { clipboardData: new DataTransfer() }); pasteEvent.clipboardData?.setData('text/html', htmlString); editor.dispatchEvent(pasteEvent); + + await this.focusEditorIfMentionListboxOpened(); } public async setEditorTextContent(value: string): Promise { @@ -262,6 +266,8 @@ export class RichTextEditorPageObject { const lastElement = this.getEditorLastChildElement(); lastElement.parentElement!.textContent = value; await waitForUpdatesAsync(); + + await this.focusEditorIfMentionListboxOpened(); } public async sliceEditorContent(from: number, to: number): Promise { @@ -271,17 +277,20 @@ export class RichTextEditorPageObject { .deleteRange({ from, to }) .run(); await waitForUpdatesAsync(); + + await this.focusEditorIfMentionListboxOpened(); } public getEditorLastChildAttribute(attribute: string): string { return getLastChildElementAttribute(attribute, this.getTiptapEditor()); } - public isMentionListboxOpened(): boolean { + public async isMentionListboxOpened(): Promise { + await waitForUpdatesAsync(); + return ( !this.getMentionListbox() - ?.shadowRoot?.querySelector(anchoredRegionTag) - ?.hasAttribute('hidden') ?? false + ?.shadowRoot?.querySelector(anchoredRegionTag)?.hidden ); } @@ -531,7 +540,7 @@ export class RichTextEditorPageObject { } private async focusEditorIfMentionListboxOpened(): Promise { - if (this.isMentionListboxOpened()) { + if (await this.isMentionListboxOpened()) { this.richTextEditorElement.tiptapEditor.commands.focus(); await waitForUpdatesAsync(); } diff --git a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts b/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts index 420c4c04e0..b31e0d6ff0 100644 --- a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts +++ b/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts @@ -765,7 +765,7 @@ describe('RichTextEditorMention', () => { const { userMentionElement } = await appendUserMentionConfiguration(element); const mentionUpdateSpy = jasmine.createSpy('mention-update'); userMentionElement.addEventListener('mention-update', mentionUpdateSpy); - pageObject.pasteToEditor('@test'); + await pageObject.pasteToEditor('@test'); await waitForUpdatesAsync(); expect(mentionUpdateSpy).toHaveBeenCalledTimes(1); }); @@ -808,7 +808,7 @@ describe('RichTextEditorMention', () => { ); const mentionUpdateSpy = jasmine.createSpy('mention-update'); userMentionElement.addEventListener('mention-update', mentionUpdateSpy); - pageObject.pasteHTMLToEditor(htmlContent); + await pageObject.pasteHTMLToEditor(htmlContent); expect(mentionUpdateSpy).toHaveBeenCalledTimes(0); }); @@ -930,7 +930,7 @@ describe('RichTextEditorMention', () => { value.input, [{ key: 'user:1', displayName: value.content }] ); - pageObject.pasteHTMLToEditor(htmlContent); + await pageObject.pasteHTMLToEditor(htmlContent); expect(pageObject.getEditorTagNamesWithClosingTags()).toEqual([ 'P', '/P' @@ -1067,7 +1067,7 @@ describe('RichTextEditor user mention via template', () => { it('should open mention popup, when button clicked', async () => { await pageObject.clickUserMentionButton(); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(await pageObject.isMentionListboxOpened()).toBeTrue(); }); }); @@ -1104,9 +1104,9 @@ describe('RichTextEditorMentionListbox', () => { { key: 'user:1', displayName: 'username1' }, { key: 'user:2', displayName: 'username2' } ]); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(await pageObject.isMentionListboxOpened()).toBeFalse(); await pageObject.setEditorTextContent('@'); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(await pageObject.isMentionListboxOpened()).toBeTrue(); expect(pageObject.getMentionListboxItemsName()).toEqual([ 'username1', 'username2' @@ -1143,9 +1143,9 @@ describe('RichTextEditorMentionListbox', () => { { key: 'user:1', displayName: 'username1' }, { key: 'user:2', displayName: 'username2' } ]); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(await pageObject.isMentionListboxOpened()).toBeFalse(); await pageObject.setEditorTextContent('@'); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(await pageObject.isMentionListboxOpened()).toBeTrue(); expect(pageObject.getMentionListboxItemsName()).toEqual([ 'username1', 'username2' @@ -1177,9 +1177,9 @@ describe('RichTextEditorMentionListbox', () => { await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' } ]); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(await pageObject.isMentionListboxOpened()).toBeFalse(); await pageObject.setEditorTextContent('@'); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(await pageObject.isMentionListboxOpened()).toBeTrue(); await pageObject.clickMentionListboxOption(0); expect(pageObject.getMarkdownRenderedTagNames()).toEqual([ @@ -1189,16 +1189,16 @@ describe('RichTextEditorMentionListbox', () => { expect( pageObject.getEditorMentionViewAttributeValues('mention-label') ).toEqual(['username1']); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(await pageObject.isMentionListboxOpened()).toBeFalse(); }); it('should commit mention into the editor on Enter', async () => { await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' } ]); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(await pageObject.isMentionListboxOpened()).toBeFalse(); await pageObject.setEditorTextContent('@'); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(await pageObject.isMentionListboxOpened()).toBeTrue(); await pageObject.pressEnterKeyInEditor(); expect(pageObject.getMarkdownRenderedTagNames()).toEqual([ @@ -1208,16 +1208,16 @@ describe('RichTextEditorMentionListbox', () => { expect( pageObject.getEditorMentionViewAttributeValues('mention-label') ).toEqual(['username1']); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(await pageObject.isMentionListboxOpened()).toBeFalse(); }); it('should commit mention into the editor on Tab', async () => { await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' } ]); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(await pageObject.isMentionListboxOpened()).toBeFalse(); await pageObject.setEditorTextContent('@'); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(await pageObject.isMentionListboxOpened()).toBeTrue(); await pageObject.pressTabKeyInEditor(); expect(pageObject.getMarkdownRenderedTagNames()).toEqual([ @@ -1227,7 +1227,7 @@ describe('RichTextEditorMentionListbox', () => { expect( pageObject.getEditorMentionViewAttributeValues('mention-label') ).toEqual(['username1']); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(await pageObject.isMentionListboxOpened()).toBeFalse(); }); it('should close the popup when clicking Escape', async () => { @@ -1235,11 +1235,11 @@ describe('RichTextEditorMentionListbox', () => { { key: 'user:1', displayName: 'username1' }, { key: 'user:2', displayName: 'username2' } ]); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(await pageObject.isMentionListboxOpened()).toBeFalse(); await pageObject.setEditorTextContent('@'); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(await pageObject.isMentionListboxOpened()).toBeTrue(); await pageObject.pressEscapeKeyInEditor(); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(await pageObject.isMentionListboxOpened()).toBeFalse(); }); it('should filter and commit first mention into the editor on Enter', async () => { @@ -1321,7 +1321,7 @@ describe('RichTextEditorMentionListbox', () => { expect( pageObject.getEditorMentionViewAttributeValues('mention-label') ).toEqual(['username2']); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(await pageObject.isMentionListboxOpened()).toBeFalse(); }); it('should commit second option on arrow key down and tab', async () => { @@ -1340,7 +1340,7 @@ describe('RichTextEditorMentionListbox', () => { expect( pageObject.getEditorMentionViewAttributeValues('mention-label') ).toEqual(['username2']); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(await pageObject.isMentionListboxOpened()).toBeFalse(); }); it('focus out from the editor should close the mention popup', async () => { @@ -1350,11 +1350,11 @@ describe('RichTextEditorMentionListbox', () => { ]); await pageObject.setEditorTextContent('@'); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(await pageObject.isMentionListboxOpened()).toBeTrue(); await pageObject.focusOutEditor(); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(await pageObject.isMentionListboxOpened()).toBeFalse(); }); // WebKit skipped, see https://github.com/ni/nimble/issues/1938 @@ -1365,11 +1365,11 @@ describe('RichTextEditorMentionListbox', () => { ]); await pageObject.setEditorTextContent('@'); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(await pageObject.isMentionListboxOpened()).toBeTrue(); await pageObject.setDisabled(true); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(await pageObject.isMentionListboxOpened()).toBeFalse(); }); }); @@ -1383,14 +1383,14 @@ describe('RichTextEditorMentionListbox', () => { ] ); await pageObject.setEditorTextContent('@'); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(await pageObject.isMentionListboxOpened()).toBeTrue(); expect(pageObject.getMentionListboxItemsName()).toEqual([ 'username1', 'username2' ]); element.removeChild(userMentionElement); await waitForUpdatesAsync(); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(await pageObject.isMentionListboxOpened()).toBeFalse(); expect(pageObject.getMentionListboxItemsName()).toEqual([]); }); @@ -1409,7 +1409,7 @@ describe('RichTextEditorMentionListbox', () => { expect(pageObject.getMentionListboxItemsName()).toEqual([ 'username2' ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(await pageObject.isMentionListboxOpened()).toBeTrue(); }); it('should update mention popup list when mapping elements get replaced', async () => { @@ -1434,7 +1434,7 @@ describe('RichTextEditorMentionListbox', () => { 'username3', 'username4' ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(await pageObject.isMentionListboxOpened()).toBeTrue(); }); it('should close mention popup when updating to invalid `pattern`', async () => { @@ -1453,7 +1453,7 @@ describe('RichTextEditorMentionListbox', () => { userMentionElement.pattern = 'invalid'; await waitForUpdatesAsync(); expect(pageObject.getMentionListboxItemsName()).toEqual([]); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(await pageObject.isMentionListboxOpened()).toBeFalse(); }); it('should update mention popup list when updating `display-name`', async () => { @@ -1475,7 +1475,7 @@ describe('RichTextEditorMentionListbox', () => { 'updated-name', 'username2' ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(await pageObject.isMentionListboxOpened()).toBeTrue(); }); it('should update mention popup list when updating valid `key`', async () => { @@ -1484,7 +1484,7 @@ describe('RichTextEditorMentionListbox', () => { [{ key: 'invalid', displayName: 'username1' }] ); await pageObject.setEditorTextContent('@'); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(await pageObject.isMentionListboxOpened()).toBeFalse(); expect(pageObject.getMentionListboxItemsName()).toEqual([]); mappingElements[0]!.key = 'user:1'; // After the first wait, `activeMappingConfigs` is updated, @@ -1495,7 +1495,7 @@ describe('RichTextEditorMentionListbox', () => { expect(pageObject.getMentionListboxItemsName()).toEqual([ 'username1' ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(await pageObject.isMentionListboxOpened()).toBeTrue(); }); it('should close mention popup when updating to invalid `key`', async () => { @@ -1514,7 +1514,7 @@ describe('RichTextEditorMentionListbox', () => { mappingElements[0]!.key = 'invalid'; await waitForUpdatesAsync(); expect(pageObject.getMentionListboxItemsName()).toEqual([]); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(await pageObject.isMentionListboxOpened()).toBeFalse(); }); it('should retain mention popup list position in the same cursor position when configuration got updated', async () => { @@ -1539,7 +1539,7 @@ describe('RichTextEditorMentionListbox', () => { 'New user', 'username2' ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(await pageObject.isMentionListboxOpened()).toBeTrue(); }); it('should show mention popup for multiple mention configuration elements', async () => { @@ -1554,7 +1554,7 @@ describe('RichTextEditorMentionListbox', () => { 'username1', 'username2' ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(await pageObject.isMentionListboxOpened()).toBeTrue(); await pageObject.sliceEditorContent(0, 2); @@ -1569,7 +1569,7 @@ describe('RichTextEditorMentionListbox', () => { 'testname1', 'testname2' ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(await pageObject.isMentionListboxOpened()).toBeTrue(); }); it('mention listbox should be closed when cursor position is moved to start and configuration dynamically changes', async () => { @@ -1578,12 +1578,12 @@ describe('RichTextEditorMentionListbox', () => { [{ key: 'user:1', displayName: 'user name1' }] ); await pageObject.setEditorTextContent('@user'); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(await pageObject.isMentionListboxOpened()).toBeTrue(); await pageObject.setCursorPosition(1); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(await pageObject.isMentionListboxOpened()).toBeFalse(); mappingElements[0]!.displayName = 'user name2'; await waitForUpdatesAsync(); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(await pageObject.isMentionListboxOpened()).toBeFalse(); }); }); }); diff --git a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts b/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts index bd3d3eaa9c..cb4054ddc9 100644 --- a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts +++ b/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts @@ -437,8 +437,8 @@ describe('RichTextEditor', () => { } ] as const; parameterizeSpec(markdownInput, (spec, name, value) => { - spec(`for ${name} markdown syntax to the editor`, () => { - pageObject.pasteToEditor(value.input); + spec(`for ${name} markdown syntax to the editor`, async () => { + await pageObject.pasteToEditor(value.input); expect(pageObject.getEditorTagNames()).toEqual(['P']); expect(pageObject.getEditorLeafContents()).toEqual([ @@ -1014,8 +1014,8 @@ describe('RichTextEditor', () => { parameterizeSpec(differentValidLinks, (spec, name, value) => { spec( `${name} renders as absolute link(href and text content should be same) in editor`, - () => { - pageObject.pasteHTMLToEditor(value.input); + async () => { + await pageObject.pasteHTMLToEditor(value.input); expect(pageObject.getEditorTagNames()).toEqual([ 'P', @@ -1051,8 +1051,8 @@ describe('RichTextEditor', () => { parameterizeSpec(validLinkNodes, (spec, name, value) => { spec( `${name} renders as absolute link(href and text content should be same) in editor`, - () => { - pageObject.pasteHTMLToEditor(value.input); + async () => { + await pageObject.pasteHTMLToEditor(value.input); expect( pageObject.getEditorTagNamesWithClosingTags() @@ -1134,8 +1134,8 @@ describe('RichTextEditor', () => { ] as const; parameterizeSpec(differentInvalidLinks, (spec, name, value) => { - spec(`${name} renders as plain text in editor`, () => { - pageObject.pasteHTMLToEditor(value.input); + spec(`${name} renders as plain text in editor`, async () => { + await pageObject.pasteHTMLToEditor(value.input); expect(pageObject.getEditorTagNames()).toEqual(['P']); expect(pageObject.getEditorLeafContents()).toEqual([ @@ -1145,8 +1145,8 @@ describe('RichTextEditor', () => { }); }); - it('pasting a plain text URL should render as a plain text', () => { - pageObject.pasteToEditor('https://nimble.ni.dev/'); + it('pasting a plain text URL should render as a plain text', async () => { + await pageObject.pasteToEditor('https://nimble.ni.dev/'); expect(pageObject.getEditorTagNames()).toEqual(['P']); expect(pageObject.getEditorLeafContents()).toEqual([ From 629a247cc4bc776cbc9d1674ad602e629c18f33d Mon Sep 17 00:00:00 2001 From: Vivin Krishna <123377523+vivinkrishna-ni@users.noreply.github.com> Date: Thu, 10 Oct 2024 19:08:44 +0530 Subject: [PATCH 7/7] Fix lint --- .../testing/rich-text-editor.pageobject.ts | 7 +++---- .../editor/tests/rich-text-editor.spec.ts | 21 ++++++++++++------- 2 files changed, 16 insertions(+), 12 deletions(-) diff --git a/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts b/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts index e92b30bdee..8f680dc1f1 100644 --- a/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts +++ b/packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts @@ -288,10 +288,9 @@ export class RichTextEditorPageObject { public async isMentionListboxOpened(): Promise { await waitForUpdatesAsync(); - return ( - !this.getMentionListbox() - ?.shadowRoot?.querySelector(anchoredRegionTag)?.hidden - ); + return !this.getMentionListbox()?.shadowRoot?.querySelector( + anchoredRegionTag + )?.hidden; } public getEditorMentionViewAttributeValues(attribute: string): string[] { diff --git a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts b/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts index cb4054ddc9..e26ad7592b 100644 --- a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts +++ b/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts @@ -1134,14 +1134,19 @@ describe('RichTextEditor', () => { ] as const; parameterizeSpec(differentInvalidLinks, (spec, name, value) => { - spec(`${name} renders as plain text in editor`, async () => { - await pageObject.pasteHTMLToEditor(value.input); - - expect(pageObject.getEditorTagNames()).toEqual(['P']); - expect(pageObject.getEditorLeafContents()).toEqual([ - value.text - ]); - }); + spec( + `${name} renders as plain text in editor`, + async () => { + await pageObject.pasteHTMLToEditor(value.input); + + expect(pageObject.getEditorTagNames()).toEqual([ + 'P' + ]); + expect(pageObject.getEditorLeafContents()).toEqual([ + value.text + ]); + } + ); }); });