feat(Navbar): controlled subMenu

jest.config.js

@@ -5,9 +5,16 @@ module.exports = {
     '\\.css$': '<rootDir>/__mocks__/styleMock.js',
     '##/(.*)$': '<rootDir>/src/$1',
   },
-  coveragePathIgnorePatterns: ['/node_modules/', '/coverage/', '/types/'],
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
+  },
   testMatch: ['**/*.test.{ts,tsx}'],
   modulePathIgnorePatterns: ['<rootDir>/dist/'],
+  coveragePathIgnorePatterns: ['/node_modules/', '/coverage/', '/types/'],
+  transformIgnorePatterns: [
+    // Транспайлим библиотеки на es-модулях в commonjs-модули
+    `<rootDir>/node_modules/(?!(@consta)/).+\\.(js|jsx|ts|tsx)`,
+  ],
   collectCoverageFrom: ['**/*.{ts,tsx}', '!**/*.stories.tsx'],
   testEnvironment: 'jsdom',
   setupFilesAfterEnv: ['./jest.setup.ts'],

package.json

@@ -10,7 +10,7 @@
     "format:svg": "prettier --write '**/*.svg' --parser html",
     "pre-push": "yarn run tsc-dry-run",
     "pre-commit": "yarn run lint-staged",
-    "test": "yarn tsc-dry-run",
+    "test": "yarn tsc-dry-run && yarn unit",
     "unit": "jest",
     "unit:watch": "jest --watch",
     "unit:clear": "jest --clearCache",
@@ -51,7 +51,7 @@
     "@bem-react/classname": "^1.6.0",
     "@bem-react/classnames": "^1.3.10",
     "@consta/icons": "^1.1.1",
