wuic-framework-lib 1.7.12 → 1.7.13

package/fesm2022/{wuic-framework-lib-framework-docs.component-BLxQmoDZ.mjs → wuic-framework-lib-framework-docs.component-CX4DuW-Q.mjs}

@@ -16,12 +16,12 @@ import * as i1$3 from 'primeng/image';
 import { ImageModule } from 'primeng/image';
 import * as i8$1 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
-import { v as getThemeOptions, T as TranslationManagerService, U as UserInfoService } from './wuic-framework-lib-wuic-framework-lib-Ds_oD2In.mjs';
+import { w as getThemeOptions, T as TranslationManagerService, U as UserInfoService } from './wuic-framework-lib-wuic-framework-lib-CRUM1gc_.mjs';
 import * as i1 from '@angular/router';
 
 const frameworkDocsContent = {
     "version": "1.0.0",
-    "generatedAt": "2026-09-19T16:40:07.118Z",
+    "generatedAt": "2026-09-22T17:51:34.428Z",
     "groups": [
         {
             "id": "primi-passi",
@@ -1096,6 +1096,22 @@ const frameworkDocsContent = {
                         "developer",
                         "integration"
                     ]
+                },
+                {
+                    "slug": "testabilita-e2e",
+                    "title": "Testabilità e hook e2e",
+                    "titles": {
+                        "en-US": "Testability and e2e hooks",
+                        "fr-FR": "Testabilité et hooks e2e",
+                        "es-ES": "Testabilidad y hooks e2e",
+                        "de-DE": "Testbarkeit und e2e-Hooks"
+                    },
+                    "icon": "pi-check-square",
+                    "status": "stable",
+                    "audience": [
+                        "developer",
+                        "integration"
+                    ]
                 }
             ]
         },
@@ -7805,6 +7821,99 @@ const frameworkDocsContent = {
             ],
             "images": []
         },
