diff --git a/packages/vkui/src/components/Tappable/Tappable.test.tsx b/packages/vkui/src/components/Tappable/Tappable.test.tsx index a1c0506085..eb659e85ff 100644 --- a/packages/vkui/src/components/Tappable/Tappable.test.tsx +++ b/packages/vkui/src/components/Tappable/Tappable.test.tsx @@ -199,7 +199,6 @@ describe(Tappable, () => { expect(waveCount()).toBe(0); }); - // TODO (@SevereCloud): пофиксить тест it('activates on click', async () => { render(); await userEvent.click(tappable()); @@ -208,14 +207,13 @@ describe(Tappable, () => { expect(tappable()).not.toHaveClass(styles['Tappable--activated-background']); }); - // TODO (@SevereCloud): пофиксить тест - it.skip('activates during longtap', async () => { + it('activates during longtap', async () => { render(); - fireEvent.mouseDown(tappable()); + fireEvent.pointerDown(tappable()); expect(tappable()).not.toHaveClass(styles['Tappable--activated-background']); await waitFor(() => expect(tappable()).toHaveClass(styles['Tappable--activated-background'])); - fireEvent.mouseUp(tappable()); + fireEvent.pointerUp(tappable()); expect(tappable()).toHaveClass(styles['Tappable--activated-background']); }); @@ -311,34 +309,130 @@ describe(Tappable, () => { }); describe('nested hover', () => { - it('unhovers on child hover', async () => { + it('unhovers parent on child hover', async () => { const result = render( - - + + , ); - await userEvent.hover(screen.getByTestId('x')); - expect(result.getByTestId('x')).toHaveClass(styles['Tappable--hovered-background']); - expect(result.getByTestId('c')).not.toHaveClass(styles['Tappable--hovered-background']); + await userEvent.hover(screen.getByTestId('parent')); + expect(result.getByTestId('parent')).toHaveClass(styles['Tappable--hovered-background']); + expect(result.getByTestId('children')).not.toHaveClass( + styles['Tappable--hovered-background'], + ); - await userEvent.hover(screen.getByTestId('c')); - expect(result.getByTestId('x')).not.toHaveClass(styles['Tappable--hovered-background']); - expect(result.getByTestId('c')).toHaveClass(styles['Tappable--hovered-background']); + await userEvent.hover(screen.getByTestId('children')); + expect(result.getByTestId('parent')).not.toHaveClass( + styles['Tappable--hovered-background'], + ); + expect(result.getByTestId('children')).toHaveClass(styles['Tappable--hovered-background']); - await userEvent.hover(screen.getByTestId('x')); - expect(result.getByTestId('x')).toHaveClass(styles['Tappable--hovered-background']); - expect(result.getByTestId('c')).not.toHaveClass(styles['Tappable--hovered-background']); + await userEvent.hover(screen.getByTestId('parent')); + expect(result.getByTestId('parent')).toHaveClass(styles['Tappable--hovered-background']); + expect(result.getByTestId('children')).not.toHaveClass( + styles['Tappable--hovered-background'], + ); + }); + + it('hovers parent on every child hover when parent has hasHoverWithChildren', async () => { + const result = render( + + + + , + ); + + // hover на родителе + await userEvent.hover(screen.getByTestId('parent')); + expect(result.getByTestId('parent')).toHaveClass(styles['Tappable--hovered-background']); + expect(result.getByTestId('children-1')).not.toHaveClass( + styles['Tappable--hovered-background'], + ); + expect(result.getByTestId('children-2')).not.toHaveClass( + styles['Tappable--hovered-background'], + ); + + // hover на первом дочернем элементе: родитель тоже имеет hover + await userEvent.hover(screen.getByTestId('children-1')); + expect(result.getByTestId('parent')).toHaveClass(styles['Tappable--hovered-background']); + expect(result.getByTestId('children-1')).toHaveClass( + styles['Tappable--hovered-background'], + ); + expect(result.getByTestId('children-2')).not.toHaveClass( + styles['Tappable--hovered-background'], + ); + + // hover на родителе, дочерние hover не имеют + await userEvent.hover(screen.getByTestId('parent')); + expect(result.getByTestId('parent')).toHaveClass(styles['Tappable--hovered-background']); + expect(result.getByTestId('children-1')).not.toHaveClass( + styles['Tappable--hovered-background'], + ); + expect(result.getByTestId('children-2')).not.toHaveClass( + styles['Tappable--hovered-background'], + ); + + // hover на втором дочернем элементе: родитель тоже имеет hover + await userEvent.hover(screen.getByTestId('children-2')); + expect(result.getByTestId('parent')).toHaveClass(styles['Tappable--hovered-background']); + expect(result.getByTestId('children-1')).not.toHaveClass( + styles['Tappable--hovered-background'], + ); + expect(result.getByTestId('children-2')).toHaveClass( + styles['Tappable--hovered-background'], + ); + }); + + it('hovers parent only on child hover with unlockParentHover', async () => { + const result = render( + + + + , + ); + + // hover на родителе + await userEvent.hover(screen.getByTestId('parent')); + expect(result.getByTestId('parent')).toHaveClass(styles['Tappable--hovered-background']); + expect(result.getByTestId('children-1')).not.toHaveClass( + styles['Tappable--hovered-background'], + ); + expect(result.getByTestId('children-2')).not.toHaveClass( + styles['Tappable--hovered-background'], + ); + + // hover на первом дочернем элементе: родитель имеет hover + await userEvent.hover(screen.getByTestId('children-1')); + expect(result.getByTestId('parent')).toHaveClass(styles['Tappable--hovered-background']); + expect(result.getByTestId('children-1')).toHaveClass( + styles['Tappable--hovered-background'], + ); + expect(result.getByTestId('children-2')).not.toHaveClass( + styles['Tappable--hovered-background'], + ); + + // hover на втором дочернем элементе: родитель не имеет hover + await userEvent.hover(screen.getByTestId('children-2')); + expect(result.getByTestId('parent')).not.toHaveClass( + styles['Tappable--hovered-background'], + ); + expect(result.getByTestId('children-1')).not.toHaveClass( + styles['Tappable--hovered-background'], + ); + expect(result.getByTestId('children-2')).toHaveClass( + styles['Tappable--hovered-background'], + ); }); describe('handles disabled children', () => { it('hovers on disabled child hover', async () => { const result = render( - - + + , ); - await userEvent.hover(screen.getByTestId('c')); - expect(result.getByTestId('x')).toHaveClass(styles['Tappable--hovered-background']); + await userEvent.hover(screen.getByTestId('children')); + expect(result.getByTestId('parent')).toHaveClass(styles['Tappable--hovered-background']); }); }); });