fix(core/select): rollback and fix object iteration (#1287)

Co-authored-by: Daniel Leroux <[email protected]>

.changeset/sour-eels-develop.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/select): rollback and fix object iteration

.github/workflows/pr.yml

@@ -46,6 +46,8 @@ jobs:
               - packages/core/**
               - packages/angular/**
               - packages/react/**
+              - packages/angular-test-app/**
+              - packages/react-test-app/**
 
   build:
     needs: changes

packages/angular-test-app/karma.conf.js

@@ -46,7 +46,13 @@ module.exports = function (config) {
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
-    browsers: ['Chrome'],
+    browsers: ['ChromeHeadlessCI'],
+    customLaunchers: {
+      ChromeHeadlessCI: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox']
+      }
+    },
     singleRun: false,
     restartOnFileChange: true
   });

packages/angular-test-app/package.json

@@ -6,7 +6,8 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build --preserve-symlinks -c production",
-    "watch": "ng build --watch --configuration development"
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI"
   },
   "private": true,
   "dependencies": {

packages/angular-test-app/src/select/select.spec.ts

@@ -0,0 +1,62 @@
+import {
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
+
+import {
+  ApplicationInitStatus,
+  Component,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IxModule } from '@siemens/ix-angular';
+import { By } from '@angular/platform-browser';
+
+@Component({
+  selector: 'ix-example-form-select',
+  template: ` <form [formGroup]="form">
+    <button>Test</button>
+    <ix-button>Test</ix-button>
+    <ix-select formControlName="select">
+      <ix-select-item label="Item 1" value="1"></ix-select-item>
+      <ix-select-item label="Item 2" value="2"></ix-select-item>
+      <ix-select-item label="Item 3" value="3"></ix-select-item>
+      <ix-select-item label="Item 4" value="4"></ix-select-item>
+    </ix-select>
+  </form>`,
+})
+class SelectComponent {
+  public form = new FormGroup({ select: new FormControl('1') });
+}
+
+describe('SelectFormComponent', () => {
+  let component: SelectComponent;
+  let fixture: ComponentFixture<SelectComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SelectComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      imports: [FormsModule, ReactiveFormsModule, IxModule.forRoot()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SelectComponent);
+    component = fixture.componentInstance;
+  });
+
+  beforeEach(async () => {
+    // until https://github.com/angular/angular/issues/24218 is fixed
+    await TestBed.inject(ApplicationInitStatus).donePromise;
+  });
+
+  it('should change the input value', async () => {
+    const select = fixture.debugElement.query(By.css('ix-select'));
+    component.form.get('select')!.setValue('2');
+    fixture.detectChanges();
+
+    expect(select.nativeElement.value).toBe('2');
+    expect(component).toBeDefined();
+  });
+});

packages/angular-test-app/src/test.ts

@@ -8,13 +8,12 @@
  */
 
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import {
   BrowserDynamicTestingModule,
   platformBrowserDynamicTesting,
 } from '@angular/platform-browser-dynamic/testing';
-import 'zone.js/testing';
 
 declare const require: {
   context(

packages/core/src/components/select/select.tsx

@@ -305,14 +305,13 @@ export class Select {
     }
 
     this.items.forEach((item) => {
-      item.selected = ids.some(
-        // Check can be removed if value is type of string in future releases
-        (i) =>
-          i ===
-          (item.value !== undefined && item.value !== null
-            ? item.value.toString()
-            : '')
-      );
+      item.selected = ids.some((i) => {
+        if (typeof i !== typeof item.value) {
+          return i.toString() === item.value.toString();
+        } else {
+          return i === item.value;
+        }
+      });
     });
 
     this.selectedLabels = this.selectedItems.map((item) => item.label);

packages/core/src/components/select/test/select.ct.ts

@@ -264,6 +264,45 @@ test('type in a novel item name in editable mode, click outside and reopen the s
   await expect(page.getByRole('button', { name: 'Item 3' })).toBeVisible();
 });
 
+test('pass object as value and check if it is selectable', async ({
+  mount,
+  page,
+}) => {
+  await mount(`
+        <ix-select>
+          <ix-select-item label="Item 1">Test</ix-select-item>
+          <ix-select-item label="Item 2">Test</ix-select-item>
+          <ix-select-item label="Item 3">Test</ix-select-item>
+        </ix-select>
+    `);
+  const selectElement = page.locator('ix-select');
+  await expect(selectElement).toHaveClass(/hydrated/);
+
+  async function setSelectItemValue(index: number): Promise<void> {
+    await page
+      .locator('ix-select-item')
+      .nth(index)
+      .evaluate((e: HTMLIxSelectItemElement, index) => {
+        e.value = { selectLabel: `Item ${index}`, selectValue: `${index}` };
+      });
+  }
+
+  for (let index = 0; index < 3; index++) {
+    await setSelectItemValue(index);
+  }
+
+  await page.locator('[data-select-dropdown]').click();
+  await page.locator('ix-select-item').last().click();
+  await page.locator('[data-select-dropdown]').click();
+
+  await expect(page.getByRole('button', { name: 'Item 1' })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Item 2' })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Item 3' })).toBeVisible();
+  await expect(
+    page.getByRole('button', { name: 'Item 3' }).locator('ix-icon')
+  ).toBeVisible();
+});
+
 test.describe('arrow key navigation', () => {
   test.describe('ArrowDown', () => {
     test('input -> slotted item', async ({ mount, page }) => {