+        {
+            "slug": "testabilita-e2e",
+            "lang": "it-IT",
+            "title": "Testabilità e hook e2e",
+            "description": "Testabilità e hook e2e - documentazione operativa e tecnica",
+            "audience": [
+                "developer",
+                "integration"
+            ],
+            "status": "stable",
+            "tags": [
+                "advanced"
+            ],
+            "keywords": [
+                "Testabilità e hook e2e"
+            ],
+            "toc": [
+                {
+                    "id": "sec_1",
+                    "title": "Scope"
+                },
+                {
+                    "id": "sec_2",
+                    "title": "Attributi DOM del field editor"
+                },
+                {
+                    "id": "sec_3",
+                    "title": "Quando il record è davvero caricato"
+                },
+                {
+                    "id": "sec_4",
+                    "title": "Ispezione del componente: `__wuicCmp`"
+                },
+                {
+                    "id": "sec_5",
+                    "title": "L'overlay di caricamento"
+                },
+                {
+                    "id": "sec_6",
+                    "title": "Cosa non usare come selettore"
+                },
+                {
+                    "id": "sec_7",
+                    "title": "Note operative"
+                }
+            ],
+            "sections": [
+                {
+                    "id": "overview",
+                    "title": "Overview",
+                    "html": "<h1>Testabilità e hook e2e</h1><p>Il framework genera l&#39;interfaccia dai metadati: non ci sono <code>id</code> scritti a mano su cui un test possa appoggiarsi, e le etichette visibili passano dalle traduzioni, quindi cambiano con la lingua dell&#39;utente. Per rendere l&#39;applicazione verificabile dall&#39;esterno, i componenti runtime espongono un contratto stabile fatto di <strong>attributi DOM</strong> e di un <strong>handle di ispezione</strong> del componente. Questa pagina elenca quel contratto e i segnali di &quot;pronto&quot; da attendere prima di interagire.</p><h2>Scope</h2><ul><li>Attributi DOM esposti da <code>wuic-field-editor</code> e da <code>wuic-parametric-dialog</code>.</li><li>Handle <code>__wuicCmp</code> per leggere lo stato runtime di un componente anche in build di produzione.</li><li>Segnali di completamento (record caricato, overlay di caricamento chiuso).</li><li>Selettori e pratiche da evitare.</li></ul><h2>Attributi DOM del field editor</h2><p>Ogni campo renderizzato nella form è ospitato da un <code>wuic-field-editor</code> che scrive sul proprio elemento host:</p><table><thead><tr><th>Attributo</th><th>Contenuto</th></tr></thead><tbody><tr><td><code>data-field-name</code></td><td>nome logico della colonna (<code>mc_nome_colonna</code>)</td></tr><tr><td><code>data-field-id</code></td><td><code>mc_id</code> della colonna, vuoto se non disponibile</td></tr><tr><td><code>data-widget-type</code></td><td>tipo di widget risolto (<code>mc_ui_column_type</code>)</td></tr><tr><td><code>data-editable</code></td><td><code>true</code>/<code>false</code> secondo i metadati e lo stato della form</td></tr><tr><td><code>data-hide-in-edit</code></td><td><code>true</code>/<code>false</code> (<code>mc_hide_in_edit</code>)</td></tr><tr><td><code>data-is-edit-form</code></td><td><code>true</code> in edit form, <code>false</code> in filtro/vista</td></tr><tr><td><code>data-has-record</code></td><td><code>true</code> quando l&#39;<strong>oggetto</strong> record è assegnato</td></tr><tr><td><code>data-field-value</code></td><td>valore corrente del campo, serializzato</td></tr></tbody></table><p>Il selettore di riferimento è quindi il nome del campo, non la posizione:</p><p>Snippet 1:</p><p><code>data-field-value</code> è una stringa: per i lookup espone il <code>value</code> annidato, per gli oggetti il JSON, per tutto il resto la conversione a stringa. Un test che vuole un numero o un booleano fa il cast (<code>Number(v)</code>, <code>v === &#39;true&#39;</code>).</p><p>Gli attributi sono scritti con <code>setAttribute</code> imperativo dentro <code>syncDomAttrs()</code>, invocato da <code>ngOnChanges</code> e <code>ngDoCheck</code>, <strong>non</strong> con <code>@HostBinding</code>: in Angular zoneless i getter dei binding vengono rivalutati solo quando il change detection tocca quel componente, e il primo read di un test arrivava prima.</p><h2>Quando il record è davvero caricato</h2><p><code>data-has-record</code> dice che l&#39;oggetto record <strong>esiste</strong>, non che i valori siano arrivati: la form costruisce lo scheletro e lo riempie quando risponde <code>getFlatRecordData</code>. Il segnale di &quot;valori arrivati&quot; sta sul dialogo:</p><table><thead><tr><th>Segnale</th><th>Significato</th></tr></thead><tbody><tr><td><code>wuic-field-editor[data-has-record=&quot;true&quot;]</code></td><td>scheletro pronto, valori non garantiti</td></tr><tr><td><code>wuic-parametric-dialog[data-record-loaded=&quot;true&quot;]</code></td><td>la risposta dei dati è arrivata ed è stata applicata</td></tr></tbody></table><p>I widget lazy — code editor, lookup — propagano il proprio valore un tick più tardi del dialogo. Un&#39;attesa robusta concede quindi una finestra breve dopo <code>data-record-loaded</code> perché il valore compaia, senza bloccarsi sui campi legittimamente vuoti:</p><p>Snippet 2:</p><h2>Ispezione del componente: <code>__wuicCmp</code></h2><p><code>window.ng.getComponent()</code> è il debug tooling di Angular e <strong>non esiste nelle build di produzione</strong>: un test che lo usa come unica via non fallisce per un difetto, fallisce perché lo strumento non c&#39;è proprio sull&#39;installazione che usano i clienti.</p><p>Per questo i componenti che i test devono poter interrogare espongono la propria istanza sull&#39;elemento host come <code>__wuicCmp</code>:</p><p>Snippet 3:</p><p>L&#39;handle <strong>non è sempre attaccato</strong>. Esporre l&#39;istanza di un componente la rende raggiungibile da qualunque script della pagina, e in un&#39;installazione di produzione non serve a nessuno:</p><ul><li>in sviluppo (<code>isDevMode()</code>) è sempre attivo, dove peraltro c&#39;è anche <code>window.ng</code>;</li><li>in produzione solo se la pagina ha dichiarato <code>globalThis.__wuicE2E = true</code> <strong>prima</strong> dell&#39;avvio dell&#39;applicazione.</li></ul><p>Il bootstrap dei test lo fa con uno script di init, non il prodotto:</p><p>Snippet 4:</p><p>Quando il flag è spento il costo è un confronto booleano per istanza; quando è acceso, un assegnamento di proprietà più una callback di pulizia alla distruzione del componente.</p><p>Espongono <code>__wuicCmp</code>: <code>list-grid</code>, <code>chart-list</code>, <code>kanban-list</code>, <code>scheduler-list</code>, <code>timeline-list</code>, <code>tree-list</code>, <code>carousel-list</code>, <code>spreadsheet-list-sf</code>, <code>map-list</code>, <code>designer</code>, <code>parametric-dialog</code>, <code>field-editor</code> e i dodici editor di campo, <code>meta-menu</code>, <code>notification-bell</code>, <code>bounded-repeater</code>, <code>pivot-builder</code>, <code>report-designer</code>, <code>workflow-designer</code>, <code>data-source</code>, <code>code-editor</code>, <code>app-settings-editor</code>.</p><p>Per rendere introspezionabile un componente nuovo basta una riga nella classe:</p><p>Snippet 5:</p><h2>L&#39;overlay di caricamento</h2><p>Mentre carica, la shell copre la pagina con <code>&lt;div class=&quot;busy-indicator&quot;&gt;</code>. Un click inviato in quel momento <strong>finisce sull&#39;overlay</strong>, e con Playwright <code>click({ force: true })</code> non fallisce: salta il controllo di raggiungibilità ma consegna comunque l&#39;evento all&#39;elemento sovrapposto. Il click sparisce senza errore e il test fallisce molto più avanti — su un dialogo che non si è mai aperto, una card che non si è mossa, un salvataggio che sembra non essere mai partito.</p><p>Prima di qualunque interazione a coordinate (click forzati, drag, <code>mouse.down</code>) si attende che la pagina sia libera:</p><p>Snippet 6:</p><p>Un controllo utile in diagnosi: <code>document.elementFromPoint(x, y)</code> sul bersaglio dice chi riceverebbe davvero il click.</p><h2>Cosa non usare come selettore</h2><ul><li><strong>Gli `id` generati da Angular</strong> (<code>_ngcontent-*</code>, <code>ng-reflect-*</code>): cambiano a ogni build e spariscono in produzione.</li><li><strong>Il testo visibile delle etichette</strong>: passa da <code>_wuic_translations</code> e cambia con la lingua dell&#39;utente. Su un&#39;installazione con traduzioni non ancora caricate si legge la chiave grezza (<code>menu.root.administration</code>), non l&#39;etichetta.</li><li><strong>La posizione in tabella</strong> (<code>nth-child</code>): l&#39;ordine delle colonne è metadato, e un <code>mcordine</code> diverso cambia il test.</li><li><strong>`window.ng.getComponent` come unica strada</strong>: vale solo in sviluppo (vedi sopra).</li></ul><h2>Note operative</h2><ul><li>Il flag <code>__wuicE2E</code> è un interruttore dei test: il prodotto non lo imposta mai, e nessuna funzionalità dipende dalla sua presenza.</li><li>Gli attributi DOM sono contratto pubblico: se un test si appoggia a un attributo nuovo, quell&#39;attributo va aggiunto al componente e documentato qui, non dedotto da una struttura interna.</li><li>Un <code>cmp</code> nullo restituito da <code>getComponent</code> significa &quot;non ispezionabile&quot;, non &quot;senza dati&quot;: distinguere i due casi nei messaggi d&#39;errore evita diagnosi che partono nella direzione sbagliata.</li></ul>",
+                    "codeSamples": [
+                        {
+                            "id": "code_1",
+                            "title": "Snippet 1",
+                            "language": "js",
+                            "code": "const host = document.querySelector('wuic-field-editor[data-field-name=\"StateProvinceID\"]');\nconst valore = host.getAttribute('data-field-value');"
+                        },
+                        {
+                            "id": "code_2",
+                            "title": "Snippet 2",
+                            "language": "js",
+                            "code": "await page.waitForFunction((campo) => {\n  const host = document.querySelector(`wuic-field-editor[data-field-name=\"${campo}\"]`);\n  if (!host || host.getAttribute('data-has-record') !== 'true') return false;\n  const dialogo = host.closest('wuic-parametric-dialog, .edit-form-content');\n  if (dialogo?.getAttribute('data-record-loaded') !== 'true') return false;\n  const valore = host.getAttribute('data-field-value');\n  return valore !== null && valore !== '';\n}, 'StateProvinceID', { timeout: 30000 });"
+                        },
+                        {
+                            "id": "code_3",
+                            "title": "Snippet 3",
+                            "language": "js",
+                            "code": "const host = document.querySelector('wuic-chart-list');\nconst cmp = host.__wuicCmp || window.ng?.getComponent?.(host);\nconst tipo = cmp?.chartRef?.chart?.config?.type;"
+                        },
+                        {
+                            "id": "code_4",
+                            "title": "Snippet 4",
+                            "language": "js",
+                            "code": "await page.addInitScript(() => { globalThis.__wuicE2E = true; });"
+                        },
+                        {
+                            "id": "code_5",
+                            "title": "Snippet 5",
+                            "language": "ts",
+                            "code": "import { exposeWuicCmpOnHost } from '../../helpers/wuic-cmp-handle';\n\nexport class MioComponente {\n  private readonly wuicCmpHandle = exposeWuicCmpOnHost(this);\n}"
+                        },
+                        {
+                            "id": "code_6",
+                            "title": "Snippet 6",
+                            "language": "js",
+                            "code": "await page.waitForFunction(() => {\n  const visibile = (n) => {\n    const s = getComputedStyle(n);\n    if (s.display === 'none' || s.visibility === 'hidden' || s.opacity === '0') return false;\n    const r = n.getBoundingClientRect();\n    return r.width > 0 && r.height > 0;\n  };\n  return !Array.from(document.querySelectorAll('.busy-indicator')).some(visibile);\n}, null, { timeout: 20000 });"
+                        }
+                    ]
+                }
+            ],
+            "images": []
+        },
         {
             "slug": "troubleshooting",
             "lang": "it-IT",
@@ -14537,6 +14646,99 @@ const frameworkDocsContent = {
             ],
             "images": []
         },
