Rich text editor | Add tests for different list elements in same leve…

…l behavior (#1481)

# Pull Request

## 🤨 Rationale

- Resolves #1473, where different
type of list element is possible to be added in same level.
It can be reproduced using the steps from
#1462 (comment)

## 👩‍💻 Implementation

- Added unit and ui test for the possibility of having different type of
list element in same level

## 🧪 Testing

- Added unit and ui testing

## ✅ 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.

---------

Signed-off-by: Sai krishnan Perumal <[email protected]>
Signed-off-by: Sai krishnan Perumal <[email protected]>
Co-authored-by: m-akinc <[email protected]>

change/@ni-nimble-components-1b233ea2-a531-4fc0-8b4a-949d74ee0e43.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Added test for different list types at same level in rich text editor",
+  "packageName": "@ni/nimble-components",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-matrix.stories.ts

@@ -174,6 +174,20 @@ multipleSubPointsContentInMobileWidth.play = (): void => {
         .setMarkdown(multipleSubPointsContent);
 };
 
+const differentListElementContentInSameLevel = `
+1. Point 1
+    * Sub point 1
+    1. Sub point 2
+    * Sub point 3
+    1. Sub point 4`;
+
+export const differentListElementInSameLevel: StoryFn = createStory(mobileWidthComponent);
+differentListElementInSameLevel.play = (): void => {
+    document
+        .querySelector('nimble-rich-text-editor')!
+        .setMarkdown(differentListElementContentInSameLevel);
+};
+
 export const longWordContentInMobileWidth: StoryFn = createStory(mobileWidthComponent);
 longWordContentInMobileWidth.play = (): void => {
     document

packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts

@@ -625,6 +625,23 @@ describe('RichTextEditor', () => {
                 'bold, italics and bullet list'
             ]);
         });
+
+        it('should have different type of list at same level possible', () => {
+            element.setMarkdown(`- Bulleted List 
+            \n  1. Numbered List 
+            \n  - Bulleted List`);
+            expect(pageObject.getEditorTagNames()).toEqual([
+                'UL',
+                'LI',
+                'P',
+                'OL',
+                'LI',
+                'P',
+                'UL',
+                'LI',
+                'P'
+            ]);
+        });
     });
 
     describe('various wacky string values input into the editor', () => {

packages/nimble-components/src/rich-text/viewer/tests/rich-text-viewer.spec.ts

@@ -610,6 +610,31 @@ describe('RichTextViewer', () => {
                 'https://nimble.ni.dev/'
             ]);
         });
+
+        it('should have different type of list at same level possible', async () => {
+            element.markdown = `- Bulleted List 
+            \n  1. Numbered List 
+            \n  - Bulleted List`;
+
+            await connect();
+
+            expect(pageObject.getRenderedMarkdownTagNames()).toEqual([
+                'UL',
+                'LI',
+                'P',
+                'OL',
+                'LI',
+                'P',
+                'UL',
+                'LI',
+                'P'
+            ]);
+            expect(pageObject.getRenderedMarkdownLeafContents()).toEqual([
+                'Bulleted List',
+                'Numbered List',
+                'Bulleted List'
+            ]);
+        });
     });
 
     describe('various not supported markdown string values render as unchanged strings', () => {