test: Add test for parent attribute in select + multiselect

Author: SpyZzey

src/multiselect/__tests__/render-option.test.tsx

@@ -27,7 +27,7 @@ describe('Multiselect renderOption', () => {
     expect(elementWrapper).toHaveTextContent('Custom 0');
   });
 
-  test('receives correct item properties for child option', () => {
+  test('receives correct item properties for item option', () => {
     const renderOption = jest.fn(() => <div>Custom</div>);
     const childOption = { label: 'Test', value: '1' };
     const wrapper = renderMultiselect({
@@ -48,7 +48,7 @@ describe('Multiselect renderOption', () => {
     );
   });
 
-  test('receives correct item properties for parent option', () => {
+  test('receives correct item properties for group option', () => {
     const renderOption = jest.fn(() => <div>Custom</div>);
     const groupOption = { label: 'Group', value: 'g1', options: [{ label: 'Child', value: 'c1' }] };
     const wrapper = renderMultiselect({
@@ -160,6 +160,30 @@ describe('Multiselect renderOption', () => {
     );
   });
 
+  test('receives correct parent attribute for child item in group', () => {
+    const renderOption = jest.fn(() => <div>Custom</div>);
+    const groupOption = { label: 'Parent Group', value: 'g1', options: [{ label: 'Child Item', value: 'c1' }] };
+    const wrapper = renderMultiselect({
+      options: [groupOption],
+      renderOption,
+    });
+    wrapper.openDropdown();
+
+    // Verify that the child item receives the correct parent attribute
+    expect(renderOption).toHaveBeenCalledWith(
+      expect.objectContaining({
+        item: expect.objectContaining({
+          type: 'item',
+          option: expect.objectContaining({ label: 'Child Item', value: 'c1' }),
+          parent: expect.objectContaining({
+            type: 'group',
+            option: expect.objectContaining(groupOption),
+          }),
+        }),
+      })
+    );
+  });
+
   test('allows selection with custom rendered options', () => {
     const onChange = jest.fn();
     const renderOption = jest.fn(props => <div>{props.item.option.value}</div>);

src/select/__tests__/render-option.test.tsx

@@ -27,7 +27,7 @@ describe('Select renderOption', () => {
     expect(elementWrapper).toHaveTextContent('Custom');
   });
 
-  test('receives correct item properties for child option', () => {
+  test('receives correct item properties for item option', () => {
     const renderOption = jest.fn(() => <div>Custom</div>);
     const childOption = { label: 'Test', value: '1' };
     const wrapper = renderSelect({
@@ -47,7 +47,7 @@ describe('Select renderOption', () => {
       })
     );
   });
-  test('receives correct item properties for parent option', () => {
+  test('receives correct item properties for group option', () => {
     const renderOption = jest.fn(() => <div>Custom</div>);
     const groupOption = { label: 'Group', value: 'g1', options: [{ label: 'Child', value: 'c1' }] };
     const wrapper = renderSelect({
@@ -65,6 +65,30 @@ describe('Select renderOption', () => {
       })
     );
   });
+
+  test('receives correct item properties for trigger option', () => {
+    const renderOption = jest.fn(() => <div>Custom</div>);
+    const selectedOption = { label: 'Test', value: '1' };
+    const wrapper = renderSelect({
+      options: [selectedOption],
+      selectedOption,
+      triggerVariant: 'option',
+      renderOption,
+    });
+    const triggerWrapper = wrapper.findTrigger()!;
+    expect(triggerWrapper).not.toBeNull();
+    expect(triggerWrapper.getElement()).toHaveTextContent('Custom');
+    expect(renderOption).toHaveBeenCalledWith(
+      expect.objectContaining({
+        filterText: undefined,
+        item: expect.objectContaining({
+          type: 'trigger',
+          option: expect.objectContaining(selectedOption),
+        }),
+      })
+    );
+  });
+
   test('reflects highlighted state', () => {
     const renderOption = jest.fn(props => <div>{props.item.highlighted ? 'highlighted' : 'normal'}</div>);
     const wrapper = renderSelect({ options: [{ label: 'First', value: '1' }], renderOption });
@@ -104,6 +128,30 @@ describe('Select renderOption', () => {
       })
     );
   });
+
+  test('receives correct parent attribute for child item in group', () => {
+    const renderOption = jest.fn(() => <div>Custom</div>);
+    const groupOption = { label: 'Parent Group', value: 'g1', options: [{ label: 'Child Item', value: 'c1' }] };
+    const wrapper = renderSelect({
+      options: [groupOption],
+      renderOption,
+    });
+    wrapper.openDropdown();
+
+    // Verify that the child item receives the correct parent attribute
+    expect(renderOption).toHaveBeenCalledWith(
+      expect.objectContaining({
+        item: expect.objectContaining({
+          type: 'item',
+          option: expect.objectContaining({ label: 'Child Item', value: 'c1' }),
+          parent: expect.objectContaining({
+            type: 'group',
+            option: expect.objectContaining(groupOption),
+          }),
+        }),
+      })
+    );
+  });
   test('reflects disabled state', () => {
     const renderOption = jest.fn(props => <div>{props.item.disabled ? 'disabled' : 'enabled'}</div>);
     const wrapper = renderSelect({