WIP: Added E2E tests to the import from passphrase page

cypress.json

@@ -1,3 +1,3 @@
 {
-    "video": false
+    "video": true
 }

cypress/integration/import-passphrase-page.ts

@@ -0,0 +1,78 @@
+import { cleanIndexedDB } from "../plugins/helpers/clean-indexed-db";
+import { elementNotExists } from "../plugins/helpers/element-not-exists";
+
+describe("ImportPassphrasePage", () => {
+    beforeEach(() => {
+        cleanIndexedDB();
+
+        cy.visit("http://localhost:8100");
+
+        goToPage();
+    });
+
+    it("should not show the import button initially", () => {
+        elementNotExists("page-wallet-import-passphrase", "[data-cy=import-button]");
+    });
+
+    it("should show a warning if the passwords do not match", () => {
+        cy.get("[data-cy=password-input] input").type("pass123");
+        cy.get("[data-cy=password-confirm-input] input").type("321ssap");
+
+        cy.get("[data-cy=password-error-box]");
+    });
+
+    it("should show a warning if the passphrase is invalid", () => {
+        cy.get("[data-cy=passphrase-input] textarea").type("bla bla bla");
+
+        cy.get("[data-cy=passphrase-error-box]");
+    });
+
+    it("should show the import button once all fields have been filled correctly", () => {
+        cy.get("[data-cy=passphrase-input] textarea").type("one two three");
+
+        cy.get("[data-cy=password-input] input").type("pass123");
+        cy.get("[data-cy=password-confirm-input] input").type("pass123");
+
+        cy.get("[data-cy=wallet-name-input] input").type("Wallet Name");
+
+        cy.get("[data-cy=import-button]").click();
+
+        cy.get("page-prepare-wallet");
+    });
+
+    it("should toggle the advanced options correctly", () => {
+        elementNotExists("page-wallet-import-passphrase", "[data-cy=wallet-index-input] input").then(
+            () => {
+                cy.get("[data-cy=toggle-advanced-button").click();
+
+                cy.get("[data-cy=wallet-index-input] input");
+
+                cy.get("[data-cy=toggle-advanced-button").click();
+
+                elementNotExists("page-wallet-import-passphrase", "[data-cy=wallet-index-input] input");
+            }
+        );
+    });
+
+    it("should show a warning when entering incorrect address index input", () => {
+        cy.get("[data-cy=toggle-advanced-button").click();
+
+        cy.get("[data-cy=wallet-index-input] input").clear();
+
+        cy.get("[data-cy=wallet-index-input] input").type("wrong input");
+
+        cy.get("[data-cy=wallet-index-error-box]");
+
+        cy.get("[data-cy=wallet-index-input] input").clear();
+
+        cy.get("[data-cy=wallet-index-input] input").type("100");
+
+        elementNotExists("page-wallet-import-passphrase", "[data-cy=wallet-index-error-box]");
+    });
+
+    function goToPage() {
+        cy.get("[data-cy=restore-backup-button]").click();
+
+        cy.get("[data-cy=import-passphrase-button]").click();
+    }
+});

cypress/integration/import-private-key-page.ts

@@ -5,11 +5,11 @@ describe("ImportPrivateKeyPage", () => {
         cleanIndexedDB();
 
         cy.visit("http://localhost:8100");
-    });
 
-    it("should not show the import button initially", () => {
         goToPage();
+    });
 
