From e913ac685046a9460ca6b7a6c205524d8098a22e Mon Sep 17 00:00:00 2001 From: p-bemportato Date: Tue, 26 Mar 2024 09:48:44 +0000 Subject: [PATCH 1/5] feat: add radiobutton --- .../inputpanel/examples/InputPanelDemo.vue | 84 ++++----- packages/ketchup/src/assets/input-panel.js | 163 +++++------------- .../kup-input-panel-declarations.ts | 7 +- .../kup-input-panel/kup-input-panel.tsx | 116 ++++++------- .../kup-theme/kup-theme-declarations.ts | 1 + 5 files changed, 125 insertions(+), 246 deletions(-) diff --git a/packages/ketchup-showcase/src/views/components/advanced/inputpanel/examples/InputPanelDemo.vue b/packages/ketchup-showcase/src/views/components/advanced/inputpanel/examples/InputPanelDemo.vue index 9c22535e31..d56f41ab2e 100644 --- a/packages/ketchup-showcase/src/views/components/advanced/inputpanel/examples/InputPanelDemo.vue +++ b/packages/ketchup-showcase/src/views/components/advanced/inputpanel/examples/InputPanelDemo.vue @@ -78,11 +78,6 @@ function createComp() { title: 'Surname', visible: true, }, - { - name: 'COL', - title: 'Color Shirt', - visible: true, - }, { name: 'NAT', title: 'Nation', @@ -93,22 +88,12 @@ function createComp() { title: 'City', visible: true, }, - { - name: 'CAM', - title: 'Campionato vinto', - visible: true, - }, - { - name: 'CHI', - title: 'Chip', - visible: true, - }, ], rows: [ { cells: { NAM: { - value: 'Francesco', + value: '', obj: { t: '', p: '', @@ -119,7 +104,7 @@ function createComp() { shape: 'ITX', }, SUR: { - value: 'Totti', + value: '', obj: { t: '', p: '', @@ -127,24 +112,17 @@ function createComp() { }, editable: true, mandatory: true, - shape: 'INF', - }, - COL: { - value: '#8E1F2F', - obj: { - t: 'J1', - p: 'COL', - k: '', - }, - editable: true, - mandatory: true, - // shape: 'CLP', + shape: 'ITX', }, NAT: { - value: 'It', + value: '', options: [ - { id: 'It', label: 'Italy' }, - { id: 'Sp', label: 'Spain' }, + 'Italy', + 'Spain', + 'Germany', + 'France', + 'Portugal', + 'England', ], obj: { t: '', @@ -156,7 +134,7 @@ function createComp() { shape: 'CMB', }, CIT: { - value: 'Rom', + value: '', obj: { t: '', p: '', @@ -165,31 +143,29 @@ function createComp() { editable: true, mandatory: true, options: [ - { id: 'Rom', label: 'Roma' }, - { id: 'Flam', label: 'Flaminio' }, - { id: 'PorMet', label: 'Porta Metronia' }, - { id: 'Garbat', label: 'Garbatella' }, + 'Rome', + 'Florence', + 'Venice', + 'Madrid', + 'Barcelona', + 'Seville', + 'Berlin', + 'Munich', + 'Hamburg', + 'Paris', + 'Marseille', + 'Lyon', + 'Lisbon', + 'Porto', + 'Faro', + 'London', + 'Manchester', + 'Liverpool', ], shape: 'ACP', }, - CAM: { - value: 'on', - obj: { - t: 'V2', - p: 'SI/NO', - k: '', - }, - editable: true, - mandatory: true, - // shape: 'CHK', - }, - CHI: { - shape: 'CHI', - value: 'Chi', - editable: true, - options: [{ id: 'Chi', label: 'Chip' }], - }, }, + layout: {}, }, ], }; diff --git a/packages/ketchup/src/assets/input-panel.js b/packages/ketchup/src/assets/input-panel.js index eff89f53ff..bfdc90753a 100644 --- a/packages/ketchup/src/assets/input-panel.js +++ b/packages/ketchup/src/assets/input-panel.js @@ -10,11 +10,6 @@ const data = { title: 'Surname', visible: true, }, - { - name: 'COL', - title: 'Color Shirt', - visible: true, - }, { name: 'NAT', title: 'Nation', @@ -26,23 +21,13 @@ const data = { visible: true, }, { - name: 'CAM', - title: 'Campionato vinto', - visible: true, - }, - { - name: 'CHA', - title: 'Chart', - visible: false, - }, - { - name: 'CHI', - title: 'Chip', + name: 'CHK', + title: 'Checkbox', visible: true, }, { - name: 'BUT', - title: 'Buttons list', + name: 'RAD', + title: 'Radio Buttons', visible: true, }, ], @@ -50,7 +35,7 @@ const data = { { cells: { NAM: { - value: 'Francesco', + value: '', obj: { t: '', p: '', @@ -61,7 +46,7 @@ const data = { shape: 'ITX', }, SUR: { - value: 'Totti', + value: '', obj: { t: '', p: '', @@ -69,24 +54,17 @@ const data = { }, editable: true, mandatory: true, - shape: 'INF', - }, - COL: { - value: '#8E1F2F', - obj: { - t: 'J1', - p: 'COL', - k: '', - }, - editable: true, - mandatory: true, - // shape: 'CLP', + shape: 'ITX', }, NAT: { - value: 'It', + value: '', options: [ - { id: 'It', label: 'Italy' }, - { id: 'Sp', label: 'Spain' }, + 'Italy', + 'Spain', + 'Germany', + 'France', + 'Portugal', + 'England', ], obj: { t: '', @@ -98,7 +76,7 @@ const data = { shape: 'CMB', }, CIT: { - value: 'Rom', + value: '', obj: { t: '', p: '', @@ -107,14 +85,28 @@ const data = { editable: true, mandatory: true, options: [ - { id: 'Rom', label: 'Roma' }, - { id: 'Flam', label: 'Flaminio' }, - { id: 'PorMet', label: 'Porta Metronia' }, - { id: 'Garbat', label: 'Garbatella' }, + 'Rome', + 'Florence', + 'Venice', + 'Madrid', + 'Barcelona', + 'Seville', + 'Berlin', + 'Munich', + 'Hamburg', + 'Paris', + 'Marseille', + 'Lyon', + 'Lisbon', + 'Porto', + 'Faro', + 'London', + 'Manchester', + 'Liverpool', ], shape: 'ACP', }, - CAM: { + CHK: { value: 'on', obj: { t: 'V2', @@ -123,91 +115,16 @@ const data = { }, editable: true, mandatory: true, - // shape: 'CHK', - }, - CHA: { - data: { - sizeX: '50px', - offlineMode: { - value: '8;4;5', - }, - id: 'i1012_GREF_0', - cellId: 'i1012_GREF_0', - sizeY: '50px', - }, - obj: { - k: '8;4;5', - p: 'GRA_PIE', - t: 'J4', - }, - shape: 'Gra', - value: '8;4;5', }, - CHI: { - shape: 'CHI', - value: 'Chi', + RAD: { + value: '1', + options: ['1', '2', '3', '4'], editable: true, - options: [{ id: 'Chi', label: 'Chip' }], - }, - BUT: { - cssClass: 'strong-text', - data: { - data: [ - { - children: [ - { - children: [], - disabled: false, - expandable: false, - icon: 'lightbulb-outline', - isExpanded: false, - obj: { - k: '000050', - p: 'COD_VER', - t: 'VO', - }, - options: false, - value: 'Collaboratore', - }, - { - children: [], - disabled: false, - expandable: false, - icon: 'briefcase', - isExpanded: false, - obj: { - k: '000050', - p: 'COD_VER', - t: 'VO', - }, - options: false, - value: 'Azienda', - }, - ], - data: { - dropdownOnly: true, - }, - disabled: false, - expandable: false, - isExpanded: false, - options: false, - }, - ], - customStyle: - ' #kup-component button { padding: 0; font-size: 0.65em; } ', - icon: 'settings', - className: 'kup-slim', - }, - editable: true, - obj: { - k: '000050', - p: 'COD_VER', - t: 'VO', - }, - shape: 'BTN', - value: '', + mandatory: true, + shape: 'RAD', }, }, + layout: {}, }, ], }; diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts index 84885ab258..118070316e 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel-declarations.ts @@ -25,7 +25,7 @@ export interface KupInputPanelRowCells { export interface KupInputPanelCell extends KupDataCell { // TODO tipizzare dopo validazione da SMEUP - options?: { id: string; label: string }[]; + options?: string[]; editable?: boolean; mandatory?: boolean; fun?: string; @@ -58,10 +58,7 @@ export interface KupInputPanelLayoutField { } export type DataAdapterFn = ( - options: { - id: string; - label: string; - }[], + options: string[], fieldLabel: string, currentValue: string ) => Object; diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx index e519dd0324..13b06772d5 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx @@ -31,6 +31,7 @@ import { import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc'; import { FCell } from '../../f-components/f-cell/f-cell'; import { KupDom } from '../../managers/kup-manager/kup-manager-declarations'; +import { FRadioData } from '../../components'; const dom: KupDom = document.documentElement as KupDom; @Component({ @@ -91,6 +92,7 @@ export class KupInputPanel { @Watch('data') onDataChanged() { console.log('data changed', this.data); + // this.render(); } //#endregion @@ -183,6 +185,14 @@ export class KupInputPanel { renderKup: true, setSizes: true, }; + + // if ( + // dom.ketchup.data.cell.getType(cell, cell.shape) === FCellTypes.RADIO + // ) { + // // console.log('cell.data', cell.data); + // return ; + // } + return ; } @@ -200,6 +210,7 @@ export class KupInputPanel { [FCellTypes.CHECKBOX, this.#CHKAdapter], [FCellTypes.COLOR_PICKER, this.#CLPAdapter], [FCellTypes.COMBOBOX, this.#CMBandACPAdapter], + [FCellTypes.RADIO, this.#RADAdapter], [FCellTypes.STRING, this.#ITXAdapter], ]); @@ -226,20 +237,13 @@ export class KupInputPanel { }; } - #CHIAdapter( - options: { - id: string; - label: string; - }[], - _fieldLabel: string, - currentValue: string - ) { + #CHIAdapter(options: string[], _fieldLabel: string, currentValue: string) { return { data: options?.length - ? options.map(({ id, label }) => ({ - value: label, - id, - selected: currentValue === id, + ? options.map((option) => ({ + value: option, + id: option, + selected: currentValue === option, })) : [{ id: currentValue, value: currentValue }], }; @@ -261,10 +265,7 @@ export class KupInputPanel { } #BTNAdapter( - _options: { - id: string; - label: string; - }[], + _options: string[], _fieldLabel: string, _currentValue: string ) { @@ -272,22 +273,6 @@ export class KupInputPanel { return { data: [ { - // children: [ - // { - // children: [], - // disabled: false, - // expandable: false, - // icon: 'lightbulb-outline', - // isExpanded: false, - // obj: { - // k: '000050', - // p: 'COD_VER', - // t: 'VO', - // }, - // options: false, - // value: 'Collaboratore', - // }, - // ], data: { dropdownOnly: false, label: 'Pier' }, }, { data: { dropdownOnly: false, label: 'Valerio' } }, @@ -296,10 +281,7 @@ export class KupInputPanel { } #CMBandACPAdapter( - options: { - id: string; - label: string; - }[], + options: string[], fieldLabel: string, currentValue: string ) { @@ -313,10 +295,10 @@ export class KupInputPanel { 'kup-list': { showIcons: true, data: options?.length - ? options.map(({ id, label }) => ({ - value: label, - id, - selected: currentValue === id, + ? options.map((option) => ({ + value: option, + id: option, + selected: currentValue === option, })) : [], }, @@ -325,28 +307,14 @@ export class KupInputPanel { }; } - #CHKAdapter( - _options: { - id: string; - label: string; - }[], - fieldLabel: string, - currentValue: string - ) { + #CHKAdapter(_options: string[], fieldLabel: string, currentValue: string) { return { checked: currentValue === 'on' || currentValue === '1', label: fieldLabel, }; } - #CLPAdapter( - _options: { - id: string; - label: string; - }[], - fieldLabel: string, - _currentValue: string - ) { + #CLPAdapter(_options: string[], fieldLabel: string, _currentValue: string) { return { data: { 'kup-text-field': { @@ -356,17 +324,37 @@ export class KupInputPanel { }; } - #ITXAdapter( - _options: { - id: string; - label: string; - }[], - fieldLabel: string, - _currentValue: string - ) { + #ITXAdapter(_options: string[], fieldLabel: string, _currentValue: string) { return { label: fieldLabel }; } + #RADAdapter(options: string[], _fieldLabel: string, currentValue: string) { + // const onChange = (i) => { + // this.data = { + // ...this.data, + // rows: this.data.rows.map((row) => ({ + // ...row, + // cells: { + // ...row.cells, + // RAD: { + // ...row.cells['RAD'], + // value: options[i], + // }, + // }, + // })), + // }; + // }; + + return { + data: options.map((option) => ({ + value: option, + label: option, + checked: option === currentValue, + })), + // onChange, + }; + } + //#endregion //#region LIFECYCLE HOOKS diff --git a/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts b/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts index 0be2578445..a93cf7d4be 100644 --- a/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts +++ b/packages/ketchup/src/managers/kup-theme/kup-theme-declarations.ts @@ -111,6 +111,7 @@ export const fRadioUsers = [ KupTagNames.CELL, KupTagNames.DATA_TABLE, KupTagNames.FORM, + KupTagNames.INPUT_PANEL, KupTagNames.RADIO, KupTagNames.TREE, ]; From fce0e32431521dd71593641aeef2b0eb5b23f468 Mon Sep 17 00:00:00 2001 From: Valerio Como Date: Tue, 26 Mar 2024 11:34:26 +0000 Subject: [PATCH 2/5] chore: stencil e2e setup --- .devcontainer/Dockerfile | 7 +++++++ package.json | 2 ++ packages/ketchup/stencil.config.ts | 2 ++ 3 files changed, 11 insertions(+) diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile index 3fef81a215..88925ff34c 100644 --- a/.devcontainer/Dockerfile +++ b/.devcontainer/Dockerfile @@ -1,5 +1,12 @@ FROM mcr.microsoft.com/devcontainers/javascript-node:1-18-bullseye +# Install deps +RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ + && apt-get -y install --no-install-recommends chromium + +# Define env vars +ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium + # [Optional] Uncomment if you want to install an additional version of node using nvm ARG EXTRA_NODE_VERSION="lts/hydrogen" RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}" \ No newline at end of file diff --git a/package.json b/package.json index 8d0e7a1485..154b684b24 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,8 @@ "lerna": "lerna", "k:build": "lerna run build --scope @sme.up/ketchup --stream && lerna run build --scope @sme.up/ketchup-react --stream", "k:start": "lerna run start --scope @sme.up/ketchup --stream", + "k:test:all": "lerna run test --scope @sme.up/ketchup --stream", + "k:test:e2e": "lerna run test:e2e --scope @sme.up/ketchup --stream", "k:test:unit": "lerna run test:spec --scope @sme.up/ketchup --stream", "k:test:unitcov": "lerna run test:speccov --scope @sme.up/ketchup --stream", "ksc:serve": "lerna run serve --scope @sme.up/ketchup-showcase --stream", diff --git a/packages/ketchup/stencil.config.ts b/packages/ketchup/stencil.config.ts index 0376ca70bf..fb216f1920 100644 --- a/packages/ketchup/stencil.config.ts +++ b/packages/ketchup/stencil.config.ts @@ -36,6 +36,8 @@ export const config: Config = { }, }, collectCoverageFrom: ['src/**/*.ts'], + browserHeadless: 'new', + //browserArgs: ['--no-sandbox', '--disable-setuid-sandbox'], }, outputTargets: [ /*{ type: 'dist' },*/ From 3e3d1b04656c1157eb3d16c480d10f1ca19e20f1 Mon Sep 17 00:00:00 2001 From: Valerio Como Date: Tue, 26 Mar 2024 11:56:26 +0000 Subject: [PATCH 3/5] chore: first e2e test setup --- .devcontainer/devcontainer.json | 135 +++++++++--------- .../kup-input-panel/kup-input-panel.e2e.ts | 5 + 2 files changed, 73 insertions(+), 67 deletions(-) create mode 100644 packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index b42e2b899a..b7866aa4c3 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,80 +1,81 @@ // For format details, see https://aka.ms/devcontainer.json. For config options, see the // README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node { - "name": "@sme.up/ketchup-root", - // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile - "build": { - "dockerfile": "Dockerfile", - "args": { + "name": "@sme.up/ketchup-root", + // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile + "build": { + "dockerfile": "Dockerfile", + "args": { "VARIANT": "18-bullseye", "EXTRA_NODE_VERSION": "18.16" } - }, - // Features to add to the dev container. More info: https://containers.dev/features. - "features": { - // "ghcr.io/devcontainers/features/node:1": { - // "nodeGypDependencies": true, - // "version": "lts", - // "nvmVersion": "latest" - // }, - "ghcr.io/devcontainers-contrib/features/lerna-npm:1": { - "version": "latest" - }, - "ghcr.io/devcontainers-contrib/features/nx-npm:1": { - "version": "latest" - } - }, + }, + // Features to add to the dev container. More info: https://containers.dev/features. + "features": { + // "ghcr.io/devcontainers/features/node:1": { + // "nodeGypDependencies": true, + // "version": "lts", + // "nvmVersion": "latest" + // }, + "ghcr.io/devcontainers-contrib/features/lerna-npm:1": { + "version": "latest" + }, + "ghcr.io/devcontainers-contrib/features/nx-npm:1": { + "version": "latest" + } + }, - // Use 'forwardPorts' to make a list of ports inside the container available locally. - // "forwardPorts": [], + // Use 'forwardPorts' to make a list of ports inside the container available locally. + // "forwardPorts": [], - // Use 'postCreateCommand' to run commands after the container is created. - "postCreateCommand": "sh .devcontainer/scripts/postCreateCommand.sh", + // Use 'postCreateCommand' to run commands after the container is created. + "postCreateCommand": "sh .devcontainer/scripts/postCreateCommand.sh", - // Configure tool-specific properties. - "customizations": { - "vscode": { - "extensions": [ - "esbenp.prettier-vscode", - "dbaeumer.vscode-eslint", - "octref.vetur" - ], - "settings": { - "editor.formatOnSave": true, - "editor.codeActionsOnSave": { - "source.fixAll.eslint": "explicit" - }, - "eslint.validate": ["vue", "html", "javascript", "typescript"], - "eslint.run": "onSave", - "[typescriptreact]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" - }, - "[typescript]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" - }, - "[vue]": { - "editor.defaultFormatter": "octref.vetur" - }, - "[html]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" - }, - "[javascript]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" - }, - "[json]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" - }, - "[jsonc]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" - } - } - } - }, + // Configure tool-specific properties. + "customizations": { + "vscode": { + "extensions": [ + "esbenp.prettier-vscode", + "dbaeumer.vscode-eslint", + "firsttris.vscode-jest-runner", + "octref.vetur" + ], + "settings": { + "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit" + }, + "eslint.validate": ["vue", "html", "javascript", "typescript"], + "eslint.run": "onSave", + "[typescriptreact]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[typescript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[vue]": { + "editor.defaultFormatter": "octref.vetur" + }, + "[html]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[javascript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[json]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, + "[jsonc]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + } + } + } + }, "mounts": [ - "source=ketchup-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume", // deps volume - "source=ketchup-vscode-extensions,target=/root/.vscode-server/extensions,type=volume" // vscode extensions volume + "source=ketchup-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume", // deps volume + "source=ketchup-vscode-extensions,target=/root/.vscode-server/extensions,type=volume" // vscode extensions volume ] - // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. - // "remoteUser": "root" + // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. + // "remoteUser": "root" } diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts new file mode 100644 index 0000000000..cdcf939e73 --- /dev/null +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts @@ -0,0 +1,5 @@ +describe('kup-input-panel', () => { + it('it runs', () => { + expect(true).toBeTruthy(); + }); +}); From 1c55d7003f482e977e687f343f49478ec735237c Mon Sep 17 00:00:00 2001 From: Valerio Como Date: Tue, 26 Mar 2024 12:18:51 +0000 Subject: [PATCH 4/5] chore: second e2e test --- .../components/kup-input-panel/kup-input-panel.e2e.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts index cdcf939e73..9e9d60a2ad 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts @@ -1,5 +1,16 @@ +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(''); + const element = await page.find('kup-input-panel'); + expect(element).toHaveClass('hydrated'); + }); }); From c62a6d1c25719995b18bf9032ffc0c66e03e8b47 Mon Sep 17 00:00:00 2001 From: p-bemportato Date: Tue, 26 Mar 2024 16:21:48 +0000 Subject: [PATCH 5/5] feat: added e2e with two textfields --- .../kup-input-panel/kup-input-panel.e2e.ts | 79 +++++++++++++++++-- .../kup-input-panel/kup-input-panel.tsx | 6 +- 2 files changed, 77 insertions(+), 8 deletions(-) diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts index 9e9d60a2ad..e19e51b695 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts +++ b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.e2e.ts @@ -1,11 +1,6 @@ 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(); @@ -13,4 +8,78 @@ describe('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(''); + 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'); + } + }); }); diff --git a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx b/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx index 13b06772d5..09330cf442 100644 --- a/packages/ketchup/src/components/kup-input-panel/kup-input-panel.tsx +++ b/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 { )}

, ] - : this.data.rows?.map((row) => this.#renderRow(row)); + : this.data.rows.map((row) => this.#renderRow(row)); return (