From f8347008aa7e66b33382bacc097888cd5b861ebd Mon Sep 17 00:00:00 2001 From: EldarMuhamethanov <61377022+EldarMuhamethanov@users.noreply.github.com> Date: Wed, 7 Aug 2024 15:52:05 +0300 Subject: [PATCH] test(Cell): improve unit-tests coverage (#7323) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Улучшил покрытие тестами компонента Cell и сопутствующие ему CellButton и SimpleCell, CellCheckbox --- .../vkui/src/components/Cell/Cell.test.tsx | 85 ++++++++++++++++++- .../Cell/CellCheckbox/CellCheckbox.test.tsx | 26 +++++- .../components/CellButton/CellButton.test.tsx | 19 +++++ .../components/SimpleCell/SimpleCell.test.tsx | 14 +++ 4 files changed, 141 insertions(+), 3 deletions(-) diff --git a/packages/vkui/src/components/Cell/Cell.test.tsx b/packages/vkui/src/components/Cell/Cell.test.tsx index 0af94ee6fd..94ba18fe99 100644 --- 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(`[aria-label="${label}"]`)!, ); expect(updatedList).toEqual(initialList); @@ -149,4 +151,83 @@ describe('Cell', () => { expect(clickStub).toHaveBeenCalledTimes(1); }); }); + + it('check selectable mode', () => { + render( + + Саша Колобов + , + ); + 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( + + xyz + , + ); + + const cell = screen.getByTestId('list-xyz'); + const dragger = cell.querySelector(`.${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( + + +
+ + , + ); + const cell = screen.getByTestId('list-xyz'); + const dragger = cell.querySelector(`.${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( + + xyz + , + ); + + const cell = screen.getByTestId('list-xyz'); + const dragger = cell.querySelector(`.${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 index 83a8e942a8..3de12c11ce 100644 --- a/packages/vkui/src/components/Cell/CellCheckbox/CellCheckbox.test.tsx +++ b/packages/vkui/src/components/Cell/CellCheckbox/CellCheckbox.test.tsx @@ -1,5 +1,9 @@ +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) => ( @@ -7,4 +11,24 @@ describe('CellCheckbox', () => { CellCheckbox )); + + describe.each([Platform.IOS, Platform.VKCOM])( + 'should use circle icon in platform %s', + (platform) => { + it.each(['auto', 'circle'])('with type %s ', (type) => { + const { container } = render( + + + , + ); + 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 index 21350bdc9c..f0206fd9ec 100644 --- 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); + + it('should have danger className with mode danger', () => { + render( + + Check + , + ); + expect(screen.getByTestId('cell')).toHaveClass(styles['CellButton--mode-danger']); + }); + it('should have danger className with mode danger', () => { + render( + + Check + , + ); + 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 index 1e49c0b1ed..d860dc179a 100644 --- 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); @@ -21,4 +24,15 @@ describe('SimpleCell', () => { ); expect(screen.getByText('English').tagName.toLowerCase()).toMatch('span'); }); + + it('check chevron showed', () => { + const { container } = render( + + Язык + , + ); + expect( + container.getElementsByClassName(styles['SimpleCell__chevronIcon'])[0], + ).toBeInTheDocument(); + }); });