@js-smart/react-kit 5.10.0 → 5.12.0-beta.1

package/react-kit/src/tests/buttons/HistoryButton.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { HistoryButton } from '../../lib/components/buttons/HistoryButton';
+import jest from 'jest-mock';
+
+describe('HistoryButton', () => {
+	const mockOnClick = jest.fn();
+
+	beforeEach(() => {
+		mockOnClick.mockClear();
+	});
+
+	it('renders with the correct default properties', () => {
+		render(<HistoryButton onClick={mockOnClick} name={'History'} />);
+		const button = screen.getByRole('button', { name: 'History' });
+		expect(button).toBeInTheDocument();
+		expect(button).toHaveClass('MuiButton-containedPrimary');
+	});
+
+	it('calls onClick when clicked', () => {
+		render(<HistoryButton onClick={mockOnClick} name={'History'} />);
+		fireEvent.click(screen.getByRole('button', { name: 'History' }));
+		expect(mockOnClick).toHaveBeenCalledTimes(1);
+	});
+
+	it('renders with custom properties', () => {
+		render(
+			<HistoryButton
+				onClick={mockOnClick}
+				name="custom-name"
+				dataCy="custom-data-cy"
+				variant="outlined"
+				color="secondary"
+				startIcon={<span data-testid="custom-icon" />}>
+				Custom History
+			</HistoryButton>
+		);
+		const button = screen.getByRole('button', { name: 'Custom History' });
+		expect(button).toBeInTheDocument();
+		expect(button).toHaveClass('MuiButton-outlinedSecondary');
+		expect(button).toHaveAttribute('name', 'custom-name');
+		expect(button).toHaveAttribute('data-cy', 'custom-data-cy');
+		expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
+	});
+});

package/react-kit/src/tests/buttons/LoadingSuccessButton.test.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { LoadingSuccessButton } from '../../lib/components/buttons/LoadingSuccessButton';
+import jest from 'jest-mock';
+
+describe('LoadingSuccessButton', () => {
+	const mockOnClick = jest.fn();
+
+	beforeEach(() => {
+		mockOnClick.mockClear();
+	});
+
+	it('renders with the correct default properties', () => {
+		render(
+			<LoadingSuccessButton onClick={mockOnClick} loading={false}>
+				Save
+			</LoadingSuccessButton>
+		);
+		const button = screen.getByRole('button', { name: 'Save' });
+		expect(button).toBeInTheDocument();
+	});
+
+	it('calls onClick when clicked', () => {
+		render(
+			<LoadingSuccessButton onClick={mockOnClick} loading={false}>
+				Save
+			</LoadingSuccessButton>
+		);
+		fireEvent.click(screen.getByRole('button', { name: 'Save' }));
+		expect(mockOnClick).toHaveBeenCalledTimes(1);
+	});
+
+	it('renders with custom properties', () => {
+		render(
+			<LoadingSuccessButton
+				onClick={mockOnClick}
+				name="custom-name"
+				dataCy="custom-data-cy"
+				variant="outlined"
+				color="secondary"
+				loading={false}
+				startIcon={<span data-testid="custom-icon" />}>
+				Custom Success
+			</LoadingSuccessButton>
+		);
+		const button = screen.getByRole('button', { name: 'Custom Success' });
+		expect(button).toBeInTheDocument();
+		expect(button).toHaveAttribute('name', 'custom-name');
+		expect(button).toHaveAttribute('data-cy', 'custom-data-cy');
+		expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
+	});
+});

package/react-kit/src/tests/buttons/ManageButton.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ManageButton } from '../../lib/components/buttons/ManageButton';
+import jest from 'jest-mock';
+
+describe('ManageButton', () => {
+	const mockOnClick = jest.fn();
+
+	beforeEach(() => {
+		mockOnClick.mockClear();
+	});
+
+	it('renders with the correct default properties', () => {
+		render(<ManageButton onClick={mockOnClick} />);
+		const button = screen.getByRole('button', { name: 'Manage' });
+		expect(button).toBeInTheDocument();
+		expect(button).toHaveClass('MuiButton-containedPrimary');
+		expect(button).toHaveClass('MuiButton-sizeLarge');
+	});
+
+	it('calls onClick when clicked', () => {
+		render(<ManageButton onClick={mockOnClick} />);
+		fireEvent.click(screen.getByRole('button', { name: 'Manage' }));
+		expect(mockOnClick).toHaveBeenCalledTimes(1);
+	});
+
+	it('renders with custom properties', () => {
+		render(
+			<ManageButton
+				onClick={mockOnClick}
+				name="custom-name"
+				dataCy="custom-data-cy"
+				variant="outlined"
+				color="secondary"
+				size="small"
+				startIcon={<span data-testid="custom-icon" />}>
+				Custom Manage
+			</ManageButton>
+		);
+		const button = screen.getByRole('button', { name: 'Custom Manage' });
+		expect(button).toBeInTheDocument();
+		expect(button).toHaveClass('MuiButton-outlinedSecondary');
+		expect(button).toHaveClass('MuiButton-sizeSmall');
+		expect(button).toHaveAttribute('name', 'custom-name');
+		expect(button).toHaveAttribute('data-cy', 'custom-data-cy');
+		expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
+	});
+});