+        {
+            "slug": "testabilita-e2e",
+            "lang": "en-US",
+            "title": "Testability and e2e hooks",
+            "description": "Testability and e2e hooks - documentazione operativa e tecnica",
+            "audience": [
+                "developer",
+                "integration"
+            ],
+            "status": "stable",
+            "tags": [
+                "advanced"
+            ],
+            "keywords": [
+                "Testability and e2e hooks"
+            ],
+            "toc": [
+                {
+                    "id": "sec_1",
+                    "title": "Scope"
+                },
+                {
+                    "id": "sec_2",
+                    "title": "Field editor DOM attributes"
+                },
+                {
+                    "id": "sec_3",
+                    "title": "When the record is really loaded"
+                },
+                {
+                    "id": "sec_4",
+                    "title": "Component inspection: `__wuicCmp`"
+                },
+                {
+                    "id": "sec_5",
+                    "title": "The loading overlay"
+                },
+                {
+                    "id": "sec_6",
+                    "title": "What not to use as a selector"
+                },
+                {
+                    "id": "sec_7",
+                    "title": "Operational notes"
+                }
+            ],
+            "sections": [
+                {
+                    "id": "overview",
+                    "title": "Overview",
+                    "html": "<h1>Testability and e2e hooks</h1><p>The framework generates the UI from metadata: there are no hand-written <code>id</code>s for a test to hold on to, and the visible labels come from the translations, so they change with the user&#39;s language. To make the application verifiable from the outside, the runtime components expose a stable contract made of <strong>DOM attributes</strong> and a <strong>component inspection handle</strong>. This page lists that contract and the readiness signals to wait for before interacting.</p><h2>Scope</h2><ul><li>DOM attributes exposed by <code>wuic-field-editor</code> and <code>wuic-parametric-dialog</code>.</li><li>The <code>__wuicCmp</code> handle, to read a component&#39;s runtime state even in production builds.</li><li>Completion signals (record loaded, loading overlay gone).</li><li>Selectors and practices to avoid.</li></ul><h2>Field editor DOM attributes</h2><p>Every field rendered in the form is hosted by a <code>wuic-field-editor</code> that writes onto its own host element:</p><table><thead><tr><th>Attribute</th><th>Content</th></tr></thead><tbody><tr><td><code>data-field-name</code></td><td>logical column name (<code>mc_nome_colonna</code>)</td></tr><tr><td><code>data-field-id</code></td><td>the column&#39;s <code>mc_id</code>, empty when unavailable</td></tr><tr><td><code>data-widget-type</code></td><td>resolved widget type (<code>mc_ui_column_type</code>)</td></tr><tr><td><code>data-editable</code></td><td><code>true</code>/<code>false</code> per metadata and form state</td></tr><tr><td><code>data-hide-in-edit</code></td><td><code>true</code>/<code>false</code> (<code>mc_hide_in_edit</code>)</td></tr><tr><td><code>data-is-edit-form</code></td><td><code>true</code> in an edit form, <code>false</code> in filter/view</td></tr><tr><td><code>data-has-record</code></td><td><code>true</code> once the record <strong>object</strong> is assigned</td></tr><tr><td><code>data-field-value</code></td><td>the field&#39;s current value, serialized</td></tr></tbody></table><p>The anchor is therefore the field name, not the position:</p><p>Snippet 1:</p><p><code>data-field-value</code> is a string: for lookups it exposes the nested <code>value</code>, for objects the JSON, for everything else the string conversion. A test that needs a number or a boolean casts it (<code>Number(v)</code>, <code>v === &#39;true&#39;</code>).</p><p>The attributes are written with an imperative <code>setAttribute</code> inside <code>syncDomAttrs()</code>, called from <code>ngOnChanges</code> and <code>ngDoCheck</code>, <strong>not</strong> with <code>@HostBinding</code>: in zoneless Angular the binding getters are re-evaluated only when change detection touches that component, and a test&#39;s first read arrived earlier than that.</p><h2>When the record is really loaded</h2><p><code>data-has-record</code> says the record object <strong>exists</strong>, not that the values have arrived: the form builds the skeleton and fills it when <code>getFlatRecordData</code> responds. The &quot;values are in&quot; signal lives on the dialog:</p><table><thead><tr><th>Signal</th><th>Meaning</th></tr></thead><tbody><tr><td><code>wuic-field-editor[data-has-record=&quot;true&quot;]</code></td><td>skeleton ready, values not guaranteed</td></tr><tr><td><code>wuic-parametric-dialog[data-record-loaded=&quot;true&quot;]</code></td><td>the data response arrived and was applied</td></tr></tbody></table><p>Lazy widgets — code editor, lookup — propagate their value one tick after the dialog. A robust wait therefore allows a short window after <code>data-record-loaded</code> for the value to show up, without hanging on fields that are legitimately empty:</p><p>Snippet 2:</p><h2>Component inspection: <code>__wuicCmp</code></h2><p><code>window.ng.getComponent()</code> is Angular&#39;s debug tooling and <strong>does not exist in production builds</strong>: a test that relies on it as its only route does not fail because of a defect, it fails because the tool simply isn&#39;t there on the installation customers actually run.</p><p>That is why the components tests need to interrogate expose their own instance on the host element as <code>__wuicCmp</code>:</p><p>Snippet 3:</p><p>The handle is <strong>not always attached</strong>. Exposing a component instance makes it reachable from any script on the page, and on a production installation that serves nobody:</p><ul><li>in development (<code>isDevMode()</code>) it is always on, where <code>window.ng</code> exists anyway;</li><li>in production only if the page declared <code>globalThis.__wuicE2E = true</code> <strong>before</strong> the application booted.</li></ul><p>The test bootstrap does that with an init script, not the product:</p><p>Snippet 4:</p><p>With the flag off the cost is one boolean check per instance; with it on, one property assignment plus a cleanup callback when the component is destroyed.</p><p>Components exposing <code>__wuicCmp</code>: <code>list-grid</code>, <code>chart-list</code>, <code>kanban-list</code>, <code>scheduler-list</code>, <code>timeline-list</code>, <code>tree-list</code>, <code>carousel-list</code>, <code>spreadsheet-list-sf</code>, <code>map-list</code>, <code>designer</code>, <code>parametric-dialog</code>, <code>field-editor</code> and the twelve field editors, <code>meta-menu</code>, <code>notification-bell</code>, <code>bounded-repeater</code>, <code>pivot-builder</code>, <code>report-designer</code>, <code>workflow-designer</code>, <code>data-source</code>, <code>code-editor</code>, <code>app-settings-editor</code>.</p><p>Making a new component inspectable takes one line in the class:</p><p>Snippet 5:</p><h2>The loading overlay</h2><p>While loading, the shell covers the page with <code>&lt;div class=&quot;busy-indicator&quot;&gt;</code>. A click sent at that moment <strong>lands on the overlay</strong>, and with Playwright <code>click({ force: true })</code> does not fail: it skips the actionability check but still delivers the event to whatever sits on top. The click vanishes without an error and the test fails much later — on a dialog that never opened, a card that never moved, a save that seems never to have started.</p><p>Before any coordinate-based interaction (forced clicks, drags, <code>mouse.down</code>) wait for the page to be free:</p><p>Snippet 6:</p><p>A useful diagnostic: <code>document.elementFromPoint(x, y)</code> over the target tells you who would actually receive the click.</p><h2>What not to use as a selector</h2><ul><li><strong>Angular-generated `id`s</strong> (<code>_ngcontent-*</code>, <code>ng-reflect-*</code>): they change with every build and disappear in production.</li><li><strong>The visible label text</strong>: it comes from <code>_wuic_translations</code> and changes with the user&#39;s language. On an installation whose translations have not loaded you read the raw key (<code>menu.root.administration</code>), not the label.</li><li><strong>Position in a table</strong> (<code>nth-child</code>): column order is metadata, and a different <code>mcordine</code> changes the test.</li><li><strong>`window.ng.getComponent` as the only route</strong>: development only (see above).</li></ul><h2>Operational notes</h2><ul><li>The <code>__wuicE2E</code> flag is a test switch: the product never sets it, and no feature depends on its presence.</li><li>The DOM attributes are a public contract: if a test relies on a new attribute, that attribute is added to the component and documented here, not inferred from an internal structure.</li><li>A null <code>cmp</code> returned by <code>getComponent</code> means &quot;not inspectable&quot;, not &quot;no data&quot;: telling the two apart in error messages keeps a diagnosis from starting in the wrong direction.</li></ul>",
+                    "codeSamples": [
+                        {
+                            "id": "code_1",
+                            "title": "Snippet 1",
+                            "language": "js",
+                            "code": "const host = document.querySelector('wuic-field-editor[data-field-name=\"StateProvinceID\"]');\nconst valore = host.getAttribute('data-field-value');"
+                        },
+                        {
+                            "id": "code_2",
+                            "title": "Snippet 2",
+                            "language": "js",
+                            "code": "await page.waitForFunction((campo) => {\n  const host = document.querySelector(`wuic-field-editor[data-field-name=\"${campo}\"]`);\n  if (!host || host.getAttribute('data-has-record') !== 'true') return false;\n  const dialogo = host.closest('wuic-parametric-dialog, .edit-form-content');\n  if (dialogo?.getAttribute('data-record-loaded') !== 'true') return false;\n  const valore = host.getAttribute('data-field-value');\n  return valore !== null && valore !== '';\n}, 'StateProvinceID', { timeout: 30000 });"
+                        },
+                        {
+                            "id": "code_3",
+                            "title": "Snippet 3",
+                            "language": "js",
+                            "code": "const host = document.querySelector('wuic-chart-list');\nconst cmp = host.__wuicCmp || window.ng?.getComponent?.(host);\nconst tipo = cmp?.chartRef?.chart?.config?.type;"
+                        },
+                        {
+                            "id": "code_4",
+                            "title": "Snippet 4",
+                            "language": "js",
+                            "code": "await page.addInitScript(() => { globalThis.__wuicE2E = true; });"
+                        },
+                        {
+                            "id": "code_5",
+                            "title": "Snippet 5",
+                            "language": "ts",
+                            "code": "import { exposeWuicCmpOnHost } from '../../helpers/wuic-cmp-handle';\n\nexport class MioComponente {\n  private readonly wuicCmpHandle = exposeWuicCmpOnHost(this);\n}"
+                        },
+                        {
+                            "id": "code_6",
+                            "title": "Snippet 6",
+                            "language": "js",
+                            "code": "await page.waitForFunction(() => {\n  const visibile = (n) => {\n    const s = getComputedStyle(n);\n    if (s.display === 'none' || s.visibility === 'hidden' || s.opacity === '0') return false;\n    const r = n.getBoundingClientRect();\n    return r.width > 0 && r.height > 0;\n  };\n  return !Array.from(document.querySelectorAll('.busy-indicator')).some(visibile);\n}, null, { timeout: 20000 });"
+                        }
+                    ]
+                }
+            ],
+            "images": []
+        },
         {
             "slug": "troubleshooting",
             "lang": "en-US",
@@ -21269,6 +21471,99 @@ const frameworkDocsContent = {
             ],
             "images": []
         },
