From aa918007f59111fb3f5cd720471c08f7c49b08b2 Mon Sep 17 00:00:00 2001
From: saikrishnan-ni <123591928+saikrishnan-ni@users.noreply.github.com>
Date: Thu, 7 Sep 2023 18:11:09 +0530
Subject: [PATCH] Rich text editor | Add tests for different list elements in
 same level behavior (#1481)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Pull Request

## 🤨 Rationale

- Resolves https://github.com/ni/nimble/issues/1473, where different
type of list element is possible to be added in same level.
It can be reproduced using the steps from
https://github.com/ni/nimble/pull/1462#discussion_r1310933574

## 👩‍💻 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 <sai.krishnan.perumal@ni.com>
Signed-off-by: Sai krishnan Perumal <123591928+saikrishnan-ni@users.noreply.github.com>
Co-authored-by: m-akinc <7282195+m-akinc@users.noreply.github.com>
---
 ...-1b233ea2-a531-4fc0-8b4a-949d74ee0e43.json |  7 ++++++
 .../tests/rich-text-editor-matrix.stories.ts  | 14 +++++++++++
 .../editor/tests/rich-text-editor.spec.ts     | 17 +++++++++++++
 .../viewer/tests/rich-text-viewer.spec.ts     | 25 +++++++++++++++++++
 4 files changed, 63 insertions(+)
 create mode 100644 change/@ni-nimble-components-1b233ea2-a531-4fc0-8b4a-949d74ee0e43.json

diff --git a/change/@ni-nimble-components-1b233ea2-a531-4fc0-8b4a-949d74ee0e43.json b/change/@ni-nimble-components-1b233ea2-a531-4fc0-8b4a-949d74ee0e43.json
new file mode 100644
index 0000000000..3810decf16
--- /dev/null
+++ b/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": "123591928+saikrishnan-ni@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-matrix.stories.ts b/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-matrix.stories.ts
index f942be18b2..dfdf16401a 100644
--- a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor-matrix.stories.ts
+++ b/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
diff --git a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts b/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts
index 4c486996a0..f693c0d58b 100644
--- a/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts
+++ b/packages/nimble-components/src/rich-text/editor/tests/rich-text-editor.spec.ts
@@ -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', () => {
diff --git a/packages/nimble-components/src/rich-text/viewer/tests/rich-text-viewer.spec.ts b/packages/nimble-components/src/rich-text/viewer/tests/rich-text-viewer.spec.ts
index 7246dcecc4..03073bf9f3 100644
--- a/packages/nimble-components/src/rich-text/viewer/tests/rich-text-viewer.spec.ts
+++ b/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', () => {