-    "@consta/uikit": "^5.22.0",
+    "@consta/uikit": "^5.26.0",
     "date-fns": "^2.30.0"
   },
   "config": {
@@ -124,7 +124,7 @@
     "camelcase": "^6.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "commitizen": "^4.2.5",
-    "compute-scroll-into-view": "^1.0.17",
+    "compute-scroll-into-view": "^3.1.1",
     "cross-env": "^7.0.3",
     "css-loader": "^6.5.1",
     "css-minimizer-webpack-plugin": "^3.4.1",
@@ -170,7 +170,7 @@
     "react-dev-utils": "^12.0.0",
     "react-dom": "^18.0.0",
     "react-dropzone": "^14.2.3",
-    "react-imask": "^7.2.1",
+    "react-imask": "^7.6.1",
     "react-refresh": "^0.11.0",
     "react-test-renderer": "^18.0.0",
     "react-textarea-autosize": "^8.5.3",

src/components/Navbar/Navbar.tsx

@@ -13,7 +13,7 @@ import {
   NavbarProps,
 } from './types';
 
-const cnNavbar = cnCanary('Navbar');
+export const cnNavbar = cnCanary('Navbar');
 
 const NavbarRender = (props: NavbarProps, ref: React.Ref<HTMLDivElement>) => {
   const {
@@ -37,6 +37,8 @@ const NavbarRender = (props: NavbarProps, ref: React.Ref<HTMLDivElement>) => {
     form = defaultNavbarPropForm,
     getItemSubMenu,
     getItemStatus,
+    getItemSubMenuOpen,
+    onSubMenuToggle,
     sortGroup,
     className,
     ...otherProps
@@ -81,6 +83,8 @@ const NavbarRender = (props: NavbarProps, ref: React.Ref<HTMLDivElement>) => {
                     getItemRightSide={getItemRightSide}
                     getItemSubMenu={getItemSubMenu}
                     getItemStatus={getItemStatus}
+                    getItemSubMenuOpen={getItemSubMenuOpen}
+                    onSubMenuToggle={onSubMenuToggle}
                     form={form}
                   />
                 </React.Fragment>

src/components/Navbar/NavbarArrow/__tests__/NavbarArrow.test.tsx

@@ -0,0 +1,159 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import React from 'react';
+
+import { NavbarArrow } from '../NavbarArrow';
+
+const defaultProps = {
+  open: false,
+  onClick: jest.fn(),
+};
+
+const renderNavbarArrow = (props = {}) => {
+  return render(<NavbarArrow {...defaultProps} {...props} />);
+};
+
+describe('Компонент NavbarArrow', () => {
+  describe('Базовый рендеринг', () => {
+    it('должен рендериться без ошибок', () => {
+      expect(() => renderNavbarArrow()).not.toThrow();
+    });
+
+    it('должен отображать кнопку', () => {
+      renderNavbarArrow();
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('должен отображать иконку стрелки', () => {
+      renderNavbarArrow();
+      const icon = document.querySelector('.IconArrowDown');
+      expect(icon).toBeInTheDocument();
+    });
+  });
+
+  describe('Пропсы и состояние', () => {
+    it('должен применять правильные пропсы к Button', () => {
+      renderNavbarArrow();
+
+      const button = screen.getByRole('button');
+
+      expect(button).toHaveClass('Button_size_xs');
+      expect(button).toHaveClass('Button_view_clear');
+      expect(button).toHaveClass('Button_onlyIcon');
+      expect(button).toHaveAttribute('tabindex', '-1');
+    });
+
+    it('должен передавать open в AnimateIconSwitcherProvider', () => {
+      const { rerender } = renderNavbarArrow({ open: false });
+
+      let iconContainer = document.querySelector('.icons--AnimateIconBase');
+      expect(iconContainer).toHaveStyle(
+        '--animate-icon-direction: rotate(0deg)',
+      );
+
+      rerender(<NavbarArrow {...defaultProps} open />);
+      iconContainer = document.querySelector('.icons--AnimateIconBase');
+      expect(iconContainer).toHaveStyle(
+        '--animate-icon-direction: rotate(180deg)',
+      );
+    });
+
+    it('должен корректно работать с разными состояниями open', () => {
+      const { rerender } = renderNavbarArrow({ open: false });
+
+      expect(document.querySelector('.icons--AnimateIconBase')).toHaveStyle(
+        '--animate-icon-direction: rotate(0deg)',
+      );
+
+      rerender(<NavbarArrow {...defaultProps} open />);
+      expect(document.querySelector('.icons--AnimateIconBase')).toHaveStyle(
+        '--animate-icon-direction: rotate(180deg)',
+      );
+
+      rerender(<NavbarArrow {...defaultProps} open={false} />);
+      expect(document.querySelector('.icons--AnimateIconBase')).toHaveStyle(
+        '--animate-icon-direction: rotate(0deg)',
+      );
+    });
+  });
+
+  describe('Взаимодействие', () => {
+    it('должен вызывать onClick при клике на кнопку', () => {
+      const onClick = jest.fn();
+      renderNavbarArrow({ onClick });
+
+      fireEvent.click(screen.getByRole('button'));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('должен корректно обрабатывать multiple clicks', () => {
+      const onClick = jest.fn();
+      renderNavbarArrow({ onClick });
+
+      const button = screen.getByRole('button');
+
+      fireEvent.click(button);
+      fireEvent.click(button);
+      fireEvent.click(button);
+
+      expect(onClick).toHaveBeenCalledTimes(3);
+    });
+  });
+
+  describe('Визуальное состояние', () => {
+    it('должен иметь правильные стили для размера xs', () => {
+      renderNavbarArrow();
+
+      const button = screen.getByRole('button');
+      const icon = document.querySelector('.icons--Icon');
+
+      expect(button).toHaveClass('Button_size_xs');
+      expect(icon).toHaveClass('icons--Icon_size_xs');
+    });
+
+    it('должен иметь прозрачный вид (view="clear")', () => {
+      renderNavbarArrow();
+
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('Button_view_clear');
+    });
+
+    it('должен быть только с иконкой (onlyIcon)', () => {
+      renderNavbarArrow();
+
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('Button_onlyIcon');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('должен иметь tabIndex -1', () => {
+      renderNavbarArrow();
+
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute('tabindex', '-1');
+    });
+
+    it('должен быть доступен для кликов', () => {
+      renderNavbarArrow();
+
+      const button = screen.getByRole('button');
+      expect(button).not.toBeDisabled();
+    });
+  });
+
+  describe('Интеграция с анимацией', () => {
+    it('должен использовать AnimateIconSwitcherProvider', () => {
+      renderNavbarArrow();
+
+      const provider = document.querySelector('.icons--AnimateIconBase');
+      expect(provider).toBeInTheDocument();
+    });
+
+    it('должен использовать HOC withAnimateSwitcherHOC для иконки', () => {
+      renderNavbarArrow();
+
+      const arrowIcon = document.querySelector('.IconArrowDown');
+      expect(arrowIcon).toBeInTheDocument();
+    });
+  });
+});