Skip to content

Commit

Permalink
Rich text editor | Update testing strategy in markdown-serializer (#1633
Browse files Browse the repository at this point in the history 
)

# Pull Request

## 🤨 Rationale
Testing strategy in the markdown serializer need to be updated as it is
generating a mock editor currently to test the behavior instead of
implementing actual editor. So, it needs to be updated with actual
editor to test the production configuration.

Issue link: #1533 

## 👩‍💻 Implementation

- Removed the mock editor and constructed the actual editor
`nimble-rich-text-editor` to get the editor document.
- Removed all the html as input and updated it with `setMarkdown()`
method as in production flow only there will be markdown interaction
with the editor and not with the html.

## 🧪 Testing

- Manually ran the test and verified.

## ✅ Checklist

<!--- Review the list and put an x in the boxes that apply or ~~strike
through~~ around items that don't (along with an explanation). -->

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.
  • Loading branch information
@aagash-ni
aagash-ni authored Nov 20, 2023
1 parent 54bf852 commit fc25d8c
Show file tree
Hide file tree
Showing 5 changed files with 390 additions and 440 deletions.
7 changes: 7 additions & 0 deletions change/@ni-nimble-components-81243789-c09a-42e2-a4e8-bd0ae9f69b2f.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "none",
"comment": "Update rich text component serializer test cases",
"packageName": "@ni/nimble-components",
"email": "[email protected]",
"dependentChangeType": "none"
}
30 changes: 28 additions & 2 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 @@ -2,7 +2,7 @@ import { keySpace, keyEnter, keyTab } from '@microsoft/fast-web-utilities';
import type { RichTextEditor } from '..';
import { waitForUpdatesAsync } from '../../../testing/async-helpers';
import type { ToggleButton } from '../../../toggle-button';
import type { ToolbarButton } from './types';
import { ToolbarButton, ToolbarButtonKey } from './types';
import {
getTagsFromElement,
getLeafContentsFromElement,
Expand Down Expand Up @@ -90,11 +90,37 @@ export class RichTextEditorPageObject {
await waitForUpdatesAsync();
}

public async clickFooterButton(button: ToolbarButton): Promise<void> {
/**
* In testing environment, when clicking on the footer button, it may not persist in the same state if any editor transaction occurs in between.
* This behavior is likely due to dynamic modifications of formatting button states based on cursor positions during editor transactions.
* Setting the "force" parameter to true activates the formatting button state; when set to false, it deactivates the state.
* If unset, the state toggles by interacting with it once.
*/
public async toggleFooterButton(
button: ToolbarButton,
force?: boolean
): Promise<void> {
const toggleButton = this.getFormattingButton(button);
const event = new Event('mousedown', { bubbles: true });
toggleButton!.dispatchEvent(event);
toggleButton!.click();
let format = Object.keys(ToolbarButton).find(
key => ToolbarButton[key as ToolbarButtonKey] === button
);
// In the editor, the isActive() method expects the format name to be 'italic' instead of 'italics.'
// As it was consistently represent it as 'italics' elsewhere just updated it here
if (format === 'italics') {
format = 'italic';
}
if (force === true || force === false) {
if (
this.richTextEditorElement.tiptapEditor.isActive(format!)
!== force
) {
toggleButton!.dispatchEvent(event);
toggleButton!.click();
}
}
await waitForUpdatesAsync();
}

Expand Down
2 changes: 2 additions & 0 deletions packages/nimble-components/src/rich-text/editor/testing/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,5 @@ export type LabelProvider =
| 'toggleItalics'
| 'toggleBulletedList'
| 'toggleNumberedList';

export type ToolbarButtonKey = keyof typeof ToolbarButton;
72 changes: 36 additions & 36 deletions packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,15 +103,15 @@ describe('RichTextEditor', () => {
pageObject.getButtonCheckedState(ToolbarButton.numberedList)
).toBeFalse();

await pageObject.clickFooterButton(ToolbarButton.bulletList);
await pageObject.toggleFooterButton(ToolbarButton.bulletList);
expect(
pageObject.getButtonCheckedState(ToolbarButton.bulletList)
).toBeTrue();
expect(
pageObject.getButtonCheckedState(ToolbarButton.numberedList)
).toBeFalse();

await pageObject.clickFooterButton(ToolbarButton.numberedList);
await pageObject.toggleFooterButton(ToolbarButton.numberedList);
expect(
pageObject.getButtonCheckedState(ToolbarButton.bulletList)
).toBeFalse();
Expand All @@ -137,7 +137,7 @@ describe('RichTextEditor', () => {

it('Should return editor as active element after clicking formatting button', async () => {
await pageObject.setEditorTextContent('Sample Text');
await pageObject.clickFooterButton(ToolbarButton.bulletList);
await pageObject.toggleFooterButton(ToolbarButton.bulletList);
expect(pageObject.isRichTextEditorActiveElement()).toBeTrue();
});

Expand Down Expand Up @@ -194,7 +194,7 @@ describe('RichTextEditor', () => {
)
).toBeFalse();

await pageObject.clickFooterButton(
await pageObject.toggleFooterButton(
value.toolbarButtonIndex
);

Expand Down Expand Up @@ -340,15 +340,15 @@ describe('RichTextEditor', () => {
});

it('should have "strong" tag name for bold button click', async () => {
await pageObject.clickFooterButton(ToolbarButton.bold);
await pageObject.toggleFooterButton(ToolbarButton.bold);
await pageObject.setEditorTextContent('bold');

expect(pageObject.getEditorTagNames()).toEqual(['P', 'STRONG']);
expect(pageObject.getEditorLeafContents()).toEqual(['bold']);
});

it('should have br tag name when pressing shift + Enter with bold content', async () => {
await pageObject.clickFooterButton(ToolbarButton.bold);
await pageObject.toggleFooterButton(ToolbarButton.bold);
await pageObject.setEditorTextContent('bold1');
await pageObject.pressShiftEnterKeysInEditor();
await pageObject.setEditorTextContent('bold after hard break');
Expand All @@ -362,15 +362,15 @@ describe('RichTextEditor', () => {
});

it('should have "em" tag name for italics button click', async () => {
await pageObject.clickFooterButton(ToolbarButton.italics);
await pageObject.toggleFooterButton(ToolbarButton.italics);
await pageObject.setEditorTextContent('italics');

expect(pageObject.getEditorTagNames()).toEqual(['P', 'EM']);
expect(pageObject.getEditorLeafContents()).toEqual(['italics']);
});

it('should have br tag name when pressing shift + Enter with Italics content', async () => {
await pageObject.clickFooterButton(ToolbarButton.italics);
await pageObject.toggleFooterButton(ToolbarButton.italics);
await pageObject.setEditorTextContent('italics1');
await pageObject.pressShiftEnterKeysInEditor();
await pageObject.setEditorTextContent('italics after hard break');
Expand All @@ -385,7 +385,7 @@ describe('RichTextEditor', () => {

it('should have "ol" tag name for numbered list button click', async () => {
await pageObject.setEditorTextContent('numbered list');
await pageObject.clickFooterButton(ToolbarButton.numberedList);
await pageObject.toggleFooterButton(ToolbarButton.numberedList);

expect(pageObject.getEditorTagNames()).toEqual(['OL', 'LI', 'P']);
expect(pageObject.getEditorLeafContents()).toEqual([
Expand Down Expand Up @@ -514,7 +514,7 @@ describe('RichTextEditor', () => {

it('should have br tag name when pressing shift + Enter with numbered list content', async () => {
await pageObject.setEditorTextContent('numbered list1');
await pageObject.clickFooterButton(ToolbarButton.numberedList);
await pageObject.toggleFooterButton(ToolbarButton.numberedList);
await pageObject.pressShiftEnterKeysInEditor();
await pageObject.setEditorTextContent(
'Hard break in first level of numbered list'
Expand All @@ -530,7 +530,7 @@ describe('RichTextEditor', () => {

it('should have multiple "ol" tag names for numbered list button click', async () => {
await pageObject.setEditorTextContent('numbered list 1');
await pageObject.clickFooterButton(ToolbarButton.numberedList);
await pageObject.toggleFooterButton(ToolbarButton.numberedList);
await pageObject.pressEnterKeyInEditor();
await pageObject.setEditorTextContent('numbered list 2');

Expand All @@ -549,7 +549,7 @@ describe('RichTextEditor', () => {

it('should have "ol" tag names for nested numbered lists when clicking "tab"', async () => {
await pageObject.setEditorTextContent('List');
await pageObject.clickFooterButton(ToolbarButton.numberedList);
await pageObject.toggleFooterButton(ToolbarButton.numberedList);
await pageObject.pressEnterKeyInEditor();
await pageObject.pressTabKeyInEditor();
await pageObject.setEditorTextContent('Nested List');
Expand All @@ -573,7 +573,7 @@ describe('RichTextEditor', () => {

it('should have br tag name when pressing shift + Enter with nested numbered lists content', async () => {
await pageObject.setEditorTextContent('List');
await pageObject.clickFooterButton(ToolbarButton.numberedList);
await pageObject.toggleFooterButton(ToolbarButton.numberedList);
await pageObject.pressEnterKeyInEditor();
await pageObject.pressTabKeyInEditor();
await pageObject.pressShiftEnterKeysInEditor();
Expand All @@ -592,7 +592,7 @@ describe('RichTextEditor', () => {

it('should have "ol" tag names for numbered lists when clicking "tab" to make it nested and "shift+Tab" to make it usual list', async () => {
await pageObject.setEditorTextContent('List');
await pageObject.clickFooterButton(ToolbarButton.numberedList);
await pageObject.toggleFooterButton(ToolbarButton.numberedList);
await pageObject.pressEnterKeyInEditor();
await pageObject.pressTabKeyInEditor();
await pageObject.setEditorTextContent('Nested List');
Expand Down Expand Up @@ -626,10 +626,10 @@ describe('RichTextEditor', () => {

it('should have "ol" tag name for numbered list and "ul" tag name for nested bullet list', async () => {
await pageObject.setEditorTextContent('Numbered List');
await pageObject.clickFooterButton(ToolbarButton.numberedList);
await pageObject.toggleFooterButton(ToolbarButton.numberedList);
await pageObject.pressEnterKeyInEditor();
await pageObject.pressTabKeyInEditor();
await pageObject.clickFooterButton(ToolbarButton.bulletList);
await pageObject.toggleFooterButton(ToolbarButton.bulletList);
await pageObject.setEditorTextContent('Nested Bullet List');

expect(pageObject.getEditorTagNames()).toEqual([
Expand All @@ -654,15 +654,15 @@ describe('RichTextEditor', () => {

it('should have "ul" tag name for bullet list button click', async () => {
await pageObject.setEditorTextContent('Bullet List');
await pageObject.clickFooterButton(ToolbarButton.bulletList);
await pageObject.toggleFooterButton(ToolbarButton.bulletList);

expect(pageObject.getEditorTagNames()).toEqual(['UL', 'LI', 'P']);
expect(pageObject.getEditorLeafContents()).toEqual(['Bullet List']);
});

it('should have br tag name when pressing shift + Enter with bulleted list content', async () => {
await pageObject.setEditorTextContent('Bulleted List 1');
await pageObject.clickFooterButton(ToolbarButton.bulletList);
await pageObject.toggleFooterButton(ToolbarButton.bulletList);
await pageObject.pressShiftEnterKeysInEditor();
await pageObject.setEditorTextContent(
'Hard break in first level of bulleted List'
Expand All @@ -678,7 +678,7 @@ describe('RichTextEditor', () => {

it('should have multiple "ul" tag names for bullet list button click', async () => {
await pageObject.setEditorTextContent('Bullet List 1');
await pageObject.clickFooterButton(ToolbarButton.bulletList);
await pageObject.toggleFooterButton(ToolbarButton.bulletList);
await pageObject.pressEnterKeyInEditor();
await pageObject.setEditorTextContent('Bullet List 2');

Expand All @@ -697,7 +697,7 @@ describe('RichTextEditor', () => {

it('should have "ul" tag names for nested bullet lists when clicking "tab"', async () => {
await pageObject.setEditorTextContent('List');
await pageObject.clickFooterButton(ToolbarButton.bulletList);
await pageObject.toggleFooterButton(ToolbarButton.bulletList);
await pageObject.pressEnterKeyInEditor();
await pageObject.pressTabKeyInEditor();
await pageObject.setEditorTextContent('Nested List');
Expand All @@ -721,7 +721,7 @@ describe('RichTextEditor', () => {

it('should have br tag name when pressing shift + Enter with nested bulleted lists content', async () => {
await pageObject.setEditorTextContent('List');
await pageObject.clickFooterButton(ToolbarButton.bulletList);
await pageObject.toggleFooterButton(ToolbarButton.bulletList);
await pageObject.pressEnterKeyInEditor();
await pageObject.pressTabKeyInEditor();
await pageObject.pressShiftEnterKeysInEditor();
Expand All @@ -740,10 +740,10 @@ describe('RichTextEditor', () => {

it('should have "ul" tag name for bullet list and "ol" tag name for nested numbered list', async () => {
await pageObject.setEditorTextContent('Bullet List');
await pageObject.clickFooterButton(ToolbarButton.bulletList);
await pageObject.toggleFooterButton(ToolbarButton.bulletList);
await pageObject.pressEnterKeyInEditor();
await pageObject.pressTabKeyInEditor();
await pageObject.clickFooterButton(ToolbarButton.numberedList);
await pageObject.toggleFooterButton(ToolbarButton.numberedList);
await pageObject.setEditorTextContent('Nested Numbered List');

expect(pageObject.getEditorTagNames()).toEqual([
Expand All @@ -768,7 +768,7 @@ describe('RichTextEditor', () => {

it('should have "ul" tag names for bullet lists when clicking "tab" to make it nested and "shift+Tab" to make it usual list', async () => {
await pageObject.setEditorTextContent('List');
await pageObject.clickFooterButton(ToolbarButton.bulletList);
await pageObject.toggleFooterButton(ToolbarButton.bulletList);
await pageObject.pressEnterKeyInEditor();
await pageObject.pressTabKeyInEditor();
await pageObject.setEditorTextContent('Nested List');
Expand Down Expand Up @@ -801,8 +801,8 @@ describe('RichTextEditor', () => {
});

it('should have "strong" and "em" tag name for both bold and italics button clicks', async () => {
await pageObject.clickFooterButton(ToolbarButton.bold);
await pageObject.clickFooterButton(ToolbarButton.italics);
await pageObject.toggleFooterButton(ToolbarButton.bold);
await pageObject.toggleFooterButton(ToolbarButton.italics);
await pageObject.setEditorTextContent('bold and italics');

expect(pageObject.getEditorTagNames()).toEqual([
Expand All @@ -816,12 +816,12 @@ describe('RichTextEditor', () => {
});

it('should have "strong", "em" and "ol" tag name for all bold, italics and numbered list button clicks', async () => {
await pageObject.clickFooterButton(ToolbarButton.bold);
await pageObject.clickFooterButton(ToolbarButton.italics);
await pageObject.toggleFooterButton(ToolbarButton.bold);
await pageObject.toggleFooterButton(ToolbarButton.italics);
await pageObject.setEditorTextContent(
'bold, italics and numbered list'
);
await pageObject.clickFooterButton(ToolbarButton.numberedList);
await pageObject.toggleFooterButton(ToolbarButton.numberedList);

expect(pageObject.getEditorTagNames()).toEqual([
'OL',
Expand All @@ -836,12 +836,12 @@ describe('RichTextEditor', () => {
});

it('should have "strong", "em" and "ul" tag name for all bold, italics and bullet list button clicks', async () => {
await pageObject.clickFooterButton(ToolbarButton.bold);
await pageObject.clickFooterButton(ToolbarButton.italics);
await pageObject.toggleFooterButton(ToolbarButton.bold);
await pageObject.toggleFooterButton(ToolbarButton.italics);
await pageObject.setEditorTextContent(
'bold, italics and bullet list'
);
await pageObject.clickFooterButton(ToolbarButton.bulletList);
await pageObject.toggleFooterButton(ToolbarButton.bulletList);

expect(pageObject.getEditorTagNames()).toEqual([
'UL',
Expand Down Expand Up @@ -931,7 +931,7 @@ describe('RichTextEditor', () => {
});

it('should not affect bold formatting on the link in editor', async () => {
await pageObject.clickFooterButton(ToolbarButton.bold);
await pageObject.toggleFooterButton(ToolbarButton.bold);
await pageObject.setEditorTextContent(
'https://nimble.ni.dev/ '
);
Expand All @@ -951,7 +951,7 @@ describe('RichTextEditor', () => {
});

it('should not affect italics formatting on the link in editor', async () => {
await pageObject.clickFooterButton(ToolbarButton.italics);
await pageObject.toggleFooterButton(ToolbarButton.italics);
await pageObject.setEditorTextContent(
'https://nimble.ni.dev/ '
);
Expand All @@ -974,7 +974,7 @@ describe('RichTextEditor', () => {
await pageObject.setEditorTextContent(
'https://nimble.ni.dev/ '
);
await pageObject.clickFooterButton(ToolbarButton.bulletList);
await pageObject.toggleFooterButton(ToolbarButton.bulletList);

expect(pageObject.getEditorTagNames()).toEqual([
'UL',
Expand All @@ -991,7 +991,7 @@ describe('RichTextEditor', () => {
await pageObject.setEditorTextContent(
'https://nimble.ni.dev/ '
);
await pageObject.clickFooterButton(ToolbarButton.numberedList);
await pageObject.toggleFooterButton(ToolbarButton.numberedList);

expect(pageObject.getEditorTagNames()).toEqual([
'OL',
Expand Down
Loading

0 comments on commit fc25d8c

Please sign in to comment.