Merge branch 'main' into fix/alignment-input-outlines

Author: ferreroltd

.changeset/polite-forks-poke.md

@@ -0,0 +1,6 @@
+---
+'@kadena/react-ui': minor
+'@kadena/docs': minor
+---
+
+Updated leftIcon prop to icon

.changeset/sharp-goats-camp.md

@@ -0,0 +1,6 @@
+---
+'@kadena/chainweb-stream-client': none
+'@kadena/chainweb-node-client': none
+---
+
+Migrate from jest to vitest

.changeset/weak-crabs-itch.md

@@ -0,0 +1,6 @@
+---
+'@kadena/react-ui': patch
+'@kadena/docs': patch
+---
+
+Migrate from jest to vitest

.changeset/wild-moles-beg.md

@@ -0,0 +1,5 @@
+---
+'@kadena/client': patch
+---
+
+Migrate packages from Jest to Vitest

.github/CODEOWNERS

@@ -1,22 +1,20 @@
 # About code owners: https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-code-owners
 
-/*.*                                            @alber70g @webpro
-/*.md                                           @webpro
+/*.*                                            @alber70g
 /.changeset
-/common                                         @alber70g @webpro
+/common                                         @alber70g
 /pnpm-lock.yaml
+/packages/apps/docs                             @sstraatemans @eileenmguo @realdreamer
 /packages/apps/graph                            @alber70g @MRVDH @nil-amrutlal-dept
 /packages/apps/graph-client                     @alber70g @MRVDH @nil-amrutlal-dept
-/packages/apps/kadena-docs                      @sstraatemans @eileenmguo @realdreamer
-/packages/libs/chainweb-stream-client           @Takadenoshi
 /packages/libs/bootstrap-lib                    @alber70g
+/packages/libs/chainweb-stream-client           @Takadenoshi
 /packages/libs/client                           @alber70g @javadkh2
 /packages/libs/kadena.js                        @alber70g
 /packages/libs/pactjs-generator                 @alber70g
 /packages/libs/react-ui                         @eileenmguo @sstraatemans @timoheddes
 /packages/libs/types                            @alber70g
-/packages/tools/pactjs-cli                      @alber70g
 /packages/tools/eslint-config                   @alber70g
 /packages/tools/eslint-plugin                   @alber70g
 /packages/tools/heft-rig                        @alber70g
-/packages/tools/markdown                        @webpro
+/packages/tools/pactjs-cli                      @alber70g

packages/apps/docs/jest.config.json

@@ -29,7 +29,7 @@ export const Subscribe: FC = () => {
               <Stack gap="$sm">
                 <Input
                   id="email"
-                  leftIcon="At"
+                  icon="At"
                   onChange={handleFormState}
                   placeholder="Email address"
                   outlined

packages/apps/docs/src/components/BottomPageSection/components/Subscribe.tsx

@@ -1,7 +1,6 @@
 require('@rushstack/eslint-config/patch/modern-module-resolution');
 
 module.exports = {
-  plugins: ['jest'],
   extends: [
     '@kadena-dev/eslint-config/profile/next',
     'plugin:@tanstack/eslint-plugin-query/recommended',

packages/apps/tools/.eslintrc.js

@@ -18,7 +18,7 @@
     "lint:pkg": "lint-package",
     "lint:src": "eslint src --ext .ts,.tsx",
     "start": "next start",
-    "test": "jest --silent"
+    "test": "vitest"
   },
   "dependencies": {
     "@hookform/resolvers": "~3.1.1",
@@ -35,7 +35,6 @@
     "@walletconnect/utils": "~2.9.2",
     "ace-builds": "~1.30.0",
     "classnames": "^2.3.1",
-    "jest-standard-reporter": "~2.0.0",
     "js-cookie": "~3.0.5",
     "next": "13.5.5",
     "next-themes": "~0.2.1",
@@ -44,12 +43,9 @@
     "react-ace": "~10.1.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "~7.45.0",
-    "react-scripts": "5.0.1",
     "zod": "~3.18.0"
   },
   "devDependencies": {
-    "@jest/reporters": "~29.5.0",
-    "@jest/types": "~29.5.0",
     "@kadena-dev/eslint-config": "workspace:*",
     "@kadena-dev/heft-rig": "workspace:*",
     "@kadena-dev/lint-package": "workspace:*",
@@ -59,33 +55,32 @@
     "@rushstack/eslint-config": "~3.3.0",
     "@rushstack/heft": "~0.50.6",
     "@tanstack/eslint-plugin-query": "^4.34.1",
-    "@testing-library/jest-dom": "~5.17.0",
     "@testing-library/react": "~14.0.0",
     "@testing-library/user-event": "~14.4.3",
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/debug": "~4.1.7",
-    "@types/jest": "^29.5.3",
     "@types/js-cookie": "~3.0.3",
     "@types/node": "^18.17.14",
     "@types/react": "^18.2.15",
     "@types/react-dom": "18.2.7",
-    "@types/testing-library__jest-dom": "~5.14.8",
     "@typescript-eslint/eslint-plugin": "^5.23.0",
     "@typescript-eslint/parser": "^5.23.0",
     "@vanilla-extract/css": "1.13.0",
-    "@vanilla-extract/jest-transform": "1.1.1",
     "@vanilla-extract/next-plugin": "2.3.1",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
     "@walletconnect/types": "~2.8.1",
     "@webpro/next-translate-plugin": "^2.6.3",
     "debug": "~4.3.4",
     "eslint": "^8.45.0",
     "eslint-config-next": "13.4.5",
-    "eslint-plugin-jest": "~27.2.1",
+    "happy-dom": "^12.9.1",
     "ignore-loader": "~0.1.2",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "~29.6.1",
+    "next-router-mock": "^0.9.10",
     "prettier": "~3.0.3",
-    "typescript": "5.2.2"
+    "typescript": "5.2.2",
+    "vite-tsconfig-paths": "^4.2.1",
+    "vitest": "^0.34.6",
+    "vitest-dom": "^0.1.1"
   },
   "volta": {
     "node": "16.15.0"

packages/apps/tools/jest.config.js

@@ -1,35 +1,38 @@
-jest.mock('@/components/Common/WalletConnectButton', () =>
-  jest.fn(() => <button>connect wallet</button>),
-);
-jest.mock('@/context/connect-wallet-context', () =>
-  jest.fn(() => ({
-    client: jest.fn(),
+import { render } from '@testing-library/react';
+import React from 'react';
+import Layout from './index';
+
+vi.mock('@/components/Common/WalletConnectButton', () => ({
+  default: vi.fn(() => <button>connect wallet</button>),
+}));
+
+vi.mock('@/context/connect-wallet-context', () => ({
+  useWalletConnectClient: vi.fn(() => ({
+    client: vi.fn(),
     session: undefined,
-    connect: jest.fn(),
-    disconnect: jest.fn(),
+    connect: vi.fn(),
+    disconnect: vi.fn(),
     isInitializing: false,
     pairings: undefined,
     accounts: undefined,
     selectedNetwork: '',
-    setSelectedNetwork: jest.fn(),
+    setSelectedNetwork: vi.fn(),
     selectedChain: '',
-    setSelectedChain: jest.fn(),
+    setSelectedChain: vi.fn(),
     selectedAccount: '',
-    setSelectedAccount: jest.fn(),
+    setSelectedAccount: vi.fn(),
+    networksData: [],
+    setNetworksData: vi.fn(),
   })),
-);
-import { render } from '@testing-library/react';
-import React from 'react';
-import Layout from './index';
+}));
 
 describe('Layout', () => {
-  it.skip('renders correctly', () => {
+  it('renders correctly', () => {
     const { getByTestId, getByRole } = render(<Layout>Hello, World!</Layout>);
 
     // Assert that the layout container element is rendered
     const layoutContainer = getByTestId('layout-container');
     expect(layoutContainer).toBeInTheDocument();
-    expect(layoutContainer).toHaveClass('layout');
 
     // Assert that the main content element is rendered
     const mainContent = getByRole('main');

packages/apps/tools/jest.setup.js

@@ -13,7 +13,7 @@ export const Layout: FC<IProps> = ({ children }: IProps) => {
   const { isMenuOpen } = useLayoutContext();
 
   return (
-    <div>
+    <div data-testid="layout-container">
       <header className={headerStyle}>
         <Header />
       </header>

packages/apps/tools/package.json

@@ -85,7 +85,7 @@ export const AccountNameField: FC<IAccountNameFieldProps> = ({
           setSelectedAccount(e.target.value);
           onChange?.(e);
         }}
-        leftIcon={noIcon ? undefined : 'KIcon'}
+        icon={noIcon ? undefined : 'KIcon'}
       />
     ),
   };

packages/apps/tools/src/components/Common/Layout/index.spec.tsx

@@ -9,7 +9,9 @@ beforeAll(() => {
 
 describe('AceViewerComponent', () => {
   it('renders correctly without code', () => {
-    render(<AceViewerComponent />);
+    // `mode` is an optional property, but somehow something explodes (when using happy-dom, not jsdom) making this request:
+    // "/mode-mode.js","method":"GET","referer":"http://localhost:3000/"
+    render(<AceViewerComponent mode="lisp" code="" />);
 
     // Assert that the AceEditor component is rendered
     const aceEditor = screen.getByRole('textbox');

packages/apps/tools/src/components/Common/Layout/index.tsx

@@ -18,7 +18,7 @@ export interface IEditorProps
   code: IAceEditorProps['value'];
   keyboardHandler?: KeyboardHandler;
   theme?: Theme;
-  mode?: Mode;
+  mode: Mode;
 }
 
 const AceViewerComponent: FC<IEditorProps> = ({

packages/apps/tools/src/components/Global/AccountNameField/index.tsx

@@ -1,17 +1,11 @@
-jest.mock('next/router', () => ({
-  useRouter: jest.fn(),
-}));
 import { render, screen } from '@testing-library/react';
-import { useRouter } from 'next/router';
+import mock from 'next-router-mock';
 import React from 'react';
 import { NavLink } from './index';
 
 describe('NavLink', () => {
-  const mockUseRouter = useRouter as jest.Mock;
-  it('renders correctly when active', () => {
-    mockUseRouter.mockImplementation(() => ({
-      pathname: '/active',
-    }));
+  it('renders correctly when active', async () => {
+    await mock.push('/active');
 
     render(
       <NavLink href="/active" className="custom-class">
@@ -32,10 +26,8 @@ describe('NavLink', () => {
     expect(navLinkText).toBeInTheDocument();
   });
 
-  it('renders correctly when not active', () => {
-    mockUseRouter.mockImplementation(() => ({
-      pathname: '/not-active',
-    }));
+  it('renders correctly when not active', async () => {
+    await mock.push('/not-active');
 
     render(
       <NavLink href="/active" className="custom-class">

packages/apps/tools/src/components/Global/Ace/index.spec.tsx

@@ -50,7 +50,7 @@ const RequestKeyField: FC<IRequestKeyFieldProps> = ({
       inputProps={{
         id: 'request-key-input',
         placeholder: t('Enter Request Key'),
-        leftIcon: 'KeyIconFilled',
+        icon: 'KeyIconFilled',
         ...inputProps,
       }}
     />

packages/apps/tools/src/components/Global/Ace/index.tsx

@@ -6,7 +6,7 @@ import { Select } from './index';
 
 describe('Select', () => {
   it.skip('renders correctly with all props', async () => {
-    const handleChange = jest.fn();
+    const handleChange = vi.fn();
 
     const { getByTestId } = render(
       <Select

packages/apps/tools/src/components/Global/NavLink/index.spec.tsx

@@ -1,14 +1,12 @@
-jest.mock('next/router', () => ({
-  useRouter: jest.fn(() => ({
-    pathname: '/transactions',
-  })),
-}));
 import { render, screen } from '@testing-library/react';
+import mock from 'next-router-mock';
 import React from 'react';
 import { SidebarMenu } from './index';
 
 describe('SidebarMenu', () => {
-  it('renders correctly with menu items', () => {
+  it('renders correctly with menu items', async () => {
+    await mock.push('/transactions');
+
     const { getByTestId } = render(<SidebarMenu />);
 
     // Assert that the SidebarMenu component is rendered

packages/apps/tools/src/components/Global/RequestKeyField/index.tsx

@@ -62,7 +62,6 @@ export const WalletConnectClientContext =
 /**
  * walletConnectModal Config
  */
