CircleCI-Testkonfiguration für Angular

Blog

CircleCI-Testkonfiguration für Angular

Eine der besten Möglichkeiten, Ihr Projekt fehlerfrei zu halten, ist eine Testsuite, aber es ist leicht zu vergessen, ständig Tests auszuführen. Mit Continuous Integration (CI)-Servern können Sie Ihr Projekt-Repository so einrichten, dass Ihre Tests bei jedem Commit- und Pull-Request ausgeführt werden.



Circle CI ist ein kostenpflichtiger Dienst, der jedoch für Open-Source-Projekte kostenlos zur Verfügung gestellt wird. Sie können ein öffentliches Projekt auf Github erstellen und Circle CI hinzufügen, ohne zu bezahlen.

Projekte zu Datenstrukturen und Algorithmen

Projekt für Circle CI konfigurieren

  • Erstellen Sie einen Ordner mit dem Namen |_+_| an der Projektwurzel
  • Erstellen Sie im neuen Ordner eine Datei namens |_+_| mit folgendem Inhalt
.circleci

Circle CI-Konfigurationsdatei

Eine Circle CI-Konfigurationsdatei besteht aus 3 Hauptkomponenten; eine Version, eine Liste von Jobs und eine Liste von Workflows.



Die Version ist einfach die Circle CI-Version, die wir verwenden werden.

Ein Job kann mit einer unabhängigen Umgebung zum Ausführen einer Liste von Befehlen oder Schritten verglichen werden. Zu den üblichen Dingen, die Sie mit einem Job erreichen können, gehören;



  • Installieren der Tools, die Sie zum Ausführen/Erstellen/Testen Ihres Projekts benötigen.
  • Bash-Befehle ausführen.
  • Speichern oder Wiederherstellen von Elementen aus dem Circle CI-Cache.

Ein Workflow ist eine Möglichkeit, Ihre Aufträge zu verwalten. Möglicherweise müssen Sie einen Job nur in bestimmten Zweigen oder zu bestimmten Zeiten ausführen, oder Sie möchten, dass einige der Jobs parallel und andere nacheinander ausgeführt werden. Im Workflow nehmen Sie diese Konfigurationen vor.

In unserem Fall haben wir nur einen Job; der Testjob . Dies sind die Attribute des Testjobs.

Wo ist mein Roku-Link-Code?
  • Das Docker-Attribut: Geben Sie ein Docker-Image an, das zum Erstellen des Containers der Umgebung verwendet wird. Circle CI enthält eine Liste vorgefertigter Bilder, die Sie finden können
config.yml
  • Das Arbeitsverzeichnisattribut: Das aktuelle Verzeichnis, in dem alle Schritte ausgeführt werden.
jobs: # The test job test: working_directory: ~/project-name docker: - image: circleci/node:10-browsers steps: # Checkout the code from the branch into the working_directory - checkout # Log the current branch - run: name: Show current branch command: echo ${CIRCLE_BRANCH} # Restore local dependencies from cache - restore_cache: keys: - v1-dependencies-{{ checksum 'package-lock.json' }} - v1-dependencies- # Install project dependencies - run: name: Install local dependencies command: npm install # Cache local dependencies if they don't exist - save_cache: key: v1-dependencies-{{ checksum 'package-lock.json' }} paths: - node_modules # Lint the source code - run: name: Linting command: npm run lint # Test the source code - run: name: Testing command: npm run test -- --no-watch --no-progress --browsers=ChromeHeadlessCI # End to End test - run: name: End to End Test command: npm run e2e -- --protractor-config=e2e/protractor-ci.conf.js
  • Das steps-Attribut: Dies ist eine Liste von Schritten (Befehlen), die Sie im aktuellen Job ausführen möchten.
filter

Es gibt einige Arten von Schritten, die wir in unserer Konfiguration verwenden werden.

  • Die Auschecken Schritt: Wird verwendet, um den Code aus dem aktuellen Zweig in das Arbeitsverzeichnis auszuchecken.
ng test
  • Die Lauf step: Wird verwendet, um einen Bash-Befehl auszuführen. Sie können einen beschreibenden Namen angeben, der in der Circle CI-Oberfläche angezeigt wird
ng e2e
  • Die save_cache Schritt: Wird verwendet, um einen Cache einer Datei oder eines Verzeichnisses im Circle CI-Speicher zu speichern. Ein häufiger Anwendungsfall besteht darin, die npm-Abhängigkeiten nur einmal zu installieren und dann den Ordner node_modules mit einem Hash der Datei package-lock.json (oder package.json) als Cache-Schlüssel zwischenzuspeichern.
karma.conf.js
  • Die restore_cache Schritt; Wird verwendet, um ein zwischengespeichertes Element mithilfe des Cache-Schlüssels wiederherzustellen.
protractor-ci.conf.js

Den CI-Job in einen Workflow einfügen

In diesem Fall möchten wir den Testjob ausführen, wenn wir uns auf die Entwicklung, das Staging oder den Master-Zweig festlegen. Ein Workflow wird standardmäßig durch Pushen an einen beliebigen Zweig ausgelöst.

Der Testworkflow hat ein |_+_| -Attribut, das verwendet wird, um die Zweige auszuwählen, auf denen es ausgeführt wird. Das Code-Snippet ist unten gezeigt

Pferderennen mit maschinellem Lernen
protractor.conf.js

Fügen Sie das Workflow-Code-Snippet zur Datei config.yml hinzu, übertragen Sie Ihre Änderungen und übertragen Sie sie per Push. Ihr Projekt ist bereit zum Bauen.

CLI für CI-Tests in Chrome konfigurieren

Wenn die CLI-Befehle |_+_| und |_+_| im Allgemeinen die CI-Tests in Ihrer Umgebung ausführen, müssen Sie möglicherweise Ihre Konfiguration noch anpassen, um die Chrome-Browsertests auszuführen.

Führen Sie die folgenden Schritte aus, um CLI . zu konfigurieren

  • Fügen Sie in der Karma-Konfigurationsdatei |_+_| einen benutzerdefinierten Launcher namens ChromeHeadlessCI unter den folgenden Browsern hinzu:
config.capabilities = { browserName: 'chrome', chromeOptions: { args: ['--headless', '--no-sandbox'] } }; exports.config = config;
  • Erstellen Sie im Stammordner Ihres e2e-Testprojekts eine neue Datei namens |_+_|. Diese neue Datei erweitert die ursprüngliche |_+_|
 version: 2 
|_+_|

Jetzt können Sie die folgenden Befehle ausführen, um das Flag --no-sandbox zu verwenden:

 docker:  
- image: circleci/node:10-browsers

Danke fürs Lesen. Wenn dir dieser Beitrag gefallen hat, teile ihn mit all deinen Programmierfreunden!

Dieser Beitrag wurde ursprünglich veröffentlicht Hier

Säulen der objektorientierten Programmierung

#angular #angular-js #testen #web-entwicklung