test(Cell): improve unit-tests coverage (#7323)

Улучшил покрытие тестами компонента Cell и сопутствующие ему CellButton и SimpleCell, CellCheckbox
VKCOM · Aug 7, 2024 · f834700 · f834700
1 parent 5a0b172
commit f834700
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 3 deletions.
diff --git a/packages/vkui/src/components/Cell/Cell.test.tsx b/packages/vkui/src/components/Cell/Cell.test.tsx
@@ -1,8 +1,10 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, getByRole, render, screen } from '@testing-library/react';
+import { Platform } from '../../lib/platform';
 import { baselineComponent, userEvent } from '../../testing/utils';
 import { ConfigProvider } from '../ConfigProvider/ConfigProvider';
 import { List } from '../List/List';
 import { Cell } from './Cell';
+import styles from './Cell.module.css';
 
 const label = 'Перенести ячейку';
 
@@ -36,7 +38,7 @@ describe('Cell', () => {
       );
 
       await userEvent.click(
-        screen.getByTestId('list-xyz').querySelector(`[aria-label="${label}"]`) as Element,
+        screen.getByTestId('list-xyz').querySelector<HTMLElement>(`[aria-label="${label}"]`)!,
       );
 
       expect(updatedList).toEqual(initialList);
@@ -149,4 +151,83 @@ describe('Cell', () => {
       expect(clickStub).toHaveBeenCalledTimes(1);
     });
   });
