[UIK-3788] data UI name tests

semcore/carousel/__tests__/index.test.tsx

@@ -35,6 +35,20 @@ describe('Carousel', () => {
     expect(result).toMatchSnapshot();
   });
 
+  test('Verify data-ui-name', () => {
+    const carousel = (
+      <Carousel>
+        <Carousel.Item />
+        <Carousel.Item />
+      </Carousel>
+    );
+
+    const { container } = render(carousel);
+    const result = extractUIName(container);
+
+    expect(result).toMatchSnapshot();
+  });
+
   test('Verify control mode', () => {
     const spy = vi.fn();
 

semcore/drag-and-drop/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,30 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DragAndDrop > Verify data-ui-name 1`] = `
+{
+  "children": [
+    {
+      "children": [
+        {
+          "children": [],
+          "uiName": "DragAndDrop.Draggable",
+        },
+        {
+          "children": [],
+          "uiName": "DragAndDrop.Draggable",
+        },
+        {
+          "children": [],
+          "uiName": "DragAndDrop.DropZone",
+        },
+      ],
+      "uiName": "DragAndDrop",
+    },
+    {
+      "children": [],
+      "uiName": "Box",
+    },
+  ],
+  "uiName": null,
+}
+`;

semcore/drag-and-drop/__tests__/index.test.tsx

@@ -1,6 +1,36 @@
+import { extractUIName } from '@semcore/testing-utils/shared/extractUINameTree.ts';
 import { runDependencyCheckTests } from '@semcore/testing-utils/shared-tests';
-import { describe } from '@semcore/testing-utils/vitest';
+import { cleanup, render } from '@semcore/testing-utils/testing-library';
+import { beforeEach, describe, expect, test } from '@semcore/testing-utils/vitest';
+import React from 'react';
+
+import DragAndDrop from '../src';
 
 describe('drag-and-drop Dependency imports', () => {
   runDependencyCheckTests('drag-and-drop');
 });
+
+describe('DragAndDrop', () => {
+  beforeEach(cleanup);
+
+  test('Verify data-ui-name', () => {
+    const dragAndDrop = (
+      <DragAndDrop aria-label='Sortable list' onDnD={() => {}}>
+        <DragAndDrop.Draggable id='first' aria-label='First item'>
+          First item
+        </DragAndDrop.Draggable>
+        <DragAndDrop.Draggable id='second' aria-label='Second item'>
+          Second item
+        </DragAndDrop.Draggable>
+        <DragAndDrop.DropZone aria-label='Drop zone'>
+          Drop zone
+        </DragAndDrop.DropZone>
+      </DragAndDrop>
+    );
+
+    const { container } = render(dragAndDrop);
+    const result = extractUIName(container);
+
+    expect(result).toMatchSnapshot();
+  });
+});

semcore/dropdown-menu/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,128 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DropdownMenu > Verify data-ui-name 1`] = `
+{
+  "children": [
+    {
+      "children": [
+        {
+          "children": [
+            {
+              "children": [],
+              "uiName": "ButtonTrigger.Text",
+            },
+            {
+              "children": [
+                {
+                  "children": [
+                    {
+                      "children": [],
+                      "uiName": null,
+                    },
+                  ],
+                  "uiName": "ChevronDown",
+                },
+              ],
+              "uiName": "ButtonTrigger.Addon",
+            },
+          ],
+          "uiName": "DropdownMenu.Trigger.InnerTriggerWrapper",
+        },
+      ],
+      "uiName": "DropdownMenu.Trigger",
+    },
+    {
+      "children": [],
+      "uiName": null,
+    },
+    {
+      "children": [
+        {
+          "children": [
+            {
+              "children": [
+                {
+                  "children": [
+                    {
+                      "children": [
+                        {
+                          "children": [],
+                          "uiName": "Flex",
+                        },
+                      ],
+                      "uiName": "Dropdown.Item",
+                    },
+                    {
+                      "children": [
+                        {
+                          "children": [],
+                          "uiName": "DropdownMenu.Item",
+                        },
+                        {
+                          "children": [
+                            {
+                              "children": [
+                                {
+                                  "children": [],
+                                  "uiName": "DropdownMenu.Item.Addon",
+                                },
+                                {
+                                  "children": [],
+                                  "uiName": "DropdownMenu.Item.Text",
+                                },
+                              ],
+                              "uiName": "DropdownMenu.Item.Content",
+                            },
+                            {
+                              "children": [],
+                              "uiName": "DropdownMenu.Item.Hint",
+                            },
+                          ],
+                          "uiName": "DropdownMenu.Item",
+                        },
+                      ],
+                      "uiName": "DropdownMenu.Group",
+                    },
+                    {
+                      "children": [
+                        {
+                          "children": [
+                            {
+                              "children": [
+                                {
+                                  "children": [],
+                                  "uiName": "Button.Text",
+                                },
+                              ],
+                              "uiName": "Button.InnerWrapper",
+                            },
+                          ],
+                          "uiName": "Button",
+                        },
+                      ],
+                      "uiName": "DropdownMenu.Actions",
+                    },
+                    {
+                      "children": [],
+                      "uiName": "DropdownMenu.StatusItem",
+                    },
+                  ],
+                  "uiName": null,
+                },
+              ],
+              "uiName": "ScrollArea.Container",
+            },
+          ],
+          "uiName": "DropdownMenu.Menu",
+        },
+      ],
+      "uiName": "DropdownMenu.Popper",
+    },
+    {
+      "children": [],
+      "uiName": null,
+    },
+  ],
+  "uiName": null,
+}
+`;

semcore/dropdown-menu/__tests__/index.test.tsx

@@ -1,6 +1,7 @@
 import { Box } from '@semcore/base-components';
 import { ButtonTrigger } from '@semcore/base-trigger';
 import Button from '@semcore/button';
+import { extractUIName } from '@semcore/testing-utils/shared/extractUINameTree.ts';
 import { runDependencyCheckTests } from '@semcore/testing-utils/shared-tests';
 import { cleanup, render, userEvent } from '@semcore/testing-utils/testing-library';
 import { expect, test, describe, beforeEach, vi } from '@semcore/testing-utils/vitest';
@@ -15,14 +16,37 @@ describe('dropdown-menu Dependency imports', () => {
 describe('DropdownMenu', () => {
   beforeEach(() => {
     cleanup();
+  });
+
+  test('Verify data-ui-name', () => {
+    const dropdownMenu = (
+      <DropdownMenu visible disablePortal>
+        <DropdownMenu.Trigger tag={ButtonTrigger}>
+          Trigger
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Menu>
+          <DropdownMenu.Group title='Group title'>
+            <DropdownMenu.Item>Item 1</DropdownMenu.Item>
+            <DropdownMenu.Item>
+              <DropdownMenu.Item.Content>
+                <DropdownMenu.Item.Addon>Before</DropdownMenu.Item.Addon>
+                <DropdownMenu.Item.Text>Item 2</DropdownMenu.Item.Text>
+              </DropdownMenu.Item.Content>
+              <DropdownMenu.Item.Hint>Hint text</DropdownMenu.Item.Hint>
+            </DropdownMenu.Item>
+          </DropdownMenu.Group>
+          <DropdownMenu.Actions>
+            <Button>Apply</Button>
+          </DropdownMenu.Actions>
+          <DropdownMenu.StatusItem id='search-result' itemsCount={0} />
+        </DropdownMenu.Menu>
+      </DropdownMenu>
+    );
+
+    const { container } = render(dropdownMenu);
+    const result = extractUIName(container);
 
-    const mockIntersectionObserver = vi.fn();
-    mockIntersectionObserver.mockReturnValue({
-      observe: () => null,
-      unobserve: () => null,
-      disconnect: () => null,
-    });
-    window.IntersectionObserver = mockIntersectionObserver;
+    expect(result).toMatchSnapshot();
   });
 
   test.sequential('Verify does not trigger visibility change on Space key in input', async () => {

semcore/dropdown/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,25 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Dropdown > Verify data-ui-name 1`] = `
+{
+  "children": [
+    {
+      "children": [],
+      "uiName": "Dropdown.Trigger",
+    },
+    {
+      "children": [],
+      "uiName": null,
+    },
+    {
+      "children": [],
+      "uiName": "Dropdown.Popper",
+    },
+    {
+      "children": [],
+      "uiName": null,
+    },
+  ],
+  "uiName": null,
+}
+`;

semcore/dropdown/__tests__/index.test.tsx

@@ -1,3 +1,4 @@
+import { extractUIName } from '@semcore/testing-utils/shared/extractUINameTree.ts';
 import { runDependencyCheckTests } from '@semcore/testing-utils/shared-tests';
 import {
   cleanup,
@@ -81,6 +82,22 @@ describe('Dropdown', () => {
     window.IntersectionObserver = mockIntersectionObserver;
   });
 
+  test('Verify data-ui-name', () => {
+    const dropdown = (
+      <Dropdown visible disablePortal>
+        <Dropdown.Trigger>
+          Trigger
+        </Dropdown.Trigger>
+        <Dropdown.Popper aria-label='Dropdown popper description' />
+      </Dropdown>
+    );
+
+    const { container } = render(dropdown);
+    const result = extractUIName(container);
+
+    expect(result).toMatchSnapshot();
+  });
+
   test('Verify not open popper by keyboard enter if interaction none', async () => {
     const spy = vi.fn();
     render(