-// eslint-disable-next-line @kadena-dev/typedef-var
 const walletConnectModal = new WalletConnectModal({
   projectId: env('WALLET_CONNECT_PROJECT_ID', ''),
   themeMode: 'light',
@@ -71,6 +70,7 @@ const walletConnectModal = new WalletConnectModal({
 interface IWalletConnectClientContextProviderProps {
   children: ReactNode;
 }
+
 /**
  * Provider
  */

packages/apps/tools/src/components/Global/Select/index.spec.tsx

@@ -1,13 +1,12 @@
 import { Head, Html, Main, NextScript } from 'next/document';
-import type { FC, ReactNode } from 'react';
+import type { FC } from 'react';
 import React from 'react';
 import { bodyStyle } from './styles.css';
 
 const Document: FC = () => {
-  const TypedHead = Head as unknown as FC<{ children?: ReactNode }>;
   return (
     <Html lang="en">
-      <TypedHead></TypedHead>
+      <Head />
       <body className={bodyStyle}>
         <Main />
         <div id="modalportal" />

packages/apps/tools/src/components/Global/SidebarMenu/index.spec.tsx

@@ -1,11 +1,10 @@
-jest.mock('@/pages/home', () => jest.fn(() => <div>Home Component</div>));
 import Index from '@/pages/index';
 import { render } from '@testing-library/react';
 import React from 'react';
 
 describe('Index Page', () => {
   it('renders the Home component', () => {
     const { getByText } = render(<Index />);
-    expect(getByText('Home Component')).toBeInTheDocument();
+    expect(getByText('Kadena Tools')).toBeInTheDocument();
   });
 });