"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introduzione-al-test-end-to-end-con-jest-puppeteer", "hProperties": { "id": "introduzione-al-test-end-to-end-con-jest-puppeteer" } }, "depth": 2, "value": "Introduzione al test end-to-end con jest-puppeteer" }, { "data": { "id": "configurare-lambiente-di-test", "hProperties": { "id": "configurare-lambiente-di-test" } }, "depth": 2, "value": "Configurare l'ambiente di test" }, { "data": { "id": "api-comunemente-usate", "hProperties": { "id": "api-comunemente-usate" } }, "depth": 2, "value": "API comunemente usate" }, { "data": { "id": "la-semplice-app-di-to-do", "hProperties": { "id": "la-semplice-app-di-to-do" } }, "depth": 2, "value": "La semplice app di to-do" }, { "data": { "id": "aspettarsi-che-lapp-e-i-suoi-dati-siano-stati-caricati", "hProperties": { "id": "aspettarsi-che-lapp-e-i-suoi-dati-siano-stati-caricati" } }, "depth": 2, "value": "Aspettarsi che l'app e i suoi dati siano stati caricati" }, { "data": { "id": "aspettarsi-di-cliccare-un-pulsante-specifico", "hProperties": { "id": "aspettarsi-di-cliccare-un-pulsante-specifico" } }, "depth": 2, "value": "Aspettarsi di cliccare un pulsante specifico" }, { "data": { "id": "aspettarsi-che-un-link-esterno-sia-aperto-in-una-nuova-scheda", "hProperties": { "id": "aspettarsi-che-un-link-esterno-sia-aperto-in-una-nuova-scheda" } }, "depth": 2, "value": "Aspettarsi che un link esterno sia aperto in una nuova scheda" }, { "data": { "id": "aspettarsi-di-creare-un-elemento-dal-modulo", "hProperties": { "id": "aspettarsi-di-creare-un-elemento-dal-modulo" } }, "depth": 2, "value": "Aspettarsi di creare un elemento dal modulo" }, { "data": { "id": "riepilogo", "hProperties": { "id": "riepilogo" } }, "depth": 2, "value": "Riepilogo" }]; const readingTime = { "minutes": 8, "words": 2315, "text": "8 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Come parte del nostro impegno a garantire la qualità di Logto e al miglioramento continuo, utilizziamo jest-puppeteer per i test automatizzati end-to-end. Questo ci permette di iterare rapidamente sullo sviluppo di Logto senza interruzioni." }), "\n", _jsx(_components.p, { children: "In questo articolo, condivideremo la nostra esperienza con la scrittura di script di test jest-puppeteer efficienti utilizzando una semplice app di to-do come esempio. Il nostro obiettivo è aiutarti a iniziare rapidamente a scrivere codice di test jest-puppeteer per i tuoi progetti." }), "\n", _jsxs(_components.h2, { id: "introduzione-al-test-end-to-end-con-jest-puppeteer", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduzione-al-test-end-to-end-con-jest-puppeteer", children: _jsx(_components.span, { children: "#" }) }), "Introduzione al test end-to-end con jest-puppeteer"] }), "\n", _jsxs(_components.p, { children: ["Il test end-to-end è un modo per assicurarsi che la tua applicazione funzioni correttamente dal punto di vista dell'utente. Per ottenere questo, utilizziamo due strumenti essenziali: ", _jsx(_components.a, { href: "https://jestjs.io/", children: "Jest" }), " e ", _jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://jestjs.io/", children: "Jest" }), " è un popolare framework di test JavaScript che offre un'API intuitiva per scrivere test e asserzioni. È ampiamente utilizzato per il testing di unità e integrazione."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }), " è una libreria Node.js sviluppata dal team di Chrome che fornisce un'API di alto livello per controllare browser Chrome o Chromium headless. Questo lo rende una scelta ideale per automatizzare le interazioni del browser nei test end-to-end."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://github.com/argos-ci/jest-puppeteer", children: "jest-puppeteer" }), " è un preset di Jest che abilita i test end-to-end con Puppeteer. Offre un'API semplice per avviare nuove istanze di browser e interagire con le pagine web attraverso di esse."] }), "\n", _jsx(_components.p, { children: "Ora che hai una comprensione di base degli strumenti essenziali, tuffiamoci nella configurazione dell'ambiente di test." }), "\n", _jsxs(_components.h2, { id: "configurare-lambiente-di-test", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configurare-lambiente-di-test", children: _jsx(_components.span, { children: "#" }) }), "Configurare l'ambiente di test"] }), "\n", _jsx(_components.p, { children: "Configurare l'ambiente di test per i test end-to-end con jest-puppeteer è un processo semplice che coinvolge tre passaggi principali:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Installare le dipendenze" }), "\n"] }), "\n", _jsx(_components.p, { children: "Nel tuo progetto (o creare un nuovo progetto), apri il terminale ed esegui:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm install --save-dev jest jest-puppeteer puppeteer\n" }) }), "\n", _jsxs(_components.p, { children: ["Poi vai alla cartella ", _jsx(_components.code, { children: "node_modules/puppeteer" }), " e installa Chromium (che è necessario per Puppeteer):"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "cd node_modules/puppeteer\nnpm run postinstall\n" }) }), "\n", _jsxs(_components.ol, { start: "2", children: ["\n", _jsx(_components.li, { children: "Configurare Jest" }), "\n"] }), "\n", _jsx(_components.p, { children: "Successivamente, devi configurare Jest per funzionare senza problemi con Puppeteer." }), "\n", _jsxs(_components.p, { children: ["Crea un file di configurazione Jest (es. ", _jsx(_components.code, { children: "jest.config.js" }), ") nella directory principale del tuo progetto se non ne hai già uno. In questo file di configurazione, specifica jest-puppeteer come preset:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "/ @type {import('jest').Config} */;\nconst config = {\n preset: 'jest-puppeteer',\n // Altre configurazioni Jest...\n};\n\nmodule.exports = config;\n" }) }), "\n", _jsxs(_components.p, { children: ["Puoi personalizzare altre impostazioni Jest in questo file secondo necessità. Per maggiori informazioni sulla personalizzazione delle configurazioni di Jest, consulta la ", _jsx(_components.a, { href: "https://jestjs.io/docs/configuration", children: "configurazione Jest" }), "."] }), "\n", _jsxs(_components.ol, { start: "3", children: ["\n", _jsx(_components.li, { children: "Scrivi i tuoi test" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Crea file di test nel tuo progetto, tipicamente nominati con l'estensione ", _jsx(_components.code, { children: ".test.js" }), ". Jest scoprirà e eseguirà automaticamente questi file di test."] }), "\n", _jsxs(_components.p, { children: ["Ecco un esempio tratto dalla ", _jsx(_components.a, { href: "https://jestjs.io/docs/puppeteer", children: "documentazione Jest" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "describe('Google', () => {\n beforeAll(async () => {\n await page.goto('https://google.com');\n });\n\n it('dovrebbe avere il titolo \"Google\"', async () => {\n await expect(page.title()).resolves.toMatch('Google');\n });\n});\n" }) }), "\n", _jsx(_components.p, { children: "Quindi esegui il comando per eseguire il test:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npx jest\n" }) }), "\n", _jsx(_components.p, { children: "Seguendo questi tre passaggi, avrai un ambiente di test ben configurato per condurre test end-to-end usando jest-puppeteer." }), "\n", _jsx(_components.p, { children: "Tuttavia, tieni presente che questo è solo un esempio di base. Per informazioni più dettagliate sulla configurazione dell'ambiente, consulta la documentazione pertinente:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://jestjs.io/docs/getting-started", children: "Jest: Guida iniziale" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://jestjs.io/docs/puppeteer", children: "Jest: Utilizzare con puppeteer" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }) }), "\n"] }), "\n", _jsxs(_components.h2, { id: "api-comunemente-usate", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#api-comunemente-usate", children: _jsx(_components.span, { children: "#" }) }), "API comunemente usate"] }), "\n", _jsx(_components.p, { children: "Nei passaggi successivi, faremo affidamento sulle API fornite da Jest, Puppeteer e jest-puppeteer per assisterci nei nostri test." }), "\n", _jsxs(_components.p, { children: ["Jest offre principalmente API per organizzare i test e asserire i risultati attesi. Puoi esplorare i dettagli specifici nella ", _jsx(_components.a, { href: "https://jestjs.io/docs/api", children: "documentazione" }), "."] }), "\n", _jsxs(_components.p, { children: ["Le API di Puppeteer sono principalmente progettate per interagire con i browser e il loro supporto per i test potrebbe non essere così intuitivo. Puoi fare riferimento alla ", _jsx(_components.a, { href: "https://pptr.dev/", children: "documentazione di Puppeteer" }), " per capire le funzionalità che offre. Nei nostri esempi di test successivi, copriremo alcuni casi d'uso comuni."] }), "\n", _jsxs(_components.p, { children: ["Poiché le API di Puppeteer non erano originariamente progettate per il testing, utilizzarle per scrivere test può essere una sfida. Per semplificare il processo di scrittura dei test Puppeteer, jest-puppeteer include una libreria integrata chiamata ", _jsx(_components.code, { children: "expect-puppeteer" }), ". Offre un set di API concise e facili da usare. La libreria è dettagliata nella sua ", _jsx(_components.a, { href: "https://github.com/argos-ci/jest-puppeteer#recipes", children: "documentazione" }), ", che introduce varie funzionalità utili, come mostrato negli esempi seguenti:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// Asserisce che la pagina corrente contiene 'Testo nella pagina'\nawait expect(page).toMatchTextContent('Testo nella pagina');\n\n// Asserisce che la pagina corrente ha un elemento div che contiene 'Home'\nawait expect(page).toMatchElement('div', { text: 'Home' });\n\n// Asserisce che un pulsante contenente il testo \"Home\" sarà cliccato\nawait expect(page).toClick('button', { text: 'Home' });\n\n// Asserisce che un modulo sarà compilato\nawait expect(page).toFillForm('form[name=\"myForm\"]', {\n firstName: 'James',\n lastName: 'Bond',\n});\n" }) }), "\n", _jsx(_components.p, { children: "Nei seguenti esempi, combineremo le API fornite da queste librerie per completare i nostri scenari di test." }), "\n", _jsx(_components.p, { children: "Ora è il momento di iniziare a imparare a scrivere codice di test utilizzando la nostra semplice app di to-do." }), "\n", _jsxs(_components.h2, { id: "la-semplice-app-di-to-do", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#la-semplice-app-di-to-do", children: _jsx(_components.span, { children: "#" }) }), "La semplice app di to-do"] }), "\n", _jsxs(_components.p, { children: ["Supponendo che abbiamo una semplice app di to-do in esecuzione su ", _jsx(_components.code, { children: "http://localhost:3000" }), ", il codice HTML principale di questa app è il seguente:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "

La Lista di Alex

\n
Compra una mela
\n
Per Natale
\n \n
\n
Leggi il documento introduttivo di Logto
\n
\n Link al documento:\n Inizia \n
\n \n

\n \n

\n" }) }), "\n", _jsx(_components.p, { children: "Quando eseguiamo test end-to-end, vogliamo coprire i seguenti scenari:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Quando accediamo all'URL dell'app, l'app e i suoi dati dovrebbero essere caricati correttamente." }), "\n", _jsx(_components.li, { children: "Il pulsante di controllo dell'elemento dovrebbe poter essere cliccato." }), "\n", _jsx(_components.li, { children: "Cliccando un link esterno nelle note dell'elemento, il link dovrebbe aprirsi in una nuova scheda." }), "\n", _jsx(_components.li, { children: "È possibile aggiungere un elemento dal modulo." }), "\n"] }), "\n", _jsx(_components.p, { children: "Successivamente, scriveremo il codice di test per verificare questi scenari." }), "\n", _jsxs(_components.h2, { id: "aspettarsi-che-lapp-e-i-suoi-dati-siano-stati-caricati", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#aspettarsi-che-lapp-e-i-suoi-dati-siano-stati-caricati", children: _jsx(_components.span, { children: "#" }) }), "Aspettarsi che l'app e i suoi dati siano stati caricati"] }), "\n", _jsx(_components.p, { children: "Consideriamo che l'app sia caricata correttamente quando le seguenti condizioni sono soddisfatte:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Un elemento con l'ID \"app\" dovrebbe esistere nella pagina dopo aver acceduto all'URL dell'app." }), "\n", _jsx(_components.li, { children: "I dati all'interno dell'app dovrebbero essere visualizzati correttamente." }), "\n"] }), "\n", _jsx(_components.p, { children: "Quindi, abbiamo scritto il seguente codice di test:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('dovrebbe caricare l\\'app con successo', async () => {\n // Vai alla pagina dell'app\n await page.goto('http://localhost:3000');\n\n // Aspetta che l'app sia caricata\n await page.waitForSelector('#app');\n\n // Aspetta che i dati siano caricati\n await expect(page).toMatchElement('div[class=title]', {\n text: \"La Lista di Alex\",\n });\n});\n" }) }), "\n", _jsx(_components.p, { children: "Nel codice:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "page.goto" }), " è equivalente a digitare \"", _jsx(_components.a, { href: "http://localhost:3000", children: "http://localhost:3000" }), "\" nel browser, permettendoti di navigare a qualsiasi URL."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "page.waitForSelector" }), " viene utilizzato per attendere che un selettore CSS specifico corrisponda a un particolare elemento, con un tempo di attesa predefinito di 30 secondi."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "expect(page).toMatchElement" }), " è dalla libreria ", _jsx(_components.code, { children: "expect-puppeteer" }), ", è simile a ", _jsx(_components.code, { children: "page.waitForSelector" }), ", ma supporta anche la corrispondenza del testo all'interno di un elemento. Inoltre, il timeout predefinito per ", _jsx(_components.code, { children: "toMatchElement" }), " è di soli 500ms."] }), "\n"] }), "\n", _jsx(_components.p, { children: "A prima vista potrebbe sembrare perfetto, ma quando esegui questo test e lo distribuisci su un ambiente CI, occasionalmente potrebbe fallire dopo diverse esecuzioni. Il messaggio di errore indica:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "Dopo aver aspettato per 500ms, non riusciamo a trovare un “div” con un nome di classe “title” e contenente il testo \"La Lista di Alex\".\n" }) }), "\n", _jsx(_components.p, { children: "Basandoci sulle informazioni che fornisce l'errore e sul fatto che questo test passa la maggior parte del tempo, possiamo dedurre che i dati richiesti dall'app potrebbero non essere sempre restituiti entro il primo 500ms dopo il caricamento dell'app. Pertanto, vogliamo aspettare che i dati siano caricati prima di fare l'asserzione." }), "\n", _jsx(_components.p, { children: "Tipicamente, ci sono due approcci comuni per ottenere questo risultato:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Aumentare il tempo di attesa dell'asserzione" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Dal messaggio di errore, possiamo vedere che il tempo di attesa predefinito per ", _jsx(_components.code, { children: "toMatchElement" }), " è impostato su 500ms. Possiamo aumentare il tempo di attesa aggiungendo l'opzione ", _jsx(_components.code, { children: "timeout" }), " alla funzione come segue:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "await expect(page).toMatchElement('div[class=title]', {\n text: \"La Lista di Alex\",\n timeout: 2000, // Aumenta a 2s\n});\n" }) }), "\n", _jsx(_components.p, { children: "Questo approccio può ridurre l'occorrenza di test falliti in una certa misura, ma non risolve completamente il problema perché non possiamo sapere con certezza quanto tempo è necessario per il recupero dei dati." }), "\n", _jsx(_components.p, { children: "Pertanto, utilizziamo questo approccio solo quando siamo sicuri del tempo di attesa richiesto, come in scenari tipo \"un tooltip appare dopo aver passato il mouse su un elemento per più di 2 secondi.”" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Aspetta che la richiesta di rete sia completata prima di fare l'asserzione" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Questo è l'approccio corretto. Anche se potremmo non sapere quanto tempo richiederà la richiesta di dati, aspettare che la richiesta di rete finisca è sempre una scelta sicura. A questo punto, possiamo usare ", _jsx(_components.code, { children: "page.waitForNavigation({ waitUntil: 'networkidle0' })" }), " per aspettare che le richieste di rete siano completate:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('dovrebbe caricare l\\'app con successo', async () => {\n\tawait page.goto('http://localhost:3000');\n\n\t/\n\t * Aspetta che le richieste di rete siano finite.\n\t * Aggiungi qui per assicurarti che sia l'app che i dati siano stati caricati.\n\t */\n\tawait page.waitForNavigation({ waitUntil: 'networkidle0' });\n\n\tawait page.waitForSelector('#app');\n\tawait expect(page).toMatchElement('div[class=title]', {\n\t\ttext: \"La Lista di Alex\",\n\t});\n});\n" }) }), "\n", _jsx(_components.p, { children: "In questo modo, prima di eseguire l'asserzione per l'App e i suoi dati caricati, possiamo assicurarci che le nostre richieste di rete siano già concluse. Ciò garantisce che il test produca costantemente i risultati corretti." }), "\n", _jsxs(_components.h2, { id: "aspettarsi-di-cliccare-un-pulsante-specifico", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#aspettarsi-di-cliccare-un-pulsante-specifico", children: _jsx(_components.span, { children: "#" }) }), "Aspettarsi di cliccare un pulsante specifico"] }), "\n", _jsx(_components.p, { children: "Successivamente, stiamo testando la funzionalità di cliccare il pulsante di controllo all'interno di un elemento." }), "\n", _jsxs(_components.p, { children: ["Nell'app di esempio, abbiamo notato che tutti gli elementi condividono la stessa struttura. I loro pulsanti di controllo hanno il selettore CSS ", _jsx(_components.code, { children: "li[class$=item] > button" }), ", e il testo del pulsante è sempre \"Check\". Questo significa che non possiamo specificare direttamente quale pulsante di controllo dell'elemento cliccare. Pertanto, abbiamo bisogno di una nuova soluzione."] }), "\n", _jsx(_components.p, { children: "Supponiamo di voler cliccare il pulsante di controllo dell'elemento \"Leggi il documento introduttivo di Logto\". Possiamo scomporre questo processo in due passaggi:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Primo, ottenere un riferimento a quello specifico elemento." }), "\n", _jsx(_components.li, { children: "Poi, cliccare il pulsante di controllo situato all'interno di quell'elemento." }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('dovrebbe essere in grado di cliccare il pulsante di controllo dell\\'elemento leggere il documento', async () => {\n // Ottieni il riferimento all'elemento leggere documento\n const readDocItem = await expect(page).toMatchElement(\n 'li[class$=item]:has(div[class$=itemName])',\n { text: 'Leggi il documento introduttivo di Logto' }\n );\n\n // Aspetta di cliccare il pulsante correlato\n await expect(readDocItem).toClick('button', { text: 'Check' });\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Come mostrato nel codice, utilizziamo la funzione ", _jsx(_components.code, { children: "toMatchElement" }), " per abbinare l'elemento con ", _jsx(_components.code, { children: "itemName" }), " impostato su \"Leggi il documento introduttivo di Logto\". Poi, usiamo il riferimento ", _jsx(_components.code, { children: "readDocItem" }), " per cliccare il pulsante con il testo 'Check' che si trova sotto di esso."] }), "\n", _jsxs(_components.p, { children: ["È importante notare che quando otteniamo il ", _jsx(_components.code, { children: "readDocItem" }), ", il selettore CSS utilizzato è ", _jsx(_components.code, { children: "li[class$=item]:has(div[class$=itemName])" }), ". Questo selettore corrisponde all'elemento radice ", _jsx(_components.code, { children: "li" }), " dell'elemento, non al ", _jsx(_components.code, { children: "itemName" }), " all'interno di esso, perché intendiamo cliccare il ", _jsx(_components.code, { children: "button" }), " sotto il tag ", _jsx(_components.code, { children: "li" }), " successivamente."] }), "\n", _jsxs(_components.p, { children: ["L'uso di ", _jsx(_components.code, { children: "expect(readDocItem).toClick" }), " è simile a ", _jsx(_components.code, { children: "toMatchElement" }), ". Nell'esempio di codice, passiamo ", _jsx(_components.code, { children: "{ text: 'Check' }" }), " per corrispondere ulteriormente al ", _jsx(_components.code, { children: "textContent" }), " del pulsante. Tuttavia, puoi scegliere se abbinare o meno il contenuto del testo del pulsante in base alle tue esigenze."] }), "\n", _jsxs(_components.h2, { id: "aspettarsi-che-un-link-esterno-sia-aperto-in-una-nuova-scheda", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#aspettarsi-che-un-link-esterno-sia-aperto-in-una-nuova-scheda", children: _jsx(_components.span, { children: "#" }) }), "Aspettarsi che un link esterno sia aperto in una nuova scheda"] }), "\n", _jsx(_components.p, { children: "Successivamente, vogliamo testare se possiamo aprire un link esterno in una nuova scheda quando clicchiamo su di esso all'interno delle note dell'elemento." }), "\n", _jsx(_components.p, { children: "Nell'app di esempio, abbiamo riscontrato che l'elemento \"Leggi il documento introduttivo di Logto\" ha un link esterno al documento di Logto all'interno delle sue note. Ecco il nostro codice di test:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('dovrebbe aprire un link esterno in una nuova scheda', async () => {\n // Restringi al particolare elemento ottenendo il riferimento all'elemento leggere documento\n const readDocItem = await expect(page).toMatchElement(\n 'li[class$=item]:has(div[class$=itemName])',\n { text: 'Leggi il documento introduttivo di Logto' }\n );\n\n await expect(readDocItem).toClick('div[class=itemNotes] a', { text: 'Inizia' });\n\n const target = await browser.waitForTarget(\n (target) => target.url() === 'https://docs.logto.io/docs/tutorials/get-started'\n );\n\n const logtoDocPage = await target.page();\n expect(logtoDocPage).toBeTruthy();\n\n // Ricorda di chiudere la pagina dopo il test\n await logtoDocPage?.close();\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Nel codice, utilizziamo ", _jsx(_components.code, { children: "toClick" }), " per cliccare sul link all'interno di ", _jsx(_components.code, { children: "itemNotes" }), "."] }), "\n", _jsxs(_components.p, { children: ["Successivamente, utilizziamo ", _jsx(_components.code, { children: "browser.waitForTarget" }), " per acquisire una nuova scheda aperta con l'URL \"", _jsx(_components.a, { href: "https://docs.logto.io/docs/tutorials/get-started", children: "https://docs.logto.io/docs/tutorials/get-started" }), ".\""] }), "\n", _jsxs(_components.p, { children: ["Dopo aver ottenuto la scheda, utilizziamo ", _jsx(_components.code, { children: "target.page()" }), " per ottenere un'istanza della pagina del documento Logto e verificare ulteriormente se la pagina è caricata."] }), "\n", _jsx(_components.p, { children: "Inoltre, ricorda di chiudere la nuova pagina aperta dopo aver completato il nostro test." }), "\n", _jsxs(_components.h2, { id: "aspettarsi-di-creare-un-elemento-dal-modulo", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#aspettarsi-di-creare-un-elemento-dal-modulo", children: _jsx(_components.span, { children: "#" }) }), "Aspettarsi di creare un elemento dal modulo"] }), "\n", _jsx(_components.p, { children: "Ora, vogliamo testare la funzionalità di aggiungere un elemento." }), "\n", _jsx(_components.p, { children: "Dobbiamo riempire il nome dell'elemento e le note dell'elemento nel modulo, cliccare sul pulsante \"Aggiungi\" e controllare se il contenuto da noi aggiunto appare nell'elenco:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('dovrebbe creare un elemento dal modulo', async () => {\n // Compila il modulo e invia\n await expect(page).toFill('form input[name=itemName]', 'Contatta John');\n await expect(page).toFill('form input[name=itemNotes]', 'Invia un\\'email a john@fake.com');\n await expect(page).toClick('form button[type=submit]', { text: 'Aggiungi' });\n\n // Aspetta che l'elemento sia stato creato\n await expect(page).toMatchElement('li[class$=item]:has(div[class$=itemName])', {\n text: 'Contatta John',\n });\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Noterai che utilizziamo la funzione ", _jsx(_components.code, { children: "expect(page).toFill(inputSelector, content)" }), " per compilare il contenuto del modulo. Questa funzione sostituisce tutto il contenuto nell'input con il ", _jsx(_components.code, { children: "content" }), " fornito."] }), "\n", _jsxs(_components.p, { children: ["Se vuoi aggiungere alcuni caratteri all'input senza sostituire il contenuto esistente, puoi usare ", _jsx(_components.code, { children: "page.type(selector, content)" }), " per aggiungere direttamente il contenuto desiderato all'input."] }), "\n", _jsxs(_components.p, { children: ["Tuttavia, quando abbiamo molti campi da riempire nel nostro modulo, chiamare ", _jsx(_components.code, { children: "toFill" }), " più volte non è conveniente. In questo caso, possiamo utilizzare il seguente approccio per compilare tutti i contenuti in una sola chiamata:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "await expect(page).toFillForm('form', {\n itemName: 'Contatta John',\n itemNotes: 'Invia un\\'email a john@fake.com',\n});\n" }) }), "\n", _jsx(_components.p, { children: "La chiave dell'oggetto fornito è l'attributo name dell'elemento input." }), "\n", _jsxs(_components.h2, { id: "riepilogo", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#riepilogo", children: _jsx(_components.span, { children: "#" }) }), "Riepilogo"] }), "\n", _jsx(_components.p, { children: "Abbiamo trattato un semplice esempio per introdurre i requisiti di test comuni e le relative tecniche di scrittura del codice quando si utilizza jest-puppeteer per i test end-to-end. Speriamo che questo possa aiutarti a comprendere rapidamente le basi della scrittura di codice di test jest-puppeteer." }), "\n", _jsx(LogtoCloudButton, { children: "Prova Logto oggi" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }