data visualizer app

Data Visualizer App und Plugin

Dies ist ein Repo, das die Daten-Visualizer-App und sein Plugin enthält, die sowohl intern als auch als separate Einstiegspunkt verwendet wurden, damit es in anderen Apps wie der Dashboard-App verwendet werden kann

Erste Schritte

So installieren Sie die Abhängigkeiten, um die Daten-Visualizer-App aus dem Repo-Root-Verzeichnis auszuführen:

 $ yarn install

Entwicklung

Führen Sie yarn start , um die App auf localhost:3000 und das Plugin auf localhost:3001 zu starten.

Durch das Ausführen des Plugins an einem anderen Port ermöglicht das Testen in anderen Apps. Führen Sie beispielsweise die Dashboard -App zum Testen in der Dashboard -App in einem anderen Port aus und überschreiben Sie den Plugin -Pfad mit dem Host und dem Port, in dem das Plugin ausgeführt wird, über DevTools. Beispielschritte:

1. In DV: yarn start
2. In Dashboard: yarn start an diesem Punkt wird DV auf Localhost: 3000, DV -Plugin auf Localhost: 3001 und Dashboard -App für Localhost: 3002 ausgeführt.
3. Zeigen Sie den Browser auf Localhost: 3002.
4. Fügen Sie diesen Eintrag in der Dashboard App LocalStorage über Devtools in der Registerkarte Anwendung: dhis2.dashboard.pluginOverrides: { "VISUALIZATION": "http://localhost:3001/plugin.html" }

Mit demselben Prinzip ist möglich, mehrere Plugins gleichzeitig zu testen. Sie müssen nur sicherstellen, dass der im Überschreibungs konfigurierte Port für das von Ihnen überschreibende Plugin das richtige ist.

Die folgenden NPM -Skripte können alle aus dem Repo -Root -Verzeichnis ausgeführt werden:

Unit -Tests

 $ yarn test

Führen Sie Unit -Tests mit Deckungsbericht aus

 $ yarn coverage

E2E -Tests

Zypresse wird für E2E -Browser -Tests verwendet. Dies wird automatisch auf CI für PRS ausgeführt. Das Ergebnis ist in der Cypress -Wolke zu sehen.

Um Tests in Cypress Cloud aufzuzeichnen, können Sie eine der folgenden Methoden anhand Ihrer Anforderungen anwenden:

• Commit Meldung : Geben Sie [e2e record] in Ihre Commit -Nachrichten ein, um die Aufzeichnung zu aktivieren.
• GitHub Labels : Wenden Sie das e2e record auf Ihre Pull -Anfrage an, um die Aufzeichnung auszulösen.

Dieses Setup hilft bei der Verwaltung von Cypress -Cloud -Credits effizienter und stellt sicher, dass die Aufzeichnungen nur dann ausdrücklich gemacht werden.

Um die Tests lokal auszuführen, definieren Sie Folgendes in einer lokalen cypress.env.json -Datei, z. B.:

{
    " dhis2BaseUrl " : " https://test.e2e.dhis2.org/dev " ,
    " dhis2Username " : " admin " ,
    " dhis2Password " : " district " ,
}

Tests interaktiv ausführen (Cypress UI):

 yarn cypress:live

Führen Sie Tests in der Konsole ohne Cypress -Benutzeroberfläche aus:

 yarn cypress:run

Linie und Formatierung

Beheben Sie automatisch alle Verstöße im Codestil (schöner und Eslint) im Codel-Stil.

 $ yarn format

Überprüfen Sie alle Dateien auf Verstöße im Code-Stil (schöner und Eslint).

 $ yarn lint

App und Plugin erstellen

 $ yarn build

Manuelle Tests mit Netlify

Dieses Repo ist so konfiguriert, dass Pull -Anforderungen für Netlify bereitgestellt werden. Dies macht es einfach, eine laufende Implementierung mit anderen zu teilen (z. B. Tester, Produktmanager, UX, Mitentwickler), bevor sie sich an Master zusammenführen.

Pull -Anfragen (dh #209) sind erhältlich unter:

https://pr-209--dhis2-data-visualizer.netlify.app

Netlify fügt jeder PR auch eine Statusprüfung hinzu, die direkt mit der PR -Bereitstellung verbunden ist.