@integry/sdk 4.6.8 → 4.6.10

package/generateTests.js

@@ -0,0 +1,51 @@
+import OpenAI from 'openai';
+import fs from 'fs';
+import path from 'path';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const openai = new OpenAI({
+  apiKey: "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",
+});
+
+async function generateTest(filePath) {
+  const code = fs.readFileSync(filePath, 'utf-8');
+
+  const prompt = `Write Vitest unit tests for the following Preact component:
+${code}
+
+Make sure to cover:
+- Props validation
+- Event handlers
+- Conditional rendering
+- User interactions
+- Edge cases
+`;
+
+  const completion = await openai.chat.completions.create({
+    model: 'gpt-4-turbo',
+    messages: [
+      { role: 'system', content: 'You are a senior frontend developer with expertise in testing.' },
+      { role: 'user', content: prompt },
+    ],
+    temperature: 0.2,
+  });
+
+  const generatedTests = completion.choices[0]?.message?.content || '';
+
+  const testFilePath = path.join(path.dirname(filePath), `${path.basename(filePath, '.tsx')}.test.tsx`);
+  fs.writeFileSync(testFilePath, generatedTests);
+  console.log(`Test file generated: ${testFilePath}`);
+}
+
+async function main() {
+  const componentsFolder = './src/components/form/ObjectField/'; // Update with your components folder
+  const files = fs.readdirSync(componentsFolder).filter((file) => file.endsWith('.ts'));
+  console.log(files);
+  for (const file of files) {
+    await generateTest(path.join(componentsFolder, file));
+  }
+}
+
+main().catch(console.error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@integry/sdk",
-  "version": "4.6.8",
+  "version": "4.6.10",
   "description": "Integry SDK",
   "main": "dist/umd/index.umd.js",
   "module": "dist/esm/index.csm.js",
@@ -102,6 +102,7 @@
     "fuzzysort": "^1.1.4",
     "htm": "3.1.0",
     "lit": "^3.2.1",
+    "openai": "^4.86.1",
     "preact": "^10.2.0",
     "superstruct": "^0.15.2",
     "unfetch": "^4.2.0",

package/src/components/form/ObjectField/index.ts

@@ -287,7 +287,22 @@ const ObjectField = (props: ObjectFieldProps) => {
           : `Enter value here...`);
 
       const fieldElement = html`
-        <div class="${styles.functionFieldWrap} integry-action-field-wrap">
+        <div
+          id=${[
+            'integry-action-field-wrap',
+            field?.activity_field?.machine_name !==
+            fieldDetails?.meta?.machine_name
+              ? field?.activity_field?.machine_name
+              : null,
+            fieldDetails?.meta?.machine_name,
+            isArray ? objectIndex : null,
+          ]
+            .filter(Boolean)
+            .join('-')}
+          class="${styles.functionFieldWrap
+            ? styles.functionFieldWrap
+            : ''} integry-action-field-wrap"
+        >
           <${ConfigureFieldWrapper} field=${fieldDetails}>
             ${fieldType === 'TEXTFIELD' &&
             html`

package/src/components/form/ObjectField/index.ts.test.tsx

@@ -0,0 +1,108 @@
+To write Vitest unit tests for the `ObjectField` Preact component, we need to cover various aspects such as props validation, event handlers, conditional rendering, user interactions, and edge cases. Below are examples of how these tests can be structured using Vitest along with the Testing Library for Preact.
+
+### Setup
+
+First, ensure you have the necessary dependencies:
+
+```bash
+npm install vitest @testing-library/preact @testing-library/user-event --save-dev
+```
+
+### Test File: `ObjectField.test.tsx`
+
+```tsx
+import { describe, it, expect, vi } from 'vitest';
+import { render, fireEvent, screen } from '@testing-library/preact';
+import userEvent from '@testing-library/user-event';
+import { ObjectField } from './ObjectField';
+
+describe('ObjectField Component', () => {
+  const mockOnChange = vi.fn();
+  const mockOnChangeInFlow = vi.fn();
+  const mockApiHandler = vi.fn();
+
+  const baseProps = {
+    field: {
+      title: 'Test Field',
+      description: 'Test Description',
+      template_fields: [],
+      type: 'TEXTFIELD',
+      properties: {},
+    },
+    functionArguments: {},
+    connectedAccount: 'test-account',
+    appName: 'Test App',
+    onChange: mockOnChange,
+    onChangeInFlow: mockOnChangeInFlow,
+    apiHandler: mockApiHandler,
+    activityOutputData: {},
+    activityOutputDataRaw: {},
+  };
+
+  it('renders without crashing', () => {
+    const { container } = render(<ObjectField {...baseProps} />);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('calls onChange when input changes', async () => {
+    const user = userEvent.setup();
+    render(<ObjectField {...baseProps} />);
+    const input = screen.getByRole('textbox');
+    await user.type(input, 'New Value');
+    expect(mockOnChange).toHaveBeenCalled();
+  });
+
+  it('conditionally renders add more button based on isArray prop', () => {
+    const { rerender } = render(<ObjectField {...baseProps} isArray={true} />);
+    expect(screen.queryByText('+ Add another Test Field')).toBeInTheDocument();
+
+    rerender(<ObjectField {...baseProps} isArray={false} />);
+    expect(screen.queryByText('+ Add another Test Field')).not.toBeInTheDocument();
+  });
+
+  it('handles array of objects and adds more on button click', async () => {
+    const user = userEvent.setup();
+    render(<ObjectField {...baseProps} isArray={true} />);
+    await user.click(screen.getByText('+ Add another Test Field'));
+    expect(screen.getAllByText('Test Field').length).toBe(2);
+  });
+
+  it('removes an item from the list when delete is clicked', async () => {
+    const user = userEvent.setup();
+    render(<ObjectField {...baseProps} isArray={true} objectValue={[{}, {}]} />);
+    expect(screen.getAllByText('Test Field').length).toBe(2);
+    await user.click(screen.getAllByRole('button')[0]); // Assuming the delete button is the first button
+    expect(screen.getAllByText('Test Field').length).toBe(1);
+  });
+
+  it('validates props and throws if required props are missing', () => {
+    const consoleError = vi.spyOn(console, 'error');
+    consoleError.mockImplementation(() => {});
+
+    expect(() => render(<ObjectField />)).toThrow();
+    expect(consoleError).toHaveBeenCalled();
+
+    consoleError.mockRestore();
+  });
+
+  // Additional tests can be added here to cover more complex interactions and edge cases
+});
+```
+
+### Explanation
+
+1. **Setup and Imports**: We import necessary functions from Vitest and Testing Library. We also mock functions that will be used as props.
+
+2. **Base Props**: A base props object is defined to reuse in multiple tests, ensuring consistency and reducing redundancy.
+
+3. **Simple Render Test**: Checks if the component renders without throwing.
+
+4. **Event Handler Test**: Simulates user input and checks if the appropriate handler (`onChange`) is called.
+
+5. **Conditional Rendering**: Tests the conditional rendering of the "Add another" button based on the `isArray` prop.
+
+6. **Dynamic List Manipulation**: Tests adding and removing items from a list, which is crucial for components managing arrays of data.
+
+7. **Props Validation**: Optionally, you can test for required props and ensure the component throws or logs errors when props are missing or invalid.
+
+This setup provides a robust starting point for testing the `ObjectField` component comprehensively, ensuring it behaves correctly under various conditions and interactions.

package/src/features/common/ActionForm/index.ts

@@ -1490,7 +1490,9 @@ class ActionForm extends Component<ActionFormPropsType, ActionFormStateType> {
                                   html`
                                 <div id=${`integry-action-field-wrap-${
                                   el?.activity_field?.machine_name || ''
-                                }`} class=${`integry-action-field-wrap`}>
+                                }`} class=${`integry-action-field-wrap ${
+                                    el.is_visible ? '' : styles.fNotVisible
+                                  }`}>
                                 <${ConfigureFieldWrapper}
                                 field=${el}
                                 stepId=${step.id}