@axinom/mosaic-ui 0.69.0-rc.2 → 0.69.0-rc.21

package/src/components/Explorer/BulkEdit/FormFieldsConfigConverter.spec.tsx

@@ -1,25 +1,26 @@
-import '@testing-library/jest-dom';
 import { render } from '@testing-library/react';
+import { Field } from 'formik';
 import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { BulkEditFieldConfigMap } from './BulkEdit.model';
 import { BulkEditFormFieldsConfigConverter } from './FormFieldsConfigConverter';
 
-jest.mock('../../FormElements', () => ({
-  CheckboxField: jest.fn(({ name, label }) => (
-    <div data-testid="CheckboxField">{`${name}-${label}`}</div>
+vi.mock('../../FormElements', () => ({
+  CheckboxField: vi.fn(({ name, label }) => (
+    <div data-test-id="CheckboxField">{`${name}-${label}`}</div>
   )),
-  CustomTagsField: jest.fn(({ name, label }) => (
-    <div data-testid="CustomTagsField">{`${name}-${label}`}</div>
+  CustomTagsField: vi.fn(({ name, label }) => (
+    <div data-test-id="CustomTagsField">{`${name}-${label}`}</div>
   )),
-  SingleLineTextField: jest.fn(({ name, label }) => (
-    <div data-testid="SingleLineTextField">{`${name}-${label}`}</div>
+  SingleLineTextField: vi.fn(({ name, label }) => (
+    <div data-test-id="SingleLineTextField">{`${name}-${label}`}</div>
   )),
 }));
 
-jest.mock('../../FieldSelection', () => ({
-  FieldSelection: jest.fn(({ children, onFieldRemoved, onFieldAdded }) => (
+vi.mock('../../FieldSelection', () => ({
+  FieldSelection: vi.fn(({ children, onFieldRemoved, onFieldAdded }) => (
     <div
-      data-testid="FieldSelection"
+      data-test-id="FieldSelection"
       data-on-field-removed={!!onFieldRemoved}
       data-on-field-added={!!onFieldAdded}
     >
@@ -28,18 +29,18 @@ jest.mock('../../FieldSelection', () => ({
   )),
 }));
 
-const mockSetFieldValue = jest.fn();
-const mockSetFieldTouched = jest.fn();
-const mockSetErrors = jest.fn();
-const mockValidateForm = jest.fn();
+const mockSetFieldValue = vi.fn();
+const mockSetFieldTouched = vi.fn();
+const mockSetErrors = vi.fn();
+const mockValidateForm = vi.fn();
 
-jest.mock('formik', () => ({
-  Field: jest.fn(({ name, label, as: Component, validate }) => (
-    <div data-testid={`Field-${name}`} data-has-validation={!!validate}>
+vi.mock('formik', () => ({
+  Field: vi.fn(({ name, label, as: Component, validate }) => (
+    <div data-test-id={`Field-${name}`} data-has-validation={!!validate}>
       <Component name={name} label={label} />
     </div>
   )),
-  useFormikContext: jest.fn(() => ({
+  useFormikContext: vi.fn(() => ({
     setFieldValue: mockSetFieldValue,
     setFieldTouched: mockSetFieldTouched,
     setErrors: mockSetErrors,
@@ -51,7 +52,7 @@ jest.mock('formik', () => ({
 
 describe('BulkEditFormFieldsConfigConverter', () => {
   beforeEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it('renders a Formik Field wrapping SingleLineTextField for String type', () => {
@@ -183,7 +184,7 @@ describe('BulkEditFormFieldsConfigConverter', () => {
   });
 
   it('logs a warning for unsupported field types', () => {
-    const consoleWarnSpy = jest.spyOn(console, 'warn').mockImplementation();
+    const consoleWarnSpy = vi.spyOn(console, 'warn').mockReturnValue(undefined);
     const config: BulkEditFieldConfigMap = {
       unsupportedField: {
         type: 'UnsupportedType' as any,
@@ -240,7 +241,7 @@ describe('BulkEditFormFieldsConfigConverter', () => {
     render(BulkEditFormFieldsConfigConverter(config));
 
     // Get the validation function from the Field mock
-    const mockField = jest.mocked(jest.requireMock('formik').Field);
+    const mockField = vi.mocked(Field);
     const fieldCall = mockField.mock.calls[0][0] as any;
     const validateFn = fieldCall.validate;
 
@@ -257,7 +258,7 @@ describe('BulkEditFormFieldsConfigConverter', () => {
 
   it('runs custom validation and returns error message on failure', () => {
     const customValidation = {
-      validateSync: jest.fn().mockImplementation(() => {
+      validateSync: vi.fn().mockImplementation(() => {
         throw new Error('Custom validation failed');
       }),
     };
@@ -274,7 +275,7 @@ describe('BulkEditFormFieldsConfigConverter', () => {
 
     render(BulkEditFormFieldsConfigConverter(config));
 
-    const mockField = jest.mocked(jest.requireMock('formik').Field);
+    const mockField = vi.mocked(Field);
     const fieldCall = mockField.mock.calls[0][0] as any;
     const validateFn = fieldCall.validate;
 
@@ -284,7 +285,7 @@ describe('BulkEditFormFieldsConfigConverter', () => {
 
   it('returns "Invalid value" when custom validation throws a non-Error', () => {
     const customValidation = {
-      validateSync: jest.fn().mockImplementation(() => {
+      validateSync: vi.fn().mockImplementation(() => {
         throw 'non-error thrown'; // eslint-disable-line no-throw-literal
       }),
     };
@@ -301,7 +302,7 @@ describe('BulkEditFormFieldsConfigConverter', () => {
 
     render(BulkEditFormFieldsConfigConverter(config));
 
-    const mockField = jest.mocked(jest.requireMock('formik').Field);
+    const mockField = vi.mocked(Field);
     const fieldCall = mockField.mock.calls[0][0] as any;
     const validateFn = fieldCall.validate;
 
@@ -310,7 +311,7 @@ describe('BulkEditFormFieldsConfigConverter', () => {
 
   it('falls through to empty-value check when custom validation passes', () => {
     const customValidation = {
-      validateSync: jest.fn(), // passes without throwing
+      validateSync: vi.fn(), // passes without throwing
     };
 
     const config: BulkEditFieldConfigMap = {
@@ -325,7 +326,7 @@ describe('BulkEditFormFieldsConfigConverter', () => {
 
     render(BulkEditFormFieldsConfigConverter(config));
 
-    const mockField = jest.mocked(jest.requireMock('formik').Field);
+    const mockField = vi.mocked(Field);
     const fieldCall = mockField.mock.calls[0][0] as any;
     const validateFn = fieldCall.validate;
 

package/src/components/Explorer/BulkEdit/FormFieldsConfigConverter.tsx

@@ -76,6 +76,7 @@ export const BulkEditFormFieldsConfigConverter = (
       <FieldSelection
         onFieldRemoved={onFieldRemoved}
         onFieldAdded={onFieldAdded}
+        name="bulkedit-fields"
       >
         {fields}
       </FieldSelection>

package/src/components/Explorer/BulkEdit/GenerateMutation.spec.tsx

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { BulkEditConfig } from './BulkEdit.model';
 import { generateBulkEditMutation } from './GenerateMutation';
 

package/src/components/Explorer/BulkEdit/helpers/FieldWrapper.scss

@@ -1,6 +1,7 @@
 .container {
   display: grid;
   grid-template-columns: auto min-content;
+  gap: 5px;
 }
 
 .button {

package/src/components/Explorer/BulkEdit/helpers/FieldWrapper.tsx

@@ -84,6 +84,7 @@ export const FieldWrapper: React.FC<FieldWrapperProps> = ({
           icon={IconName.ClearAll}
           buttonContext={clearField ? ButtonContext.Active : ButtonContext.Icon}
           onButtonClicked={handleClearFieldChange}
+          title="Clear"
         />
       )}
     </div>