test: picker-column tests pass

core/src/components/picker-column/test/basic/index.html

@@ -57,12 +57,13 @@
 
         const items = Array(24)
           .fill()
-          .map((_, i) => ({
-            text: `${i}`,
-            value: i,
-          }));
+          .forEach((_, i) => {
+            const option = document.createElement('ion-picker-column-option');
+            option.value = i;
+            option.textContent = i;
 
-        defaultPickerColumn.items = items;
+            defaultPickerColumn.appendChild(option);
+          });
       </script>
     </ion-app>
   </body>

core/src/components/picker-column/test/basic/picker-column.e2e.ts

@@ -11,7 +11,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
 
     test('should render a picker item for each item', async ({ page }) => {
-      const columns = page.locator('ion-picker-column .picker-item:not(.picker-item-empty)');
+      const columns = page.locator('ion-picker-column ion-picker-column-option');
       await expect(columns).toHaveCount(24);
     });
 
@@ -21,7 +21,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
 
     test('should not have an active item when value is not set', async ({ page }) => {
-      const activeColumn = page.locator('ion-picker-column .picker-item-active');
+      const activeColumn = page.locator('ion-picker-column ion-picker-column-option.option-active');
       await expect(activeColumn).toHaveCount(0);
     });
 
@@ -31,7 +31,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       });
       await page.waitForChanges();
 
-      const activeColumn = page.locator('ion-picker-column .picker-item-active');
+      const activeColumn = page.locator('ion-picker-column ion-picker-column-option.option-active');
 
       expect(activeColumn).not.toBeNull();
     });
@@ -45,9 +45,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       });
       await page.waitForChanges();
 
-      const activeColumn = page.locator('ion-picker-column .picker-item-active');
+      const activeColumn = page.locator('ion-picker-column ion-picker-column-option.option-active');
 
