Copy custom group properties in group-utils copyGroup function (#1843)

* fix: copy all properties of the group * test: write tests for copyGroup function * revert: revert copyGroup unit tests * test: write integration test for issue * test: add a test case for a single select * fix(test): replace ensure-safe-component with component helper invocation * ts: change Group interface to allow any property
cibernox · Jul 26, 2024 · 4b1cf5b · 4b1cf5b
1 parent 2636ef2
commit 4b1cf5b
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 3 deletions.
diff --git a/ember-power-select/src/utils/group-utils.ts b/ember-power-select/src/utils/group-utils.ts
@@ -114,12 +114,13 @@ export function optionAtIndex(
 }
 
 export interface Group {
+  groupName: string;
   options: any[];
   disabled?: boolean;
-  groupName: string;
+  [key: string]: unknown;
 }
 function copyGroup(group: Group, suboptions: any[]): Group {
-  const groupCopy: Group = { groupName: group.groupName, options: suboptions };
+  const groupCopy: Group = { ...group, options: suboptions };
   if (Object.prototype.hasOwnProperty.call(group, 'disabled')) {
     groupCopy.disabled = group.disabled;
   }

diff --git a/test-app/app/components/custom-group-component-with-variant.hbs b/test-app/app/components/custom-group-component-with-variant.hbs
@@ -0,0 +1,6 @@
+<div>
+  <span data-test-id="group-component-variant">{{@group.variant}}</span>
+  -
+  <span data-test-id="group-component-group-name">{{@group.groupName}}</span>
+</div>
+<div class="custom-component">{{yield}}</div>
diff --git a/test-app/app/components/custom-group-component-with-variant.ts b/test-app/app/components/custom-group-component-with-variant.ts
@@ -0,0 +1,16 @@
+import templateOnly from '@ember/component/template-only';
+
+export interface CustomGroupComponentWithVariantSignature {
+  Element: Element;
+  Args: {
+    group: {
+      groupName: string;
+      variant: string;
+    };
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+export default templateOnly<CustomGroupComponentWithVariantSignature>();
diff --git a/test-app/tests/integration/components/constants.js b/test-app/tests/integration/components/constants.js
@@ -95,6 +95,34 @@ export const groupedNumbersWithDisabled = [
   'one thousand',
 ];
 
+export const groupedNumbersWithCustomProperty = [
+  { groupName: 'Smalls', variant: 'Primary', options: ['one', 'two', 'three'] },
+  {
+    groupName: 'Mediums',
+    variant: 'Secondary',
+    options: ['four', 'five', 'six'],
+  },
+  {
+    groupName: 'Bigs',
+    variant: 'Primary',
+    options: [
+      {
+        groupName: 'Fairly big',
+        variant: 'Secondary',
+        options: ['seven', 'eight', 'nine'],
+      },
+      {
+        groupName: 'Really big',
+        variant: 'Primary',
+        options: ['ten', 'eleven', 'twelve'],
+      },
+      'thirteen',
+    ],
+  },
+  'one hundred',
+  'one thousand',
+];
+
 export const namesStartingWithA = [
   'Abigail',
   'Abril',

diff --git a/test-app/tests/integration/components/power-select/groups-test.js b/test-app/tests/integration/components/power-select/groups-test.js
@@ -6,7 +6,7 @@ import {
   typeInSearch,
   clickTrigger,
 } from 'ember-power-select/test-support/helpers';
-import { groupedNumbers } from '../constants';
+import { groupedNumbers, groupedNumbersWithCustomProperty } from '../constants';
 
 module(
   'Integration | Component | Ember Power Select (Groups)',
@@ -138,6 +138,70 @@ module(
       );
     });
 
+    test('When filtering, all properties of the options remain available for a single select', async function (assert) {
+      this.groupedNumbersWithCustomProperty = groupedNumbersWithCustomProperty;
+
+      await render(hbs`
+        <PowerSelect @options={{this.groupedNumbersWithCustomProperty}} @onChange={{fn (mut this.foo)}} @searchEnabled={{true}} @groupComponent={{component "custom-group-component-with-variant"}} as |option|>
+          {{option}}
+        </PowerSelect>
+      `);
+
+      await clickTrigger();
+
+      const variants = Array.from(
+        document.querySelectorAll('[data-test-id="group-component-variant"]'),
+      ).map((e) => e.textContent.trim());
+
+      assert.deepEqual(variants, [
+        'Primary',
+        'Secondary',
+        'Primary',
+        'Secondary',
+        'Primary',
+      ]);
+
+      await typeInSearch('one');
+
+      assert
+        .dom('[data-test-id="group-component-variant"]')
+        .exists({ count: 1 });
+
+      assert.dom('[data-test-id="group-component-variant"]').hasText('Primary');
+    });
+
+    test('When filtering, all properties of the options remain available for a multi select', async function (assert) {
+      this.groupedNumbersWithCustomProperty = groupedNumbersWithCustomProperty;
+
+      await render(hbs`
+       <PowerSelectMultiple @options={{this.groupedNumbersWithCustomProperty}} @onChange={{fn (mut this.foo)}} @searchEnabled={{true}} @groupComponent={{component "custom-group-component-with-variant"}} as |option|>
+          {{option}}
+        </PowerSelectMultiple>
+      `);
+
+      await clickTrigger();
+
+      const variants = Array.from(
+        document.querySelectorAll('[data-test-id="group-component-variant"]'),
+      ).map((e) => e.textContent.trim());
+
+      assert.deepEqual(variants, [
+        'Primary',
+        'Secondary',
+        'Primary',
+        'Secondary',
+        'Primary',
+      ]);
+
+      await typeInSearch('one');
+
+      assert
+        .dom('[data-test-id="group-component-variant"]')
+        .exists({ count: 1 });
+
+      assert.dom('[data-test-id="group-component-variant"]').hasText('Primary');
+    });
+
     test('Click on an option of a group select selects the option and closes the dropdown', async function (assert) {
       assert.expect(2);