feat: added e2e with two textfields

packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts

@@ -1,16 +1,85 @@
 import { newE2EPage } from '@stencil/core/testing';
 
 describe('kup-input-panel', () => {
-    it('it runs', () => {
-        expect(true).toBeTruthy();
-    });
-
-    //TODO: riparti da qui
     it('renders', async () => {
         const page = await newE2EPage();
 
         await page.setContent('<kup-input-panel></kup-input-panel>');
         const element = await page.find('kup-input-panel');
         expect(element).toHaveClass('hydrated');
     });
+
+    it('renders 2 text field with labels', async () => {
+        const page = await newE2EPage();
+
+        await page.setContent('<kup-input-panel></kup-input-panel>');
+        const inputPanel = await page.find('kup-input-panel');
+        const data = {
+            columns: [
+                {
+                    name: 'NAM',
+                    title: 'Name',
+                    visible: true,
+                },
+                {
+                    name: 'SUR',
+                    title: 'Surname',
+                    visible: true,
+                },
+            ],
+            rows: [
+                {
+                    cells: {
+                        NAM: {
+                            value: '',
+                            editable: true,
+                            shape: 'ITX',
+                        },
+                        SUR: {
+                            value: '',
+                            editable: true,
+                            shape: 'ITX',
+                        },
+                    },
+                },
+            ],
+        };
+
+        inputPanel.setProperty('data', data);
+
+        await page.waitForChanges();
+
+        const inputPanelContent = await page.find(
+            'kup-input-panel >>> form.input-panel'
+        );
+        expect(inputPanelContent).not.toBeNull();
+
+        const textFields = await inputPanelContent.findAll(
+            '.f-cell.string-cell .f-text-field'
+        );
+        expect(textFields).toHaveLength(data.columns.length);
+
+        // TODO valutare questo for utilizzato per mantenere l'asincronicità
+        for (const [i, textField] of textFields.entries()) {
+            const label = await textField.find('label');
+            expect(label).not.toBeNull();
+            expect(label).toHaveClass('mdc-floating-label');
+            expect(label).toEqualText(data.columns[i].title);
+
+            const input = await textField.find('input');
+            expect(label).not.toBeNull();
+            const value = await input.getProperty('value');
+            expect(value).toBe('');
+
+            await input.press('KeyS');
+            await input.press('KeyT');
+            await input.press('KeyR');
+            await input.press('KeyI');
+            await input.press('KeyN');
+            await input.press('KeyG');
+
+            const updatedValue = await input.getProperty('value');
+            expect(updatedValue).toBe('string');
+        }
+    });
 });

packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx

@@ -91,7 +91,7 @@ export class KupInputPanel {
 
     @Watch('data')
     onDataChanged() {
-        console.log('data changed', this.data);
+        // console.log('data changed', this.data);
         // this.render();
     }
     //#endregion
@@ -391,7 +391,7 @@ export class KupInputPanel {
     }
 
     render() {
-        const isEmptyData = Boolean(!this.data.rows?.length);
+        const isEmptyData = Boolean(!this.data?.rows?.length);
 
         const inputPanelContent: VNode[] = isEmptyData
             ? [
@@ -401,7 +401,7 @@ export class KupInputPanel {
                       )}
                   </p>,
               ]
-            : this.data.rows?.map((row) => this.#renderRow(row));
+            : this.data.rows.map((row) => this.#renderRow(row));
 
         return (
             <Host>