+        {
+            "slug": "testabilita-e2e",
+            "lang": "fr-FR",
+            "title": "Testabilité et hooks e2e",
+            "description": "Testabilité et hooks e2e - documentazione operativa e tecnica",
+            "audience": [
+                "developer",
+                "integration"
+            ],
+            "status": "stable",
+            "tags": [
+                "advanced"
+            ],
+            "keywords": [
+                "Testabilité et hooks e2e"
+            ],
+            "toc": [
+                {
+                    "id": "sec_1",
+                    "title": "Scope"
+                },
+                {
+                    "id": "sec_2",
+                    "title": "Attributs DOM du field editor"
+                },
+                {
+                    "id": "sec_3",
+                    "title": "Quand l'enregistrement est vraiment chargé"
+                },
+                {
+                    "id": "sec_4",
+                    "title": "Inspection du composant : `__wuicCmp`"
+                },
+                {
+                    "id": "sec_5",
+                    "title": "L'overlay de chargement"
+                },
+                {
+                    "id": "sec_6",
+                    "title": "Ce qu'il ne faut pas utiliser comme sélecteur"
+                },
+                {
+                    "id": "sec_7",
+                    "title": "Notes opérationnelles"
+                }
+            ],
+            "sections": [
+                {
+                    "id": "overview",
+                    "title": "Overview",
+                    "html": "<h1>Testabilité et hooks e2e</h1><p>Le framework génère l&#39;interface à partir des métadonnées : il n&#39;y a pas d&#39;<code>id</code> écrits à la main sur lesquels un test pourrait s&#39;appuyer, et les libellés visibles proviennent des traductions, donc ils changent avec la langue de l&#39;utilisateur. Pour rendre l&#39;application vérifiable de l&#39;extérieur, les composants runtime exposent un contrat stable fait d&#39;<strong>attributs DOM</strong> et d&#39;un <strong>handle d&#39;inspection</strong> du composant. Cette page liste ce contrat et les signaux de disponibilité à attendre avant d&#39;interagir.</p><h2>Scope</h2><ul><li>Attributs DOM exposés par <code>wuic-field-editor</code> et <code>wuic-parametric-dialog</code>.</li><li>Handle <code>__wuicCmp</code> pour lire l&#39;état runtime d&#39;un composant même en build de production.</li><li>Signaux d&#39;achèvement (enregistrement chargé, overlay de chargement disparu).</li><li>Sélecteurs et pratiques à éviter.</li></ul><h2>Attributs DOM du field editor</h2><p>Chaque champ rendu dans le formulaire est hébergé par un <code>wuic-field-editor</code> qui écrit sur son propre élément hôte :</p><table><thead><tr><th>Attribut</th><th>Contenu</th></tr></thead><tbody><tr><td><code>data-field-name</code></td><td>nom logique de la colonne (<code>mc_nome_colonna</code>)</td></tr><tr><td><code>data-field-id</code></td><td><code>mc_id</code> de la colonne, vide si indisponible</td></tr><tr><td><code>data-widget-type</code></td><td>type de widget résolu (<code>mc_ui_column_type</code>)</td></tr><tr><td><code>data-editable</code></td><td><code>true</code>/<code>false</code> selon les métadonnées et l&#39;état du formulaire</td></tr><tr><td><code>data-hide-in-edit</code></td><td><code>true</code>/<code>false</code> (<code>mc_hide_in_edit</code>)</td></tr><tr><td><code>data-is-edit-form</code></td><td><code>true</code> en formulaire d&#39;édition, <code>false</code> en filtre/vue</td></tr><tr><td><code>data-has-record</code></td><td><code>true</code> dès que l&#39;<strong>objet</strong> enregistrement est assigné</td></tr><tr><td><code>data-field-value</code></td><td>valeur courante du champ, sérialisée</td></tr></tbody></table><p>Le point d&#39;ancrage est donc le nom du champ, pas la position :</p><p>Snippet 1:</p><p><code>data-field-value</code> est une chaîne : pour les lookups elle expose le <code>value</code> imbriqué, pour les objets le JSON, pour tout le reste la conversion en chaîne. Un test qui attend un nombre ou un booléen fait le cast (<code>Number(v)</code>, <code>v === &#39;true&#39;</code>).</p><p>Les attributs sont écrits avec un <code>setAttribute</code> impératif dans <code>syncDomAttrs()</code>, appelé par <code>ngOnChanges</code> et <code>ngDoCheck</code>, et <strong>non</strong> avec <code>@HostBinding</code> : en Angular zoneless les getters des bindings ne sont réévalués que lorsque la détection de changements touche ce composant, et la première lecture d&#39;un test arrivait avant.</p><h2>Quand l&#39;enregistrement est vraiment chargé</h2><p><code>data-has-record</code> dit que l&#39;objet enregistrement <strong>existe</strong>, pas que les valeurs sont arrivées : le formulaire construit le squelette et le remplit quand <code>getFlatRecordData</code> répond. Le signal « valeurs arrivées » se trouve sur le dialogue :</p><table><thead><tr><th>Signal</th><th>Signification</th></tr></thead><tbody><tr><td><code>wuic-field-editor[data-has-record=&quot;true&quot;]</code></td><td>squelette prêt, valeurs non garanties</td></tr><tr><td><code>wuic-parametric-dialog[data-record-loaded=&quot;true&quot;]</code></td><td>la réponse des données est arrivée et a été appliquée</td></tr></tbody></table><p>Les widgets lazy — code editor, lookup — propagent leur valeur un tick après le dialogue. Une attente robuste accorde donc une courte fenêtre après <code>data-record-loaded</code> pour que la valeur apparaisse, sans se bloquer sur les champs légitimement vides :</p><p>Snippet 2:</p><h2>Inspection du composant : <code>__wuicCmp</code></h2><p><code>window.ng.getComponent()</code> est l&#39;outillage de debug d&#39;Angular et <strong>n&#39;existe pas dans les builds de production</strong> : un test qui s&#39;y fie comme unique voie n&#39;échoue pas à cause d&#39;un défaut, il échoue parce que l&#39;outil n&#39;est tout simplement pas là sur l&#39;installation que les clients utilisent.</p><p>C&#39;est pourquoi les composants que les tests doivent pouvoir interroger exposent leur instance sur l&#39;élément hôte sous le nom <code>__wuicCmp</code> :</p><p>Snippet 3:</p><p>Le handle n&#39;est <strong>pas toujours attaché</strong>. Exposer l&#39;instance d&#39;un composant la rend accessible depuis n&#39;importe quel script de la page, et sur une installation de production cela ne sert à personne :</p><ul><li>en développement (<code>isDevMode()</code>) il est toujours actif, là où <code>window.ng</code> existe de toute façon ;</li><li>en production uniquement si la page a déclaré <code>globalThis.__wuicE2E = true</code> <strong>avant</strong> le démarrage de l&#39;application.</li></ul><p>C&#39;est le bootstrap des tests qui le fait, via un script d&#39;init, pas le produit :</p><p>Snippet 4:</p><p>Quand le drapeau est éteint, le coût est une comparaison booléenne par instance ; quand il est allumé, une affectation de propriété plus un callback de nettoyage à la destruction du composant.</p><p>Composants exposant <code>__wuicCmp</code> : <code>list-grid</code>, <code>chart-list</code>, <code>kanban-list</code>, <code>scheduler-list</code>, <code>timeline-list</code>, <code>tree-list</code>, <code>carousel-list</code>, <code>spreadsheet-list-sf</code>, <code>map-list</code>, <code>designer</code>, <code>parametric-dialog</code>, <code>field-editor</code> et les douze éditeurs de champ, <code>meta-menu</code>, <code>notification-bell</code>, <code>bounded-repeater</code>, <code>pivot-builder</code>, <code>report-designer</code>, <code>workflow-designer</code>, <code>data-source</code>, <code>code-editor</code>, <code>app-settings-editor</code>.</p><p>Rendre inspectable un nouveau composant tient en une ligne dans la classe :</p><p>Snippet 5:</p><h2>L&#39;overlay de chargement</h2><p>Pendant le chargement, le shell recouvre la page avec <code>&lt;div class=&quot;busy-indicator&quot;&gt;</code>. Un clic envoyé à ce moment-là <strong>atterrit sur l&#39;overlay</strong>, et avec Playwright <code>click({ force: true })</code> n&#39;échoue pas : il saute le contrôle d&#39;actionabilité mais livre quand même l&#39;événement à l&#39;élément superposé. Le clic disparaît sans erreur et le test échoue bien plus loin — sur un dialogue qui ne s&#39;est jamais ouvert, une carte qui n&#39;a pas bougé, un enregistrement qui semble n&#39;être jamais parti.</p><p>Avant toute interaction par coordonnées (clics forcés, drags, <code>mouse.down</code>), on attend que la page soit libre :</p><p>Snippet 6:</p><p>Un contrôle utile en diagnostic : <code>document.elementFromPoint(x, y)</code> sur la cible indique qui recevrait réellement le clic.</p><h2>Ce qu&#39;il ne faut pas utiliser comme sélecteur</h2><ul><li><strong>Les `id` générés par Angular</strong> (<code>_ngcontent-*</code>, <code>ng-reflect-*</code>) : ils changent à chaque build et disparaissent en production.</li><li><strong>Le texte visible des libellés</strong> : il provient de <code>_wuic_translations</code> et change avec la langue de l&#39;utilisateur. Sur une installation dont les traductions ne sont pas chargées, on lit la clé brute (<code>menu.root.administration</code>), pas le libellé.</li><li><strong>La position dans un tableau</strong> (<code>nth-child</code>) : l&#39;ordre des colonnes est une métadonnée, et un <code>mcordine</code> différent change le test.</li><li><strong>`window.ng.getComponent` comme seule voie</strong> : valable en développement uniquement (voir ci-dessus).</li></ul><h2>Notes opérationnelles</h2><ul><li>Le drapeau <code>__wuicE2E</code> est un interrupteur des tests : le produit ne le positionne jamais, et aucune fonctionnalité ne dépend de sa présence.</li><li>Les attributs DOM sont un contrat public : si un test s&#39;appuie sur un nouvel attribut, cet attribut est ajouté au composant et documenté ici, pas déduit d&#39;une structure interne.</li><li>Un <code>cmp</code> nul renvoyé par <code>getComponent</code> signifie « non inspectable », pas « sans données » : distinguer les deux cas dans les messages d&#39;erreur évite qu&#39;un diagnostic parte dans la mauvaise direction.</li></ul>",
+                    "codeSamples": [
+                        {
+                            "id": "code_1",
+                            "title": "Snippet 1",
+                            "language": "js",
+                            "code": "const host = document.querySelector('wuic-field-editor[data-field-name=\"StateProvinceID\"]');\nconst valore = host.getAttribute('data-field-value');"
+                        },
+                        {
+                            "id": "code_2",
+                            "title": "Snippet 2",
+                            "language": "js",
+                            "code": "await page.waitForFunction((campo) => {\n  const host = document.querySelector(`wuic-field-editor[data-field-name=\"${campo}\"]`);\n  if (!host || host.getAttribute('data-has-record') !== 'true') return false;\n  const dialogo = host.closest('wuic-parametric-dialog, .edit-form-content');\n  if (dialogo?.getAttribute('data-record-loaded') !== 'true') return false;\n  const valore = host.getAttribute('data-field-value');\n  return valore !== null && valore !== '';\n}, 'StateProvinceID', { timeout: 30000 });"
+                        },
+                        {
+                            "id": "code_3",
+                            "title": "Snippet 3",
+                            "language": "js",
+                            "code": "const host = document.querySelector('wuic-chart-list');\nconst cmp = host.__wuicCmp || window.ng?.getComponent?.(host);\nconst tipo = cmp?.chartRef?.chart?.config?.type;"
+                        },
+                        {
+                            "id": "code_4",
+                            "title": "Snippet 4",
+                            "language": "js",
+                            "code": "await page.addInitScript(() => { globalThis.__wuicE2E = true; });"
+                        },
+                        {
+                            "id": "code_5",
+                            "title": "Snippet 5",
+                            "language": "ts",
+                            "code": "import { exposeWuicCmpOnHost } from '../../helpers/wuic-cmp-handle';\n\nexport class MioComponente {\n  private readonly wuicCmpHandle = exposeWuicCmpOnHost(this);\n}"
+                        },
+                        {
+                            "id": "code_6",
+                            "title": "Snippet 6",
+                            "language": "js",
+                            "code": "await page.waitForFunction(() => {\n  const visibile = (n) => {\n    const s = getComputedStyle(n);\n    if (s.display === 'none' || s.visibility === 'hidden' || s.opacity === '0') return false;\n    const r = n.getBoundingClientRect();\n    return r.width > 0 && r.height > 0;\n  };\n  return !Array.from(document.querySelectorAll('.busy-indicator')).some(visibile);\n}, null, { timeout: 20000 });"
+                        }
+                    ]
+                }
+            ],
+            "images": []
+        },
         {
             "slug": "troubleshooting",
             "lang": "fr-FR",
@@ -28001,6 +28296,99 @@ const frameworkDocsContent = {
             ],
             "images": []
         },