package/react-kit/src/tests/buttons/SuccessButton.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { SuccessButton } from '../../lib/components/buttons/SuccessButton';
+import jest from 'jest-mock';
+
+describe('SuccessButton', () => {
+	const mockOnClick = jest.fn();
+
+	beforeEach(() => {
+		mockOnClick.mockClear();
+	});
+
+	it('renders with the correct default properties', () => {
+		render(<SuccessButton onClick={mockOnClick}>Success</SuccessButton>);
+		const button = screen.getByRole('button', { name: 'Success' });
+		expect(button).toBeInTheDocument();
+		expect(button).toHaveClass('MuiButton-containedSuccess');
+	});
+
+	it('calls onClick when clicked', () => {
+		render(<SuccessButton onClick={mockOnClick}>Success</SuccessButton>);
+		fireEvent.click(screen.getByRole('button', { name: 'Success' }));
+		expect(mockOnClick).toHaveBeenCalledTimes(1);
+	});
+
+	it('renders with custom properties', () => {
+		render(
+			<SuccessButton
+				onClick={mockOnClick}
+				name="custom-name"
+				dataCy="custom-data-cy"
+				variant="outlined"
+				color="secondary"
+				startIcon={<span data-testid="custom-icon" />}>
+				Custom Success
+			</SuccessButton>
+		);
+		const button = screen.getByRole('button', { name: 'Custom Success' });
+		expect(button).toBeInTheDocument();
+		expect(button).toHaveClass('MuiButton-outlinedSecondary');
+		expect(button).toHaveAttribute('name', 'custom-name');
+		expect(button).toHaveAttribute('data-cy', 'custom-data-cy');
+		expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
+	});
+});

package/react-kit/src/tests/snack-bar/AppSnackBar.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { AppSnackBar } from '../../lib/components/snack-bar/AppSnackBar';
+import { ProgressState } from '../../lib/types/ProgressState';
+
+describe('AppSnackBar', () => {
+	const successState: ProgressState = {
+		isSuccess: true,
+		isError: false,
+		message: 'Success!',
+		isLoading: false,
+		isComplete: false,
+	};
+	const errorState: ProgressState = {
+		isSuccess: false,
+		isError: true,
+		message: 'Error!',
+		isLoading: false,
+		isComplete: false,
+	};
+
+	it('renders success alert when progressState is success', () => {
+		render(<AppSnackBar open={true} progressState={successState} />);
+		const alert = screen.getByRole('alert');
+		expect(alert).toBeInTheDocument();
+		expect(alert).toHaveTextContent('Success!');
+		expect(alert).toHaveClass('MuiAlert-filledSuccess');
+	});
+
+	it('renders error alert when progressState is error', () => {
+		render(<AppSnackBar open={true} progressState={errorState} />);
+		const alert = screen.getByRole('alert');
+		expect(alert).toBeInTheDocument();
+		expect(alert).toHaveTextContent('Error!');
+		expect(alert).toHaveClass('MuiAlert-filledError');
+	});
+	/*
+    it('closes the snackbar when the close button is clicked', () => {
+      render(<AppSnackBar open={true} progressState={successState} />);
+      const closeButton = screen.getByRole('button', { name: /close/i });
+      fireEvent.click(closeButton);
+      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+    });
+
+    it('auto hides the snackbar after the specified duration', () => {
+      jest.useFakeTimers();
+      render(<AppSnackBar open={true} progressState={successState} autoHideDuration={1000} />);
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+      jest.advanceTimersByTime(1000);
+      expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+      jest.useRealTimers();
+    });*/
+});

package/react-kit/src/tests/utils/BooleanUtils.test.ts

