@siemens/ix 2.6.0 → 2.6.1

package/dist/collection/components/select/test/select.ct.js

@@ -215,6 +215,21 @@ test('type in a novel item name and click outside', async ({ mount, page }) => {
     const inputValue = await page.getByTestId('input').inputValue();
     expect(inputValue).toBe('Item 2');
 });
+test('check if clear button visible in disabled', async ({ mount, page }) => {
+    await mount(`
+        <ix-select value="2" allow-clear>
+          <ix-select-item value="1" label="Item 1">Test</ix-select-item>
+          <ix-select-item value="2" label="Item 2">Test</ix-select-item>
+          <ix-select-item value="3" label="Item 3">Test</ix-select-item>
+        </ix-select>
+    `);
+    const selectElement = page.locator('ix-select');
+    await expect(selectElement).toHaveClass(/hydrated/);
+    const clearButton = page.locator('ix-icon-button.clear.btn-icon-16');
+    await expect(clearButton).toBeVisible();
+    await selectElement.evaluate((select) => (select.disabled = true));
+    await expect(clearButton).not.toBeAttached();
+});
 test('type in a novel item name in multiple mode, click outside', async ({ mount, page, }) => {
     await mount(`
         <ix-select value="2" mode="multiple">
@@ -264,6 +279,12 @@ test('pass object as value and check if it is selectable', async ({ mount, page,
     await expect(page.getByRole('button', { name: 'Item 3' }).locator('ix-icon')).toBeVisible();
 });
 test.describe('arrow key navigation', () => {
+    const expectFocusMoved = async (direction, pattern, page) => {
+        const selector = `.dropdown-item:nth-of-type(${pattern}):focus-visible`;
+        await page.keyboard.press(direction);
+        await page.locator(selector);
+        await expect(page.locator(selector)).toBeFocused();
+    };
     test.describe('ArrowDown', () => {
         test('input -> slotted item', async ({ mount, page }) => {
             await mount(`
@@ -273,35 +294,30 @@ test.describe('arrow key navigation', () => {
         </ix-select>
       `);
             await page.locator('ix-select input').click();
-            await page.keyboard.down('ArrowDown');
-            const itemOne = await page.locator('ix-select-item').first();
-            await expect(itemOne).toBeFocused();
+            await expectFocusMoved('ArrowDown', '1', page);
         });
         test('input -> dynamic item', async ({ mount, page }) => {
             await mount(`
         <ix-select editable></ix-select>
      `);
-            const input = await page.locator('ix-select input');
+            const input = page.locator('ix-select input');
             await input.focus();
             await input.fill('I');
             await page.waitForSelector('.add-item');
-            await page.keyboard.down('ArrowDown');
-            const itemOne = await page.locator('.add-item');
-            await expect(itemOne).toBeFocused();
+            await expectFocusMoved('ArrowDown', '1', page);
         });
         test('input -> add item', async ({ mount, page }) => {
             await mount(`
         <ix-select editable></ix-select>
       `);
-            const input = await page.locator('ix-select input');
+            await page.waitForSelector('ix-select');
+            const input = page.locator('ix-select input');
             await input.focus();
             await input.fill('I');
             await page.keyboard.down('Enter');
             await page.locator('ix-icon-button').click();
             await page.waitForSelector('.checkmark');
-            await page.keyboard.down('ArrowDown');
-            const addItem = page.locator('ix-dropdown-item');
-            await expect(addItem).toBeFocused();
+            await expectFocusMoved('ArrowDown', '1', page);
         });
         test('slot -> dynamic item', async ({ mount, page }) => {
             await mount(`
@@ -310,18 +326,16 @@ test.describe('arrow key navigation', () => {
           <ix-select-item value="2" label="Item 2">Test</ix-select-item>
         </ix-select>
       `);
-            const input = await page.locator('ix-select input');
+            await page.waitForSelector('ix-select');
+            const input = page.locator('ix-select input');
             await input.focus();
-            await input.fill('I');
+            await page.keyboard.down('I');
             await page.keyboard.down('Enter');
             await page.locator('ix-icon-button').click();
-            await page.waitForSelector('.checkmark');
+            await page.waitForSelector('ix-dropdown');
+            await expectFocusMoved('ArrowDown', '1', page);
+            await expectFocusMoved('ArrowDown', 'odd', page);
             await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
-            await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
-            await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
             const itemThree = page.locator('ix-select-item').last();
             await expect(itemThree).toBeFocused();
         });
@@ -332,16 +346,14 @@ test.describe('arrow key navigation', () => {
           <ix-select-item value="2" label="Item 2">Test</ix-select-item>
         </ix-select>
       `);
-            const input = await page.locator('ix-select input');
+            await page.waitForSelector('ix-select');
+            const input = page.locator('ix-select input');
             await input.focus();
-            await input.fill('I');
-            await page.waitForSelector('.add-item');
-            await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
-            await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
-            await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
+            await page.keyboard.down('I');
+            await page.waitForSelector('.dropdown-item-icon');
+            await expectFocusMoved('ArrowDown', '1', page);
+            await expectFocusMoved('ArrowDown', 'odd', page);
+            await page.keyboard.press('ArrowDown');
             const addItem = page.locator('.add-item');
             await expect(addItem).toBeFocused();
         });
@@ -351,7 +363,7 @@ test.describe('arrow key navigation', () => {
           <ix-select-item value="1" label="Item 1">Test</ix-select-item>
         </ix-select>
       `);
-            const input = await page.locator('ix-select input');
+            const input = page.locator('ix-select input');
             await input.focus();
             await input.fill('Item 2');
             await page.keyboard.down('Enter');
@@ -360,12 +372,9 @@ test.describe('arrow key navigation', () => {
             await input.clear();
             await input.fill('I');
             await page.waitForSelector('.add-item');
+            await expectFocusMoved('ArrowDown', '1', page);
+            await expectFocusMoved('ArrowDown', 'odd', page);
             await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
-            await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
-            await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
             const addItem = page.locator('.add-item');
             await expect(addItem).toBeFocused();
         });
@@ -375,21 +384,17 @@ test.describe('arrow key navigation', () => {
           <ix-select-item value="1" label="Item 1">Test</ix-select-item>
         </ix-select>
      `);
-            const input = await page.locator('ix-select input');
+            const input = page.locator('ix-select input');
             await input.focus();
             await input.fill('Item 2');
             await page.keyboard.press('Enter');
             await input.clear();
             await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
+            await page.waitForSelector('ix-dropdown');
             await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
             const itemTwo = page.locator('ix-select-item').nth(1);
             await expect(itemTwo).toBeFocused();
-            await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
-            const itemOne = page.locator('ix-select-item').first();
-            await expect(itemOne).toBeFocused();
+            await expectFocusMoved('ArrowDown', '1', page);
         });
         test('wrap - add item -> slot', async ({ mount, page }) => {
             await mount(`
@@ -397,26 +402,21 @@ test.describe('arrow key navigation', () => {
           <ix-select-item value="1" label="Item 1">Test</ix-select-item>
         </ix-select>
      `);
-            const input = await page.locator('ix-select input');
+            const input = page.locator('ix-select input');
             await input.focus();
             await input.fill('I');
             await page.waitForSelector('.add-item');
             await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
             await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
             const addItem = page.locator('.add-item');
             await expect(addItem).toBeFocused();
-            await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
-            const itemOne = page.locator('ix-select-item').first();
-            await expect(itemOne).toBeFocused();
+            await expectFocusMoved('ArrowDown', '1', page);
         });
         test('wrap - add item -> dynamic item', async ({ mount, page }) => {
             await mount(`
         <ix-select editable></ix-select>
      `);
-            const input = await page.locator('ix-select input');
+            const input = page.locator('ix-select input');
             await input.focus();
             await input.fill('Item 1');
             await page.keyboard.press('Enter');
@@ -426,15 +426,10 @@ test.describe('arrow key navigation', () => {
             await input.fill('I');
             await page.waitForSelector('.add-item');
             await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
             await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
             const addItem = page.locator('.add-item');
             await expect(addItem).toBeFocused();
-            await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
-            const itemOne = page.locator('ix-select-item');
-            await expect(itemOne).toBeFocused();
+            await expectFocusMoved('ArrowDown', '1', page);
         });
     });
     test.describe('ArrowUp', () => {
@@ -444,22 +439,15 @@ test.describe('arrow key navigation', () => {
           <ix-select-item value="1" label="Item 1">Test</ix-select-item>
         </ix-select>
       `);
-            const input = await page.locator('ix-select input');
+            const input = page.locator('ix-select input');
             await input.focus();
             await input.fill('I');
             await page.keyboard.down('Enter');
             await page.locator('ix-icon-button').click();
             await page.waitForSelector('.checkmark');
-            await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
-            await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
-            const itemTwo = page.locator('ix-select-item').last();
-            await expect(itemTwo).toBeFocused();
-            await page.keyboard.down('ArrowUp');
-            await page.waitForTimeout(100);
-            const itemOne = page.locator('ix-select-item').first();
-            await expect(itemOne).toBeFocused();
+            await expectFocusMoved('ArrowDown', '1', page);
+            await expectFocusMoved('ArrowDown', 'odd', page);
+            await expectFocusMoved('ArrowUp', '1', page);
         });
         test('add item -> slot', async ({ mount, page }) => {
             await mount(`
@@ -467,26 +455,21 @@ test.describe('arrow key navigation', () => {
           <ix-select-item value="1" label="Item 1">Test</ix-select-item>
         </ix-select>
       `);
-            const input = await page.locator('ix-select input');
+            const input = page.locator('ix-select input');
             await input.focus();
             await input.fill('I');
             await page.waitForSelector('.add-item');
+            await expectFocusMoved('ArrowDown', '1', page);
             await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
-            await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
             const addItem = page.locator('.add-item');
             await expect(addItem).toBeFocused();
-            await page.keyboard.down('ArrowUp');
-            await page.waitForTimeout(100);
-            const itemOne = page.locator('ix-select-item');
-            await expect(itemOne).toBeFocused();
+            await expectFocusMoved('ArrowUp', '1', page);
         });
         test('add item -> dynamic item', async ({ mount, page }) => {
             await mount(`
         <ix-select editable></ix-select>
       `);
-            const input = await page.locator('ix-select input');
+            const input = page.locator('ix-select input');
             await input.focus();
             await input.fill('Item 1');
             await page.keyboard.press('Enter');
@@ -495,16 +478,11 @@ test.describe('arrow key navigation', () => {
             await input.clear();
             await input.fill('I');
             await page.waitForSelector('.add-item');
+            await expectFocusMoved('ArrowDown', '1', page);
             await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
-            await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
             const addItem = page.locator('.add-item');
             await expect(addItem).toBeFocused();
-            await page.keyboard.down('ArrowUp');
-            await page.waitForTimeout(100);
-            const itemOne = page.locator('ix-select-item');
-            await expect(itemOne).toBeFocused();
+            await expectFocusMoved('ArrowUp', '1', page);
         });
         test('wrap - slot -> dynamic item', async ({ mount, page }) => {
             await mount(`
@@ -512,16 +490,14 @@ test.describe('arrow key navigation', () => {
           <ix-select-item value="1" label="Item 1">Test</ix-select-item>
         </ix-select>
      `);
-            const input = await page.locator('input');
+            const input = page.locator('input');
             await input.focus();
             await input.fill('Item 2');
             await page.keyboard.press('Enter');
             await page.locator('ix-icon-button').click();
             await page.locator('input').clear();
             await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
             await page.keyboard.down('ArrowUp');
-            await page.waitForTimeout(100);
             const itemTwo = page.locator('ix-select-item').last();
             await expect(itemTwo).toBeFocused();
         });
@@ -531,14 +507,12 @@ test.describe('arrow key navigation', () => {
           <ix-select-item value="1" label="Item 1">Test</ix-select-item>
         </ix-select>
      `);
-            const input = await page.locator('ix-select input');
+            const input = page.locator('ix-select input');
             await input.focus();
             await input.fill('I');
             await page.waitForSelector('.add-item');
-            await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
+            await expectFocusMoved('ArrowDown', '1', page);
             await page.keyboard.down('ArrowUp');
-            await page.waitForTimeout(100);
             const addItem = page.locator('.add-item');
             await expect(addItem).toBeFocused();
         });
@@ -546,7 +520,7 @@ test.describe('arrow key navigation', () => {
             await mount(`
         <ix-select editable></ix-select>
      `);
-            const input = await page.locator('ix-select input');
+            const input = page.locator('ix-select input');
             await input.focus();
             await input.fill('Item 1');
             await page.keyboard.press('Enter');
@@ -555,10 +529,8 @@ test.describe('arrow key navigation', () => {
             await input.clear();
             await input.fill('I');
             await page.waitForSelector('.add-item');
-            await page.keyboard.down('ArrowDown');
-            await page.waitForTimeout(100);
+            await expectFocusMoved('ArrowDown', '1', page);
             await page.keyboard.down('ArrowUp');
-            await page.waitForTimeout(100);
             const addItem = page.locator('.add-item');
             await expect(addItem).toBeFocused();
         });
@@ -603,7 +575,7 @@ test.describe('Events', () => {
         await mount(`<ix-select>
       <ix-select-item value="1" label="Item 1"></ix-select-item>
       </ix-select>`);
-        const select = await page.locator('ix-select');
+        const select = page.locator('ix-select');
         const valueChanged = select.evaluate((elm) => {
             return new Promise((resolve) => {
                 elm.addEventListener('valueChange', (e) => resolve(e.detail));
@@ -617,13 +589,13 @@ test.describe('Events', () => {
     test('add item', async ({ mount, page }) => {
         const itemText = 'test';
         await mount(`<ix-select editable></ix-select>`);
-        const select = await page.locator('ix-select');
+        const select = page.locator('ix-select');
         const itemAdded = select.evaluate((elm) => {
             return new Promise((resolve) => {
                 elm.addEventListener('addItem', (e) => resolve(e.detail));
             });
         });
-        const input = await page.locator('input');
+        const input = page.locator('input');
         await input.focus();
         await input.fill(itemText);
         await page.keyboard.press('Enter');
@@ -635,18 +607,18 @@ test.describe('Events', () => {
             await mount(`<ix-select>
       <ix-select-item value="1" label="Item 1"></ix-select-item>
       </ix-select>`);
-            const select = await page.locator('ix-select');
+            const select = page.locator('ix-select');
             await select.evaluate((i) => i.addEventListener('vauleChange', (e) => e.preventDefault()));
             await page.locator('ix-icon-button').click();
-            const item = await page.locator('ix-select-item');
+            const item = page.locator('ix-select-item');
             await item.click();
             await expect(item).not.toHaveClass('selected');
         });
         test('add item', async ({ mount, page }) => {
             await mount(`<ix-select editable></ix-select>`);
-            const select = await page.locator('ix-select');
+            const select = page.locator('ix-select');
             await select.evaluate((i) => i.addEventListener('addItem', (e) => e.preventDefault()));
-            const input = await page.locator('input');
+            const input = page.locator('input');
             await input.focus();
             await input.fill('test');
             await page.keyboard.press('Enter');