From 0d53b95890f597a6a5742b6c9e376bb4780be8c2 Mon Sep 17 00:00:00 2001
From: OlgaLarina <olga.larina.dev@gmail.com>
Date: Wed, 22 May 2024 14:45:15 +0300
Subject: [PATCH] work for #8129 add markup test for list-item-group

---
 tests/markup/etalon_components.ts             | 34 +++++++++-
 .../list-component-with-subitems.snap.html    | 62 +++++++++++++++++++
 2 files changed, 94 insertions(+), 2 deletions(-)
 create mode 100644 tests/markup/snapshots/list-component-with-subitems.snap.html

diff --git a/tests/markup/etalon_components.ts b/tests/markup/etalon_components.ts
index 9111cdb848..83fb985a77 100644
--- a/tests/markup/etalon_components.ts
+++ b/tests/markup/etalon_components.ts
@@ -1,5 +1,5 @@
 import { registerMarkupTests } from "./helper";
-import { Question } from "survey-core";
+import { Question, Action, createDropdownActionModel } from "survey-core";
 
 registerMarkupTests(
   [
@@ -29,5 +29,35 @@ registerMarkupTests(
         return document.querySelector(".sv-popup.sv-dropdown-popup .sv-popup__container") as HTMLElement;
       },
       snapshot: "list-component"
+      // }, {
+      //   name: "Test popup list with subitems",
+      //   json: {
+      //     questions: [
+      //       {
+      //         "type": "text",
+      //         "name": "q1",
+      //         "title": "Question title"
+      //       }
+      //     ]
+      //   },
+      //   before: () => { Question["questionCounter"] = 100; },
+      //   initSurvey: (survey) => {
+      //     survey.onGetQuestionTitleActions.add((_, opt) => {
+      //       const items = [new Action({ id: "1", title: "text1" }), new Action({ id: "2", title: "text2" })];
+      //       const item = createDropdownActionModel(
+      //         { title: "bottom", showTitle: true },
+      //         {
+      //           verticalPosition: "bottom", horizontalPosition: "center", items: items,
+      //           onSelectionChanged: (item, ...params) => { }
+      //         });
+      //       items[1].setItems([{ id: "11", title: "text11" }, { id: "21", title: "text21" }], () => { });
+      //       opt.titleActions = [item];
+      //     });
+      //   },
+      //   getElement: () => {
+      //     return document.querySelector(".sv-popup .sv-popup__container") as HTMLElement;
+      //   },
+      //   event: "onAfterRenderSurvey",
+      //   snapshot: "list-component-with-subitems"
     }
-  ]);
\ No newline at end of file
+  ]);
diff --git a/tests/markup/snapshots/list-component-with-subitems.snap.html b/tests/markup/snapshots/list-component-with-subitems.snap.html
new file mode 100644
index 0000000000..48a67c636e
--- /dev/null
+++ b/tests/markup/snapshots/list-component-with-subitems.snap.html
@@ -0,0 +1,62 @@
+<div class="sv-popup__shadow">
+	<span class="sv-popup__pointer">
+	</span>
+	<div class="sv-popup__body-content">
+		<div class="sv-popup__scrolling-content">
+			<div class="sv-popup__content">
+				<div class="sv-list__container">
+					<div class="sv-list__empty-container" style="display:none;">
+						<div aria-label="No data to display" class="sv-list__empty-text">No data to display</div>
+					</div>
+					<ul class="sv-list" role="listbox">
+						<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
+							<div class="sv-list__item-body" style="padding-inline-start:16px;" title="text1">
+								<span class="sv-string-viewer">text1</span>
+							</div>
+						</li>
+						<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
+							<div class="sv-list__item-body" style="padding-inline-start:16px;" title="text2">
+								<span class="sv-string-viewer">text2</span>
+								<svg class="sv-list-item__marker-icon sv-svg-icon" role="img" style="height:16px; width:16px;">
+									<use xlink:href="#icon-next_16x16" class="">
+									</use>
+								</svg>
+								<div>
+									<div class="sv-popup sv-popup--dropdown sv-popup-inner" style="display:none;" tabindex="-1">
+										<div class="sv-popup__container">
+											<div class="sv-popup__shadow">
+												<div class="sv-popup__body-content">
+													<div class="sv-popup__scrolling-content">
+														<div class="sv-popup__content">
+															<div class="sv-list__container">
+																<div class="sv-list__empty-container" style="display:none;">
+																	<div aria-label="No data to display" class="sv-list__empty-text">No data to display</div>
+																</div>
+																<ul class="sv-list" role="listbox">
+																	<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
+																		<div class="sv-list__item-body" style="padding-inline-start:16px;" title="text11">
+																			<span class="sv-string-viewer">text11</span>
+																		</div>
+																	</li>
+																	<li aria-selected="false" class="sv-list__item" role="option" tabindex="0">
+																		<div class="sv-list__item-body" style="padding-inline-start:16px;" title="text21">
+																			<span class="sv-string-viewer">text21</span>
+																		</div>
+																	</li>
+																</ul>
+															</div>
+														</div>
+													</div>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file