@@ -0,0 +1,35 @@
+import { parseBoolean } from '../../lib/utils/BooleanUtils';
+
+describe('parseBoolean', () => {
+	it('should return true for boolean true', () => {
+		expect(parseBoolean(true)).toBe(true);
+	});
+
+	it('should return false for boolean false', () => {
+		expect(parseBoolean(false)).toBe(false);
+	});
+
+	it('should return true for string "true"', () => {
+		expect(parseBoolean('true')).toBe(true);
+	});
+
+	it('should return false for string "false"', () => {
+		expect(parseBoolean('false')).toBe(false);
+	});
+
+	it('should return false for null', () => {
+		expect(parseBoolean(null)).toBe(false);
+	});
+
+	it('should return false for undefined', () => {
+		expect(parseBoolean(undefined)).toBe(false);
+	});
+
+	it('should return false for an empty string', () => {
+		expect(parseBoolean('')).toBe(false);
+	});
+
+	it('should return false for any other string', () => {
+		expect(parseBoolean('random')).toBe(false);
+	});
+});

package/react-kit/src/tests/utils/CssUtils.test.ts

@@ -0,0 +1,17 @@
+import { getCssVariable } from '../../lib/utils/CssUtils';
+
+describe('getCssVariable', () => {
+	beforeAll(() => {
+		document.documentElement.style.setProperty('--test-variable', 'test-value');
+	});
+
+	it('should return the value of the CSS variable', () => {
+		const value = getCssVariable('--test-variable');
+		expect(value).toBe('test-value');
+	});
+
+	it('should return an empty string for a non-existent variable', () => {
+		const value = getCssVariable('--non-existent-variable');
+		expect(value).toBe('');
+	});
+});

package/react-kit/src/tests/utils/DateUtils.test.ts

@@ -0,0 +1,46 @@
+import { convertToIsoDate, formatDate, setCookieExpirationDate } from '../../lib/utils/DateUtils';
+import { format, parseISO } from 'date-fns';
+import { SystemConfig } from '../../lib/constants/AppConstants';
+import '@testing-library/jest-dom';
+
+describe('DateUtils', () => {
+	describe('setCookieExpirationDate', () => {
+		it('should set cookie expiration date to 24 hours from now', () => {
+			const now = new Date();
+			const expectedDate = new Date(now.getTime() + SystemConfig.SYSTEM_COOKIE_TIMEOUT_MILLI_SECONDS);
+
+			const result = setCookieExpirationDate();
+
+			expect(result).toEqual(expectedDate);
+		});
+	});
+
+	describe('convertToIsoDate', () => {
+		it('should convert current date time to ISO date format', () => {
+			const currentDateTime = '2023-10-01T12:00:00Z';
+			const formattedDate = format(new Date(currentDateTime), SystemConfig.ISO_DATE_FORMAT);
+
+			const result = convertToIsoDate(currentDateTime);
+
+			expect(result).toBe(formattedDate);
+		});
+	});
+
+	describe('formatDate', () => {
+		it('should return an empty string if date is undefined', () => {
+			const result = formatDate(undefined, 'yyyy-MM-dd');
+			expect(result).toBe('');
+		});
+
+		it('should format the date to the new format', () => {
+			const date = '2023-10-01T12:00:00Z';
+			const newFormat = 'yyyy-MM-dd';
+			const parsedDate = parseISO(date);
+			const formattedDate = format(parsedDate, newFormat);
+
+			const result = formatDate(date, newFormat);
+
+			expect(result).toBe(formattedDate);
+		});
+	});
+});

package/react-kit/src/tests/utils/NumberUtils.test.ts

@@ -0,0 +1,19 @@
+import { parseNumber } from '../../lib/utils/NumberUtils';
+
+describe('parseNumber', () => {
+	it('should return a number when a valid string is provided', () => {
+		expect(parseNumber('123')).toBe(123);
+	});
+
+	it('should return NaN when an invalid string is provided', () => {
+		expect(parseNumber('abc')).toBeNaN();
+	});
+
+	it('should return undefined when null is provided', () => {
+		expect(parseNumber(null)).toBeUndefined();
+	});
+
+	it('should return undefined when undefined is provided', () => {
+		expect(parseNumber(undefined)).toBeUndefined();
+	});
+});

package/react-kit/src/tests/utils/ProgressStateUtils.test.ts