+
+  it('check selectable mode', () => {
+    render(
+      <Cell mode="selectable" data-testid="cell">
+        Саша Колобов
+      </Cell>,
+    );
+    const cell = screen.getByTestId('cell');
+    expect(cell.tagName).toBe('LABEL');
+    expect(cell.parentElement).toHaveClass(styles['Cell--selectable']);
+
+    const checkbox = getByRole(cell, 'checkbox');
+    expect(checkbox).toBeInTheDocument();
+  });
+
+  it('check dragging className add when dragging cell', async () => {
+    render(
+      <Cell data-testid="list-xyz" draggable draggerLabel={label}>
+        xyz
+      </Cell>,
+    );
+
+    const cell = screen.getByTestId('list-xyz');
+    const dragger = cell.querySelector<HTMLElement>(`.${styles['Cell__dragger']}`)!;
+    expect(dragger).toBeInTheDocument();
+
+    fireEvent.mouseDown(dragger, {
+      clientX: 0,
+      clientY: 0,
+    });
+    fireEvent.mouseMove(dragger, {
+      clientX: 0,
+      clientY: 100,
+    });
+
+    expect(cell.parentElement).toHaveClass(styles['Cell--dragging']);
+  });
+
+  it('check that dragger after the content in IOS', () => {
+    render(
+      <ConfigProvider platform={Platform.IOS}>
+        <Cell data-testid="list-xyz" draggable draggerLabel={label}>
+          <div data-testid="content"></div>
+        </Cell>
+      </ConfigProvider>,
+    );
+    const cell = screen.getByTestId('list-xyz');
+    const dragger = cell.querySelector<HTMLElement>(`.${styles['Cell__dragger']}`)!;
+    const content = screen.getByTestId('content');
+
+    // Проверяем, что dragger находится в DOM дереве после контента, значит в after
+    expect(
+      content.compareDocumentPosition(dragger) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  it('should have disabled classNames', () => {
+    render(
+      <Cell data-testid="list-xyz" draggable draggerLabel={label} disabled>
+        xyz
+      </Cell>,
+    );
+
+    const cell = screen.getByTestId('list-xyz');
+    const dragger = cell.querySelector<HTMLElement>(`.${styles['Cell__dragger']}`)!;
+    expect(dragger).toBeInTheDocument();
+
+    fireEvent.mouseDown(dragger, {
+      clientX: 0,
+      clientY: 0,
+    });
+    fireEvent.mouseMove(dragger, {
+      clientX: 0,
+      clientY: 100,
+    });
+
+    expect(cell.parentElement).not.toHaveClass(styles['Cell--dragging']);
+    expect(cell.parentElement).toHaveClass(styles['Cell--disabled']);
+  });
 });
diff --git a/packages/vkui/src/components/Cell/CellCheckbox/CellCheckbox.test.tsx b/packages/vkui/src/components/Cell/CellCheckbox/CellCheckbox.test.tsx
@@ -1,10 +1,34 @@
+import { render } from '@testing-library/react';
+import { Platform } from '../../../lib/platform';
 import { baselineComponent } from '../../../testing/utils';
-import { CellCheckbox } from './CellCheckbox';
+import { ConfigProvider } from '../../ConfigProvider/ConfigProvider';
+import { CellCheckbox, CellCheckboxProps } from './CellCheckbox';
+import styles from './CellCheckbox.module.css';
 
 describe('CellCheckbox', () => {
   baselineComponent((props) => (
     <label>
       CellCheckbox <CellCheckbox {...props} />
     </label>
   ));
+
+  describe.each([Platform.IOS, Platform.VKCOM])(
+    'should use circle icon in platform %s',
+    (platform) => {
+      it.each<CellCheckboxProps['type']>(['auto', 'circle'])('with type %s ', (type) => {
+        const { container } = render(
+          <ConfigProvider platform={platform}>
+            <CellCheckbox type={type} />
+          </ConfigProvider>,
+        );
+        const iconsOff = container.getElementsByClassName(styles['CellCheckbox__icon--off'])[0];
+        expect(iconsOff.querySelector('.vkuiIcon--check_circle_off_20')).toBeInTheDocument();
+        expect(iconsOff.querySelector('.vkuiIcon--check_circle_off_24')).toBeInTheDocument();
+
+        const iconsOn = container.getElementsByClassName(styles['CellCheckbox__icon--on'])[0];
+        expect(iconsOn.querySelector('.vkuiIcon--check_circle_on_20')).toBeInTheDocument();
+        expect(iconsOn.querySelector('.vkuiIcon--check_circle_on_24')).toBeInTheDocument();
+      });
+    },
+  );
 });
diff --git a/packages/vkui/src/components/CellButton/CellButton.test.tsx b/packages/vkui/src/components/CellButton/CellButton.test.tsx
@@ -1,6 +1,25 @@
+import { render, screen } from '@testing-library/react';
 import { baselineComponent } from '../../testing/utils';
 import { CellButton } from './CellButton';
+import styles from './CellButton.module.css';
 
 describe('CellButton', () => {
   baselineComponent((props) => <CellButton {...props}>CellButton</CellButton>);
+
+  it('should have danger className with mode danger', () => {
+    render(
+      <CellButton mode="danger" data-testid="cell">
+        Check
+      </CellButton>,
+    );
+    expect(screen.getByTestId('cell')).toHaveClass(styles['CellButton--mode-danger']);
+  });
+  it('should have danger className with mode danger', () => {
+    render(
+      <CellButton centered data-testid="cell">
+        Check
+      </CellButton>,
+    );
+    expect(screen.getByTestId('cell')).toHaveClass(styles['CellButton--centered']);
+  });
 });
diff --git a/packages/vkui/src/components/SimpleCell/SimpleCell.test.tsx b/packages/vkui/src/components/SimpleCell/SimpleCell.test.tsx
@@ -1,7 +1,10 @@
 import { render, screen } from '@testing-library/react';
+import { Platform } from '../../lib/platform';
 import { baselineComponent } from '../../testing/utils';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
+import { ConfigProvider } from '../ConfigProvider/ConfigProvider';
 import { SimpleCell } from './SimpleCell';
+import styles from './SimpleCell.module.css';
 
 describe('SimpleCell', () => {
   baselineComponent((props) => <SimpleCell {...props}>SimpleCell</SimpleCell>);
@@ -21,4 +24,15 @@ describe('SimpleCell', () => {
     );
     expect(screen.getByText('English').tagName.toLowerCase()).toMatch('span');
   });
+
+  it('check chevron showed', () => {
+    const { container } = render(
+      <ConfigProvider platform={Platform.IOS}>
+        <SimpleCell expandable="auto">Язык</SimpleCell>
+      </ConfigProvider>,
+    );
+    expect(
+      container.getElementsByClassName(styles['SimpleCell__chevronIcon'])[0],
+    ).toBeInTheDocument();
+  });
 });