Merge pull request #30 from internxt/feat/PB-3429-Update-tests

[PB-3429]:feat/Update test and organize structure

Author: Jona-Internxt

package.json

@@ -38,14 +38,14 @@
     "@storybook/test": "^8.0.4",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.2",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.2.67",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.3.1",
     "@typescript-eslint/parser": "^7.3.1",
     "@vitest/coverage-istanbul": "^2.1.5",
-    "@vitest/ui": "^2.1.5",
+    "@vitest/ui": "^2.1.8",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
@@ -67,7 +67,8 @@
     "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-dts": "^3.7.3",
     "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^2.1.5"
+    "vite-tsconfig-paths": "^5.1.3",
+    "vitest": "^2.1.8"
   },
   "scripts": {
     "build:tsc": "tsc",

src/components/avatar/Avatar.tsx

@@ -31,7 +31,8 @@ const SIZES: Record<SIZE_KEYS, number> = {
  * @param {Object} [props.style={}] - Additional inline styles to apply to the avatar component.
  * @returns {JSX.Element} The rendered avatar component.
  */
-export const Avatar = ({
+
+const Avatar = ({
   src,
   diameter = 80,
   size,
@@ -54,3 +55,5 @@ export const Avatar = ({
     <DefaultAvatar diameter={diameterValue} className={className} fullName={fullName} />
   );
 };
+
+export default Avatar;

src/components/avatar/__test__/Avatar.test.tsx

@@ -1,6 +1,7 @@
+import React from 'react';
 import { describe, expect, it } from 'vitest';
 import { render } from '@testing-library/react';
-import { Avatar } from '../Avatar';
+import { Avatar } from '../';
 
 const FULL_NAME = 'My Internxt';
 const IMAGE_SRC = 'https://internxt.com/favicon.ico';

src/components/avatar/index.ts

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar';

src/components/baseDialog/__test__/BaseDialog.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import BaseDialog from '../BaseDialog';
+import { BaseDialog } from '../';
 
 describe('BaseDialog', () => {
   const onCloseMock = vi.fn();

src/components/baseDialog/index.ts

@@ -0,0 +1,2 @@
+export { default as BaseDialog } from './BaseDialog';
+export type { BaseDialogProps } from './BaseDialog';

src/components/breadcrumbs/__test__/Breadcrumbs.test.tsx

@@ -2,7 +2,7 @@ import React, { act } from 'react';
 import { describe, it, expect, vi, afterEach } from 'vitest';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import Breadcrumbs, { BreadcrumbsProps } from '../Breadcrumbs';
+import { Breadcrumbs, BreadcrumbsProps } from '../';
 import { Dispatch, AnyAction } from 'redux';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';

src/components/breadcrumbs/index.ts

@@ -0,0 +1,2 @@
+export { default as Breadcrumbs } from './Breadcrumbs';
+export type { BreadcrumbsProps } from './Breadcrumbs';

src/components/button/Button.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import Loader from '../loader/Loader';
 
-interface ButtonProps {
+export interface ButtonProps {
   id?: string;
   variant?: 'primary' | 'secondary' | 'ghost' | 'destructive';
   type?: 'button' | 'submit';
@@ -18,7 +18,63 @@ interface ButtonProps {
   buttonChildrenDataCy?: string;
 }
 
-export const Button = ({
+/**
+ * Button component
+ *
+ * @property {string} [id]
+ * - Optional ID for the button element, useful for accessibility and styling.
+ *
+ * @property {'primary' | 'secondary' | 'ghost' | 'destructive'} [variant]
+ * - Defines the button's style variant. Options are:
+ *   - 'primary': Standard button style with primary color.
+ *   - 'secondary': Button with border and subtle background color.
+ *   - 'ghost': Button with transparent background, suitable for icons or light use.
+ *   - 'destructive': Button for destructive actions.
+ *
+ * @property {'button' | 'submit'} [type]
+ * - Specifies the type of the button. Defaults to 'button'.
+ *   - 'button': Standard button behavior.
+ *   - 'submit': Button submits a form when used inside a form element.
+ *
+ * @property {ReactNode} [children]
+ * - The content inside the button, such as text or icons.
+ *   - Can be a single element or an array of elements.
+ *
+ * @property {string} [className]
+ * - Custom CSS classes for additional styling of the button.
+ *
+ * @property {boolean} [disabled]
+ * - Disables the button, preventing user interaction and applying a disabled style.
+ *   - Defaults to false.
+ *
+ * @property {(e?: unknown) => void} [onClick]
+ * - Function called when the button is clicked. Accepts an optional event object.
+ *
+ * @property {(e?: unknown) => void} [onKeyDown]
+ * - Function called when a key is pressed while the button is focused. Accepts an optional event object.
+ *
+ * @property {'medium' | 'default'} [size]
+ * - Specifies the button size. Options are:
+ *   - 'default': Standard size.
+ *   - 'medium': Slightly smaller size for compact use.
+ *
+ * @property {boolean} [loading]
+ * - If true, shows a loading spinner inside the button.
+ *
+ * @property {string} [dataTest]
+ * - Custom data attribute used for test automation or tracking purposes.
+ *
+ * @property {boolean} [autofocus]
+ * - If true, the button will be focused automatically when the page loads.
+ *
+ * @property {string} [buttonDataCy]
+ * - Custom data attribute for the button element.
+ *
+ * @property {string} [buttonChildrenDataCy]
+ * - Custom data attribute for the children of the button.
+ */
+
+const Button = ({
   variant = 'primary',
   type = 'button',
   id,
@@ -80,3 +136,5 @@ export const Button = ({
     </button>
   );
 };
+
+export default Button;

src/components/button/__test__/Button.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { describe, expect, it, vi } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { Button } from '../Button';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Button } from '../';
 
 describe('Button component', () => {
   it('Button onClick should be called correctly', () => {
@@ -12,6 +12,14 @@ describe('Button component', () => {
     expect(buttonClick).toHaveBeenCalledOnce();
   });
 
+  it('Button onKeyDown should be called correctly', () => {
+    const keydown = vi.fn();
+    render(<Button variant="primary" onKeyDown={keydown} />);
+    const button = screen.getByRole('button');
+    fireEvent.keyDown(button, { key: 'Enter', code: 'Enter' });
+    expect(keydown).toHaveBeenCalledOnce();
+  });
+
   it('Primary button should render correctly', () => {
     const button = render(<Button variant="primary">Primary</Button>);
     expect(button).toMatchSnapshot();