Aggiungere test di unità a un'applicazione DOM virtuale di Oracle JET

Introduzione

Il test è una parte cruciale del ciclo di vita dello sviluppo, garantendo la creazione di app web robuste e stabili. Esistono vari tipi di test, ad esempio test end-to-end e test di integrazione. Il test di unità implica la scrittura di test per singole unità di codice, incluse classi, funzioni o metodi. È buona norma scrivere unit test all'inizio del processo di sviluppo. Iniziare presto non solo dimostra l'importanza del test, ma aumenta anche la probabilità di raggiungere la copertura completa del test, piuttosto che aspettare che l'app web sia completamente funzionale e complessa.

Obiettivi

In questa esercitazione verrà descritto come installare gli strumenti di test utilizzando il comando aggiungi test dell'interfaccia CLI di Oracle JET e come scrivere ed eseguire un test di unità nell'app Oracle JET Virtual DOM.

Il comando add testing installa Jest e la libreria di test preliminari, oltre ad aggiornare la sezione scripts del file package.json dell'app con i comandi per eseguire i test delle unità scritti.

Nota: non utilizzare Jest per eseguire il test o interagire con i componenti dell'interfaccia utente di Oracle JET nell'applicazione. Il team Oracle JET ha testato ampiamente questi componenti nell'ambito del processo di sviluppo dei componenti. Utilizzare invece Jest per scrivere unit test per il codice che si scrive nell'app. To perform automated UI testing of the Oracle JET virtual DOM app that you develop, use our Oracle JET Component WebElements UI automation library (@oracle/oraclejet-webdriver). Questa libreria, costruita su Selenium WebDriver, è progettata per funzionare con i componenti JET. Per iniziare, vedere Impostare un ambiente per creare test di automazione dell'interfaccia utente per le applicazioni Web Oracle JET.

Prerequisiti

Task 1: Aggiunta delle librerie di test

  1. Andare alla cartella JET-Virtual-DOM-app e aggiungere le librerie di test.

    npx ojet add testing

    Gli strumenti di Oracle JET creano una cartella test-config nella cartella JET-Virtual-DOM-app con i file di configurazione richiesti dalle librerie di test:

    ./JET-Virtual-DOM-app/test-config
jest.config.js
testSetup.ts

    Inoltre, aggiorna il file package.json con gli strumenti di test installati dal comando add testing. Questi aggiornamenti includono le voci per Jest e Preact Testing Library.

    . . .
 "devDependencies": {
   . . .
   "@oracle/oraclejet-jest-preset": "16.0.11",
   "@testing-library/preact": "3.2.3",
   "@types/jest": "29.5.3",
   . . .
   "jest": "29.6.2",
   "jest-environment-jsdom": "29.6.2",
   . . .
},

    Infine, aggiorna la sezione scripts nel file package.json con i comandi per richiamare la libreria di test.

    . . .
"scripts": {
 . . .
  "test": "jest -c test-config/jest.config.js",
  "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand"
 },

Task 2: Scrittura di un test unità

  1. Passare alla cartella JET-Virtual-DOM-app/src/components/content e creare una nuova cartella denominata __tests__.

  2. Nella nuova cartella JET-Virtual-DOM-app/src/components/content/__tests__, creare un file di script di test denominato content.spec.tsx.

  3. Nel file content.spec.tsx, scrivere le voci che provano la presenza della stringa Product Information nel file JET-Virtual-DOM-app/src/components/content. Il test prevede inoltre che questa stringa venga racchiusa in un tag elemento H1.

    import { h } from "preact";
import { render } from "@testing-library/preact";
import { Content } from "../index";

test("renders Product Information header with a h1 heading", () => {
   const { getByText } = render(<Content />);
   const headerElement = getByText("Product Information");
   expect(headerElement.tagName).toBe("H1");
});

    Il file di script di test content.spec.tsx completato utilizza anche chiamate jest.mock per fornire l'accesso alle importazioni (store_data.json e ojs/ojmutablearraydataprovider) richieste da un'istanza del componente Contenuto. Per includere queste chiamate jest.mock nel file script di test, vedere content-spec-tsx.txt.

Task 3: Eseguire il test di unità

Nella finestra del terminale, passare alla directory JET-Virtual-DOM-app ed eseguire il test dell'unità nella cartella JET-Virtual-DOM-app/src/components/content/__tests__ eseguendo il comando seguente.

   npm test

Il test esegue e visualizza l'output della console simile a quello riportato di seguito.

   $ npm test

   > JET-Virtual-DOM-app@1.0.0 test
   > jest -c test-config/jest.config.js

   PASS  src/components/content/__tests__/content.spec.tsx
   Test suite for Content component
      √ Renders Product Information header with a H1 tag (14 ms)

   Test Suites: 1 passed, 1 total
   Tests:       1 passed, 1 total
   Snapshots:   0 total
   Time:        2.145 s
   Ran all test suites.

Passo successivo

Passare all'esercitazione successiva in questo modulo.

Questa esercitazione fa parte del modulo Your First Oracle JET Virtual DOM App.

Puoi tornare alla pagina principale del percorso di apprendimento DOM virtuale per accedere a tutti i moduli sulla creazione di app DOM virtuali.

Altre risorse di apprendimento

Esplora altri laboratori su docs.oracle.com/learn o accedi a più contenuti di formazione gratuiti sul canale YouTube di Oracle Learning. Inoltre, visitare education.oracle.com/learning-explorer per diventare Oracle Learning Explorer.

Per la documentazione del prodotto, visitare Oracle Help Center.