Skip to content

Commit

Permalink
Focus editor and wait when updating the content of the editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@vivinkrishna-ni
vivinkrishna-ni committed Oct 10, 2024
1 parent 5554518 commit 9db5e67
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 57 deletions.
21 changes: 15 additions & 6 deletions packages/nimble-components/src/rich-text/editor/testing/rich-text-editor.pageobject.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,25 +216,29 @@ export class RichTextEditorPageObject {
toggleButton.control.dispatchEvent(event);
}

public pasteToEditor(text: string): void {
public async pasteToEditor(text: string): Promise<void> {
const editor = this.getTiptapEditor();
const pasteEvent = new ClipboardEvent('paste', {
clipboardData: new DataTransfer()
});
pasteEvent.clipboardData?.setData('text/plain', text);
editor.dispatchEvent(pasteEvent);

await this.focusEditorIfMentionListboxOpened();
}

// Simulate the actual pasting of content by passing the extracted HTML string as an argument and setting the format to 'text/html',
// as in the [DataFormat](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer) object.
// For example, when copying a link, the clipboard stores information that includes the anchor tag, href attribute value etc, and paste it as an HTML string
public pasteHTMLToEditor(htmlString: string): void {
public async pasteHTMLToEditor(htmlString: string): Promise<void> {
const editor = this.getTiptapEditor();
const pasteEvent = new ClipboardEvent('paste', {
clipboardData: new DataTransfer()
});
pasteEvent.clipboardData?.setData('text/html', htmlString);
editor.dispatchEvent(pasteEvent);

await this.focusEditorIfMentionListboxOpened();
}

public async setEditorTextContent(value: string): Promise<void> {
Expand Down Expand Up @@ -262,6 +266,8 @@ export class RichTextEditorPageObject {
const lastElement = this.getEditorLastChildElement();
lastElement.parentElement!.textContent = value;
await waitForUpdatesAsync();

await this.focusEditorIfMentionListboxOpened();
}

public async sliceEditorContent(from: number, to: number): Promise<void> {
Expand All @@ -271,17 +277,20 @@ export class RichTextEditorPageObject {
.deleteRange({ from, to })
.run();
await waitForUpdatesAsync();

await this.focusEditorIfMentionListboxOpened();
}

public getEditorLastChildAttribute(attribute: string): string {
return getLastChildElementAttribute(attribute, this.getTiptapEditor());
}

public isMentionListboxOpened(): boolean {
public async isMentionListboxOpened(): Promise<boolean> {
await waitForUpdatesAsync();

return (
!this.getMentionListbox()
?.shadowRoot?.querySelector(anchoredRegionTag)
?.hasAttribute('hidden') ?? false
?.shadowRoot?.querySelector(anchoredRegionTag)?.hidden
);
}

Expand Down Expand Up @@ -531,7 +540,7 @@ export class RichTextEditorPageObject {
}

private async focusEditorIfMentionListboxOpened(): Promise<void> {
if (this.isMentionListboxOpened()) {
if (await this.isMentionListboxOpened()) {
this.richTextEditorElement.tiptapEditor.commands.focus();
await waitForUpdatesAsync();
}
Expand Down
82 changes: 41 additions & 41 deletions packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-mention.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -765,7 +765,7 @@ describe('RichTextEditorMention', () => {
const { userMentionElement } = await appendUserMentionConfiguration(element);
const mentionUpdateSpy = jasmine.createSpy('mention-update');
userMentionElement.addEventListener('mention-update', mentionUpdateSpy);
pageObject.pasteToEditor('@test');
await pageObject.pasteToEditor('@test');
await waitForUpdatesAsync();
expect(mentionUpdateSpy).toHaveBeenCalledTimes(1);
});
Expand Down Expand Up @@ -808,7 +808,7 @@ describe('RichTextEditorMention', () => {
);
const mentionUpdateSpy = jasmine.createSpy('mention-update');
userMentionElement.addEventListener('mention-update', mentionUpdateSpy);
pageObject.pasteHTMLToEditor(htmlContent);
await pageObject.pasteHTMLToEditor(htmlContent);
expect(mentionUpdateSpy).toHaveBeenCalledTimes(0);
});

Expand Down Expand Up @@ -930,7 +930,7 @@ describe('RichTextEditorMention', () => {
value.input,
[{ key: 'user:1', displayName: value.content }]
);
pageObject.pasteHTMLToEditor(htmlContent);
await pageObject.pasteHTMLToEditor(htmlContent);
expect(pageObject.getEditorTagNamesWithClosingTags()).toEqual([
'P',
'/P'
Expand Down Expand Up @@ -1067,7 +1067,7 @@ describe('RichTextEditor user mention via template', () => {
it('should open mention popup, when button clicked', async () => {
await pageObject.clickUserMentionButton();

expect(pageObject.isMentionListboxOpened()).toBeTrue();
expect(await pageObject.isMentionListboxOpened()).toBeTrue();
});
});

Expand Down Expand Up @@ -1104,9 +1104,9 @@ describe('RichTextEditorMentionListbox', () => {
{ key: 'user:1', displayName: 'username1' },
{ key: 'user:2', displayName: 'username2' }
]);
expect(pageObject.isMentionListboxOpened()).toBeFalse();
expect(await pageObject.isMentionListboxOpened()).toBeFalse();
await pageObject.setEditorTextContent('@');
expect(pageObject.isMentionListboxOpened()).toBeTrue();
expect(await pageObject.isMentionListboxOpened()).toBeTrue();
expect(pageObject.getMentionListboxItemsName()).toEqual([
'username1',
'username2'
Expand Down Expand Up @@ -1143,9 +1143,9 @@ describe('RichTextEditorMentionListbox', () => {
{ key: 'user:1', displayName: 'username1' },
{ key: 'user:2', displayName: 'username2' }
]);
expect(pageObject.isMentionListboxOpened()).toBeFalse();
expect(await pageObject.isMentionListboxOpened()).toBeFalse();
await pageObject.setEditorTextContent('@');
expect(pageObject.isMentionListboxOpened()).toBeTrue();
expect(await pageObject.isMentionListboxOpened()).toBeTrue();
expect(pageObject.getMentionListboxItemsName()).toEqual([
'username1',
'username2'
Expand Down Expand Up @@ -1177,9 +1177,9 @@ describe('RichTextEditorMentionListbox', () => {
await appendUserMentionConfiguration(element, [
{ key: 'user:1', displayName: 'username1' }
]);
expect(pageObject.isMentionListboxOpened()).toBeFalse();
expect(await pageObject.isMentionListboxOpened()).toBeFalse();
await pageObject.setEditorTextContent('@');
expect(pageObject.isMentionListboxOpened()).toBeTrue();
expect(await pageObject.isMentionListboxOpened()).toBeTrue();
await pageObject.clickMentionListboxOption(0);

expect(pageObject.getMarkdownRenderedTagNames()).toEqual([
Expand All @@ -1189,16 +1189,16 @@ describe('RichTextEditorMentionListbox', () => {
expect(
pageObject.getEditorMentionViewAttributeValues('mention-label')
).toEqual(['username1']);
expect(pageObject.isMentionListboxOpened()).toBeFalse();
expect(await pageObject.isMentionListboxOpened()).toBeFalse();
});

it('should commit mention into the editor on Enter', async () => {
await appendUserMentionConfiguration(element, [
{ key: 'user:1', displayName: 'username1' }
]);
expect(pageObject.isMentionListboxOpened()).toBeFalse();
expect(await pageObject.isMentionListboxOpened()).toBeFalse();
await pageObject.setEditorTextContent('@');
expect(pageObject.isMentionListboxOpened()).toBeTrue();
expect(await pageObject.isMentionListboxOpened()).toBeTrue();
await pageObject.pressEnterKeyInEditor();

expect(pageObject.getMarkdownRenderedTagNames()).toEqual([
Expand All @@ -1208,16 +1208,16 @@ describe('RichTextEditorMentionListbox', () => {
expect(
pageObject.getEditorMentionViewAttributeValues('mention-label')
).toEqual(['username1']);
expect(pageObject.isMentionListboxOpened()).toBeFalse();
expect(await pageObject.isMentionListboxOpened()).toBeFalse();
});

it('should commit mention into the editor on Tab', async () => {
await appendUserMentionConfiguration(element, [
{ key: 'user:1', displayName: 'username1' }
]);
expect(pageObject.isMentionListboxOpened()).toBeFalse();
expect(await pageObject.isMentionListboxOpened()).toBeFalse();
await pageObject.setEditorTextContent('@');
expect(pageObject.isMentionListboxOpened()).toBeTrue();
expect(await pageObject.isMentionListboxOpened()).toBeTrue();
await pageObject.pressTabKeyInEditor();

expect(pageObject.getMarkdownRenderedTagNames()).toEqual([
Expand All @@ -1227,19 +1227,19 @@ describe('RichTextEditorMentionListbox', () => {
expect(
pageObject.getEditorMentionViewAttributeValues('mention-label')
).toEqual(['username1']);
expect(pageObject.isMentionListboxOpened()).toBeFalse();
expect(await pageObject.isMentionListboxOpened()).toBeFalse();
});

it('should close the popup when clicking Escape', async () => {
await appendUserMentionConfiguration(element, [
{ key: 'user:1', displayName: 'username1' },
{ key: 'user:2', displayName: 'username2' }
]);
expect(pageObject.isMentionListboxOpened()).toBeFalse();
expect(await pageObject.isMentionListboxOpened()).toBeFalse();
await pageObject.setEditorTextContent('@');
expect(pageObject.isMentionListboxOpened()).toBeTrue();
expect(await pageObject.isMentionListboxOpened()).toBeTrue();
await pageObject.pressEscapeKeyInEditor();
expect(pageObject.isMentionListboxOpened()).toBeFalse();
expect(await pageObject.isMentionListboxOpened()).toBeFalse();
});

it('should filter and commit first mention into the editor on Enter', async () => {
Expand Down Expand Up @@ -1321,7 +1321,7 @@ describe('RichTextEditorMentionListbox', () => {
expect(
pageObject.getEditorMentionViewAttributeValues('mention-label')
).toEqual(['username2']);
expect(pageObject.isMentionListboxOpened()).toBeFalse();
expect(await pageObject.isMentionListboxOpened()).toBeFalse();
});

it('should commit second option on arrow key down and tab', async () => {
Expand All @@ -1340,7 +1340,7 @@ describe('RichTextEditorMentionListbox', () => {
expect(
pageObject.getEditorMentionViewAttributeValues('mention-label')
).toEqual(['username2']);
expect(pageObject.isMentionListboxOpened()).toBeFalse();
expect(await pageObject.isMentionListboxOpened()).toBeFalse();
});

it('focus out from the editor should close the mention popup', async () => {
Expand All @@ -1350,11 +1350,11 @@ describe('RichTextEditorMentionListbox', () => {
]);
await pageObject.setEditorTextContent('@');

expect(pageObject.isMentionListboxOpened()).toBeTrue();
expect(await pageObject.isMentionListboxOpened()).toBeTrue();

await pageObject.focusOutEditor();

expect(pageObject.isMentionListboxOpened()).toBeFalse();
expect(await pageObject.isMentionListboxOpened()).toBeFalse();
});

// WebKit skipped, see https://github.com/ni/nimble/issues/1938
Expand All @@ -1365,11 +1365,11 @@ describe('RichTextEditorMentionListbox', () => {
]);
await pageObject.setEditorTextContent('@');

expect(pageObject.isMentionListboxOpened()).toBeTrue();
expect(await pageObject.isMentionListboxOpened()).toBeTrue();

await pageObject.setDisabled(true);

expect(pageObject.isMentionListboxOpened()).toBeFalse();
expect(await pageObject.isMentionListboxOpened()).toBeFalse();
});
});

Expand All @@ -1383,14 +1383,14 @@ describe('RichTextEditorMentionListbox', () => {
]
);
await pageObject.setEditorTextContent('@');
expect(pageObject.isMentionListboxOpened()).toBeTrue();
expect(await pageObject.isMentionListboxOpened()).toBeTrue();
expect(pageObject.getMentionListboxItemsName()).toEqual([
'username1',
'username2'
]);
element.removeChild(userMentionElement);
await waitForUpdatesAsync();
expect(pageObject.isMentionListboxOpened()).toBeFalse();
expect(await pageObject.isMentionListboxOpened()).toBeFalse();
expect(pageObject.getMentionListboxItemsName()).toEqual([]);
});

Expand All @@ -1409,7 +1409,7 @@ describe('RichTextEditorMentionListbox', () => {
expect(pageObject.getMentionListboxItemsName()).toEqual([
'username2'
]);
expect(pageObject.isMentionListboxOpened()).toBeTrue();
expect(await pageObject.isMentionListboxOpened()).toBeTrue();
});

it('should update mention popup list when mapping elements get replaced', async () => {
Expand All @@ -1434,7 +1434,7 @@ describe('RichTextEditorMentionListbox', () => {
'username3',
'username4'
]);
expect(pageObject.isMentionListboxOpened()).toBeTrue();
expect(await pageObject.isMentionListboxOpened()).toBeTrue();
});

it('should close mention popup when updating to invalid `pattern`', async () => {
Expand All @@ -1453,7 +1453,7 @@ describe('RichTextEditorMentionListbox', () => {
userMentionElement.pattern = 'invalid';
await waitForUpdatesAsync();
expect(pageObject.getMentionListboxItemsName()).toEqual([]);
expect(pageObject.isMentionListboxOpened()).toBeFalse();
expect(await pageObject.isMentionListboxOpened()).toBeFalse();
});

it('should update mention popup list when updating `display-name`', async () => {
Expand All @@ -1475,7 +1475,7 @@ describe('RichTextEditorMentionListbox', () => {
'updated-name',
'username2'
]);
expect(pageObject.isMentionListboxOpened()).toBeTrue();
expect(await pageObject.isMentionListboxOpened()).toBeTrue();
});

it('should update mention popup list when updating valid `key`', async () => {
Expand All @@ -1484,7 +1484,7 @@ describe('RichTextEditorMentionListbox', () => {
[{ key: 'invalid', displayName: 'username1' }]
);
await pageObject.setEditorTextContent('@');
expect(pageObject.isMentionListboxOpened()).toBeFalse();
expect(await pageObject.isMentionListboxOpened()).toBeFalse();
expect(pageObject.getMentionListboxItemsName()).toEqual([]);
mappingElements[0]!.key = 'user:1';
// After the first wait, `activeMappingConfigs` is updated,
Expand All @@ -1495,7 +1495,7 @@ describe('RichTextEditorMentionListbox', () => {
expect(pageObject.getMentionListboxItemsName()).toEqual([
'username1'
]);
expect(pageObject.isMentionListboxOpened()).toBeTrue();
expect(await pageObject.isMentionListboxOpened()).toBeTrue();
});

it('should close mention popup when updating to invalid `key`', async () => {
Expand All @@ -1514,7 +1514,7 @@ describe('RichTextEditorMentionListbox', () => {
mappingElements[0]!.key = 'invalid';
await waitForUpdatesAsync();
expect(pageObject.getMentionListboxItemsName()).toEqual([]);
expect(pageObject.isMentionListboxOpened()).toBeFalse();
expect(await pageObject.isMentionListboxOpened()).toBeFalse();
});

it('should retain mention popup list position in the same cursor position when configuration got updated', async () => {
Expand All @@ -1539,7 +1539,7 @@ describe('RichTextEditorMentionListbox', () => {
'New user',
'username2'
]);
expect(pageObject.isMentionListboxOpened()).toBeTrue();
expect(await pageObject.isMentionListboxOpened()).toBeTrue();
});

it('should show mention popup for multiple mention configuration elements', async () => {
Expand All @@ -1554,7 +1554,7 @@ describe('RichTextEditorMentionListbox', () => {
'username1',
'username2'
]);
expect(pageObject.isMentionListboxOpened()).toBeTrue();
expect(await pageObject.isMentionListboxOpened()).toBeTrue();

await pageObject.sliceEditorContent(0, 2);

Expand All @@ -1569,7 +1569,7 @@ describe('RichTextEditorMentionListbox', () => {
'testname1',
'testname2'
]);
expect(pageObject.isMentionListboxOpened()).toBeTrue();
expect(await pageObject.isMentionListboxOpened()).toBeTrue();
});

it('mention listbox should be closed when cursor position is moved to start and configuration dynamically changes', async () => {
Expand All @@ -1578,12 +1578,12 @@ describe('RichTextEditorMentionListbox', () => {
[{ key: 'user:1', displayName: 'user name1' }]
);
await pageObject.setEditorTextContent('@user');
expect(pageObject.isMentionListboxOpened()).toBeTrue();
expect(await pageObject.isMentionListboxOpened()).toBeTrue();
await pageObject.setCursorPosition(1);
expect(pageObject.isMentionListboxOpened()).toBeFalse();
expect(await pageObject.isMentionListboxOpened()).toBeFalse();
mappingElements[0]!.displayName = 'user name2';
await waitForUpdatesAsync();
expect(pageObject.isMentionListboxOpened()).toBeFalse();
expect(await pageObject.isMentionListboxOpened()).toBeFalse();
});
});
});
Loading

0 comments on commit 9db5e67

Please sign in to comment.