+        {
+            "slug": "testabilita-e2e",
+            "lang": "es-ES",
+            "title": "Testabilidad y hooks e2e",
+            "description": "Testabilidad y hooks e2e - documentazione operativa e tecnica",
+            "audience": [
+                "developer",
+                "integration"
+            ],
+            "status": "stable",
+            "tags": [
+                "advanced"
+            ],
+            "keywords": [
+                "Testabilidad y hooks e2e"
+            ],
+            "toc": [
+                {
+                    "id": "sec_1",
+                    "title": "Scope"
+                },
+                {
+                    "id": "sec_2",
+                    "title": "Atributos DOM del field editor"
+                },
+                {
+                    "id": "sec_3",
+                    "title": "Cuándo está realmente cargado el registro"
+                },
+                {
+                    "id": "sec_4",
+                    "title": "Inspección del componente: `__wuicCmp`"
+                },
+                {
+                    "id": "sec_5",
+                    "title": "El overlay de carga"
+                },
+                {
+                    "id": "sec_6",
+                    "title": "Qué no usar como selector"
+                },
+                {
+                    "id": "sec_7",
+                    "title": "Notas operativas"
+                }
+            ],
+            "sections": [
+                {
+                    "id": "overview",
+                    "title": "Overview",
+                    "html": "<h1>Testabilidad y hooks e2e</h1><p>El framework genera la interfaz a partir de los metadatos: no hay <code>id</code> escritos a mano en los que un test pueda apoyarse, y las etiquetas visibles vienen de las traducciones, así que cambian con el idioma del usuario. Para que la aplicación sea verificable desde fuera, los componentes de runtime exponen un contrato estable formado por <strong>atributos DOM</strong> y un <strong>handle de inspección</strong> del componente. Esta página enumera ese contrato y las señales de &quot;listo&quot; que hay que esperar antes de interactuar.</p><h2>Scope</h2><ul><li>Atributos DOM expuestos por <code>wuic-field-editor</code> y <code>wuic-parametric-dialog</code>.</li><li>Handle <code>__wuicCmp</code> para leer el estado de runtime de un componente incluso en builds de producción.</li><li>Señales de finalización (registro cargado, overlay de carga cerrado).</li><li>Selectores y prácticas que conviene evitar.</li></ul><h2>Atributos DOM del field editor</h2><p>Cada campo renderizado en el formulario está alojado en un <code>wuic-field-editor</code> que escribe sobre su propio elemento host:</p><table><thead><tr><th>Atributo</th><th>Contenido</th></tr></thead><tbody><tr><td><code>data-field-name</code></td><td>nombre lógico de la columna (<code>mc_nome_colonna</code>)</td></tr><tr><td><code>data-field-id</code></td><td><code>mc_id</code> de la columna, vacío si no está disponible</td></tr><tr><td><code>data-widget-type</code></td><td>tipo de widget resuelto (<code>mc_ui_column_type</code>)</td></tr><tr><td><code>data-editable</code></td><td><code>true</code>/<code>false</code> según metadatos y estado del formulario</td></tr><tr><td><code>data-hide-in-edit</code></td><td><code>true</code>/<code>false</code> (<code>mc_hide_in_edit</code>)</td></tr><tr><td><code>data-is-edit-form</code></td><td><code>true</code> en formulario de edición, <code>false</code> en filtro/vista</td></tr><tr><td><code>data-has-record</code></td><td><code>true</code> cuando el <strong>objeto</strong> registro está asignado</td></tr><tr><td><code>data-field-value</code></td><td>valor actual del campo, serializado</td></tr></tbody></table><p>El ancla es por tanto el nombre del campo, no la posición:</p><p>Snippet 1:</p><p><code>data-field-value</code> es una cadena: para los lookups expone el <code>value</code> anidado, para los objetos el JSON, y para todo lo demás la conversión a cadena. Un test que necesita un número o un booleano hace el cast (<code>Number(v)</code>, <code>v === &#39;true&#39;</code>).</p><p>Los atributos se escriben con un <code>setAttribute</code> imperativo dentro de <code>syncDomAttrs()</code>, invocado desde <code>ngOnChanges</code> y <code>ngDoCheck</code>, y <strong>no</strong> con <code>@HostBinding</code>: en Angular zoneless los getters de los bindings se reevalúan solo cuando la detección de cambios toca ese componente, y la primera lectura de un test llegaba antes.</p><h2>Cuándo está realmente cargado el registro</h2><p><code>data-has-record</code> dice que el objeto registro <strong>existe</strong>, no que hayan llegado los valores: el formulario construye el esqueleto y lo rellena cuando responde <code>getFlatRecordData</code>. La señal de &quot;valores llegados&quot; está en el diálogo:</p><table><thead><tr><th>Señal</th><th>Significado</th></tr></thead><tbody><tr><td><code>wuic-field-editor[data-has-record=&quot;true&quot;]</code></td><td>esqueleto listo, valores no garantizados</td></tr><tr><td><code>wuic-parametric-dialog[data-record-loaded=&quot;true&quot;]</code></td><td>la respuesta de datos llegó y se aplicó</td></tr></tbody></table><p>Los widgets lazy — code editor, lookup — propagan su valor un tick después del diálogo. Una espera robusta concede por tanto una ventana breve tras <code>data-record-loaded</code> para que el valor aparezca, sin bloquearse en los campos legítimamente vacíos:</p><p>Snippet 2:</p><h2>Inspección del componente: <code>__wuicCmp</code></h2><p><code>window.ng.getComponent()</code> es el debug tooling de Angular y <strong>no existe en las builds de producción</strong>: un test que lo usa como única vía no falla por un defecto, falla porque la herramienta sencillamente no está en la instalación que usan los clientes.</p><p>Por eso los componentes que los tests deben poder interrogar exponen su propia instancia en el elemento host como <code>__wuicCmp</code>:</p><p>Snippet 3:</p><p>El handle <strong>no siempre está adjunto</strong>. Exponer la instancia de un componente la hace alcanzable desde cualquier script de la página, y en una instalación de producción eso no le sirve a nadie:</p><ul><li>en desarrollo (<code>isDevMode()</code>) está siempre activo, donde además existe <code>window.ng</code>;</li><li>en producción solo si la página declaró <code>globalThis.__wuicE2E = true</code> <strong>antes</strong> del arranque de la aplicación.</li></ul><p>Lo hace el bootstrap de los tests con un script de init, no el producto:</p><p>Snippet 4:</p><p>Con el flag apagado el coste es una comparación booleana por instancia; encendido, una asignación de propiedad más un callback de limpieza al destruir el componente.</p><p>Exponen <code>__wuicCmp</code>: <code>list-grid</code>, <code>chart-list</code>, <code>kanban-list</code>, <code>scheduler-list</code>, <code>timeline-list</code>, <code>tree-list</code>, <code>carousel-list</code>, <code>spreadsheet-list-sf</code>, <code>map-list</code>, <code>designer</code>, <code>parametric-dialog</code>, <code>field-editor</code> y los doce editores de campo, <code>meta-menu</code>, <code>notification-bell</code>, <code>bounded-repeater</code>, <code>pivot-builder</code>, <code>report-designer</code>, <code>workflow-designer</code>, <code>data-source</code>, <code>code-editor</code>, <code>app-settings-editor</code>.</p><p>Hacer inspeccionable un componente nuevo es una línea en la clase:</p><p>Snippet 5:</p><h2>El overlay de carga</h2><p>Mientras carga, el shell cubre la página con <code>&lt;div class=&quot;busy-indicator&quot;&gt;</code>. Un clic enviado en ese momento <strong>acaba en el overlay</strong>, y con Playwright <code>click({ force: true })</code> no falla: salta la comprobación de actionability pero entrega igualmente el evento al elemento superpuesto. El clic desaparece sin error y el test falla mucho más adelante — en un diálogo que nunca se abrió, una tarjeta que no se movió, un guardado que parece no haber salido nunca.</p><p>Antes de cualquier interacción por coordenadas (clics forzados, drags, <code>mouse.down</code>) se espera a que la página esté libre:</p><p>Snippet 6:</p><p>Una comprobación útil en diagnóstico: <code>document.elementFromPoint(x, y)</code> sobre el objetivo dice quién recibiría realmente el clic.</p><h2>Qué no usar como selector</h2><ul><li><strong>Los `id` generados por Angular</strong> (<code>_ngcontent-*</code>, <code>ng-reflect-*</code>): cambian en cada build y desaparecen en producción.</li><li><strong>El texto visible de las etiquetas</strong>: viene de <code>_wuic_translations</code> y cambia con el idioma del usuario. En una instalación cuyas traducciones no se han cargado se lee la clave en bruto (<code>menu.root.administration</code>), no la etiqueta.</li><li><strong>La posición en una tabla</strong> (<code>nth-child</code>): el orden de las columnas es metadato, y un <code>mcordine</code> distinto cambia el test.</li><li><strong>`window.ng.getComponent` como única vía</strong>: solo vale en desarrollo (ver arriba).</li></ul><h2>Notas operativas</h2><ul><li>El flag <code>__wuicE2E</code> es un interruptor de los tests: el producto no lo establece nunca, y ninguna funcionalidad depende de su presencia.</li><li>Los atributos DOM son contrato público: si un test se apoya en un atributo nuevo, ese atributo se añade al componente y se documenta aquí, no se deduce de una estructura interna.</li><li>Un <code>cmp</code> nulo devuelto por <code>getComponent</code> significa &quot;no inspeccionable&quot;, no &quot;sin datos&quot;: distinguir ambos casos en los mensajes de error evita que un diagnóstico arranque en la dirección equivocada.</li></ul>",
+                    "codeSamples": [
+                        {
+                            "id": "code_1",
+                            "title": "Snippet 1",
+                            "language": "js",
+                            "code": "const host = document.querySelector('wuic-field-editor[data-field-name=\"StateProvinceID\"]');\nconst valore = host.getAttribute('data-field-value');"
+                        },
+                        {
+                            "id": "code_2",
+                            "title": "Snippet 2",
+                            "language": "js",
+                            "code": "await page.waitForFunction((campo) => {\n  const host = document.querySelector(`wuic-field-editor[data-field-name=\"${campo}\"]`);\n  if (!host || host.getAttribute('data-has-record') !== 'true') return false;\n  const dialogo = host.closest('wuic-parametric-dialog, .edit-form-content');\n  if (dialogo?.getAttribute('data-record-loaded') !== 'true') return false;\n  const valore = host.getAttribute('data-field-value');\n  return valore !== null && valore !== '';\n}, 'StateProvinceID', { timeout: 30000 });"
+                        },
+                        {
+                            "id": "code_3",
+                            "title": "Snippet 3",
+                            "language": "js",
+                            "code": "const host = document.querySelector('wuic-chart-list');\nconst cmp = host.__wuicCmp || window.ng?.getComponent?.(host);\nconst tipo = cmp?.chartRef?.chart?.config?.type;"
+                        },
+                        {
+                            "id": "code_4",
+                            "title": "Snippet 4",
+                            "language": "js",
+                            "code": "await page.addInitScript(() => { globalThis.__wuicE2E = true; });"
+                        },
+                        {
+                            "id": "code_5",
+                            "title": "Snippet 5",
+                            "language": "ts",
+                            "code": "import { exposeWuicCmpOnHost } from '../../helpers/wuic-cmp-handle';\n\nexport class MioComponente {\n  private readonly wuicCmpHandle = exposeWuicCmpOnHost(this);\n}"
+                        },
+                        {
+                            "id": "code_6",
+                            "title": "Snippet 6",
+                            "language": "js",
+                            "code": "await page.waitForFunction(() => {\n  const visibile = (n) => {\n    const s = getComputedStyle(n);\n    if (s.display === 'none' || s.visibility === 'hidden' || s.opacity === '0') return false;\n    const r = n.getBoundingClientRect();\n    return r.width > 0 && r.height > 0;\n  };\n  return !Array.from(document.querySelectorAll('.busy-indicator')).some(visibile);\n}, null, { timeout: 20000 });"
+                        }
+                    ]
+                }
+            ],
+            "images": []
+        },
         {
             "slug": "troubleshooting",
             "lang": "es-ES",
@@ -34733,6 +35121,99 @@ const frameworkDocsContent = {
             ],
             "images": []
         },