@@ -0,0 +1,131 @@
+import { initializeState, markError, markLoading, markSuccess } from '../../lib/utils/ProgressStateUtils';
+import { ProgressState } from '../../lib/types/ProgressState';
+
+describe('ProgressStateUtils', () => {
+	describe('initializeState', () => {
+		it('should initialize the state correctly', () => {
+			const expectedState: ProgressState = {
+				isLoading: false,
+				isSuccess: false,
+				isError: false,
+				isComplete: false,
+				message: '',
+			};
+
+			const result = initializeState();
+
+			expect(result).toEqual(expectedState);
+		});
+	});
+
+	describe('markLoading', () => {
+		it('should update the state to loading', () => {
+			const initialState: ProgressState = {
+				isLoading: false,
+				isSuccess: false,
+				isError: false,
+				isComplete: false,
+				message: '',
+			};
+
+			const expectedState: ProgressState = {
+				...initialState,
+				isLoading: true,
+			};
+
+			const result = markLoading(initialState);
+
+			expect(result).toEqual(expectedState);
+		});
+	});
+
+	describe('markSuccess', () => {
+		it('should update the state to success with a message', () => {
+			const initialState: ProgressState = {
+				isLoading: false,
+				isSuccess: false,
+				isError: false,
+				isComplete: false,
+				message: '',
+			};
+
+			const message = 'Operation successful';
+			const expectedState: ProgressState = {
+				...initialState,
+				isSuccess: true,
+				isComplete: true,
+				message,
+			};
+
+			const result = markSuccess(initialState, message);
+
+			expect(result).toEqual(expectedState);
+		});
+
+		it('should update the state to success without a message', () => {
+			const initialState: ProgressState = {
+				isLoading: false,
+				isSuccess: false,
+				isError: false,
+				isComplete: false,
+				message: '',
+			};
+
+			const expectedState: ProgressState = {
+				...initialState,
+				isSuccess: true,
+				isComplete: true,
+				message: '',
+			};
+
+			const result = markSuccess(initialState);
+
+			expect(result).toEqual(expectedState);
+		});
+	});
+
+	describe('markError', () => {
+		it('should update the state to error with a message', () => {
+			const initialState: ProgressState = {
+				isLoading: false,
+				isSuccess: false,
+				isError: false,
+				isComplete: false,
+				message: '',
+			};
+
+			const message = 'Operation failed';
+			const expectedState: ProgressState = {
+				...initialState,
+				isError: true,
+				isComplete: true,
+				message,
+			};
+
+			const result = markError(initialState, message);
+
+			expect(result).toEqual(expectedState);
+		});
+
+		it('should update the state to error without a message', () => {
+			const initialState: ProgressState = {
+				isLoading: false,
+				isSuccess: false,
+				isError: false,
+				isComplete: false,
+				message: '',
+			};
+
+			const expectedState: ProgressState = {
+				...initialState,
+				isError: true,
+				isComplete: true,
+				message: '',
+			};
+
+			const result = markError(initialState);
+
+			expect(result).toEqual(expectedState);
+		});
+	});
+});

package/react-kit/src/tests/utils/StringUtils.test.ts

@@ -0,0 +1,33 @@
+import { isBlankOrEmpty } from '../../lib/utils/StringUtils';
+
+describe('isBlankOrEmpty', () => {
+	it('should return true for null', () => {
+		expect(isBlankOrEmpty(null)).toBe(true);
+	});
+
+	it('should return true for undefined', () => {
+		expect(isBlankOrEmpty(undefined)).toBe(true);
+	});
+
+	it('should return true for an empty string', () => {
+		expect(isBlankOrEmpty('')).toBe(true);
+	});
+
+	it('should return true for a string with only spaces', () => {
+		expect(isBlankOrEmpty('   ')).toBe(true);
+	});
+
+	it('should return false for a non-empty string', () => {
+		expect(isBlankOrEmpty('hello')).toBe(false);
+	});
+
+	it('should return false for a string with non-space characters', () => {
+		expect(isBlankOrEmpty('  hello  ')).toBe(false);
+	});
+
+	it('should return false for non-string values', () => {
+		expect(isBlankOrEmpty(123)).toBe(false);
+		expect(isBlankOrEmpty({})).toBe(false);
+		expect(isBlankOrEmpty([])).toBe(false);
+	});
+});

package/react-kit/src/tests/utils/UrlUtils.test.ts

@@ -0,0 +1,19 @@
+import { isEncoded } from '../../lib/utils/UrlUtils';
+
+describe('isEncoded', () => {
+	it('should return true for an encoded URL', () => {
+		expect(isEncoded('https%3A%2F%2Fexample.com')).toBe(true);
+	});
+
+	it('should return false for a non-encoded URL', () => {
+		expect(isEncoded('https://example.com')).toBe(false);
+	});
+
+	it('should return false for an improperly encoded URL', () => {
+		expect(isEncoded('%E0%A4%A')).toBe(false);
+	});
+
+	it('should return false for an empty string', () => {
+		expect(isEncoded('')).toBe(false);
+	});
+});

package/react-kit/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["vite/client", "vitest"],
+    "moduleResolution": "bundler"
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../tsconfig.base.json"
+}

package/react-kit/tsconfig.lib.json

@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ],
+    "moduleResolution": "bundler"
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

package/react-kit/tsconfig.spec.json

@@ -0,0 +1,27 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest",
+      "@testing-library/jest-dom"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vitest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}