+    it("should not show the import button initially", () => {
         cy.get("page-wallet-import-privatekey").then(
             (page) => {
                 expect(page.find("[data-cy=import-privatekey-button]")).to.have.length(0);
@@ -18,17 +18,13 @@ describe("ImportPrivateKeyPage", () => {
     });
 
     it("should show a password warning if the passwords do not match", () => {
-        goToPage();
-
         cy.get("[data-cy=password-input] input").type("pass123");
         cy.get("[data-cy=password-confirm-input] input").type("321ssap");
 
         cy.get("[data-cy=password-error]");
     });
 
     it("should show the import button once all fields have been filled correctly", () => {
-        goToPage();
-
         cy.get("[data-cy=private-key-input] textarea").type("PrivateKey");
         cy.get("[data-cy=wallet-name-input] input").type("Wallet Name");
         cy.get("[data-cy=password-input] input").type("pass123");
@@ -41,8 +37,6 @@ describe("ImportPrivateKeyPage", () => {
     });
 
     it("should show a password explanation dialog", () => {
-        goToPage();
-
         // Open modal
         cy.get("[data-cy=password-explanation]").click();
 
@@ -53,7 +47,7 @@ describe("ImportPrivateKeyPage", () => {
         cy.get("[data-cy=password-explain-ok-button]").click();
 
         // Wait to allow the modal animation to end
-        cy.wait(2000);
+        cy.wait(10000);
 
         cy.get("body").then(
             (body) => {

cypress/plugins/helpers/clean-indexed-db.ts

@@ -1,3 +1,5 @@
+///<reference types="cypress"/>
+
 export function cleanIndexedDB() {
-    indexedDB.deleteDatabase("_ionicstorage");
+    indexedDB.deleteDatabase("smilo-wallet");
 }

cypress/plugins/helpers/element-not-exists.ts

@@ -0,0 +1,9 @@
+///<reference types="cypress"/>
+
+export function elementNotExists(baseSelector: string, selector: string): Cypress.Chainable {
+    return cy.get(baseSelector).then(
+        (baseElement) => {
+            expect(baseElement.find(selector)).to.have.length(0);
+        }
+    )
+}

cypress/tsconfig.json

@@ -4,6 +4,10 @@
     "module": "commonjs",
     "skipLibCheck": true,
     "strict": true,
+    "lib": [
+      "es2015",
+      "dom"
+    ],
     "types": [
       "node",
       "cypress"

package.json

@@ -12,6 +12,7 @@
     "test-ci": "karma start ./test-config/karma.conf.js --coverage --single-run",
     "e2e": "cypress open",
     "e2e-ci": "nohup ionic serve --no-open --no-livereload --no-interactive &> /dev/null & (wait-on http://localhost:8100 && cypress run && pkill -f ionic)",
+    "e2e-electron-headed": "cypress run --headed",
     "ionic:build": "ionic-app-scripts build",
     "ionic:serve": "ionic-app-scripts serve",
     "release:android": "./scripts/release-android.sh",

src/pages/wallet-import-passphrase/wallet-import-passphrase.html

@@ -15,8 +15,8 @@
                         formControlName="passphrase"
                         [(ngModel)]="passphrase" 
                         (ionChange)="onPassphraseChanged()"
-                        class="passphrase-input"
-                        [placeholder]="'import_passphrase.passphrase_hint' | translate"></ion-textarea>
+                        [placeholder]="'import_passphrase.passphrase_hint' | translate"
+                        [attr.data-cy]="'passphrase-input'"></ion-textarea>
           </ion-item>
 
           <ion-item>
@@ -25,9 +25,9 @@
             </ion-label>
             <ion-input type="password" 
                         formControlName="password"
-                        class="password-input"
                         [(ngModel)]="password" 
-                        (ionChange)="onPasswordChanged()"></ion-input>
+                        (ionChange)="onPasswordChanged()"
+                        [attr.data-cy]="'password-input'"></ion-input>
           </ion-item>
 
           <ion-item>
@@ -36,63 +36,65 @@
             </ion-label>
             <ion-input type="password" 
                         formControlName="passwordConfirm"
-                        class="password-confirm-input"
                         [(ngModel)]="passwordConfirm" 
-                        (ionChange)="onPasswordChanged()"></ion-input>
+                        (ionChange)="onPasswordChanged()"
+                        [attr.data-cy]="'password-confirm-input'"></ion-input>
           </ion-item>
 
           <ion-item>
             <ion-label stacked>
               {{ 'import_passphrase.wallet_name' | translate }}
             </ion-label>
-            <ion-input class="name-input" 
-                        formControlName="walletName"
-                        [(ngModel)]="walletName"></ion-input>
+            <ion-input formControlName="walletName"
+                        [(ngModel)]="walletName"
+                        [attr.data-cy]="'wallet-name-input'"></ion-input>
           </ion-item>
 
           <div *ngIf="showAdvanced">
             <ion-item>
               <ion-label stacked>
                 {{ 'import_passphrase.wallet_index' | translate }}
               </ion-label>
-              <ion-input class="name-input" 
-                          formControlName="walletIndex"
+              <ion-input formControlName="walletIndex"
                           class="wallet-index-input"
-                          [(ngModel)]="walletIndex"></ion-input>
+                          [(ngModel)]="walletIndex"
+                          [attr.data-cy]="'wallet-index-input'"></ion-input>
             </ion-item>
           </div>
         </form>
 
-        <div class="content-div" *ngIf="passwordStatus && passwordStatus.type != 'success'">
+        <div class="content-div" *ngIf="passwordStatus && passwordStatus.type != 'success'" [attr.data-cy]="'password-error-box'">
           <span [ngClass]="{'error-box': passwordStatus.type == 'error', 'warning-box': passwordStatus.type == 'warning'}" 
                 class="password-message-box">
             {{ passwordStatus.message }}
           </span>
         </div>
 
-        <div class="content-div" *ngIf="passphraseStatus && !passphraseStatus.isValid">
+        <div class="content-div" *ngIf="passphraseStatus && !passphraseStatus.isValid" [attr.data-cy]="'passphrase-error-box'">
           <span [ngClass]="{'error-box': passphraseStatus.isBlocking, 'warning-box': !passphraseStatus.isBlocking}" 
-                class="error-box passphrase-message-box">
+                class="error-box">
             {{ passphraseStatus.errorMessage }}
           </span>
         </div>
 
-        <div class="content-div" *ngIf="!form.controls.walletIndex.valid">
-          <span class="wallet-index-message-box error-box">
+        <div class="content-div" *ngIf="!form.controls.walletIndex.valid" [attr.data-cy]="'wallet-index-error-box'">
+          <span class="error-box">
               {{ 'import_passphrase.errors.wallet_index' | translate }}
           </span>
         </div>
-
+        
         <div class="content-div">
-          <button ion-button small class="show-advanced-button" (click)="walletIndex = 0; showAdvanced = !showAdvanced">
+          <button ion-button small
+                  (click)="walletIndex = 0; showAdvanced = !showAdvanced"
+                  [attr.data-cy]="'toggle-advanced-button'">
             {{ 'import_passphrase.buttons.advanced' | translate }}
           </button>
         </div>
 
         <smilo-password-strength-field [password]="password"></smilo-password-strength-field>
 
         <div class="content-div">
-          <button ion-button *ngIf="dataIsValid()" class="import-button" (click)="import()">
+          <button ion-button *ngIf="dataIsValid()" (click)="import()" [attr.data-cy]="'import-button'">
             {{ 'import_passphrase.buttons.import' | translate }}
           </button>
         </div>