+        {
+            "slug": "testabilita-e2e",
+            "lang": "de-DE",
+            "title": "Testbarkeit und e2e-Hooks",
+            "description": "Testbarkeit und e2e-Hooks - documentazione operativa e tecnica",
+            "audience": [
+                "developer",
+                "integration"
+            ],
+            "status": "stable",
+            "tags": [
+                "advanced"
+            ],
+            "keywords": [
+                "Testbarkeit und e2e-Hooks"
+            ],
+            "toc": [
+                {
+                    "id": "sec_1",
+                    "title": "Geltungsbereich"
+                },
+                {
+                    "id": "sec_2",
+                    "title": "DOM-Attribute des Field Editors"
+                },
+                {
+                    "id": "sec_3",
+                    "title": "Wann der Datensatz wirklich geladen ist"
+                },
+                {
+                    "id": "sec_4",
+                    "title": "Komponenten-Inspektion: `__wuicCmp`"
+                },
+                {
+                    "id": "sec_5",
+                    "title": "Das Lade-Overlay"
+                },
+                {
+                    "id": "sec_6",
+                    "title": "Was nicht als Selektor taugt"
+                },
+                {
+                    "id": "sec_7",
+                    "title": "Betriebshinweise"
+                }
+            ],
+            "sections": [
+                {
+                    "id": "overview",
+                    "title": "Overview",
+                    "html": "<h1>Testbarkeit und e2e-Hooks</h1><p>Das Framework erzeugt die Oberfläche aus Metadaten: Es gibt keine handgeschriebenen <code>id</code>s, an denen sich ein Test festhalten könnte, und die sichtbaren Beschriftungen kommen aus den Übersetzungen, ändern sich also mit der Sprache des Benutzers. Damit die Anwendung von außen prüfbar ist, stellen die Runtime-Komponenten einen stabilen Vertrag bereit: <strong>DOM-Attribute</strong> und ein <strong>Inspektions-Handle</strong> der Komponente. Diese Seite listet diesen Vertrag und die Bereitschaftssignale auf, die vor jeder Interaktion abzuwarten sind.</p><h2>Geltungsbereich</h2><ul><li>DOM-Attribute von <code>wuic-field-editor</code> und <code>wuic-parametric-dialog</code>.</li><li>Handle <code>__wuicCmp</code>, um den Laufzeitzustand einer Komponente auch in Production-Builds zu lesen.</li><li>Abschlusssignale (Datensatz geladen, Lade-Overlay verschwunden).</li><li>Selektoren und Praktiken, die zu vermeiden sind.</li></ul><h2>DOM-Attribute des Field Editors</h2><p>Jedes im Formular gerenderte Feld sitzt in einem <code>wuic-field-editor</code>, der auf sein eigenes Host-Element schreibt:</p><table><thead><tr><th>Attribut</th><th>Inhalt</th></tr></thead><tbody><tr><td><code>data-field-name</code></td><td>logischer Spaltenname (<code>mc_nome_colonna</code>)</td></tr><tr><td><code>data-field-id</code></td><td><code>mc_id</code> der Spalte, leer wenn nicht verfügbar</td></tr><tr><td><code>data-widget-type</code></td><td>aufgelöster Widget-Typ (<code>mc_ui_column_type</code>)</td></tr><tr><td><code>data-editable</code></td><td><code>true</code>/<code>false</code> gemäß Metadaten und Formularzustand</td></tr><tr><td><code>data-hide-in-edit</code></td><td><code>true</code>/<code>false</code> (<code>mc_hide_in_edit</code>)</td></tr><tr><td><code>data-is-edit-form</code></td><td><code>true</code> im Bearbeitungsformular, <code>false</code> in Filter/Ansicht</td></tr><tr><td><code>data-has-record</code></td><td><code>true</code>, sobald das Datensatz-<strong>Objekt</strong> zugewiesen ist</td></tr><tr><td><code>data-field-value</code></td><td>aktueller Feldwert, serialisiert</td></tr></tbody></table><p>Der Anker ist also der Feldname, nicht die Position:</p><p>Snippet 1:</p><p><code>data-field-value</code> ist ein String: bei Lookups wird der verschachtelte <code>value</code> ausgegeben, bei Objekten das JSON, sonst die String-Konvertierung. Ein Test, der eine Zahl oder einen Boolean braucht, castet selbst (<code>Number(v)</code>, <code>v === &#39;true&#39;</code>).</p><p>Die Attribute werden mit einem imperativen <code>setAttribute</code> in <code>syncDomAttrs()</code> geschrieben, aufgerufen von <code>ngOnChanges</code> und <code>ngDoCheck</code>, und <strong>nicht</strong> über <code>@HostBinding</code>: in zoneless Angular werden Binding-Getter nur dann neu ausgewertet, wenn die Change Detection diese Komponente berührt — und der erste Lesezugriff eines Tests kam früher.</p><h2>Wann der Datensatz wirklich geladen ist</h2><p><code>data-has-record</code> sagt, dass das Datensatz-Objekt <strong>existiert</strong>, nicht dass die Werte angekommen sind: Das Formular baut das Gerüst und füllt es, sobald <code>getFlatRecordData</code> antwortet. Das Signal „Werte da&quot; sitzt am Dialog:</p><table><thead><tr><th>Signal</th><th>Bedeutung</th></tr></thead><tbody><tr><td><code>wuic-field-editor[data-has-record=&quot;true&quot;]</code></td><td>Gerüst bereit, Werte nicht garantiert</td></tr><tr><td><code>wuic-parametric-dialog[data-record-loaded=&quot;true&quot;]</code></td><td>die Datenantwort ist angekommen und wurde angewendet</td></tr></tbody></table><p>Lazy-Widgets — Code Editor, Lookup — propagieren ihren Wert einen Tick nach dem Dialog. Ein robustes Warten gewährt deshalb nach <code>data-record-loaded</code> ein kurzes Fenster, in dem der Wert erscheinen darf, ohne bei legitim leeren Feldern hängen zu bleiben:</p><p>Snippet 2:</p><h2>Komponenten-Inspektion: <code>__wuicCmp</code></h2><p><code>window.ng.getComponent()</code> ist das Debug-Tooling von Angular und <strong>existiert in Production-Builds nicht</strong>: Ein Test, der sich allein darauf stützt, scheitert nicht an einem Defekt, sondern daran, dass das Werkzeug auf der Installation, die Kunden tatsächlich betreiben, schlicht fehlt.</p><p>Deshalb legen die Komponenten, die Tests abfragen müssen, ihre eigene Instanz als <code>__wuicCmp</code> auf das Host-Element:</p><p>Snippet 3:</p><p>Das Handle ist <strong>nicht immer gesetzt</strong>. Eine Komponenteninstanz offenzulegen macht sie für jedes Skript der Seite erreichbar, und auf einer Produktionsinstallation nützt das niemandem:</p><ul><li>in der Entwicklung (<code>isDevMode()</code>) immer, dort gibt es <code>window.ng</code> ohnehin;</li><li>in Produktion nur, wenn die Seite <code>globalThis.__wuicE2E = true</code> <strong>vor</strong> dem Start der Anwendung gesetzt hat.</li></ul><p>Das erledigt der Test-Bootstrap über ein Init-Skript, nicht das Produkt:</p><p>Snippet 4:</p><p>Ist das Flag aus, kostet es einen booleschen Vergleich pro Instanz; ist es an, eine Property-Zuweisung plus einen Aufräum-Callback beim Zerstören der Komponente.</p><p><code>__wuicCmp</code> stellen bereit: <code>list-grid</code>, <code>chart-list</code>, <code>kanban-list</code>, <code>scheduler-list</code>, <code>timeline-list</code>, <code>tree-list</code>, <code>carousel-list</code>, <code>spreadsheet-list-sf</code>, <code>map-list</code>, <code>designer</code>, <code>parametric-dialog</code>, <code>field-editor</code> und die zwölf Feldeditoren, <code>meta-menu</code>, <code>notification-bell</code>, <code>bounded-repeater</code>, <code>pivot-builder</code>, <code>report-designer</code>, <code>workflow-designer</code>, <code>data-source</code>, <code>code-editor</code>, <code>app-settings-editor</code>.</p><p>Eine neue Komponente inspizierbar zu machen ist eine Zeile in der Klasse:</p><p>Snippet 5:</p><h2>Das Lade-Overlay</h2><p>Während des Ladens legt die Shell <code>&lt;div class=&quot;busy-indicator&quot;&gt;</code> über die ganze Seite. Ein in diesem Moment gesendeter Klick <strong>landet auf dem Overlay</strong>, und mit Playwright scheitert <code>click({ force: true })</code> nicht: Es überspringt die Actionability-Prüfung, liefert das Event aber trotzdem an das darüberliegende Element aus. Der Klick verschwindet ohne Fehler, und der Test scheitert viel später — an einem Dialog, der nie aufging, einer Karte, die sich nie bewegte, einem Speichern, das nie gestartet zu sein scheint.</p><p>Vor jeder koordinatenbasierten Interaktion (erzwungene Klicks, Drags, <code>mouse.down</code>) wird abgewartet, bis die Seite frei ist:</p><p>Snippet 6:</p><p>Nützlich in der Diagnose: <code>document.elementFromPoint(x, y)</code> über dem Ziel sagt, wer den Klick tatsächlich bekäme.</p><h2>Was nicht als Selektor taugt</h2><ul><li><strong>Von Angular erzeugte `id`s</strong> (<code>_ngcontent-*</code>, <code>ng-reflect-*</code>): Sie ändern sich mit jedem Build und verschwinden in Produktion.</li><li><strong>Der sichtbare Text der Beschriftungen</strong>: Er kommt aus <code>_wuic_translations</code> und ändert sich mit der Sprache des Benutzers. Auf einer Installation mit nicht geladenen Übersetzungen liest man den rohen Schlüssel (<code>menu.root.administration</code>), nicht die Beschriftung.</li><li><strong>Die Position in einer Tabelle</strong> (<code>nth-child</code>): Die Spaltenreihenfolge ist Metadatum, und ein anderes <code>mcordine</code> verändert den Test.</li><li><strong>`window.ng.getComponent` als einziger Weg</strong>: gilt nur in der Entwicklung (siehe oben).</li></ul><h2>Betriebshinweise</h2><ul><li>Das Flag <code>__wuicE2E</code> ist ein Schalter der Tests: Das Produkt setzt es nie, und keine Funktion hängt von seiner Anwesenheit ab.</li><li>Die DOM-Attribute sind ein öffentlicher Vertrag: Stützt sich ein Test auf ein neues Attribut, wird dieses Attribut der Komponente hinzugefügt und hier dokumentiert — nicht aus einer internen Struktur abgeleitet.</li><li>Ein von <code>getComponent</code> zurückgegebenes <code>null</code> bedeutet „nicht inspizierbar&quot;, nicht „keine Daten&quot;: Beides in Fehlermeldungen zu unterscheiden verhindert, dass eine Diagnose in die falsche Richtung startet.</li></ul>",
+                    "codeSamples": [
+                        {
+                            "id": "code_1",
+                            "title": "Snippet 1",
+                            "language": "js",
+                            "code": "const host = document.querySelector('wuic-field-editor[data-field-name=\"StateProvinceID\"]');\nconst valore = host.getAttribute('data-field-value');"
+                        },
+                        {
+                            "id": "code_2",
+                            "title": "Snippet 2",
+                            "language": "js",
+                            "code": "await page.waitForFunction((campo) => {\n  const host = document.querySelector(`wuic-field-editor[data-field-name=\"${campo}\"]`);\n  if (!host || host.getAttribute('data-has-record') !== 'true') return false;\n  const dialogo = host.closest('wuic-parametric-dialog, .edit-form-content');\n  if (dialogo?.getAttribute('data-record-loaded') !== 'true') return false;\n  const valore = host.getAttribute('data-field-value');\n  return valore !== null && valore !== '';\n}, 'StateProvinceID', { timeout: 30000 });"
+                        },
+                        {
+                            "id": "code_3",
+                            "title": "Snippet 3",
+                            "language": "js",
+                            "code": "const host = document.querySelector('wuic-chart-list');\nconst cmp = host.__wuicCmp || window.ng?.getComponent?.(host);\nconst tipo = cmp?.chartRef?.chart?.config?.type;"
+                        },
+                        {
+                            "id": "code_4",
+                            "title": "Snippet 4",
+                            "language": "js",
+                            "code": "await page.addInitScript(() => { globalThis.__wuicE2E = true; });"
+                        },
+                        {
+                            "id": "code_5",
+                            "title": "Snippet 5",
+                            "language": "ts",
+                            "code": "import { exposeWuicCmpOnHost } from '../../helpers/wuic-cmp-handle';\n\nexport class MioComponente {\n  private readonly wuicCmpHandle = exposeWuicCmpOnHost(this);\n}"
+                        },
+                        {
+                            "id": "code_6",
+                            "title": "Snippet 6",
+                            "language": "js",
+                            "code": "await page.waitForFunction(() => {\n  const visibile = (n) => {\n    const s = getComputedStyle(n);\n    if (s.display === 'none' || s.visibility === 'hidden' || s.opacity === '0') return false;\n    const r = n.getBoundingClientRect();\n    return r.width > 0 && r.height > 0;\n  };\n  return !Array.from(document.querySelectorAll('.busy-indicator')).some(visibile);\n}, null, { timeout: 20000 });"
+                        }
+                    ]
+                }
+            ],
+            "images": []
+        },
         {
             "slug": "troubleshooting",
             "lang": "de-DE",
@@ -35288,4 +35769,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }] } });
 
 export { FrameworkDocsComponent };
-//# sourceMappingURL=wuic-framework-lib-framework-docs.component-BLxQmoDZ.mjs.map
+//# sourceMappingURL=wuic-framework-lib-framework-docs.component-CX4DuW-Q.mjs.map