[UIK-3788]/unit tests

semcore/accordion/__tests__/index.test.tsx

@@ -1,15 +1,50 @@
 import type { Intergalactic } from '@semcore/core';
-import { runDependencyCheckTests } from '@semcore/testing-utils/shared-tests';
-import { render, fireEvent, cleanup } from '@semcore/testing-utils/testing-library';
+import { shouldHaveDataUiName, runDependencyCheckTests } from '@semcore/testing-utils/shared-tests';
+import { render, cleanup, userEvent } from '@semcore/testing-utils/testing-library';
 import { expect, test, describe, beforeEach, vi, assertType } from '@semcore/testing-utils/vitest';
 import React from 'react';
 
 import Accordion from '../src';
 
+const AccordionItemWrapper = ({ children }: { children: React.ReactNode }) => (
+  <Accordion defaultValue={1}>
+    <Accordion.Item value={1}>{children}</Accordion.Item>
+  </Accordion>
+);
+
 describe('Accordion Dependency imports', () => {
   runDependencyCheckTests('accordion');
 });
 
+describe('Accordion data-ui-name', () => {
+  shouldHaveDataUiName({
+    Component: Accordion.Item.Toggle,
+    Wrapper: AccordionItemWrapper,
+    props: { children: 'Toggle' },
+    expectedDataUiName: 'Item.Toggle',
+  });
+
+  shouldHaveDataUiName({
+    Component: Accordion.Item.Chevron,
+    Wrapper: AccordionItemWrapper,
+    expectedDataUiName: 'Item.Chevron',
+  });
+
+  shouldHaveDataUiName({
+    Component: Accordion.Item.ToggleButton,
+    Wrapper: AccordionItemWrapper,
+    props: { children: 'ToggleButton' },
+    expectedDataUiName: 'Item.ToggleButton',
+  });
+
+  shouldHaveDataUiName({
+    Component: Accordion.Item.Collapse,
+    Wrapper: AccordionItemWrapper,
+    props: { children: 'Collapse' },
+    expectedDataUiName: 'Item.Collapse',
+  });
+});
+
 describe('Accordion', () => {
   describe('Types', () => {
     const any: any = null;
@@ -45,7 +80,7 @@ describe('Accordion', () => {
 
   beforeEach(cleanup);
 
-  test.concurrent('Verify supports uncontrolled mode with single expandable item', () => {
+  test.concurrent('Verify supports uncontrolled mode with single expandable item', async () => {
     const spy = vi.fn();
     const { getByText } = render(
       <Accordion onChange={spy} defaultValue={null}>
@@ -58,17 +93,17 @@ describe('Accordion', () => {
       </Accordion>,
     );
 
-    fireEvent.click(getByText('Item 1'));
+    await userEvent.click(getByText('Item 1'));
     expect(spy).toBeCalledWith(1);
 
-    fireEvent.click(getByText('Item 2'));
+    await userEvent.click(getByText('Item 2'));
     expect(spy).toBeCalledWith(2);
 
-    fireEvent.click(getByText('Item 2'));
+    await userEvent.click(getByText('Item 2'));
     expect(spy).toBeCalledWith(null);
   });
 
-  test('Verify supports controlled mode with single expandable item', () => {
+  test('Verify supports controlled mode with single expandable item', async () => {
     const spy = vi.fn();
 
     const { getByText, rerender } = render(
@@ -82,7 +117,7 @@ describe('Accordion', () => {
       </Accordion>,
     );
 
-    fireEvent.click(getByText('Item 1'));
+    await userEvent.click(getByText('Item 1'));
     expect(spy).toBeCalledWith(1);
 
     rerender(
@@ -95,7 +130,7 @@ describe('Accordion', () => {
         </Accordion.Item>
       </Accordion>,
     );
-    fireEvent.click(getByText('Item 2'));
+    await userEvent.click(getByText('Item 2'));
     expect(spy).toBeCalledWith(2);
 
     rerender(
@@ -108,11 +143,11 @@ describe('Accordion', () => {
         </Accordion.Item>
       </Accordion>,
     );
-    fireEvent.click(getByText('Item 2'));
+    await userEvent.click(getByText('Item 2'));
     expect(spy).toBeCalledWith(null);
   });
 
-  test('Verify supports uncontrolled mode with multiple expandable items', () => {
+  test('Verify supports uncontrolled mode with multiple expandable items', async () => {
     const spy = vi.fn();
     const { getByText } = render(
       <Accordion onChange={spy}>
@@ -125,20 +160,20 @@ describe('Accordion', () => {
       </Accordion>,
     );
 
-    fireEvent.click(getByText('Item 1'));
+    await userEvent.click(getByText('Item 1'));
     expect(spy).toBeCalledWith([1]);
 
-    fireEvent.click(getByText('Item 2'));
+    await userEvent.click(getByText('Item 2'));
     expect(spy).toBeCalledWith([1, 2]);
 
-    fireEvent.click(getByText('Item 1'));
+    await userEvent.click(getByText('Item 1'));
     expect(spy).toBeCalledWith([2]);
 
-    fireEvent.click(getByText('Item 2'));
+    await userEvent.click(getByText('Item 2'));
     expect(spy).toBeCalledWith([]);
   });
 
-  test('Verify supports controlled mode with multiple expandable items', () => {
+  test('Verify supports controlled mode with multiple expandable items', async () => {
     const spy = vi.fn();
 
     const { getByText, rerender } = render(
@@ -151,7 +186,7 @@ describe('Accordion', () => {
         </Accordion.Item>
       </Accordion>,
     );
-    fireEvent.click(getByText('Item 1'));
+    await userEvent.click(getByText('Item 1'));
     expect(spy).toBeCalledWith([1]);
 
     rerender(
@@ -164,7 +199,7 @@ describe('Accordion', () => {
         </Accordion.Item>
       </Accordion>,
     );
-    fireEvent.click(getByText('Item 2'));
+    await userEvent.click(getByText('Item 2'));
     expect(spy).toBeCalledWith([1, 2]);
 
     rerender(
@@ -177,7 +212,7 @@ describe('Accordion', () => {
         </Accordion.Item>
       </Accordion>,
     );
-    fireEvent.click(getByText('Item 1'));
+    await userEvent.click(getByText('Item 1'));
     expect(spy).toBeCalledWith([2]);
 
     rerender(
@@ -190,7 +225,7 @@ describe('Accordion', () => {
         </Accordion.Item>
       </Accordion>,
     );
-    fireEvent.click(getByText('Item 2'));
+    await userEvent.click(getByText('Item 2'));
     expect(spy).toBeCalledWith([]);
   });
 });

semcore/add-filter/__tests__/index.test.tsx

@@ -1,5 +1,5 @@
-import { runDependencyCheckTests } from '@semcore/testing-utils/shared-tests';
-import { render, fireEvent, cleanup, waitFor } from '@semcore/testing-utils/testing-library';
+import { shouldHaveDataUiName, runDependencyCheckTests } from '@semcore/testing-utils/shared-tests';
+import { render, cleanup, waitFor, userEvent } from '@semcore/testing-utils/testing-library';
 import { expect, test, describe, beforeEach, vi } from '@semcore/testing-utils/vitest';
 import React from 'react';
 
@@ -9,6 +9,22 @@ describe('AddFilter Dependency imports', () => {
   runDependencyCheckTests('add-filter');
 });
 
+describe('AddFilter data-ui-name', () => {
+  shouldHaveDataUiName({
+    Component: AddFilter,
+    props: {
+      filterData: { name: '' },
+      onClearAll: () => {},
+      children: (
+        <AddFilter.Input name='name'>
+          <AddFilter.Input.Value />
+        </AddFilter.Input>
+      ),
+    },
+    expectedDataUiName: 'AddFilter',
+  });
+});
+
 describe('AddFilter', () => {
   beforeEach(() => {
     cleanup();
@@ -34,7 +50,7 @@ describe('AddFilter', () => {
       </AddFilter>,
     );
 
-    fireEvent.click(getByText('Add filter'));
+    await userEvent.click(getByText('Add filter'));
 
     await waitFor(() => {
       expect(queryByText('Name')).toBeInTheDocument();
@@ -54,7 +70,7 @@ describe('AddFilter', () => {
       </AddFilter>,
     );
 
-    fireEvent.click(getByText('Add filter'));
+    await userEvent.click(getByText('Add filter'));
 
     await waitFor(() => {
       expect(getByText('name')).toBeInTheDocument();

semcore/badge/__tests__/index.test.tsx

@@ -1,4 +1,4 @@
-import { runDependencyCheckTests } from '@semcore/testing-utils/shared-tests';
+import { shouldHaveDataUiName, runDependencyCheckTests } from '@semcore/testing-utils/shared-tests';
 import { render, cleanup } from '@semcore/testing-utils/testing-library';
 import { describe, test, expect, beforeEach, vi, afterEach } from '@semcore/testing-utils/vitest';
 import React from 'react';
@@ -9,6 +9,14 @@ describe('Badge Dependency imports', () => {
   runDependencyCheckTests('badge');
 });
 
+describe('Badge data-ui-name', () => {
+  shouldHaveDataUiName({
+    Component: Badge,
+    props: { type: 'admin' },
+    expectedDataUiName: 'Badge',
+  });
+});
+
 describe('Badge deprecation warnings', () => {
   beforeEach(cleanup);
 

semcore/base-components/__tests__/Animation.test.jsx

@@ -1,10 +1,47 @@
+import { shouldHaveDataUiName } from '@semcore/testing-utils/shared-tests';
 import { afterEach, expect, test, describe, vi } from '@semcore/testing-utils/vitest';
 import { cleanup, render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { Animation } from '../src';
+import { Animation, Collapse, FadeInOut, Scale, Slide, Transform } from '../src';
 
 describe('Animation', () => {
+  shouldHaveDataUiName({
+    Component: Animation,
+    props: { visible: true, children: 'Animation' },
+    expectedDataUiName: 'Animation',
+  });
+
+  shouldHaveDataUiName({
+    Component: Transform,
+    props: { visible: true, children: 'Transform' },
+    expectedDataUiName: 'Transform',
+  });
+
+  shouldHaveDataUiName({
+    Component: FadeInOut,
+    props: { visible: true, children: 'FadeInOut' },
+    expectedDataUiName: 'FadeInOut',
+  });
+
+  shouldHaveDataUiName({
+    Component: Collapse,
+    props: { visible: true, children: 'Collapse' },
+    expectedDataUiName: 'Collapse',
+  });
+
+  shouldHaveDataUiName({
+    Component: Scale,
+    props: { visible: true, children: 'Scale' },
+    expectedDataUiName: 'Scale',
+  });
+
+  shouldHaveDataUiName({
+    Component: Slide,
+    props: { visible: true, slideOrigin: 'left', children: 'Slide' },
+    expectedDataUiName: 'Slide',
+  });
+
   afterEach(() => {
     cleanup();
     vi.restoreAllMocks();

semcore/base-components/__tests__/Grid.test.jsx

@@ -1,17 +1,20 @@
-import * as sharedTests from '@semcore/testing-utils/shared-tests';
+import { shouldHaveDataUiName } from '@semcore/testing-utils/shared-tests';
 import { cleanup } from '@semcore/testing-utils/testing-library';
 import { describe, beforeEach } from '@semcore/testing-utils/vitest';
-import React from 'react';
 
 import { Col, Row } from '../src';
 
-const { shouldSupportClassName, shouldSupportRef } = sharedTests;
-
 describe('Grid', () => {
   beforeEach(cleanup);
-  shouldSupportClassName(Row);
-  shouldSupportRef(Row);
 
-  shouldSupportClassName(Col, Row);
-  shouldSupportRef(Col, Row);
+  shouldHaveDataUiName({
+    Component: Row,
+    expectedDataUiName: 'Row',
+  });
+
+  shouldHaveDataUiName({
+    Component: Col,
+    Wrapper: Row,
+    expectedDataUiName: 'Row.Col',
+  });
 });

semcore/base-components/__tests__/flex-box.test.jsx

@@ -1,17 +1,21 @@
-import * as sharedTests from '@semcore/testing-utils/shared-tests';
+import { shouldHaveDataUiName } from '@semcore/testing-utils/shared-tests';
 import { cleanup, render } from '@semcore/testing-utils/testing-library';
 import { expect, test, describe, beforeEach } from '@semcore/testing-utils/vitest';
 import React from 'react';
 
 import { Box, Flex } from '../src';
 
-const { shouldSupportClassName, shouldSupportRef } = sharedTests;
+const SpanTag = function SpanTag(props) {
+  return <span {...props} />;
+};
 
 describe('Flex', () => {
   beforeEach(cleanup);
 
-  shouldSupportClassName(Flex);
-  shouldSupportRef(Flex);
+  shouldHaveDataUiName({
+    Component: Flex,
+    expectedDataUiName: 'Flex',
+  });
 
   test.concurrent('Verify supports css property', async () => {
     const MAP_CSS = {
@@ -80,28 +84,21 @@ describe('Flex', () => {
 describe('Box', () => {
   beforeEach(cleanup);
 
-  shouldSupportClassName(Box);
-  shouldSupportRef(Box);
-
-  test('Verify \'tag\' prop', () => {
-    const { getByTestId } = render(
-      <Box tag='span' data-testid='box'>
-        tag
-      </Box>,
-    );
-    expect(getByTestId('box').tagName).toBe('SPAN');
+  shouldHaveDataUiName({
+    Component: Box,
+    expectedDataUiName: 'Box',
   });
 
-  test('Verify \'tag\' prop component', () => {
-    const Span = function (props) {
-      return <span {...props} />;
-    };
+  test('Verify supports custom tag', () => {
     const { getByTestId } = render(
-      <Box tag={Span} data-testid='box'>
-        tag
-      </Box>,
+      <>
+        <Box tag='button' data-testid='button-box' />
+        <Box tag={SpanTag} data-testid='span-box' />
+      </>,
     );
-    expect(getByTestId('box').tagName).toBe('SPAN');
+
+    expect(getByTestId('button-box').tagName).toBe('BUTTON');
+    expect(getByTestId('span-box').tagName).toBe('SPAN');
   });
 
   test('Verify clear non html props', () => {