Skip to content

Commit

Permalink
seo
Browse files Browse the repository at this point in the history
  • Loading branch information
tidusIO committed Dec 22, 2024
1 parent 7020520 commit d590f4e
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ IonicModule.forRoot(PizzaAppComponent, {

## Zugriff auf native Schnittstellen

Mit [*ngCordova*](http://ngcordova.com/) machte Ionic ein wichtigen Schritt nach vorne, um hybride App-Entwicklung noch weiter zu vereinheitlichen und zu vereinfachen. Sie stellen damit eine Schnittstelle zu zahlreichen Cordova-Plugins her und geben dem Ionic/Angular-Entwickler eine einheitliche API für alle.
Mit *ngCordova* machte Ionic ein wichtigen Schritt nach vorne, um hybride App-Entwicklung noch weiter zu vereinheitlichen und zu vereinfachen. Sie stellen damit eine Schnittstelle zu zahlreichen Cordova-Plugins her und geben dem Ionic/Angular-Entwickler eine einheitliche API für alle.

Für Ionic 2 und TypeScript gibt es dafür ein extra Modul mit dem Namen `ionic-native`. Darüber erhaltet ihr Zugriff auf verschiedenste Cordova-Plugins. Sucht euch einfach das gewünschte Plugin aus der [Liste unterstützter APIs](http://ionicframework.com/docs/v2/native/) heraus. Installiert das Plugin über die CLI und importiert das entsprechende Modul.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ published_at: 2017-01-12 08:00:00.000000Z
categories: "angular angular2 angular4 testing"
---

Die innovative Entwicklung der Web Welt bietet inzwischen eine ganze Menge an Möglichkeiten, testgetriebene Entwicklungen durchzuführen. Neben den Komponententests mittels [Karma](https://karma-runner.github.io) und [PhantomJs](http://phantomjs.org/), nehmen wir heute End2End Tests mit Hilfe von [Protractor](http://www.protractortest.org/#/) genauer unter die Lupe. Um anschließend eine Testabdeckung über verschiedene Browser und deren Versionen zu erreichen, wollen wir das ganze zusammen mit dem Cloud Dienst von [SauceLabs](https://saucelabs.com/) realiseren.
Die innovative Entwicklung der Web Welt bietet inzwischen eine ganze Menge an Möglichkeiten, testgetriebene Entwicklungen durchzuführen. Neben den Komponententests mittels [Karma](https://karma-runner.github.io){:rel="noopener noreferrer nofollow"} und [PhantomJs](http://phantomjs.org/){:rel="noopener noreferrer nofollow"}, nehmen wir heute End2End Tests mit Hilfe von [Protractor](http://www.protractortest.org/#/){:rel="noopener noreferrer nofollow"} genauer unter die Lupe. Um anschließend eine Testabdeckung über verschiedene Browser und deren Versionen zu erreichen, wollen wir das ganze zusammen mit dem Cloud Dienst von [SauceLabs](https://saucelabs.com/){:rel="noopener noreferrer nofollow"} realiseren.

## Warum E2E Tests? Vor- und Nachteile

Expand Down Expand Up @@ -44,11 +44,11 @@ Nähere und die aktuellsten Informationen findet Ihr auf der Github Page von [Pr

### Sauce Labs

Um sich das Thema Cross-Browser Testing deutlich zu vereinfachen, bietet [SauceLabs](https://saucelabs.com/) für die E2E Tests hier eine spitzen Integrationsmöglichkeit für Protractor. [SauceLabs](https://saucelabs.com/) bietet einen Selenium Dienst in der Cloud an, mit welchem alle aktuellsten Browser und Versionen von Protractor angesprochen werden können. Die zu testenden Browser werden in Protractor definiert und beim Starten der Tests an den Seleniumdienst von [SauceLabs](https://saucelabs.com/) übergeben.
Um sich das Thema Cross-Browser Testing deutlich zu vereinfachen, bietet [SauceLabs](https://saucelabs.com/){:rel="noopener noreferrer nofollow"} für die E2E Tests hier eine spitzen Integrationsmöglichkeit für Protractor. [SauceLabs](https://saucelabs.com/){:rel="noopener noreferrer nofollow"} bietet einen Selenium Dienst in der Cloud an, mit welchem alle aktuellsten Browser und Versionen von Protractor angesprochen werden können. Die zu testenden Browser werden in Protractor definiert und beim Starten der Tests an den Seleniumdienst von [SauceLabs](https://saucelabs.com/){:rel="noopener noreferrer nofollow"} übergeben.

![Protractor-Angular-Test-Sauce Labs](e2e-testing-angular-protractor.png)

Dieser Dienst erstellt eine virtuelle Maschine mit der genannten Browserversion und führt darin die definierten Test-Suites durch. Darüber hinaus werden die Tests von [SauceLabs](https://saucelabs.com/) aufgezeichnet, sowie Screenshots erstellt. Diese können hinterher sehr bequem innerhalb der UI von SauceLabs angesehen werden. Dies vereinfacht das Debugging bei der Suche von Fehlern deutlich. Hat man sich zusätzlich eine Deployment-Pipe innerhalb seiner Architektur aufgesetzt, kann man mit dem Ergebnis dieser Tests ein Deployment durchführen oder auch verhindern.
Dieser Dienst erstellt eine virtuelle Maschine mit der genannten Browserversion und führt darin die definierten Test-Suites durch. Darüber hinaus werden die Tests von [SauceLabs](https://saucelabs.com/){:rel="noopener noreferrer nofollow"} aufgezeichnet, sowie Screenshots erstellt. Diese können hinterher sehr bequem innerhalb der UI von SauceLabs angesehen werden. Dies vereinfacht das Debugging bei der Suche von Fehlern deutlich. Hat man sich zusätzlich eine Deployment-Pipe innerhalb seiner Architektur aufgesetzt, kann man mit dem Ergebnis dieser Tests ein Deployment durchführen oder auch verhindern.

## Testprojekt

Expand Down Expand Up @@ -124,7 +124,7 @@ In diesem JSON werden die zu testenden Browser definiert. Das Objekt hat insgesa
}
```

Die genaue Definition für die Konfiguration der SauceLab Browser findet ihr im SauceLabs [Platform Configurator](https://wiki.saucelabs.com/display/DOCS/Platform+Configurator#/). Zudem möchte ich euch dennoch die Keys kurz erklären:
Die genaue Definition für die Konfiguration der SauceLab Browser findet ihr im SauceLabs [Platform Configurator](https://wiki.saucelabs.com/display/DOCS/Platform+Configurator#/){:rel="noopener noreferrer nofollow"}. Zudem möchte ich euch dennoch die Keys kurz erklären:

* `browserName` (string)
Der Name des Browsers, welcher verwendet werden soll.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -143,21 +143,21 @@ deployment:

### Nightly Builds mit Circle CI

Mit Circle CI besteht auch die Möglichkeit sogenannte Nightly-Builds durchzuführen. Dies ist vor allem dann sinnvoll, wenn man sehr aufwendige E2E Tests beispielsweise über [SauceLabs](https://saucelabs.com/) durchführen möchte.
Mit Circle CI besteht auch die Möglichkeit sogenannte Nightly-Builds durchzuführen. Dies ist vor allem dann sinnvoll, wenn man sehr aufwendige E2E Tests beispielsweise über [SauceLabs](https://saucelabs.com/){:rel="noopener noreferrer nofollow"} durchführen möchte.

Um dies zu realisieren, muss die API von Circle CI z.B. per Scheduler angetriggert werden. Dies wird mit Hilfe eines POSTS durchgeführt. Innerhalb dieses Requests kann man Informationen mitliefern, die Circle CI erkennen lässt, dass es sich um einen Nightly Build handelt.

Mehr hierzu findet Ihr unter der Doc vom [Circle CI](https://circleci.com/docs/)

## 3. Sauce Labs für eure E2E Tests

[SauceLabs](https://saucelabs.com/) ist ein Clouddienst, welcher es ermöglicht cross-browser-testing innerhalb der Cloud durchzuführen. Als Framework in Zusammenhang mit Angular empfiehlt sich hier [Protractor](http://www.protractortest.org/#/) im Zusammenspiel mit [Jasmine](https://jasmine.github.io/). Der Vorteil ist, dass man hier sämtliche Betriebssysteme und Browser auf Abruf erhält und dort seine Tests laufen lassen kann.
[SauceLabs](https://saucelabs.com/){:rel="noopener noreferrer nofollow"} ist ein Clouddienst, welcher es ermöglicht cross-browser-testing innerhalb der Cloud durchzuführen. Als Framework in Zusammenhang mit Angular empfiehlt sich hier [Protractor](http://www.protractortest.org/#/){:rel="noopener noreferrer nofollow"} im Zusammenspiel mit [Jasmine](https://jasmine.github.io/){:rel="noopener noreferrer nofollow"}. Der Vorteil ist, dass man hier sämtliche Betriebssysteme und Browser auf Abruf erhält und dort seine Tests laufen lassen kann.

Falls euch dieses Thema tiefer interessieren sollte, empfehle ich euch meinen Artikel [Angular E2E Tests mit Protractor und Sauce Labs](/artikel/angular-e2e-protractor-test-saucelabs/). Hier beschreibe ich Schritt für Schritt die Anwendung von SauceLabs.

## 4. Dockercloud als Continuous Delivery Umgebung

Mit [Dockercloud](https://hub.docker.com) (ehemals Tutum) hat Docker eine Umgebung geschaffen, in welcher sich diese Dockercontainer mit ihren Applikationen sehr einfach von Dockerhub herunterladen, starten und veröffentlichen lassen. Als Basis lassen sich Machinedroplets von Digital Ocean, AWS o.ä. als Node in Dockercloud verlinken.
Mit [Dockercloud](https://hub.docker.com){:rel="noopener noreferrer nofollow"} (ehemals Tutum) hat Docker eine Umgebung geschaffen, in welcher sich diese Dockercontainer mit ihren Applikationen sehr einfach von Dockerhub herunterladen, starten und veröffentlichen lassen. Als Basis lassen sich Machinedroplets von Digital Ocean, AWS o.ä. als Node in Dockercloud verlinken.

### Arbeiten mit unterschiedlichen Stacks

Expand Down Expand Up @@ -204,7 +204,7 @@ Wie ihr erkennen könnt, gibt es zwei Auslöser, welche die Automatismen anwerfe

=> Ziel erreicht: Die Codeänderung ist sofort im Developmentstack verfügbar, sofern die Tests dies zugelassen haben.

Ihr könnt direkt beim Check-In abfangen, dass nur dann eingecheckt werden kann, wenn alle Test erfolgreich waren. Hierfür gibt es das NPM Modul [pre-commit](https://www.npmjs.com/package/pre-commit). Dieses Modul lässt erst dann den Commit zu, wenn die in der ```package.json```definierten pre-commits ohne Fehler durchlaufen sind.
Ihr könnt direkt beim Check-In abfangen, dass nur dann eingecheckt werden kann, wenn alle Test erfolgreich waren. Hierfür gibt es das NPM Modul [pre-commit](https://www.npmjs.com/package/pre-commit){:rel="noopener noreferrer nofollow"}. Dieses Modul lässt erst dann den Commit zu, wenn die in der ```package.json```definierten pre-commits ohne Fehler durchlaufen sind.

### Ablauf beim zeitgesteuerten Build via Scheduler

Expand Down

0 comments on commit d590f4e

Please sign in to comment.