test: add field-list tests

Author: paula-stacho

src/components/field/field-content.tsx

@@ -132,7 +132,7 @@ export const FieldContent = ({
       />
       {hasCollapseButton && (
         <DiagramIconButton
-          data-testid={`object-field-expand-toggle-${nodeId}-${typeof id === 'string' ? id : id.join('.')}`}
+          data-testid={`field-expand-toggle-${nodeId}-${typeof id === 'string' ? id : id.join('.')}`}
           onClick={handleFieldExpandToggle}
           aria-label={expanded ? 'Collapse Field' : 'Expand Field'}
           title={expanded ? 'Collapse Field' : 'Expand Field'}

src/components/field/field-list.test.tsx

@@ -8,17 +8,20 @@ const FieldWithEditableInteractions = ({
   onAddFieldToObjectFieldClick,
   onFieldNameChange,
   onFieldClick,
+  onFieldExpandToggle,
   ...props
 }: Partial<React.ComponentProps<typeof FieldListComponent>> & {
   onAddFieldToObjectFieldClick?: () => void;
   onFieldNameChange?: (newName: string) => void;
   onFieldClick?: () => void;
+  onFieldExpandToggle?: () => void;
 }) => {
   return (
     <EditableDiagramInteractionsProvider
       onFieldClick={onFieldClick}
       onAddFieldToObjectFieldClick={onAddFieldToObjectFieldClick}
       onFieldNameChange={onFieldNameChange}
+      onFieldExpandToggle={onFieldExpandToggle}
     >
       <FieldListComponent nodeType="collection" nodeId="coll" fields={[]} {...props} />
     </EditableDiagramInteractionsProvider>
@@ -54,4 +57,46 @@ describe('field-list', () => {
       nodeId: 'coll',
     });
   });
+
+  it('should filter out children of collapsed fields', () => {
+    render(
+      <FieldWithEditableInteractions
+        fields={[
+          { id: ['expandedParent'], name: 'expandedParent', expanded: true },
+          { id: ['expandedParent', 'child1'], name: 'visibleChild1', depth: 1 },
+          { id: ['expandedParent', 'child2'], name: 'visibleChild2', depth: 1 },
+          { id: ['collapsedParent'], name: 'collapsedParent', expanded: false },
+          { id: ['collapsedParent', 'child1'], name: 'invisibleChild1', depth: 1 },
+          { id: ['collapsedParent', 'child2'], name: 'invisibleChild2', depth: 1 },
+          { id: ['other'], name: 'other' },
+        ]}
+      />,
+    );
+    expect(screen.getByText('expandedParent')).toBeInTheDocument();
+    expect(screen.getByText('visibleChild1')).toBeInTheDocument();
+    expect(screen.getByText('visibleChild2')).toBeInTheDocument();
+    expect(screen.getByText('collapsedParent')).toBeInTheDocument();
+    expect(screen.queryByText('invisibleChild1')).not.toBeInTheDocument();
+    expect(screen.queryByText('invisibleChild2')).not.toBeInTheDocument();
+    expect(screen.getByText('other')).toBeInTheDocument();
+  });
+
+  it('should ensure that items that do have children are collapsible', () => {
+    const onFieldExpandToggle = vi.fn();
+    render(
+      <FieldWithEditableInteractions
+        onFieldExpandToggle={onFieldExpandToggle}
+        fields={[
+          { id: ['other'], name: 'other' },
+          { id: ['parent'], name: 'parent', expanded: true },
+          { id: ['parent', 'child1'], name: 'child1', depth: 1 },
+          { id: ['parent', 'child2'], name: 'child2', depth: 1 },
+        ]}
+      />,
+    );
+    expect(screen.queryByTestId('field-expand-toggle-coll-other')).not.toBeInTheDocument();
+    expect(screen.getByTestId('field-expand-toggle-coll-parent')).toBeInTheDocument();
+    expect(screen.queryByTestId('field-expand-toggle-coll-parent-child1')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('field-expand-toggle-coll-parent-child2')).not.toBeInTheDocument();
+  });
 });

src/components/field/field-list.tsx

@@ -65,6 +65,7 @@ export const FieldList = ({ fields: allFields, nodeId, nodeType, isHovering }: P
   const selectedGroupHeight = useMemo(() => {
     return isFieldSelectionEnabled ? getSelectedFieldGroupHeight(fields) : undefined;
   }, [fields, isFieldSelectionEnabled]);
+
   return (
     <NodeFieldWrapper>
       {fields.map(({ id, name, type: fieldType, ...rest }, i) => {