From 25dfc7e2ebbd04e592f5c4b56f8a663597afa70d Mon Sep 17 00:00:00 2001 From: Aagash Raaj <123377167+aagash-ni@users.noreply.github.com> Date: Fri, 13 Sep 2024 13:20:18 +0530 Subject: [PATCH 01/10] Add loop for mention intermittent failure --- .../tests/rich-text-editor-mention.spec.ts | 393 +++++----- .../models/tests/markdown-serializer.spec.ts | 709 +++++++++--------- 2 files changed, 554 insertions(+), 548 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..6febd565a9 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 @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-loop-func */ import { html } from '@microsoft/fast-element'; import { parameterizeSpec } from '@ni/jasmine-parameterized'; import { richTextEditorTag, RichTextEditor } from '..'; @@ -1373,212 +1374,214 @@ describe('RichTextEditorMentionListbox', () => { }); }); - describe('Dynamically update mention popup items based on configuration changes', () => { - it('should close mention popup when removing configuration element', async () => { - const { userMentionElement } = await appendUserMentionConfiguration( - element, - [ + for (let i = 0; i < 30; i++) { + describe(`Dynamically update mention popup items based on configuration changes${i}`, () => { + it('should close mention popup when removing configuration element', async () => { + const { userMentionElement } = 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' + ]); + element.removeChild(userMentionElement); + await waitForUpdatesAsync(); + expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(pageObject.getMentionListboxItemsName()).toEqual([]); + }); + + it('should update mention popup list when removing mapping element', async () => { + const { mappingElements, userMentionElement } = 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' - ]); - element.removeChild(userMentionElement); - await waitForUpdatesAsync(); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); - expect(pageObject.getMentionListboxItemsName()).toEqual([]); - }); + ]); + await pageObject.setEditorTextContent('@'); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1', + 'username2' + ]); + userMentionElement.removeChild(mappingElements[0]!); + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username2' + ]); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); + }); - it('should update mention popup list when removing mapping element', async () => { - const { mappingElements, userMentionElement } = await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ]); - await pageObject.setEditorTextContent('@'); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1', - 'username2' - ]); - userMentionElement.removeChild(mappingElements[0]!); - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username2' - ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); - }); + it('should update mention popup list when mapping elements get replaced', async () => { + const { userMentionElement } = await appendUserMentionConfiguration( + element, + [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ] + ); + await pageObject.setEditorTextContent('@'); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1', + 'username2' + ]); + await replaceUserMappingElements(userMentionElement, [ + { key: 'user:3', displayName: 'username3' }, + { key: 'user:4', displayName: 'username4' } + ]); + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username3', + 'username4' + ]); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); + }); - it('should update mention popup list when mapping elements get replaced', async () => { - const { userMentionElement } = await appendUserMentionConfiguration( - element, - [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ] - ); - await pageObject.setEditorTextContent('@'); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1', - 'username2' - ]); - await replaceUserMappingElements(userMentionElement, [ - { key: 'user:3', displayName: 'username3' }, - { key: 'user:4', displayName: 'username4' } - ]); - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username3', - 'username4' - ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); - }); + it('should close mention popup when updating to invalid `pattern`', async () => { + const { userMentionElement } = await appendUserMentionConfiguration( + element, + [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ] + ); + await pageObject.setEditorTextContent('@'); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1', + 'username2' + ]); + userMentionElement.pattern = 'invalid'; + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([]); + expect(pageObject.isMentionListboxOpened()).toBeFalse(); + }); - it('should close mention popup when updating to invalid `pattern`', async () => { - const { userMentionElement } = await appendUserMentionConfiguration( - element, - [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ] - ); - await pageObject.setEditorTextContent('@'); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1', - 'username2' - ]); - userMentionElement.pattern = 'invalid'; - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([]); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); - }); + it('should update mention popup list when updating `display-name`', async () => { + const { mappingElements } = await appendUserMentionConfiguration( + element, + [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ] + ); + await pageObject.setEditorTextContent('@'); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1', + 'username2' + ]); + mappingElements[0]!.displayName = 'updated-name'; + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'updated-name', + 'username2' + ]); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); + }); - it('should update mention popup list when updating `display-name`', async () => { - const { mappingElements } = await appendUserMentionConfiguration( - element, - [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ] - ); - await pageObject.setEditorTextContent('@'); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1', - 'username2' - ]); - mappingElements[0]!.displayName = 'updated-name'; - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'updated-name', - 'username2' - ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); - }); + it('should update mention popup list when updating valid `key`', async () => { + const { mappingElements } = await appendUserMentionConfiguration( + element, + [{ key: 'invalid', displayName: 'username1' }] + ); + await pageObject.setEditorTextContent('@'); + expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(pageObject.getMentionListboxItemsName()).toEqual([]); + mappingElements[0]!.key = 'user:1'; + // After the first wait, `activeMappingConfigs` is updated, + // which is directly bound to the template for populating the `nimble-list-option`. + // But only after the second wait, `nimble-list-option` gets populated. + await waitForUpdatesAsync(); + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1' + ]); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); + }); - it('should update mention popup list when updating valid `key`', async () => { - const { mappingElements } = await appendUserMentionConfiguration( - element, - [{ key: 'invalid', displayName: 'username1' }] - ); - await pageObject.setEditorTextContent('@'); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); - expect(pageObject.getMentionListboxItemsName()).toEqual([]); - mappingElements[0]!.key = 'user:1'; - // After the first wait, `activeMappingConfigs` is updated, - // which is directly bound to the template for populating the `nimble-list-option`. - // But only after the second wait, `nimble-list-option` gets populated. - await waitForUpdatesAsync(); - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1' - ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); - }); + it('should close mention popup when updating to invalid `key`', async () => { + const { mappingElements } = await appendUserMentionConfiguration( + element, + [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ] + ); + await pageObject.setEditorTextContent('@'); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1', + 'username2' + ]); + mappingElements[0]!.key = 'invalid'; + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([]); + expect(pageObject.isMentionListboxOpened()).toBeFalse(); + }); - it('should close mention popup when updating to invalid `key`', async () => { - const { mappingElements } = await appendUserMentionConfiguration( - element, - [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ] - ); - await pageObject.setEditorTextContent('@'); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1', - 'username2' - ]); - mappingElements[0]!.key = 'invalid'; - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([]); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); - }); + it('should retain mention popup list position in the same cursor position when configuration got updated', async () => { + const { mappingElements } = await appendUserMentionConfiguration( + element, + [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ] + ); + await pageObject.setEditorTextContent('First Line'); + pageObject.moveCursorToStart(); + await pageObject.clickUserMentionButton(); + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1', + 'username2' + ]); + mappingElements[0]!.displayName = 'New user'; + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'New user', + 'username2' + ]); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); + }); - it('should retain mention popup list position in the same cursor position when configuration got updated', async () => { - const { mappingElements } = await appendUserMentionConfiguration( - element, - [ + // Intermittent, see https://github.com/ni/nimble/issues/2219 + 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('First Line'); - pageObject.moveCursorToStart(); - await pageObject.clickUserMentionButton(); - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1', - 'username2' - ]); - mappingElements[0]!.displayName = 'New user'; - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'New user', - 'username2' - ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); - }); - - // Intermittent, see https://github.com/ni/nimble/issues/2219 - xit('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); - 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' - ]); - }); + ]); + await pageObject.setEditorTextContent('@'); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1', + 'username2' + ]); + await pageObject.clickMentionListboxOption(0); + 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' + ]); + }); - it('mention listbox should be closed when cursor position is moved to start and configuration dynamically changes', async () => { - const { mappingElements } = await appendUserMentionConfiguration( - element, - [{ key: 'user:1', displayName: 'user name1' }] - ); - await pageObject.setEditorTextContent('@user'); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); - await pageObject.setCursorPosition(1); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); - mappingElements[0]!.displayName = 'user name2'; - await waitForUpdatesAsync(); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + it('mention listbox should be closed when cursor position is moved to start and configuration dynamically changes', async () => { + const { mappingElements } = await appendUserMentionConfiguration( + element, + [{ key: 'user:1', displayName: 'user name1' }] + ); + await pageObject.setEditorTextContent('@user'); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); + await pageObject.setCursorPosition(1); + expect(pageObject.isMentionListboxOpened()).toBeFalse(); + mappingElements[0]!.displayName = 'user name2'; + await waitForUpdatesAsync(); + expect(pageObject.isMentionListboxOpened()).toBeFalse(); + }); }); - }); + } }); 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..588884ff9c 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 @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-loop-func */ import { html } from '@microsoft/fast-element'; import type { RichTextEditor } from '../../editor'; import { fixture, type Fixture } from '../../../utilities/tests/fixture'; @@ -40,382 +41,384 @@ describe('Markdown serializer', () => { await disconnect(); }); - describe('Serialize rich text editor content to its respective markdown', () => { - const r = String.raw; - - it('Bold', async () => { - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('Bold'); - - expect(element.getMarkdown()).toEqual('**Bold**'); - }); - - it('Italics', async () => { - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('Italics'); - - expect(element.getMarkdown()).toEqual('*Italics*'); - }); - - it('Link', async () => { - await pageObject.setEditorTextContent('https://nimble.ni.dev '); - expect(element.getMarkdown()).toEqual(' '); - }); - - it('Bold and Italics', async () => { - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('Bold and Italics'); - expect(element.getMarkdown()).toEqual('***Bold and Italics***'); - }); - - it('Italics without spaces in between bold texts', async () => { - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('Bold'); - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('italics'); - await pageObject.toggleFooterButton(ToolbarButton.italics, false); - await pageObject.setEditorTextContent('bold'); - expect(element.getMarkdown()).toEqual('**Bold*italics*bold**'); - }); - - it('Italics with leading and trailing spaces in between bold texts', async () => { - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('Bold '); - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('italics'); - await pageObject.toggleFooterButton(ToolbarButton.italics, false); - await pageObject.setEditorTextContent(' bold'); - expect(element.getMarkdown()).toEqual('**Bold *italics* bold**'); - }); - - it('Bold without spaces in between italics texts', async () => { - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('Italics'); - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('bold'); - await pageObject.toggleFooterButton(ToolbarButton.bold, false); - await pageObject.setEditorTextContent('italics'); - expect(element.getMarkdown()).toEqual('*Italics**bold**italics*'); - }); - - it('Bold with leading and trailing spaces in between italics texts', async () => { - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('Italics '); - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('bold'); - await pageObject.toggleFooterButton(ToolbarButton.bold, false); - await pageObject.setEditorTextContent(' italics'); - expect(element.getMarkdown()).toEqual('*Italics **bold** italics*'); - }); - - it('Numbered list', async () => { - await pageObject.setEditorTextContent('Numbered list'); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - expect(element.getMarkdown()).toEqual('1. Numbered list'); - }); - - it('Multiple Numbered list', async () => { - await pageObject.setEditorTextContent('list 1'); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - await pageObject.pressEnterKeyInEditor(); - await pageObject.setEditorTextContent('list 2'); - expect(element.getMarkdown()).toEqual(r`1. list 1 + for (let i = 0; i < 10; i++) { + describe(`Serialize rich text editor content to its respective markdown${i}`, () => { + const r = String.raw; + + it('Bold', async () => { + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('Bold'); + + expect(element.getMarkdown()).toEqual('**Bold**'); + }); + + it('Italics', async () => { + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('Italics'); + + expect(element.getMarkdown()).toEqual('*Italics*'); + }); + + it('Link', async () => { + await pageObject.setEditorTextContent('https://nimble.ni.dev '); + expect(element.getMarkdown()).toEqual(' '); + }); + + it('Bold and Italics', async () => { + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('Bold and Italics'); + expect(element.getMarkdown()).toEqual('***Bold and Italics***'); + }); + + it('Italics without spaces in between bold texts', async () => { + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('Bold'); + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('italics'); + await pageObject.toggleFooterButton(ToolbarButton.italics, false); + await pageObject.setEditorTextContent('bold'); + expect(element.getMarkdown()).toEqual('**Bold*italics*bold**'); + }); + + it('Italics with leading and trailing spaces in between bold texts', async () => { + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('Bold '); + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('italics'); + await pageObject.toggleFooterButton(ToolbarButton.italics, false); + await pageObject.setEditorTextContent(' bold'); + expect(element.getMarkdown()).toEqual('**Bold *italics* bold**'); + }); + + it('Bold without spaces in between italics texts', async () => { + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('Italics'); + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('bold'); + await pageObject.toggleFooterButton(ToolbarButton.bold, false); + await pageObject.setEditorTextContent('italics'); + expect(element.getMarkdown()).toEqual('*Italics**bold**italics*'); + }); + + it('Bold with leading and trailing spaces in between italics texts', async () => { + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('Italics '); + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('bold'); + await pageObject.toggleFooterButton(ToolbarButton.bold, false); + await pageObject.setEditorTextContent(' italics'); + expect(element.getMarkdown()).toEqual('*Italics **bold** italics*'); + }); + + it('Numbered list', async () => { + await pageObject.setEditorTextContent('Numbered list'); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + expect(element.getMarkdown()).toEqual('1. Numbered list'); + }); + + it('Multiple Numbered list', async () => { + await pageObject.setEditorTextContent('list 1'); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + await pageObject.pressEnterKeyInEditor(); + await pageObject.setEditorTextContent('list 2'); + expect(element.getMarkdown()).toEqual(r`1. list 1 2. list 2`); - }); - - it('Numbered list with bold', async () => { - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('Numbered list with bold'); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - expect(element.getMarkdown()).toEqual( - '1. **Numbered list with bold**' - ); - }); - - it('Numbered list with italics', async () => { - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('Numbered list with italics'); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - expect(element.getMarkdown()).toEqual( - '1. *Numbered list with italics*' - ); - }); - - it('Numbered list with link', async () => { - await pageObject.setEditorTextContent('https://nimble.ni.dev '); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - expect(element.getMarkdown()).toEqual( - '1. ' - ); - }); - - it('Bulleted list', async () => { - await pageObject.setEditorTextContent('Bulleted list'); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - expect(element.getMarkdown()).toEqual('* Bulleted list'); - }); - - it('Multiple Bulleted list', async () => { - await pageObject.setEditorTextContent('list 1'); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - await pageObject.pressEnterKeyInEditor(); - await pageObject.setEditorTextContent('list 2'); - expect(element.getMarkdown()).toEqual(r`* list 1 + }); + + it('Numbered list with bold', async () => { + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('Numbered list with bold'); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + expect(element.getMarkdown()).toEqual( + '1. **Numbered list with bold**' + ); + }); + + it('Numbered list with italics', async () => { + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('Numbered list with italics'); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + expect(element.getMarkdown()).toEqual( + '1. *Numbered list with italics*' + ); + }); + + it('Numbered list with link', async () => { + await pageObject.setEditorTextContent('https://nimble.ni.dev '); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + expect(element.getMarkdown()).toEqual( + '1. ' + ); + }); + + it('Bulleted list', async () => { + await pageObject.setEditorTextContent('Bulleted list'); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + expect(element.getMarkdown()).toEqual('* Bulleted list'); + }); + + it('Multiple Bulleted list', async () => { + await pageObject.setEditorTextContent('list 1'); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + await pageObject.pressEnterKeyInEditor(); + await pageObject.setEditorTextContent('list 2'); + expect(element.getMarkdown()).toEqual(r`* list 1 * list 2`); - }); - - it('Bulleted list with bold', async () => { - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('Bulleted list with bold'); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - expect(element.getMarkdown()).toEqual( - '* **Bulleted list with bold**' - ); - }); - - it('Bulleted list with italics', async () => { - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('Bulleted list with italics'); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - expect(element.getMarkdown()).toEqual( - '* *Bulleted list with italics*' - ); - }); - - it('Bulleted list with link', async () => { - await pageObject.setEditorTextContent('https://nimble.ni.dev '); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - expect(element.getMarkdown()).toEqual('* '); - }); - - it('Toggling off Bulleted list with bold', async () => { - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('List 1'); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - await pageObject.pressEnterKeyInEditor(); - await pageObject.setEditorTextContent('list 2'); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('plain text'); - expect(element.getMarkdown()).toEqual(r`* **List 1** + }); + + it('Bulleted list with bold', async () => { + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('Bulleted list with bold'); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + expect(element.getMarkdown()).toEqual( + '* **Bulleted list with bold**' + ); + }); + + it('Bulleted list with italics', async () => { + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('Bulleted list with italics'); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + expect(element.getMarkdown()).toEqual( + '* *Bulleted list with italics*' + ); + }); + + it('Bulleted list with link', async () => { + await pageObject.setEditorTextContent('https://nimble.ni.dev '); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + expect(element.getMarkdown()).toEqual('* '); + }); + + it('Toggling off Bulleted list with bold', async () => { + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('List 1'); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + await pageObject.pressEnterKeyInEditor(); + await pageObject.setEditorTextContent('list 2'); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('plain text'); + expect(element.getMarkdown()).toEqual(r`* **List 1** **list 2**plain text`); - }); - - it('Toggling off Numbered list with bold', async () => { - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('List 1'); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - await pageObject.pressEnterKeyInEditor(); - await pageObject.setEditorTextContent('list 2'); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('plain text'); - expect(element.getMarkdown()).toEqual(r`1. **List 1** + }); + + it('Toggling off Numbered list with bold', async () => { + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('List 1'); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + await pageObject.pressEnterKeyInEditor(); + await pageObject.setEditorTextContent('list 2'); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('plain text'); + expect(element.getMarkdown()).toEqual(r`1. **List 1** **list 2**plain text`); - }); - - it('Nested list with levels 1 - Bulleted list, 2 - Numbered list (Bold)', async () => { - await pageObject.setEditorTextContent('Bulleted list'); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - await pageObject.pressEnterKeyInEditor(); - await pageObject.pressTabKeyInEditor(); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('Nested bold numbered list'); - expect(element.getMarkdown()).toEqual(r`* Bulleted list + }); + + it('Nested list with levels 1 - Bulleted list, 2 - Numbered list (Bold)', async () => { + await pageObject.setEditorTextContent('Bulleted list'); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + await pageObject.pressEnterKeyInEditor(); + await pageObject.pressTabKeyInEditor(); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('Nested bold numbered list'); + expect(element.getMarkdown()).toEqual(r`* Bulleted list 1. **Nested bold numbered list**`); - }); - - it('Nested list with levels 1 - Bulleted list, 2 - Numbered list (Italics)', async () => { - await pageObject.setEditorTextContent('Bulleted list'); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - await pageObject.pressEnterKeyInEditor(); - await pageObject.pressTabKeyInEditor(); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent( - 'Nested italics numbered list' - ); - expect(element.getMarkdown()).toEqual(r`* Bulleted list + }); + + it('Nested list with levels 1 - Bulleted list, 2 - Numbered list (Italics)', async () => { + await pageObject.setEditorTextContent('Bulleted list'); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + await pageObject.pressEnterKeyInEditor(); + await pageObject.pressTabKeyInEditor(); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent( + 'Nested italics numbered list' + ); + expect(element.getMarkdown()).toEqual(r`* Bulleted list 1. *Nested italics numbered list*`); - }); - - it('Nested list with levels 1- Numbered list (Bold), 2-Bulleted list', async () => { - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('Numbered list bold'); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - await pageObject.pressEnterKeyInEditor(); - await pageObject.pressTabKeyInEditor(); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - await pageObject.setEditorTextContent('Nested bulleted list'); - expect(element.getMarkdown()).toEqual(r`1. **Numbered list bold** + }); + + it('Nested list with levels 1- Numbered list (Bold), 2-Bulleted list', async () => { + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('Numbered list bold'); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + await pageObject.pressEnterKeyInEditor(); + await pageObject.pressTabKeyInEditor(); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + await pageObject.setEditorTextContent('Nested bulleted list'); + expect(element.getMarkdown()).toEqual(r`1. **Numbered list bold** * Nested bulleted list`); - }); - - it('Nested list with levels 1- Numbered list (Italics), 2-Bulleted list', async () => { - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('Numbered list italics'); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - await pageObject.pressEnterKeyInEditor(); - await pageObject.pressTabKeyInEditor(); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - await pageObject.setEditorTextContent('Nested bulleted list'); - expect(element.getMarkdown()).toEqual(r`1. *Numbered list italics* + }); + + it('Nested list with levels 1- Numbered list (Italics), 2-Bulleted list', async () => { + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('Numbered list italics'); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + await pageObject.pressEnterKeyInEditor(); + await pageObject.pressTabKeyInEditor(); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + await pageObject.setEditorTextContent('Nested bulleted list'); + expect(element.getMarkdown()).toEqual(r`1. *Numbered list italics* * Nested bulleted list`); - }); - - // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it('Hard break #SkipWebkit', async () => { - await pageObject.setEditorTextContent('Plain text 1'); - await pageObject.pressShiftEnterKeysInEditor(); - await pageObject.setEditorTextContent('Plain text 2'); - await pageObject.pressShiftEnterKeysInEditor(); - await pageObject.setEditorTextContent('Plain text 3'); - expect(element.getMarkdown()).toEqual(r`Plain text 1\ + }); + + // WebKit skipped, see https://github.com/ni/nimble/issues/1938 + it('Hard break #SkipWebkit', async () => { + await pageObject.setEditorTextContent('Plain text 1'); + await pageObject.pressShiftEnterKeysInEditor(); + await pageObject.setEditorTextContent('Plain text 2'); + await pageObject.pressShiftEnterKeysInEditor(); + await pageObject.setEditorTextContent('Plain text 3'); + expect(element.getMarkdown()).toEqual(r`Plain text 1\ Plain text 2\ Plain text 3`); - }); - - // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it('Hard break with bold #SkipWebkit', async () => { - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('Bold'); - await pageObject.pressShiftEnterKeysInEditor(); - await pageObject.setEditorTextContent('Bold'); - expect(element.getMarkdown()).toEqual(r`**Bold**\ + }); + + // WebKit skipped, see https://github.com/ni/nimble/issues/1938 + it('Hard break with bold #SkipWebkit', async () => { + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('Bold'); + await pageObject.pressShiftEnterKeysInEditor(); + await pageObject.setEditorTextContent('Bold'); + expect(element.getMarkdown()).toEqual(r`**Bold**\ **Bold**`); - }); - - // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it('Hard break with italics #SkipWebkit', async () => { - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('Italics'); - await pageObject.pressShiftEnterKeysInEditor(); - await pageObject.setEditorTextContent('Italics'); - expect(element.getMarkdown()).toEqual(r`*Italics*\ + }); + + // WebKit skipped, see https://github.com/ni/nimble/issues/1938 + it('Hard break with italics #SkipWebkit', async () => { + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('Italics'); + await pageObject.pressShiftEnterKeysInEditor(); + await pageObject.setEditorTextContent('Italics'); + expect(element.getMarkdown()).toEqual(r`*Italics*\ *Italics*`); - }); - - // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it('Hard break with bulleted list #SkipWebkit', async () => { - await pageObject.setEditorTextContent('Bulleted'); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - await pageObject.pressShiftEnterKeysInEditor(); - await pageObject.setEditorTextContent('list'); - expect(element.getMarkdown()).toEqual(r`* Bulleted\ + }); + + // WebKit skipped, see https://github.com/ni/nimble/issues/1938 + it('Hard break with bulleted list #SkipWebkit', async () => { + await pageObject.setEditorTextContent('Bulleted'); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + await pageObject.pressShiftEnterKeysInEditor(); + await pageObject.setEditorTextContent('list'); + expect(element.getMarkdown()).toEqual(r`* Bulleted\ list`); - }); - - // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it('Hard break with numbered list #SkipWebkit', async () => { - await pageObject.setEditorTextContent('Numbered'); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - await pageObject.pressShiftEnterKeysInEditor(); - await pageObject.setEditorTextContent('list'); - expect(element.getMarkdown()).toEqual(r`1. Numbered\ + }); + + // WebKit skipped, see https://github.com/ni/nimble/issues/1938 + it('Hard break with numbered list #SkipWebkit', async () => { + await pageObject.setEditorTextContent('Numbered'); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + await pageObject.pressShiftEnterKeysInEditor(); + await pageObject.setEditorTextContent('list'); + expect(element.getMarkdown()).toEqual(r`1. Numbered\ list`); - }); - - // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it('Hard break with mention node #SkipWebkit', async () => { - await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' } - ]); - await commitFirstMentionBoxOptionIntoEditor('@'); - await pageObject.pressShiftEnterKeysInEditor(); - await commitFirstMentionBoxOptionIntoEditor('@'); - expect(element.getMarkdown()).toEqual(r` \ + }); + + // WebKit skipped, see https://github.com/ni/nimble/issues/1938 + it('Hard break with mention node #SkipWebkit', async () => { + await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' } + ]); + await commitFirstMentionBoxOptionIntoEditor('@'); + await pageObject.pressShiftEnterKeysInEditor(); + await commitFirstMentionBoxOptionIntoEditor('@'); + expect(element.getMarkdown()).toEqual(r` \ `); - }); - - // Intermittent, see https://github.com/ni/nimble/issues/2219 - xit('Mention node', async () => { - await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' } - ]); - await commitFirstMentionBoxOptionIntoEditor('@'); - expect(element.getMarkdown()).toEqual(' '); - }); - - it('Multiple Mention node of same type', async () => { - await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ]); - await commitFirstMentionBoxOptionIntoEditor('@'); - await pageObject.setEditorTextContent('@'); - await waitForUpdatesAsync(); - await pageObject.clickMentionListboxOption(1); - expect(element.getMarkdown()).toEqual(' '); - }); - - it('Multiple Mention node of different type', async () => { - await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' } - ]); - await commitFirstMentionBoxOptionIntoEditor('@'); - await appendTestMentionConfiguration(element, [ - { key: 'test:1', displayName: 'testname1' } - ]); - await commitFirstMentionBoxOptionIntoEditor('!'); - expect(element.getMarkdown()).toEqual(' '); - }); - - it('Mention node between Bold text', async () => { - await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' } - ]); - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('Bold '); - await commitFirstMentionBoxOptionIntoEditor('@'); - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('Bold '); - expect(element.getMarkdown()).toEqual( - '**Bold** **Bold** ' - ); - }); - - it('Mention node between Italics text', async () => { - await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' } - ]); - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('Italics '); - await commitFirstMentionBoxOptionIntoEditor('@'); - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('Italics '); - expect(element.getMarkdown()).toEqual( - '*Italics* *Italics* ' - ); - }); - - it('Mention node under Numbered list', async () => { - await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' } - ]); - await commitFirstMentionBoxOptionIntoEditor('@'); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - expect(element.getMarkdown()).toEqual('1. '); - }); - - it('Mention node under Bulleted list', async () => { - await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' } - ]); - await commitFirstMentionBoxOptionIntoEditor('@'); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - expect(element.getMarkdown()).toEqual('* '); - }); - }); + }); + + // Intermittent, see https://github.com/ni/nimble/issues/2219 + it('Mention node', async () => { + await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' } + ]); + await commitFirstMentionBoxOptionIntoEditor('@'); + expect(element.getMarkdown()).toEqual(' '); + }); + + it('Multiple Mention node of same type', async () => { + await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ]); + await commitFirstMentionBoxOptionIntoEditor('@'); + await pageObject.setEditorTextContent('@'); + await waitForUpdatesAsync(); + await pageObject.clickMentionListboxOption(1); + expect(element.getMarkdown()).toEqual(' '); + }); + + it('Multiple Mention node of different type', async () => { + await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' } + ]); + await commitFirstMentionBoxOptionIntoEditor('@'); + await appendTestMentionConfiguration(element, [ + { key: 'test:1', displayName: 'testname1' } + ]); + await commitFirstMentionBoxOptionIntoEditor('!'); + expect(element.getMarkdown()).toEqual(' '); + }); + + it('Mention node between Bold text', async () => { + await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' } + ]); + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('Bold '); + await commitFirstMentionBoxOptionIntoEditor('@'); + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('Bold '); + expect(element.getMarkdown()).toEqual( + '**Bold** **Bold** ' + ); + }); + + it('Mention node between Italics text', async () => { + await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' } + ]); + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('Italics '); + await commitFirstMentionBoxOptionIntoEditor('@'); + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('Italics '); + expect(element.getMarkdown()).toEqual( + '*Italics* *Italics* ' + ); + }); + + it('Mention node under Numbered list', async () => { + await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' } + ]); + await commitFirstMentionBoxOptionIntoEditor('@'); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + expect(element.getMarkdown()).toEqual('1. '); + }); + + it('Mention node under Bulleted list', async () => { + await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' } + ]); + await commitFirstMentionBoxOptionIntoEditor('@'); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + expect(element.getMarkdown()).toEqual('* '); + }); + }); + } describe('Excludes other marks in link while serializing', () => { it('Link and Bold', async () => { From b1b6791338f0e9174b637d887a445a3cda9f8571 Mon Sep 17 00:00:00 2001 From: Aagash Raaj <123377167+aagash-ni@users.noreply.github.com> Date: Fri, 13 Sep 2024 14:47:18 +0530 Subject: [PATCH 02/10] minor lint --- .../tests/rich-text-editor-mention.spec.ts | 80 +++++++------------ .../models/tests/markdown-serializer.spec.ts | 56 +++++++++---- 2 files changed, 72 insertions(+), 64 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 6febd565a9..f8e22d8bd7 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 @@ -1377,13 +1377,10 @@ describe('RichTextEditorMentionListbox', () => { for (let i = 0; i < 30; i++) { describe(`Dynamically update mention popup items based on configuration changes${i}`, () => { it('should close mention popup when removing configuration element', async () => { - const { userMentionElement } = await appendUserMentionConfiguration( - element, - [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ] - ); + const { userMentionElement } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ]); await pageObject.setEditorTextContent('@'); expect(pageObject.isMentionListboxOpened()).toBeTrue(); expect(pageObject.getMentionListboxItemsName()).toEqual([ @@ -1415,13 +1412,10 @@ describe('RichTextEditorMentionListbox', () => { }); it('should update mention popup list when mapping elements get replaced', async () => { - const { userMentionElement } = await appendUserMentionConfiguration( - element, - [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ] - ); + const { userMentionElement } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ]); await pageObject.setEditorTextContent('@'); expect(pageObject.getMentionListboxItemsName()).toEqual([ 'username1', @@ -1440,13 +1434,10 @@ describe('RichTextEditorMentionListbox', () => { }); it('should close mention popup when updating to invalid `pattern`', async () => { - const { userMentionElement } = await appendUserMentionConfiguration( - element, - [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ] - ); + const { userMentionElement } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ]); await pageObject.setEditorTextContent('@'); expect(pageObject.getMentionListboxItemsName()).toEqual([ 'username1', @@ -1459,13 +1450,10 @@ describe('RichTextEditorMentionListbox', () => { }); it('should update mention popup list when updating `display-name`', async () => { - const { mappingElements } = await appendUserMentionConfiguration( - element, - [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ] - ); + const { mappingElements } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ]); await pageObject.setEditorTextContent('@'); expect(pageObject.getMentionListboxItemsName()).toEqual([ 'username1', @@ -1481,10 +1469,9 @@ describe('RichTextEditorMentionListbox', () => { }); it('should update mention popup list when updating valid `key`', async () => { - const { mappingElements } = await appendUserMentionConfiguration( - element, - [{ key: 'invalid', displayName: 'username1' }] - ); + const { mappingElements } = await appendUserMentionConfiguration(element, [ + { key: 'invalid', displayName: 'username1' } + ]); await pageObject.setEditorTextContent('@'); expect(pageObject.isMentionListboxOpened()).toBeFalse(); expect(pageObject.getMentionListboxItemsName()).toEqual([]); @@ -1501,13 +1488,10 @@ describe('RichTextEditorMentionListbox', () => { }); it('should close mention popup when updating to invalid `key`', async () => { - const { mappingElements } = await appendUserMentionConfiguration( - element, - [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ] - ); + const { mappingElements } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ]); await pageObject.setEditorTextContent('@'); expect(pageObject.getMentionListboxItemsName()).toEqual([ 'username1', @@ -1520,13 +1504,10 @@ describe('RichTextEditorMentionListbox', () => { }); it('should retain mention popup list position in the same cursor position when configuration got updated', async () => { - const { mappingElements } = await appendUserMentionConfiguration( - element, - [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ] - ); + const { mappingElements } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ]); await pageObject.setEditorTextContent('First Line'); pageObject.moveCursorToStart(); await pageObject.clickUserMentionButton(); @@ -1570,10 +1551,9 @@ describe('RichTextEditorMentionListbox', () => { }); it('mention listbox should be closed when cursor position is moved to start and configuration dynamically changes', async () => { - const { mappingElements } = await appendUserMentionConfiguration( - element, - [{ key: 'user:1', displayName: 'user name1' }] - ); + const { mappingElements } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'user name1' } + ]); await pageObject.setEditorTextContent('@user'); expect(pageObject.isMentionListboxOpened()).toBeTrue(); await pageObject.setCursorPosition(1); 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 588884ff9c..539c9493d1 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 @@ -61,7 +61,9 @@ describe('Markdown serializer', () => { it('Link', async () => { await pageObject.setEditorTextContent('https://nimble.ni.dev '); - expect(element.getMarkdown()).toEqual(' '); + expect(element.getMarkdown()).toEqual( + ' ' + ); }); it('Bold and Italics', async () => { @@ -76,7 +78,10 @@ describe('Markdown serializer', () => { await pageObject.setEditorTextContent('Bold'); await pageObject.toggleFooterButton(ToolbarButton.italics); await pageObject.setEditorTextContent('italics'); - await pageObject.toggleFooterButton(ToolbarButton.italics, false); + await pageObject.toggleFooterButton( + ToolbarButton.italics, + false + ); await pageObject.setEditorTextContent('bold'); expect(element.getMarkdown()).toEqual('**Bold*italics*bold**'); }); @@ -86,9 +91,14 @@ describe('Markdown serializer', () => { await pageObject.setEditorTextContent('Bold '); await pageObject.toggleFooterButton(ToolbarButton.italics); await pageObject.setEditorTextContent('italics'); - await pageObject.toggleFooterButton(ToolbarButton.italics, false); + await pageObject.toggleFooterButton( + ToolbarButton.italics, + false + ); await pageObject.setEditorTextContent(' bold'); - expect(element.getMarkdown()).toEqual('**Bold *italics* bold**'); + expect(element.getMarkdown()).toEqual( + '**Bold *italics* bold**' + ); }); it('Bold without spaces in between italics texts', async () => { @@ -98,7 +108,9 @@ describe('Markdown serializer', () => { await pageObject.setEditorTextContent('bold'); await pageObject.toggleFooterButton(ToolbarButton.bold, false); await pageObject.setEditorTextContent('italics'); - expect(element.getMarkdown()).toEqual('*Italics**bold**italics*'); + expect(element.getMarkdown()).toEqual( + '*Italics**bold**italics*' + ); }); it('Bold with leading and trailing spaces in between italics texts', async () => { @@ -108,7 +120,9 @@ describe('Markdown serializer', () => { await pageObject.setEditorTextContent('bold'); await pageObject.toggleFooterButton(ToolbarButton.bold, false); await pageObject.setEditorTextContent(' italics'); - expect(element.getMarkdown()).toEqual('*Italics **bold** italics*'); + expect(element.getMarkdown()).toEqual( + '*Italics **bold** italics*' + ); }); it('Numbered list', async () => { @@ -129,7 +143,9 @@ describe('Markdown serializer', () => { it('Numbered list with bold', async () => { await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('Numbered list with bold'); + await pageObject.setEditorTextContent( + 'Numbered list with bold' + ); await pageObject.toggleFooterButton(ToolbarButton.numberedList); expect(element.getMarkdown()).toEqual( '1. **Numbered list with bold**' @@ -138,7 +154,9 @@ describe('Markdown serializer', () => { it('Numbered list with italics', async () => { await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('Numbered list with italics'); + await pageObject.setEditorTextContent( + 'Numbered list with italics' + ); await pageObject.toggleFooterButton(ToolbarButton.numberedList); expect(element.getMarkdown()).toEqual( '1. *Numbered list with italics*' @@ -171,7 +189,9 @@ describe('Markdown serializer', () => { it('Bulleted list with bold', async () => { await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('Bulleted list with bold'); + await pageObject.setEditorTextContent( + 'Bulleted list with bold' + ); await pageObject.toggleFooterButton(ToolbarButton.bulletList); expect(element.getMarkdown()).toEqual( '* **Bulleted list with bold**' @@ -180,7 +200,9 @@ describe('Markdown serializer', () => { it('Bulleted list with italics', async () => { await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('Bulleted list with italics'); + await pageObject.setEditorTextContent( + 'Bulleted list with italics' + ); await pageObject.toggleFooterButton(ToolbarButton.bulletList); expect(element.getMarkdown()).toEqual( '* *Bulleted list with italics*' @@ -190,7 +212,9 @@ describe('Markdown serializer', () => { it('Bulleted list with link', async () => { await pageObject.setEditorTextContent('https://nimble.ni.dev '); await pageObject.toggleFooterButton(ToolbarButton.bulletList); - expect(element.getMarkdown()).toEqual('* '); + expect(element.getMarkdown()).toEqual( + '* ' + ); }); it('Toggling off Bulleted list with bold', async () => { @@ -228,7 +252,9 @@ describe('Markdown serializer', () => { await pageObject.pressTabKeyInEditor(); await pageObject.toggleFooterButton(ToolbarButton.numberedList); await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('Nested bold numbered list'); + await pageObject.setEditorTextContent( + 'Nested bold numbered list' + ); expect(element.getMarkdown()).toEqual(r`* Bulleted list 1. **Nested bold numbered list**`); @@ -257,7 +283,8 @@ describe('Markdown serializer', () => { await pageObject.pressTabKeyInEditor(); await pageObject.toggleFooterButton(ToolbarButton.bulletList); await pageObject.setEditorTextContent('Nested bulleted list'); - expect(element.getMarkdown()).toEqual(r`1. **Numbered list bold** + expect(element.getMarkdown()) + .toEqual(r`1. **Numbered list bold** * Nested bulleted list`); }); @@ -270,7 +297,8 @@ describe('Markdown serializer', () => { await pageObject.pressTabKeyInEditor(); await pageObject.toggleFooterButton(ToolbarButton.bulletList); await pageObject.setEditorTextContent('Nested bulleted list'); - expect(element.getMarkdown()).toEqual(r`1. *Numbered list italics* + expect(element.getMarkdown()) + .toEqual(r`1. *Numbered list italics* * Nested bulleted list`); }); From 529a817816cb6580c5d8619646ad02dfb5518c11 Mon Sep 17 00:00:00 2001 From: Aagash Raaj <123377167+aagash-ni@users.noreply.github.com> Date: Fri, 13 Sep 2024 16:12:37 +0530 Subject: [PATCH 03/10] Update loop pattern --- .../tests/rich-text-editor-mention.spec.ts | 29 +- .../models/tests/markdown-serializer.spec.ts | 470 +++++++++--------- 2 files changed, 251 insertions(+), 248 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 f8e22d8bd7..04282637f6 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 @@ -1,3 +1,4 @@ +/* eslint-disable no-useless-concat */ /* eslint-disable @typescript-eslint/no-loop-func */ import { html } from '@microsoft/fast-element'; import { parameterizeSpec } from '@ni/jasmine-parameterized'; @@ -1374,9 +1375,9 @@ describe('RichTextEditorMentionListbox', () => { }); }); - for (let i = 0; i < 30; i++) { - describe(`Dynamically update mention popup items based on configuration changes${i}`, () => { - it('should close mention popup when removing configuration element', async () => { + describe('Dynamically update mention popup items based on configuration changes', () => { + for (let i = 0; i < 30; i++) { + it('should close mention popup when removing configuration element' + `${i}`, async () => { const { userMentionElement } = await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' }, { key: 'user:2', displayName: 'username2' } @@ -1393,7 +1394,7 @@ describe('RichTextEditorMentionListbox', () => { expect(pageObject.getMentionListboxItemsName()).toEqual([]); }); - it('should update mention popup list when removing mapping element', async () => { + it('should update mention popup list when removing mapping element' + `${i}`, async () => { const { mappingElements, userMentionElement } = await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' }, { key: 'user:2', displayName: 'username2' } @@ -1411,7 +1412,7 @@ describe('RichTextEditorMentionListbox', () => { expect(pageObject.isMentionListboxOpened()).toBeTrue(); }); - it('should update mention popup list when mapping elements get replaced', async () => { + it('should update mention popup list when mapping elements get replaced' + `${i}`, async () => { const { userMentionElement } = await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' }, { key: 'user:2', displayName: 'username2' } @@ -1433,7 +1434,7 @@ describe('RichTextEditorMentionListbox', () => { expect(pageObject.isMentionListboxOpened()).toBeTrue(); }); - it('should close mention popup when updating to invalid `pattern`', async () => { + it('should close mention popup when updating to invalid `pattern`' + `${i}`, async () => { const { userMentionElement } = await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' }, { key: 'user:2', displayName: 'username2' } @@ -1449,7 +1450,7 @@ describe('RichTextEditorMentionListbox', () => { expect(pageObject.isMentionListboxOpened()).toBeFalse(); }); - it('should update mention popup list when updating `display-name`', async () => { + it('should update mention popup list when updating `display-name`' + `${i}`, async () => { const { mappingElements } = await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' }, { key: 'user:2', displayName: 'username2' } @@ -1468,7 +1469,7 @@ describe('RichTextEditorMentionListbox', () => { expect(pageObject.isMentionListboxOpened()).toBeTrue(); }); - it('should update mention popup list when updating valid `key`', async () => { + it('should update mention popup list when updating valid `key`' + `${i}`, async () => { const { mappingElements } = await appendUserMentionConfiguration(element, [ { key: 'invalid', displayName: 'username1' } ]); @@ -1487,7 +1488,7 @@ describe('RichTextEditorMentionListbox', () => { expect(pageObject.isMentionListboxOpened()).toBeTrue(); }); - it('should close mention popup when updating to invalid `key`', async () => { + it('should close mention popup when updating to invalid `key`' + `${i}`, async () => { const { mappingElements } = await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' }, { key: 'user:2', displayName: 'username2' } @@ -1503,7 +1504,7 @@ describe('RichTextEditorMentionListbox', () => { expect(pageObject.isMentionListboxOpened()).toBeFalse(); }); - it('should retain mention popup list position in the same cursor position when configuration got updated', async () => { + it('should retain mention popup list position in the same cursor position when configuration got updated' + `${i}`, async () => { const { mappingElements } = await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' }, { key: 'user:2', displayName: 'username2' } @@ -1526,7 +1527,7 @@ describe('RichTextEditorMentionListbox', () => { }); // Intermittent, see https://github.com/ni/nimble/issues/2219 - it('should show mention popup for multiple mention configuration elements', async () => { + it('should show mention popup for multiple mention configuration elements' + `${i}`, async () => { await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' }, { key: 'user:2', displayName: 'username2' } @@ -1550,7 +1551,7 @@ describe('RichTextEditorMentionListbox', () => { ]); }); - it('mention listbox should be closed when cursor position is moved to start and configuration dynamically changes', async () => { + it('mention listbox should be closed when cursor position is moved to start and configuration dynamically changes' + `${i}`, async () => { const { mappingElements } = await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'user name1' } ]); @@ -1562,6 +1563,6 @@ describe('RichTextEditorMentionListbox', () => { await waitForUpdatesAsync(); expect(pageObject.isMentionListboxOpened()).toBeFalse(); }); - }); - } + } + }); }); 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 539c9493d1..543b34e726 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 @@ -1,3 +1,5 @@ +/* eslint-disable no-useless-concat */ +/* eslint-disable @typescript-eslint/restrict-plus-operands */ /* eslint-disable @typescript-eslint/no-loop-func */ import { html } from '@microsoft/fast-element'; import type { RichTextEditor } from '../../editor'; @@ -41,270 +43,270 @@ describe('Markdown serializer', () => { await disconnect(); }); - for (let i = 0; i < 10; i++) { - describe(`Serialize rich text editor content to its respective markdown${i}`, () => { - const r = String.raw; + describe('Serialize rich text editor content to its respective markdown', () => { + const r = String.raw; - it('Bold', async () => { - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('Bold'); + it('Bold', async () => { + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('Bold'); - expect(element.getMarkdown()).toEqual('**Bold**'); - }); + expect(element.getMarkdown()).toEqual('**Bold**'); + }); - it('Italics', async () => { - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('Italics'); + it('Italics', async () => { + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('Italics'); - expect(element.getMarkdown()).toEqual('*Italics*'); - }); + expect(element.getMarkdown()).toEqual('*Italics*'); + }); - it('Link', async () => { - await pageObject.setEditorTextContent('https://nimble.ni.dev '); - expect(element.getMarkdown()).toEqual( - ' ' - ); - }); + it('Link', async () => { + await pageObject.setEditorTextContent('https://nimble.ni.dev '); + expect(element.getMarkdown()).toEqual( + ' ' + ); + }); - it('Bold and Italics', async () => { - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('Bold and Italics'); - expect(element.getMarkdown()).toEqual('***Bold and Italics***'); - }); + it('Bold and Italics', async () => { + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('Bold and Italics'); + expect(element.getMarkdown()).toEqual('***Bold and Italics***'); + }); - it('Italics without spaces in between bold texts', async () => { - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('Bold'); - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('italics'); - await pageObject.toggleFooterButton( - ToolbarButton.italics, - false - ); - await pageObject.setEditorTextContent('bold'); - expect(element.getMarkdown()).toEqual('**Bold*italics*bold**'); - }); + it('Italics without spaces in between bold texts', async () => { + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('Bold'); + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('italics'); + await pageObject.toggleFooterButton( + ToolbarButton.italics, + false + ); + await pageObject.setEditorTextContent('bold'); + expect(element.getMarkdown()).toEqual('**Bold*italics*bold**'); + }); - it('Italics with leading and trailing spaces in between bold texts', async () => { - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('Bold '); - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('italics'); - await pageObject.toggleFooterButton( - ToolbarButton.italics, - false - ); - await pageObject.setEditorTextContent(' bold'); - expect(element.getMarkdown()).toEqual( - '**Bold *italics* bold**' - ); - }); + it('Italics with leading and trailing spaces in between bold texts', async () => { + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('Bold '); + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('italics'); + await pageObject.toggleFooterButton( + ToolbarButton.italics, + false + ); + await pageObject.setEditorTextContent(' bold'); + expect(element.getMarkdown()).toEqual( + '**Bold *italics* bold**' + ); + }); - it('Bold without spaces in between italics texts', async () => { - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('Italics'); - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('bold'); - await pageObject.toggleFooterButton(ToolbarButton.bold, false); - await pageObject.setEditorTextContent('italics'); - expect(element.getMarkdown()).toEqual( - '*Italics**bold**italics*' - ); - }); + it('Bold without spaces in between italics texts', async () => { + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('Italics'); + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('bold'); + await pageObject.toggleFooterButton(ToolbarButton.bold, false); + await pageObject.setEditorTextContent('italics'); + expect(element.getMarkdown()).toEqual( + '*Italics**bold**italics*' + ); + }); - it('Bold with leading and trailing spaces in between italics texts', async () => { - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('Italics '); - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('bold'); - await pageObject.toggleFooterButton(ToolbarButton.bold, false); - await pageObject.setEditorTextContent(' italics'); - expect(element.getMarkdown()).toEqual( - '*Italics **bold** italics*' - ); - }); + it('Bold with leading and trailing spaces in between italics texts', async () => { + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('Italics '); + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('bold'); + await pageObject.toggleFooterButton(ToolbarButton.bold, false); + await pageObject.setEditorTextContent(' italics'); + expect(element.getMarkdown()).toEqual( + '*Italics **bold** italics*' + ); + }); - it('Numbered list', async () => { - await pageObject.setEditorTextContent('Numbered list'); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - expect(element.getMarkdown()).toEqual('1. Numbered list'); - }); + it('Numbered list', async () => { + await pageObject.setEditorTextContent('Numbered list'); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + expect(element.getMarkdown()).toEqual('1. Numbered list'); + }); - it('Multiple Numbered list', async () => { - await pageObject.setEditorTextContent('list 1'); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - await pageObject.pressEnterKeyInEditor(); - await pageObject.setEditorTextContent('list 2'); - expect(element.getMarkdown()).toEqual(r`1. list 1 + it('Multiple Numbered list', async () => { + await pageObject.setEditorTextContent('list 1'); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + await pageObject.pressEnterKeyInEditor(); + await pageObject.setEditorTextContent('list 2'); + expect(element.getMarkdown()).toEqual(r`1. list 1 2. list 2`); - }); + }); - it('Numbered list with bold', async () => { - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent( - 'Numbered list with bold' - ); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - expect(element.getMarkdown()).toEqual( - '1. **Numbered list with bold**' - ); - }); + it('Numbered list with bold', async () => { + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent( + 'Numbered list with bold' + ); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + expect(element.getMarkdown()).toEqual( + '1. **Numbered list with bold**' + ); + }); - it('Numbered list with italics', async () => { - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent( - 'Numbered list with italics' - ); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - expect(element.getMarkdown()).toEqual( - '1. *Numbered list with italics*' - ); - }); + it('Numbered list with italics', async () => { + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent( + 'Numbered list with italics' + ); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + expect(element.getMarkdown()).toEqual( + '1. *Numbered list with italics*' + ); + }); - it('Numbered list with link', async () => { - await pageObject.setEditorTextContent('https://nimble.ni.dev '); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - expect(element.getMarkdown()).toEqual( - '1. ' - ); - }); + it('Numbered list with link', async () => { + await pageObject.setEditorTextContent('https://nimble.ni.dev '); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + expect(element.getMarkdown()).toEqual( + '1. ' + ); + }); - it('Bulleted list', async () => { - await pageObject.setEditorTextContent('Bulleted list'); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - expect(element.getMarkdown()).toEqual('* Bulleted list'); - }); + it('Bulleted list', async () => { + await pageObject.setEditorTextContent('Bulleted list'); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + expect(element.getMarkdown()).toEqual('* Bulleted list'); + }); - it('Multiple Bulleted list', async () => { - await pageObject.setEditorTextContent('list 1'); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - await pageObject.pressEnterKeyInEditor(); - await pageObject.setEditorTextContent('list 2'); - expect(element.getMarkdown()).toEqual(r`* list 1 + it('Multiple Bulleted list', async () => { + await pageObject.setEditorTextContent('list 1'); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + await pageObject.pressEnterKeyInEditor(); + await pageObject.setEditorTextContent('list 2'); + expect(element.getMarkdown()).toEqual(r`* list 1 * list 2`); - }); + }); - it('Bulleted list with bold', async () => { - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent( - 'Bulleted list with bold' - ); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - expect(element.getMarkdown()).toEqual( - '* **Bulleted list with bold**' - ); - }); + it('Bulleted list with bold', async () => { + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent( + 'Bulleted list with bold' + ); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + expect(element.getMarkdown()).toEqual( + '* **Bulleted list with bold**' + ); + }); - it('Bulleted list with italics', async () => { - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent( - 'Bulleted list with italics' - ); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - expect(element.getMarkdown()).toEqual( - '* *Bulleted list with italics*' - ); - }); + it('Bulleted list with italics', async () => { + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent( + 'Bulleted list with italics' + ); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + expect(element.getMarkdown()).toEqual( + '* *Bulleted list with italics*' + ); + }); - it('Bulleted list with link', async () => { - await pageObject.setEditorTextContent('https://nimble.ni.dev '); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - expect(element.getMarkdown()).toEqual( - '* ' - ); - }); + it('Bulleted list with link', async () => { + await pageObject.setEditorTextContent('https://nimble.ni.dev '); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + expect(element.getMarkdown()).toEqual( + '* ' + ); + }); - it('Toggling off Bulleted list with bold', async () => { - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('List 1'); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - await pageObject.pressEnterKeyInEditor(); - await pageObject.setEditorTextContent('list 2'); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('plain text'); - expect(element.getMarkdown()).toEqual(r`* **List 1** + it('Toggling off Bulleted list with bold', async () => { + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('List 1'); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + await pageObject.pressEnterKeyInEditor(); + await pageObject.setEditorTextContent('list 2'); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('plain text'); + expect(element.getMarkdown()).toEqual(r`* **List 1** **list 2**plain text`); - }); + }); - it('Toggling off Numbered list with bold', async () => { - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('List 1'); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - await pageObject.pressEnterKeyInEditor(); - await pageObject.setEditorTextContent('list 2'); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('plain text'); - expect(element.getMarkdown()).toEqual(r`1. **List 1** + it('Toggling off Numbered list with bold', async () => { + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('List 1'); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + await pageObject.pressEnterKeyInEditor(); + await pageObject.setEditorTextContent('list 2'); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('plain text'); + expect(element.getMarkdown()).toEqual(r`1. **List 1** **list 2**plain text`); - }); + }); - it('Nested list with levels 1 - Bulleted list, 2 - Numbered list (Bold)', async () => { - await pageObject.setEditorTextContent('Bulleted list'); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - await pageObject.pressEnterKeyInEditor(); - await pageObject.pressTabKeyInEditor(); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent( - 'Nested bold numbered list' - ); - expect(element.getMarkdown()).toEqual(r`* Bulleted list + it('Nested list with levels 1 - Bulleted list, 2 - Numbered list (Bold)', async () => { + await pageObject.setEditorTextContent('Bulleted list'); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + await pageObject.pressEnterKeyInEditor(); + await pageObject.pressTabKeyInEditor(); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent( + 'Nested bold numbered list' + ); + expect(element.getMarkdown()).toEqual(r`* Bulleted list 1. **Nested bold numbered list**`); - }); + }); - it('Nested list with levels 1 - Bulleted list, 2 - Numbered list (Italics)', async () => { - await pageObject.setEditorTextContent('Bulleted list'); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - await pageObject.pressEnterKeyInEditor(); - await pageObject.pressTabKeyInEditor(); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent( - 'Nested italics numbered list' - ); - expect(element.getMarkdown()).toEqual(r`* Bulleted list + it('Nested list with levels 1 - Bulleted list, 2 - Numbered list (Italics)', async () => { + await pageObject.setEditorTextContent('Bulleted list'); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + await pageObject.pressEnterKeyInEditor(); + await pageObject.pressTabKeyInEditor(); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent( + 'Nested italics numbered list' + ); + expect(element.getMarkdown()).toEqual(r`* Bulleted list 1. *Nested italics numbered list*`); - }); + }); - it('Nested list with levels 1- Numbered list (Bold), 2-Bulleted list', async () => { - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('Numbered list bold'); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - await pageObject.pressEnterKeyInEditor(); - await pageObject.pressTabKeyInEditor(); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - await pageObject.setEditorTextContent('Nested bulleted list'); - expect(element.getMarkdown()) - .toEqual(r`1. **Numbered list bold** + it('Nested list with levels 1- Numbered list (Bold), 2-Bulleted list', async () => { + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('Numbered list bold'); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + await pageObject.pressEnterKeyInEditor(); + await pageObject.pressTabKeyInEditor(); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + await pageObject.setEditorTextContent('Nested bulleted list'); + expect(element.getMarkdown()) + .toEqual(r`1. **Numbered list bold** * Nested bulleted list`); - }); + }); - it('Nested list with levels 1- Numbered list (Italics), 2-Bulleted list', async () => { - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('Numbered list italics'); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - await pageObject.pressEnterKeyInEditor(); - await pageObject.pressTabKeyInEditor(); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - await pageObject.setEditorTextContent('Nested bulleted list'); - expect(element.getMarkdown()) - .toEqual(r`1. *Numbered list italics* + it('Nested list with levels 1- Numbered list (Italics), 2-Bulleted list', async () => { + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('Numbered list italics'); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + await pageObject.pressEnterKeyInEditor(); + await pageObject.pressTabKeyInEditor(); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + await pageObject.setEditorTextContent('Nested bulleted list'); + expect(element.getMarkdown()) + .toEqual(r`1. *Numbered list italics* * Nested bulleted list`); - }); + }); + for (let i = 0; i < 30; i++) { // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it('Hard break #SkipWebkit', async () => { + it('Hard break #SkipWebkit' + `${i}`, async () => { await pageObject.setEditorTextContent('Plain text 1'); await pageObject.pressShiftEnterKeysInEditor(); await pageObject.setEditorTextContent('Plain text 2'); @@ -316,7 +318,7 @@ Plain text 3`); }); // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it('Hard break with bold #SkipWebkit', async () => { + it('Hard break with bold #SkipWebkit' + `${i}`, async () => { await pageObject.toggleFooterButton(ToolbarButton.bold); await pageObject.setEditorTextContent('Bold'); await pageObject.pressShiftEnterKeysInEditor(); @@ -326,7 +328,7 @@ Plain text 3`); }); // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it('Hard break with italics #SkipWebkit', async () => { + it('Hard break with italics #SkipWebkit' + `${i}`, async () => { await pageObject.toggleFooterButton(ToolbarButton.italics); await pageObject.setEditorTextContent('Italics'); await pageObject.pressShiftEnterKeysInEditor(); @@ -336,7 +338,7 @@ Plain text 3`); }); // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it('Hard break with bulleted list #SkipWebkit', async () => { + it('Hard break with bulleted list #SkipWebkit' + `${i}`, async () => { await pageObject.setEditorTextContent('Bulleted'); await pageObject.toggleFooterButton(ToolbarButton.bulletList); await pageObject.pressShiftEnterKeysInEditor(); @@ -346,7 +348,7 @@ Plain text 3`); }); // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it('Hard break with numbered list #SkipWebkit', async () => { + it('Hard break with numbered list #SkipWebkit' + `${i}`, async () => { await pageObject.setEditorTextContent('Numbered'); await pageObject.toggleFooterButton(ToolbarButton.numberedList); await pageObject.pressShiftEnterKeysInEditor(); @@ -356,7 +358,7 @@ Plain text 3`); }); // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it('Hard break with mention node #SkipWebkit', async () => { + it('Hard break with mention node #SkipWebkit' + `${i}`, async () => { await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' } ]); @@ -368,7 +370,7 @@ Plain text 3`); }); // Intermittent, see https://github.com/ni/nimble/issues/2219 - it('Mention node', async () => { + it('Mention node' + `${i}`, async () => { await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' } ]); @@ -376,7 +378,7 @@ Plain text 3`); expect(element.getMarkdown()).toEqual(' '); }); - it('Multiple Mention node of same type', async () => { + it('Multiple Mention node of same type' + `${i}`, async () => { await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' }, { key: 'user:2', displayName: 'username2' } @@ -388,7 +390,7 @@ Plain text 3`); expect(element.getMarkdown()).toEqual(' '); }); - it('Multiple Mention node of different type', async () => { + it('Multiple Mention node of different type' + `${i}`, async () => { await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' } ]); @@ -400,7 +402,7 @@ Plain text 3`); expect(element.getMarkdown()).toEqual(' '); }); - it('Mention node between Bold text', async () => { + it('Mention node between Bold text' + `${i}`, async () => { await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' } ]); @@ -414,7 +416,7 @@ Plain text 3`); ); }); - it('Mention node between Italics text', async () => { + it('Mention node between Italics text' + `${i}`, async () => { await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' } ]); @@ -428,7 +430,7 @@ Plain text 3`); ); }); - it('Mention node under Numbered list', async () => { + it('Mention node under Numbered list' + `${i}`, async () => { await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' } ]); @@ -437,7 +439,7 @@ Plain text 3`); expect(element.getMarkdown()).toEqual('1. '); }); - it('Mention node under Bulleted list', async () => { + it('Mention node under Bulleted list' + `${i}`, async () => { await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' } ]); @@ -445,8 +447,8 @@ Plain text 3`); await pageObject.toggleFooterButton(ToolbarButton.bulletList); expect(element.getMarkdown()).toEqual('* '); }); - }); - } + } + }); describe('Excludes other marks in link while serializing', () => { it('Link and Bold', async () => { From 8e3e8c135cc9c82a97de5b07dad9550560fd44ff Mon Sep 17 00:00:00 2001 From: Aagash Raaj <123377167+aagash-ni@users.noreply.github.com> Date: Fri, 13 Sep 2024 17:04:06 +0530 Subject: [PATCH 04/10] Lint fix --- .../tests/rich-text-editor-mention.spec.ts | 392 ++++++++++-------- .../models/tests/markdown-serializer.spec.ts | 115 +++-- 2 files changed, 266 insertions(+), 241 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 04282637f6..9d07744aad 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 @@ -1377,192 +1377,232 @@ describe('RichTextEditorMentionListbox', () => { describe('Dynamically update mention popup items based on configuration changes', () => { for (let i = 0; i < 30; i++) { - it('should close mention popup when removing configuration element' + `${i}`, async () => { - const { userMentionElement } = 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' - ]); - element.removeChild(userMentionElement); - await waitForUpdatesAsync(); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); - expect(pageObject.getMentionListboxItemsName()).toEqual([]); - }); + it( + 'should close mention popup when removing configuration element' + + `${i}`, + async () => { + const { userMentionElement } = 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' + ]); + element.removeChild(userMentionElement); + await waitForUpdatesAsync(); + expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(pageObject.getMentionListboxItemsName()).toEqual([]); + } + ); - it('should update mention popup list when removing mapping element' + `${i}`, async () => { - const { mappingElements, userMentionElement } = await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ]); - await pageObject.setEditorTextContent('@'); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1', - 'username2' - ]); - userMentionElement.removeChild(mappingElements[0]!); - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username2' - ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); - }); + it( + 'should update mention popup list when removing mapping element' + + `${i}`, + async () => { + const { mappingElements, userMentionElement } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ]); + await pageObject.setEditorTextContent('@'); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1', + 'username2' + ]); + userMentionElement.removeChild(mappingElements[0]!); + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username2' + ]); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); + } + ); - it('should update mention popup list when mapping elements get replaced' + `${i}`, async () => { - const { userMentionElement } = await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ]); - await pageObject.setEditorTextContent('@'); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1', - 'username2' - ]); - await replaceUserMappingElements(userMentionElement, [ - { key: 'user:3', displayName: 'username3' }, - { key: 'user:4', displayName: 'username4' } - ]); - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username3', - 'username4' - ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); - }); + it( + 'should update mention popup list when mapping elements get replaced' + + `${i}`, + async () => { + const { userMentionElement } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ]); + await pageObject.setEditorTextContent('@'); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1', + 'username2' + ]); + await replaceUserMappingElements(userMentionElement, [ + { key: 'user:3', displayName: 'username3' }, + { key: 'user:4', displayName: 'username4' } + ]); + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username3', + 'username4' + ]); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); + } + ); - it('should close mention popup when updating to invalid `pattern`' + `${i}`, async () => { - const { userMentionElement } = await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ]); - await pageObject.setEditorTextContent('@'); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1', - 'username2' - ]); - userMentionElement.pattern = 'invalid'; - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([]); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); - }); + it( + 'should close mention popup when updating to invalid `pattern`' + + `${i}`, + async () => { + const { userMentionElement } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ]); + await pageObject.setEditorTextContent('@'); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1', + 'username2' + ]); + userMentionElement.pattern = 'invalid'; + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([]); + expect(pageObject.isMentionListboxOpened()).toBeFalse(); + } + ); - it('should update mention popup list when updating `display-name`' + `${i}`, async () => { - const { mappingElements } = await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ]); - await pageObject.setEditorTextContent('@'); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1', - 'username2' - ]); - mappingElements[0]!.displayName = 'updated-name'; - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'updated-name', - 'username2' - ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); - }); + it( + 'should update mention popup list when updating `display-name`' + + `${i}`, + async () => { + const { mappingElements } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ]); + await pageObject.setEditorTextContent('@'); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1', + 'username2' + ]); + mappingElements[0]!.displayName = 'updated-name'; + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'updated-name', + 'username2' + ]); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); + } + ); - it('should update mention popup list when updating valid `key`' + `${i}`, async () => { - const { mappingElements } = await appendUserMentionConfiguration(element, [ - { key: 'invalid', displayName: 'username1' } - ]); - await pageObject.setEditorTextContent('@'); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); - expect(pageObject.getMentionListboxItemsName()).toEqual([]); - mappingElements[0]!.key = 'user:1'; - // After the first wait, `activeMappingConfigs` is updated, - // which is directly bound to the template for populating the `nimble-list-option`. - // But only after the second wait, `nimble-list-option` gets populated. - await waitForUpdatesAsync(); - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1' - ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); - }); + it( + 'should update mention popup list when updating valid `key`' + + `${i}`, + async () => { + const { mappingElements } = await appendUserMentionConfiguration(element, [ + { key: 'invalid', displayName: 'username1' } + ]); + await pageObject.setEditorTextContent('@'); + expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(pageObject.getMentionListboxItemsName()).toEqual([]); + mappingElements[0]!.key = 'user:1'; + // After the first wait, `activeMappingConfigs` is updated, + // which is directly bound to the template for populating the `nimble-list-option`. + // But only after the second wait, `nimble-list-option` gets populated. + await waitForUpdatesAsync(); + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1' + ]); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); + } + ); - it('should close mention popup when updating to invalid `key`' + `${i}`, async () => { - const { mappingElements } = await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ]); - await pageObject.setEditorTextContent('@'); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1', - 'username2' - ]); - mappingElements[0]!.key = 'invalid'; - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([]); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); - }); + it( + 'should close mention popup when updating to invalid `key`' + + `${i}`, + async () => { + const { mappingElements } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ]); + await pageObject.setEditorTextContent('@'); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1', + 'username2' + ]); + mappingElements[0]!.key = 'invalid'; + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([]); + expect(pageObject.isMentionListboxOpened()).toBeFalse(); + } + ); - it('should retain mention popup list position in the same cursor position when configuration got updated' + `${i}`, async () => { - const { mappingElements } = await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ]); - await pageObject.setEditorTextContent('First Line'); - pageObject.moveCursorToStart(); - await pageObject.clickUserMentionButton(); - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1', - 'username2' - ]); - mappingElements[0]!.displayName = 'New user'; - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'New user', - 'username2' - ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); - }); + it( + 'should retain mention popup list position in the same cursor position when configuration got updated' + + `${i}`, + async () => { + const { mappingElements } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ]); + await pageObject.setEditorTextContent('First Line'); + pageObject.moveCursorToStart(); + await pageObject.clickUserMentionButton(); + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1', + 'username2' + ]); + mappingElements[0]!.displayName = 'New user'; + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'New user', + 'username2' + ]); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); + } + ); // Intermittent, see https://github.com/ni/nimble/issues/2219 - it('should show mention popup for multiple mention configuration elements' + `${i}`, 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); - 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' - ]); - }); + it( + 'should show mention popup for multiple mention configuration elements' + + `${i}`, + 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); + 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' + ]); + } + ); - it('mention listbox should be closed when cursor position is moved to start and configuration dynamically changes' + `${i}`, async () => { - const { mappingElements } = await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'user name1' } - ]); - await pageObject.setEditorTextContent('@user'); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); - await pageObject.setCursorPosition(1); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); - mappingElements[0]!.displayName = 'user name2'; - await waitForUpdatesAsync(); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); - }); + it( + 'mention listbox should be closed when cursor position is moved to start and configuration dynamically changes' + + `${i}`, + async () => { + const { mappingElements } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'user name1' } + ]); + await pageObject.setEditorTextContent('@user'); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); + await pageObject.setCursorPosition(1); + expect(pageObject.isMentionListboxOpened()).toBeFalse(); + mappingElements[0]!.displayName = 'user name2'; + await waitForUpdatesAsync(); + expect(pageObject.isMentionListboxOpened()).toBeFalse(); + } + ); } }); }); 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 543b34e726..589968cc73 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 @@ -62,9 +62,7 @@ describe('Markdown serializer', () => { it('Link', async () => { await pageObject.setEditorTextContent('https://nimble.ni.dev '); - expect(element.getMarkdown()).toEqual( - ' ' - ); + expect(element.getMarkdown()).toEqual(' '); }); it('Bold and Italics', async () => { @@ -79,10 +77,7 @@ describe('Markdown serializer', () => { await pageObject.setEditorTextContent('Bold'); await pageObject.toggleFooterButton(ToolbarButton.italics); await pageObject.setEditorTextContent('italics'); - await pageObject.toggleFooterButton( - ToolbarButton.italics, - false - ); + await pageObject.toggleFooterButton(ToolbarButton.italics, false); await pageObject.setEditorTextContent('bold'); expect(element.getMarkdown()).toEqual('**Bold*italics*bold**'); }); @@ -92,14 +87,9 @@ describe('Markdown serializer', () => { await pageObject.setEditorTextContent('Bold '); await pageObject.toggleFooterButton(ToolbarButton.italics); await pageObject.setEditorTextContent('italics'); - await pageObject.toggleFooterButton( - ToolbarButton.italics, - false - ); + await pageObject.toggleFooterButton(ToolbarButton.italics, false); await pageObject.setEditorTextContent(' bold'); - expect(element.getMarkdown()).toEqual( - '**Bold *italics* bold**' - ); + expect(element.getMarkdown()).toEqual('**Bold *italics* bold**'); }); it('Bold without spaces in between italics texts', async () => { @@ -109,9 +99,7 @@ describe('Markdown serializer', () => { await pageObject.setEditorTextContent('bold'); await pageObject.toggleFooterButton(ToolbarButton.bold, false); await pageObject.setEditorTextContent('italics'); - expect(element.getMarkdown()).toEqual( - '*Italics**bold**italics*' - ); + expect(element.getMarkdown()).toEqual('*Italics**bold**italics*'); }); it('Bold with leading and trailing spaces in between italics texts', async () => { @@ -121,9 +109,7 @@ describe('Markdown serializer', () => { await pageObject.setEditorTextContent('bold'); await pageObject.toggleFooterButton(ToolbarButton.bold, false); await pageObject.setEditorTextContent(' italics'); - expect(element.getMarkdown()).toEqual( - '*Italics **bold** italics*' - ); + expect(element.getMarkdown()).toEqual('*Italics **bold** italics*'); }); it('Numbered list', async () => { @@ -144,9 +130,7 @@ describe('Markdown serializer', () => { it('Numbered list with bold', async () => { await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent( - 'Numbered list with bold' - ); + await pageObject.setEditorTextContent('Numbered list with bold'); await pageObject.toggleFooterButton(ToolbarButton.numberedList); expect(element.getMarkdown()).toEqual( '1. **Numbered list with bold**' @@ -155,9 +139,7 @@ describe('Markdown serializer', () => { it('Numbered list with italics', async () => { await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent( - 'Numbered list with italics' - ); + await pageObject.setEditorTextContent('Numbered list with italics'); await pageObject.toggleFooterButton(ToolbarButton.numberedList); expect(element.getMarkdown()).toEqual( '1. *Numbered list with italics*' @@ -190,9 +172,7 @@ describe('Markdown serializer', () => { it('Bulleted list with bold', async () => { await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent( - 'Bulleted list with bold' - ); + await pageObject.setEditorTextContent('Bulleted list with bold'); await pageObject.toggleFooterButton(ToolbarButton.bulletList); expect(element.getMarkdown()).toEqual( '* **Bulleted list with bold**' @@ -201,9 +181,7 @@ describe('Markdown serializer', () => { it('Bulleted list with italics', async () => { await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent( - 'Bulleted list with italics' - ); + await pageObject.setEditorTextContent('Bulleted list with italics'); await pageObject.toggleFooterButton(ToolbarButton.bulletList); expect(element.getMarkdown()).toEqual( '* *Bulleted list with italics*' @@ -213,9 +191,7 @@ describe('Markdown serializer', () => { it('Bulleted list with link', async () => { await pageObject.setEditorTextContent('https://nimble.ni.dev '); await pageObject.toggleFooterButton(ToolbarButton.bulletList); - expect(element.getMarkdown()).toEqual( - '* ' - ); + expect(element.getMarkdown()).toEqual('* '); }); it('Toggling off Bulleted list with bold', async () => { @@ -253,9 +229,7 @@ describe('Markdown serializer', () => { await pageObject.pressTabKeyInEditor(); await pageObject.toggleFooterButton(ToolbarButton.numberedList); await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent( - 'Nested bold numbered list' - ); + await pageObject.setEditorTextContent('Nested bold numbered list'); expect(element.getMarkdown()).toEqual(r`* Bulleted list 1. **Nested bold numbered list**`); @@ -284,8 +258,7 @@ describe('Markdown serializer', () => { await pageObject.pressTabKeyInEditor(); await pageObject.toggleFooterButton(ToolbarButton.bulletList); await pageObject.setEditorTextContent('Nested bulleted list'); - expect(element.getMarkdown()) - .toEqual(r`1. **Numbered list bold** + expect(element.getMarkdown()).toEqual(r`1. **Numbered list bold** * Nested bulleted list`); }); @@ -298,8 +271,7 @@ describe('Markdown serializer', () => { await pageObject.pressTabKeyInEditor(); await pageObject.toggleFooterButton(ToolbarButton.bulletList); await pageObject.setEditorTextContent('Nested bulleted list'); - expect(element.getMarkdown()) - .toEqual(r`1. *Numbered list italics* + expect(element.getMarkdown()).toEqual(r`1. *Numbered list italics* * Nested bulleted list`); }); @@ -338,36 +310,49 @@ Plain text 3`); }); // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it('Hard break with bulleted list #SkipWebkit' + `${i}`, async () => { - await pageObject.setEditorTextContent('Bulleted'); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - await pageObject.pressShiftEnterKeysInEditor(); - await pageObject.setEditorTextContent('list'); - expect(element.getMarkdown()).toEqual(r`* Bulleted\ + it( + 'Hard break with bulleted list #SkipWebkit' + `${i}`, + async () => { + await pageObject.setEditorTextContent('Bulleted'); + await pageObject.toggleFooterButton( + ToolbarButton.bulletList + ); + await pageObject.pressShiftEnterKeysInEditor(); + await pageObject.setEditorTextContent('list'); + expect(element.getMarkdown()).toEqual(r`* Bulleted\ list`); - }); + } + ); // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it('Hard break with numbered list #SkipWebkit' + `${i}`, async () => { - await pageObject.setEditorTextContent('Numbered'); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - await pageObject.pressShiftEnterKeysInEditor(); - await pageObject.setEditorTextContent('list'); - expect(element.getMarkdown()).toEqual(r`1. Numbered\ + it( + 'Hard break with numbered list #SkipWebkit' + `${i}`, + async () => { + await pageObject.setEditorTextContent('Numbered'); + await pageObject.toggleFooterButton( + ToolbarButton.numberedList + ); + await pageObject.pressShiftEnterKeysInEditor(); + await pageObject.setEditorTextContent('list'); + expect(element.getMarkdown()).toEqual(r`1. Numbered\ list`); - }); + } + ); // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it('Hard break with mention node #SkipWebkit' + `${i}`, async () => { - await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' } - ]); - await commitFirstMentionBoxOptionIntoEditor('@'); - await pageObject.pressShiftEnterKeysInEditor(); - await commitFirstMentionBoxOptionIntoEditor('@'); - expect(element.getMarkdown()).toEqual(r` \ + it( + 'Hard break with mention node #SkipWebkit' + `${i}`, + async () => { + await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' } + ]); + await commitFirstMentionBoxOptionIntoEditor('@'); + await pageObject.pressShiftEnterKeysInEditor(); + await commitFirstMentionBoxOptionIntoEditor('@'); + expect(element.getMarkdown()).toEqual(r` \ `); - }); + } + ); // Intermittent, see https://github.com/ni/nimble/issues/2219 it('Mention node' + `${i}`, async () => { From 891c281b9c85ac3c8482a7628281ae9a8842c6cd Mon Sep 17 00:00:00 2001 From: Vivin Krishna <123377523+vivinkrishna-ni@users.noreply.github.com> Date: Thu, 3 Oct 2024 13:38:35 +0530 Subject: [PATCH 05/10] Increase the loop count to 10000 --- .../rich-text/editor/tests/rich-text-editor-mention.spec.ts | 5 +++-- .../src/rich-text/models/tests/markdown-serializer.spec.ts | 5 +++-- 2 files changed, 6 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 9d07744aad..1ae06b6b2a 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 @@ -1376,8 +1376,9 @@ describe('RichTextEditorMentionListbox', () => { }); describe('Dynamically update mention popup items based on configuration changes', () => { - for (let i = 0; i < 30; i++) { - it( + for (let i = 0; i < 10000; i++) { + // eslint-disable-next-line no-restricted-globals + fit( 'should close mention popup when removing configuration element' + `${i}`, 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 589968cc73..8277464244 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 @@ -276,9 +276,10 @@ describe('Markdown serializer', () => { * Nested bulleted list`); }); - for (let i = 0; i < 30; i++) { + for (let i = 0; i < 10000; i++) { // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it('Hard break #SkipWebkit' + `${i}`, async () => { + // eslint-disable-next-line no-restricted-globals + fit('Hard break #SkipWebkit' + `${i}`, async () => { await pageObject.setEditorTextContent('Plain text 1'); await pageObject.pressShiftEnterKeysInEditor(); await pageObject.setEditorTextContent('Plain text 2'); From 08138fb439f4e3b92d7836217e3910f594db2b34 Mon Sep 17 00:00:00 2001 From: Vivin Krishna <123377523+vivinkrishna-ni@users.noreply.github.com> Date: Thu, 3 Oct 2024 14:00:33 +0530 Subject: [PATCH 06/10] Reduce the times to 1000 --- .../src/rich-text/editor/tests/rich-text-editor-mention.spec.ts | 2 +- .../src/rich-text/models/tests/markdown-serializer.spec.ts | 2 +- 2 files changed, 2 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 1ae06b6b2a..ea6085232d 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 @@ -1376,7 +1376,7 @@ describe('RichTextEditorMentionListbox', () => { }); describe('Dynamically update mention popup items based on configuration changes', () => { - for (let i = 0; i < 10000; i++) { + for (let i = 0; i < 1000; i++) { // eslint-disable-next-line no-restricted-globals fit( 'should close mention popup when removing configuration element' 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 8277464244..ddce90508b 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 @@ -276,7 +276,7 @@ describe('Markdown serializer', () => { * Nested bulleted list`); }); - for (let i = 0; i < 10000; i++) { + for (let i = 0; i < 1000; i++) { // WebKit skipped, see https://github.com/ni/nimble/issues/1938 // eslint-disable-next-line no-restricted-globals fit('Hard break #SkipWebkit' + `${i}`, async () => { From c31db7e580b844c9f39aac7263e2cc65fb4b3c8b Mon Sep 17 00:00:00 2001 From: Vivin Krishna <123377523+vivinkrishna-ni@users.noreply.github.com> Date: Thu, 3 Oct 2024 14:15:37 +0530 Subject: [PATCH 07/10] Reducing it further to 100 --- .../src/rich-text/editor/tests/rich-text-editor-mention.spec.ts | 2 +- .../src/rich-text/models/tests/markdown-serializer.spec.ts | 2 +- 2 files changed, 2 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 ea6085232d..67f1045962 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 @@ -1376,7 +1376,7 @@ describe('RichTextEditorMentionListbox', () => { }); describe('Dynamically update mention popup items based on configuration changes', () => { - for (let i = 0; i < 1000; i++) { + for (let i = 0; i < 100; i++) { // eslint-disable-next-line no-restricted-globals fit( 'should close mention popup when removing configuration element' 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 ddce90508b..6e783a9ea6 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 @@ -276,7 +276,7 @@ describe('Markdown serializer', () => { * Nested bulleted list`); }); - for (let i = 0; i < 1000; i++) { + for (let i = 0; i < 100; i++) { // WebKit skipped, see https://github.com/ni/nimble/issues/1938 // eslint-disable-next-line no-restricted-globals fit('Hard break #SkipWebkit' + `${i}`, async () => { From 5e536fdf2cf665b8d11752f38844e778cdaf7805 Mon Sep 17 00:00:00 2001 From: Vivin Krishna <123377523+vivinkrishna-ni@users.noreply.github.com> Date: Thu, 3 Oct 2024 14:54:12 +0530 Subject: [PATCH 08/10] Increased the loop count to 200 --- .../src/rich-text/editor/tests/rich-text-editor-mention.spec.ts | 2 +- .../src/rich-text/models/tests/markdown-serializer.spec.ts | 2 +- 2 files changed, 2 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 67f1045962..cfeb5103e2 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 @@ -1376,7 +1376,7 @@ describe('RichTextEditorMentionListbox', () => { }); describe('Dynamically update mention popup items based on configuration changes', () => { - for (let i = 0; i < 100; i++) { + for (let i = 0; i < 200; i++) { // eslint-disable-next-line no-restricted-globals fit( 'should close mention popup when removing configuration element' 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 6e783a9ea6..4b34970c10 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 @@ -276,7 +276,7 @@ describe('Markdown serializer', () => { * Nested bulleted list`); }); - for (let i = 0; i < 100; i++) { + for (let i = 0; i < 200; i++) { // WebKit skipped, see https://github.com/ni/nimble/issues/1938 // eslint-disable-next-line no-restricted-globals fit('Hard break #SkipWebkit' + `${i}`, async () => { From 205e13d00476d34c42207fd07a76678da25aab25 Mon Sep 17 00:00:00 2001 From: Vivin Krishna <123377523+vivinkrishna-ni@users.noreply.github.com> Date: Thu, 3 Oct 2024 16:30:07 +0530 Subject: [PATCH 09/10] Focused on tests --- .../tests/rich-text-editor-mention.spec.ts | 390 +++++++++--------- .../models/tests/markdown-serializer.spec.ts | 266 ++++++------ 2 files changed, 326 insertions(+), 330 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 cfeb5103e2..81cb2bab97 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 @@ -1376,234 +1376,230 @@ describe('RichTextEditorMentionListbox', () => { }); describe('Dynamically update mention popup items based on configuration changes', () => { - for (let i = 0; i < 200; i++) { - // eslint-disable-next-line no-restricted-globals - fit( - 'should close mention popup when removing configuration element' - + `${i}`, - async () => { - const { userMentionElement } = 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' - ]); - element.removeChild(userMentionElement); - await waitForUpdatesAsync(); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); - expect(pageObject.getMentionListboxItemsName()).toEqual([]); - } - ); + it( + 'should close mention popup when removing configuration element', + async () => { + const { userMentionElement } = 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' + ]); + element.removeChild(userMentionElement); + await waitForUpdatesAsync(); + expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(pageObject.getMentionListboxItemsName()).toEqual([]); + } + ); - it( - 'should update mention popup list when removing mapping element' - + `${i}`, - async () => { - const { mappingElements, userMentionElement } = await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ]); - await pageObject.setEditorTextContent('@'); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1', - 'username2' - ]); - userMentionElement.removeChild(mappingElements[0]!); - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username2' - ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); - } - ); + it( + 'should update mention popup list when removing mapping element', + async () => { + const { mappingElements, userMentionElement } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ]); + await pageObject.setEditorTextContent('@'); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1', + 'username2' + ]); + userMentionElement.removeChild(mappingElements[0]!); + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username2' + ]); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); + } + ); - it( - 'should update mention popup list when mapping elements get replaced' - + `${i}`, - async () => { - const { userMentionElement } = await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ]); - await pageObject.setEditorTextContent('@'); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1', - 'username2' - ]); - await replaceUserMappingElements(userMentionElement, [ - { key: 'user:3', displayName: 'username3' }, - { key: 'user:4', displayName: 'username4' } - ]); - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username3', - 'username4' - ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); - } - ); + it( + 'should update mention popup list when mapping elements get replaced', + async () => { + const { userMentionElement } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ]); + await pageObject.setEditorTextContent('@'); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1', + 'username2' + ]); + await replaceUserMappingElements(userMentionElement, [ + { key: 'user:3', displayName: 'username3' }, + { key: 'user:4', displayName: 'username4' } + ]); + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username3', + 'username4' + ]); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); + } + ); - it( - 'should close mention popup when updating to invalid `pattern`' - + `${i}`, - async () => { - const { userMentionElement } = await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ]); - await pageObject.setEditorTextContent('@'); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1', - 'username2' - ]); - userMentionElement.pattern = 'invalid'; - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([]); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); - } - ); + it( + 'should close mention popup when updating to invalid `pattern`', + async () => { + const { userMentionElement } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ]); + await pageObject.setEditorTextContent('@'); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1', + 'username2' + ]); + userMentionElement.pattern = 'invalid'; + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([]); + expect(pageObject.isMentionListboxOpened()).toBeFalse(); + } + ); - it( - 'should update mention popup list when updating `display-name`' - + `${i}`, - async () => { - const { mappingElements } = await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ]); - await pageObject.setEditorTextContent('@'); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1', - 'username2' - ]); - mappingElements[0]!.displayName = 'updated-name'; - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'updated-name', - 'username2' - ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); - } - ); + it( + 'should update mention popup list when updating `display-name`', + async () => { + const { mappingElements } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ]); + await pageObject.setEditorTextContent('@'); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1', + 'username2' + ]); + mappingElements[0]!.displayName = 'updated-name'; + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'updated-name', + 'username2' + ]); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); + } + ); - it( - 'should update mention popup list when updating valid `key`' - + `${i}`, - async () => { - const { mappingElements } = await appendUserMentionConfiguration(element, [ - { key: 'invalid', displayName: 'username1' } - ]); - await pageObject.setEditorTextContent('@'); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); - expect(pageObject.getMentionListboxItemsName()).toEqual([]); - mappingElements[0]!.key = 'user:1'; - // After the first wait, `activeMappingConfigs` is updated, - // which is directly bound to the template for populating the `nimble-list-option`. - // But only after the second wait, `nimble-list-option` gets populated. - await waitForUpdatesAsync(); - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1' - ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); - } - ); + it( + 'should update mention popup list when updating valid `key`', + async () => { + const { mappingElements } = await appendUserMentionConfiguration(element, [ + { key: 'invalid', displayName: 'username1' } + ]); + await pageObject.setEditorTextContent('@'); + expect(pageObject.isMentionListboxOpened()).toBeFalse(); + expect(pageObject.getMentionListboxItemsName()).toEqual([]); + mappingElements[0]!.key = 'user:1'; + // After the first wait, `activeMappingConfigs` is updated, + // which is directly bound to the template for populating the `nimble-list-option`. + // But only after the second wait, `nimble-list-option` gets populated. + await waitForUpdatesAsync(); + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1' + ]); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); + } + ); - it( - 'should close mention popup when updating to invalid `key`' - + `${i}`, - async () => { - const { mappingElements } = await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ]); - await pageObject.setEditorTextContent('@'); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1', - 'username2' - ]); - mappingElements[0]!.key = 'invalid'; - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([]); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); - } - ); + it( + 'should close mention popup when updating to invalid `key`', + async () => { + const { mappingElements } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ]); + await pageObject.setEditorTextContent('@'); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1', + 'username2' + ]); + mappingElements[0]!.key = 'invalid'; + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([]); + expect(pageObject.isMentionListboxOpened()).toBeFalse(); + } + ); - it( - 'should retain mention popup list position in the same cursor position when configuration got updated' - + `${i}`, - async () => { - const { mappingElements } = await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ]); - await pageObject.setEditorTextContent('First Line'); - pageObject.moveCursorToStart(); - await pageObject.clickUserMentionButton(); - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'username1', - 'username2' - ]); - mappingElements[0]!.displayName = 'New user'; - await waitForUpdatesAsync(); - expect(pageObject.getMentionListboxItemsName()).toEqual([ - 'New user', - 'username2' - ]); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); - } - ); + it( + 'should retain mention popup list position in the same cursor position when configuration got updated', + async () => { + const { mappingElements } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ]); + await pageObject.setEditorTextContent('First Line'); + pageObject.moveCursorToStart(); + await pageObject.clickUserMentionButton(); + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'username1', + 'username2' + ]); + mappingElements[0]!.displayName = 'New user'; + await waitForUpdatesAsync(); + expect(pageObject.getMentionListboxItemsName()).toEqual([ + 'New user', + 'username2' + ]); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); + } + ); + for (let i = 0; i < 1000; i++) { // Intermittent, see https://github.com/ni/nimble/issues/2219 - it( - 'should show mention popup for multiple mention configuration elements' - + `${i}`, + // eslint-disable-next-line no-restricted-globals + fit( + 'should show mention popup for multiple mention configuration elements' + ` ${i}`, 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' ]); + // expect(pageObject.isMentionListboxOpened()).toBeTrue(); + await pageObject.clickMentionListboxOption(0); + 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' ]); - } - ); - - it( - 'mention listbox should be closed when cursor position is moved to start and configuration dynamically changes' - + `${i}`, - async () => { - const { mappingElements } = await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'user name1' } - ]); - await pageObject.setEditorTextContent('@user'); - expect(pageObject.isMentionListboxOpened()).toBeTrue(); - await pageObject.setCursorPosition(1); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); - mappingElements[0]!.displayName = 'user name2'; - await waitForUpdatesAsync(); - expect(pageObject.isMentionListboxOpened()).toBeFalse(); + // expect(pageObject.isMentionListboxOpened()).toBeTrue(); } ); } + + it( + 'mention listbox should be closed when cursor position is moved to start and configuration dynamically changes', + async () => { + const { mappingElements } = await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'user name1' } + ]); + await pageObject.setEditorTextContent('@user'); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); + await pageObject.setCursorPosition(1); + expect(pageObject.isMentionListboxOpened()).toBeFalse(); + mappingElements[0]!.displayName = 'user name2'; + await waitForUpdatesAsync(); + expect(pageObject.isMentionListboxOpened()).toBeFalse(); + } + ); }); }); 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 4b34970c10..c541e8c9f5 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 @@ -276,164 +276,164 @@ describe('Markdown serializer', () => { * Nested bulleted list`); }); - for (let i = 0; i < 200; i++) { - // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - // eslint-disable-next-line no-restricted-globals - fit('Hard break #SkipWebkit' + `${i}`, async () => { - await pageObject.setEditorTextContent('Plain text 1'); - await pageObject.pressShiftEnterKeysInEditor(); - await pageObject.setEditorTextContent('Plain text 2'); - await pageObject.pressShiftEnterKeysInEditor(); - await pageObject.setEditorTextContent('Plain text 3'); - expect(element.getMarkdown()).toEqual(r`Plain text 1\ + // WebKit skipped, see https://github.com/ni/nimble/issues/1938 + it('Hard break #SkipWebkit', async () => { + await pageObject.setEditorTextContent('Plain text 1'); + await pageObject.pressShiftEnterKeysInEditor(); + await pageObject.setEditorTextContent('Plain text 2'); + await pageObject.pressShiftEnterKeysInEditor(); + await pageObject.setEditorTextContent('Plain text 3'); + expect(element.getMarkdown()).toEqual(r`Plain text 1\ Plain text 2\ Plain text 3`); - }); + }); - // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it('Hard break with bold #SkipWebkit' + `${i}`, async () => { - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('Bold'); - await pageObject.pressShiftEnterKeysInEditor(); - await pageObject.setEditorTextContent('Bold'); - expect(element.getMarkdown()).toEqual(r`**Bold**\ + // WebKit skipped, see https://github.com/ni/nimble/issues/1938 + it('Hard break with bold #SkipWebkit', async () => { + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('Bold'); + await pageObject.pressShiftEnterKeysInEditor(); + await pageObject.setEditorTextContent('Bold'); + expect(element.getMarkdown()).toEqual(r`**Bold**\ **Bold**`); - }); + }); - // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it('Hard break with italics #SkipWebkit' + `${i}`, async () => { - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('Italics'); - await pageObject.pressShiftEnterKeysInEditor(); - await pageObject.setEditorTextContent('Italics'); - expect(element.getMarkdown()).toEqual(r`*Italics*\ + // WebKit skipped, see https://github.com/ni/nimble/issues/1938 + it('Hard break with italics #SkipWebkit', async () => { + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('Italics'); + await pageObject.pressShiftEnterKeysInEditor(); + await pageObject.setEditorTextContent('Italics'); + expect(element.getMarkdown()).toEqual(r`*Italics*\ *Italics*`); - }); + }); - // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it( - 'Hard break with bulleted list #SkipWebkit' + `${i}`, - async () => { - await pageObject.setEditorTextContent('Bulleted'); - await pageObject.toggleFooterButton( - ToolbarButton.bulletList - ); - await pageObject.pressShiftEnterKeysInEditor(); - await pageObject.setEditorTextContent('list'); - expect(element.getMarkdown()).toEqual(r`* Bulleted\ + // WebKit skipped, see https://github.com/ni/nimble/issues/1938 + it( + 'Hard break with bulleted list #SkipWebkit', + async () => { + await pageObject.setEditorTextContent('Bulleted'); + await pageObject.toggleFooterButton( + ToolbarButton.bulletList + ); + await pageObject.pressShiftEnterKeysInEditor(); + await pageObject.setEditorTextContent('list'); + expect(element.getMarkdown()).toEqual(r`* Bulleted\ list`); - } - ); - - // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it( - 'Hard break with numbered list #SkipWebkit' + `${i}`, - async () => { - await pageObject.setEditorTextContent('Numbered'); - await pageObject.toggleFooterButton( - ToolbarButton.numberedList - ); - await pageObject.pressShiftEnterKeysInEditor(); - await pageObject.setEditorTextContent('list'); - expect(element.getMarkdown()).toEqual(r`1. Numbered\ + } + ); + + // WebKit skipped, see https://github.com/ni/nimble/issues/1938 + it( + 'Hard break with numbered list #SkipWebkit', + async () => { + await pageObject.setEditorTextContent('Numbered'); + await pageObject.toggleFooterButton( + ToolbarButton.numberedList + ); + await pageObject.pressShiftEnterKeysInEditor(); + await pageObject.setEditorTextContent('list'); + expect(element.getMarkdown()).toEqual(r`1. Numbered\ list`); - } - ); - - // WebKit skipped, see https://github.com/ni/nimble/issues/1938 - it( - 'Hard break with mention node #SkipWebkit' + `${i}`, - async () => { - await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' } - ]); - await commitFirstMentionBoxOptionIntoEditor('@'); - await pageObject.pressShiftEnterKeysInEditor(); - await commitFirstMentionBoxOptionIntoEditor('@'); - expect(element.getMarkdown()).toEqual(r` \ - `); - } - ); + } + ); - // Intermittent, see https://github.com/ni/nimble/issues/2219 - it('Mention node' + `${i}`, async () => { + // WebKit skipped, see https://github.com/ni/nimble/issues/1938 + it( + 'Hard break with mention node #SkipWebkit', + async () => { await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' } ]); await commitFirstMentionBoxOptionIntoEditor('@'); - expect(element.getMarkdown()).toEqual(' '); - }); - - it('Multiple Mention node of same type' + `${i}`, async () => { - await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' }, - { key: 'user:2', displayName: 'username2' } - ]); + await pageObject.pressShiftEnterKeysInEditor(); await commitFirstMentionBoxOptionIntoEditor('@'); - await pageObject.setEditorTextContent('@'); - await waitForUpdatesAsync(); - await pageObject.clickMentionListboxOption(1); - expect(element.getMarkdown()).toEqual(' '); - }); + expect(element.getMarkdown()).toEqual(r` \ + `); + } + ); - it('Multiple Mention node of different type' + `${i}`, async () => { + for (let i = 0; i < 1000; i++) { + // Intermittent, see https://github.com/ni/nimble/issues/2219 + // eslint-disable-next-line no-restricted-globals + fit('Mention node' + `${i}`, async () => { await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' } ]); await commitFirstMentionBoxOptionIntoEditor('@'); - await appendTestMentionConfiguration(element, [ - { key: 'test:1', displayName: 'testname1' } - ]); - await commitFirstMentionBoxOptionIntoEditor('!'); - expect(element.getMarkdown()).toEqual(' '); + expect(element.getMarkdown()).toEqual(' '); }); + } - it('Mention node between Bold text' + `${i}`, async () => { - await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' } - ]); - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('Bold '); - await commitFirstMentionBoxOptionIntoEditor('@'); - await pageObject.toggleFooterButton(ToolbarButton.bold); - await pageObject.setEditorTextContent('Bold '); - expect(element.getMarkdown()).toEqual( - '**Bold** **Bold** ' - ); - }); + it('Multiple Mention node of same type', async () => { + await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' }, + { key: 'user:2', displayName: 'username2' } + ]); + await commitFirstMentionBoxOptionIntoEditor('@'); + await pageObject.setEditorTextContent('@'); + await waitForUpdatesAsync(); + await pageObject.clickMentionListboxOption(1); + expect(element.getMarkdown()).toEqual(' '); + }); - it('Mention node between Italics text' + `${i}`, async () => { - await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' } - ]); - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('Italics '); - await commitFirstMentionBoxOptionIntoEditor('@'); - await pageObject.toggleFooterButton(ToolbarButton.italics); - await pageObject.setEditorTextContent('Italics '); - expect(element.getMarkdown()).toEqual( - '*Italics* *Italics* ' - ); - }); + it('Multiple Mention node of different type', async () => { + await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' } + ]); + await commitFirstMentionBoxOptionIntoEditor('@'); + await appendTestMentionConfiguration(element, [ + { key: 'test:1', displayName: 'testname1' } + ]); + await commitFirstMentionBoxOptionIntoEditor('!'); + expect(element.getMarkdown()).toEqual(' '); + }); - it('Mention node under Numbered list' + `${i}`, async () => { - await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' } - ]); - await commitFirstMentionBoxOptionIntoEditor('@'); - await pageObject.toggleFooterButton(ToolbarButton.numberedList); - expect(element.getMarkdown()).toEqual('1. '); - }); + it('Mention node between Bold text', async () => { + await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' } + ]); + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('Bold '); + await commitFirstMentionBoxOptionIntoEditor('@'); + await pageObject.toggleFooterButton(ToolbarButton.bold); + await pageObject.setEditorTextContent('Bold '); + expect(element.getMarkdown()).toEqual( + '**Bold** **Bold** ' + ); + }); - it('Mention node under Bulleted list' + `${i}`, async () => { - await appendUserMentionConfiguration(element, [ - { key: 'user:1', displayName: 'username1' } - ]); - await commitFirstMentionBoxOptionIntoEditor('@'); - await pageObject.toggleFooterButton(ToolbarButton.bulletList); - expect(element.getMarkdown()).toEqual('* '); - }); - } + it('Mention node between Italics text', async () => { + await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' } + ]); + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('Italics '); + await commitFirstMentionBoxOptionIntoEditor('@'); + await pageObject.toggleFooterButton(ToolbarButton.italics); + await pageObject.setEditorTextContent('Italics '); + expect(element.getMarkdown()).toEqual( + '*Italics* *Italics* ' + ); + }); + + it('Mention node under Numbered list', async () => { + await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' } + ]); + await commitFirstMentionBoxOptionIntoEditor('@'); + await pageObject.toggleFooterButton(ToolbarButton.numberedList); + expect(element.getMarkdown()).toEqual('1. '); + }); + + it('Mention node under Bulleted list', async () => { + await appendUserMentionConfiguration(element, [ + { key: 'user:1', displayName: 'username1' } + ]); + await commitFirstMentionBoxOptionIntoEditor('@'); + await pageObject.toggleFooterButton(ToolbarButton.bulletList); + expect(element.getMarkdown()).toEqual('* '); + }); }); describe('Excludes other marks in link while serializing', () => { From bac519359193b6a8d6353b4271d78ebd2a005736 Mon Sep 17 00:00:00 2001 From: Vivin Krishna <123377523+vivinkrishna-ni@users.noreply.github.com> Date: Thu, 3 Oct 2024 17:28:13 +0530 Subject: [PATCH 10/10] Focusing the editor before clicking from the options --- .../editor/testing/rich-text-editor.pageobject.ts | 4 ++++ .../editor/tests/rich-text-editor-mention.spec.ts | 7 ++++--- .../src/rich-text/models/tests/markdown-serializer.spec.ts | 2 ++ 3 files changed, 10 insertions(+), 3 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..7fc113f664 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,10 @@ 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 81cb2bab97..feca12617f 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 @@ -1566,9 +1566,10 @@ describe('RichTextEditorMentionListbox', () => { 'username1', 'username2' ]); - // expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); - await pageObject.clickMentionListboxOption(0); + // await pageObject.clickMentionListboxOption(0); + await pageObject.sliceEditorContent(0, 2); await appendTestMentionConfiguration(element, [ { key: 'test:1', displayName: 'testname1' }, @@ -1581,7 +1582,7 @@ describe('RichTextEditorMentionListbox', () => { 'testname1', 'testname2' ]); - // expect(pageObject.isMentionListboxOpened()).toBeTrue(); + expect(pageObject.isMentionListboxOpened()).toBeTrue(); } ); } 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 c541e8c9f5..df966e2078 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 @@ -360,7 +360,9 @@ Plain text 3`); await appendUserMentionConfiguration(element, [ { key: 'user:1', displayName: 'username1' } ]); + await commitFirstMentionBoxOptionIntoEditor('@'); + expect(element.getMarkdown()).toEqual(' '); }); }