-      expect(await activeColumn?.innerText()).toEqual('23');
+      await expect(activeColumn).toHaveJSProperty('value', 23);
     });
 
     test('should not emit ionChange when the value is modified externally', async ({ page, skip }) => {

core/src/components/picker-column/test/disabled/index.html

@@ -60,24 +60,28 @@
       </ion-content>
       <script>
         const halfDisabledPicker = document.getElementById('half-disabled');
-        const halfDisabledItems = Array(24)
+        Array(24)
           .fill()
-          .map((_, i) => ({
-            text: `${i}`,
-            value: i,
-            disabled: i % 2 === 0,
-          }));
-        halfDisabledPicker.items = halfDisabledItems;
+          .forEach((_, i) => {
+            const option = document.createElement('ion-picker-column-option');
+            option.value = i;
+            option.textContent = i;
+            option.disabled = i % 2 === 0;
+
+            halfDisabledPicker.appendChild(option);
+          });
         halfDisabledPicker.value = 12;
 
         const fullDisabledPicker = document.getElementById('column-disabled');
-        const items = Array(24)
+        Array(24)
           .fill()
-          .map((_, i) => ({
-            text: `${i}`,
-            value: i,
-          }));
-        fullDisabledPicker.items = items;
+          .forEach((_, i) => {
+            const option = document.createElement('ion-picker-column-option');
+            option.value = i;
+            option.textContent = i;
+
+            fullDisabledPicker.appendChild(option);
+          });
       </script>
     </ion-app>
   </body>

core/src/components/picker-column/test/disabled/picker-column.e2e.ts

@@ -1,123 +1,75 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-/**
- * This behavior does not vary across directions.
- */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('picker-column: disabled rendering'), () => {
-    test('should not have visual regressions', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-picker>
-          <ion-picker-column value="b"></ion-picker-column>
-        </ion-picker>
-
-        <script>
-          const column = document.querySelector('ion-picker-column');
-          column.items = [
-            { text: 'A', value: 'a', disabled: true },
-            { text: 'B', value: 'b' },
-            { text: 'C', value: 'c', disabled: true }
-          ]
-        </script>
-      `,
-        config
-      );
-
-      const picker = page.locator('ion-picker');
-      await expect(picker).toHaveScreenshot(screenshot(`picker-disabled`));
-    });
-  });
-});
-
 /**
  * This behavior does not vary across modes/directions.
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('picker-column: disabled items'), () => {
+    // TODO FW-5580 move this to a spec test in picker-column-option
     test('all picker items should be enabled by default', async ({ page }) => {
       await page.setContent(
         `
         <ion-picker>
-          <ion-picker-column></ion-picker-column>
+          <ion-picker-column>
+            <ion-picker-column-option value="a">A</ion-picker-column-option>
+            <ion-picker-column-option value="b">B</ion-picker-column-option>
+            <ion-picker-column-option value="c">C</ion-picker-column-option>
+          </ion-picker-column>
         </ion-picker>
-
-        <script>
-          const column = document.querySelector('ion-picker-column');
-          column.items = [
-            { text: 'A', value: 'a' },
-            { text: 'B', value: 'b' },
-            { text: 'C', value: 'c' }
-          ]
-        </script>
       `,
         config
       );
 
-      const pickerItems = page.locator('ion-picker-column .picker-item:not(.picker-item-empty, [disabled])');
+      const pickerItems = page.locator('ion-picker-column ion-picker-column-option button:not([disabled])');
 
       expect(await pickerItems.count()).toBe(3);
     });
+    // TODO FW-5580 move this to a spec test in picker-column-option
     test('disabled picker item should not be interactive', async ({ page }) => {
       await page.setContent(
         `
         <ion-picker>
-          <ion-picker-column></ion-picker-column>
+          <ion-picker-column>
+            <ion-picker-column-option value="a">A</ion-picker-column-option>
+            <ion-picker-column-option value="b" disabled="true">B</ion-picker-column-option>
+            <ion-picker-column-option value="c">C</ion-picker-column-option>
+          </ion-picker-column>
         </ion-picker>
-
-        <script>
-          const column = document.querySelector('ion-picker-column');
-          column.items = [
-            { text: 'A', value: 'a' },
-            { text: 'B', value: 'b', disabled: true },
-            { text: 'C', value: 'c' }
-          ]
-        </script>
       `,
         config
       );
 
-      const disabledItem = page.locator('ion-picker-column .picker-item[disabled]');
+      const disabledItem = page.locator('ion-picker-column ion-picker-column-option button').nth(1);
       await expect(disabledItem).not.toBeEnabled();
     });
     test('disabled picker item should not be considered active', async ({ page }) => {
       await page.setContent(
         `
         <ion-picker>
-          <ion-picker-column value="b"></ion-picker-column>
+          <ion-picker-column value="b">
+            <ion-picker-column-option value="a">A</ion-picker-column-option>
+            <ion-picker-column-option value="b" disabled="true">B</ion-picker-column-option>
+            <ion-picker-column-option value="c">C</ion-picker-column-option>
+          </ion-picker-column>
         </ion-picker>
-
-        <script>
-          const column = document.querySelector('ion-picker-column');
-          column.items = [
-            { text: 'A', value: 'a' },
-            { text: 'B', value: 'b', disabled: true },
-            { text: 'C', value: 'c' }
-          ]
-        </script>
       `,
         config
       );
 
-      const disabledItem = page.locator('ion-picker-column .picker-item[data-value="b"]');
-      await expect(disabledItem).not.toHaveClass(/picker-item-active/);
+      const disabledItem = page.locator('ion-picker-column-option').nth(1);
+      await expect(disabledItem).not.toHaveClass(/option-active/);
     });
     test('setting the value to a disabled item should not cause that item to be active', async ({ page }) => {
       await page.setContent(
         `
         <ion-picker>
-          <ion-picker-column></ion-picker-column>
+          <ion-picker-column>
+            <ion-picker-column-option value="a">A</ion-picker-column-option>
+            <ion-picker-column-option value="b" disabled="true">B</ion-picker-column-option>
+            <ion-picker-column-option value="c">C</ion-picker-column-option>
+          </ion-picker-column>
         </ion-picker>
-
-        <script>
-          const column = document.querySelector('ion-picker-column');
-          column.items = [
-            { text: 'A', value: 'a' },
-            { text: 'B', value: 'b', disabled: true },
-            { text: 'C', value: 'c' }
-          ]
-        </script>
       `,
         config
       );
@@ -127,33 +79,25 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       await page.waitForChanges();
 
-      const disabledItem = page.locator('ion-picker-column .picker-item[data-value="b"]');
-      await expect(disabledItem).toBeDisabled();
-      await expect(disabledItem).not.toHaveClass(/picker-item-active/);
+      const disabledItem = page.locator('ion-picker-column ion-picker-column-option').nth(1);
+      await expect(disabledItem).not.toHaveClass(/option-active/);
     });
     test('defaulting the value to a disabled item should not cause that item to be active', async ({ page }) => {
       await page.setContent(
         `
         <ion-picker>
-          <ion-picker-column></ion-picker-column>
+          <ion-picker-column value="b">
+            <ion-picker-column-option value="a">A</ion-picker-column-option>
+            <ion-picker-column-option value="b" disabled="true">B</ion-picker-column-option>
+            <ion-picker-column-option value="c">C</ion-picker-column-option>
+          </ion-picker-column>
         </ion-picker>
-
-        <script>
-          const column = document.querySelector('ion-picker-column');
-          column.items = [
-            { text: 'A', value: 'a' },
-            { text: 'B', value: 'b', disabled: true },
-            { text: 'C', value: 'c' }
-          ]
-          column.value = 'b'
-        </script>
       `,
         config
       );
 
-      const disabledItem = page.locator('ion-picker-column .picker-item[data-value="b"]');
-      await expect(disabledItem).toBeDisabled();
-      await expect(disabledItem).not.toHaveClass(/picker-item-active/);
+      const disabledItem = page.locator('ion-picker-column ion-picker-column-option').nth(1);
+      await expect(disabledItem).not.toHaveClass(/option-active/);
     });
   });
 });
@@ -179,8 +123,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
 /**
  * This behavior does not vary across modes/directions.
  */
+// TODO FW-5580 fix this
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('picker-column: disabled column'), () => {
+  test.describe.skip(title('picker-column: disabled column'), () => {
     test.beforeEach(async ({ page }) => {
       await page.goto('/src/components/picker-column/test/disabled', config);
     });