From ecbb69d8582a07f802e8aa94538f1bba04eefac0 Mon Sep 17 00:00:00 2001
From: Manolis Mandrapilias <70536101+moneymanolis@users.noreply.github.com>
Date: Mon, 19 Dec 2022 16:57:08 +0100
Subject: [PATCH] Chore: Cypress test for address labeling (#2021)

---
 cypress.json                                  |  1 +
 cypress/integration/spec_labeling.js          | 35 +++++++++++++++++++
 .../templates/includes/address-label.html     |  8 ++---
 3 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 cypress/integration/spec_labeling.js

diff --git a/cypress.json b/cypress.json
index ddd0b1343..5579a5fca 100644
--- a/cypress.json
+++ b/cypress.json
@@ -9,6 +9,7 @@
       "spec_fees.js",
       "spec_rescan.js",
       "spec_qr_signing.js",
+      "spec_labeling.js",
       "spec_balances_amounts.js",
       "spec_wallet_send.js",
       "spec_wallet_utxo.js",
diff --git a/cypress/integration/spec_labeling.js b/cypress/integration/spec_labeling.js
new file mode 100644
index 000000000..4f99859ce
--- /dev/null
+++ b/cypress/integration/spec_labeling.js
@@ -0,0 +1,35 @@
+// Note: Currently we only have address labels
+describe('Test the labeling of addresses and transactions', () => {
+    before(() => {
+        Cypress.config('includeShadowDom', true)
+        cy.visit('/')
+    })
+
+    // Keeps the session cookie alive, Cypress by default clears all cookies before each test
+    beforeEach(() => {
+        cy.viewport(1200,660)
+        Cypress.Cookies.preserveOnce('session')
+    })
+
+    it('Labeling an address on the address overview', () => {
+        // Using the ghost wallet
+        cy.get('.side').contains('Ghost wallet').click()
+        cy.get('main').contains('Addresses').click()
+        // Checking the correct titles since those are the only orientation for the user right now
+        cy.get('[data-cy="edit-label-btn"]').last().should('have.attr', 'title', 'Edit label') // The last element in the array is the first one on the screen ...
+        cy.get('[data-cy="label"]').last().should('have.attr', 'title', 'Edit label')
+        // Edit the label of the first address
+        cy.get('[data-cy="edit-label-btn"]').last().click().type('{selectall}{backspace}').type('Swan withdrawal address') // Not sure why backspace alone is not enough
+        cy.get('[data-cy="update-label-btn"]').last().click()
+        cy.contains('Swan withdrawal address')
+        // Check that the canceling works as expected
+        cy.get('[data-cy="edit-label-btn"]').last().click().type('{backspace}'.repeat(6))
+        cy.get('[data-cy="cancel-edit-btn"]').last().click()
+        cy.contains('Swan withdrawal address')
+        // Clicking somewhere should cancel the editing
+        cy.get('[data-cy="edit-label-btn"]').last().click().type('{backspace}'.repeat(6))
+        cy.get('[data-cy="cancel-edit-btn"]').last().click()
+        cy.get('main').click()
+        cy.contains('Swan withdrawal address')
+    })
+})
\ No newline at end of file
diff --git a/src/cryptoadvance/specter/templates/includes/address-label.html b/src/cryptoadvance/specter/templates/includes/address-label.html
index 1eb8247d5..ca00e1886 100644
--- a/src/cryptoadvance/specter/templates/includes/address-label.html
+++ b/src/cryptoadvance/specter/templates/includes/address-label.html
@@ -69,7 +69,7 @@
     </style>
 
     <form class="address-label-form">
-        <button type="button" class="btn edit" title="Edit label">
+        <button type="button" class="btn edit" title="Edit label" data-cy="edit-label-btn">
             <img
                 src="{{ url_for('static', filename='img/tag.svg') }}"
                 style="width: 22px; margin-top: -2px"
@@ -82,18 +82,18 @@
                 value="{{ csrf_token() }}"
             />
             <img class="service-icon" />
-            <span class="label" tabindex="-1" autocomplete="off" spellcheck="false" title="Edit label">
+            <span class="label" tabindex="-1" autocomplete="off" spellcheck="false" title="Edit label" data-cy="label">
                 {{ _("Fetching address label...") }}
             </span>
         </button>
-        <button type="button" class="btn update hidden" title="Update">
+        <button type="button" class="btn update hidden" title="Update" data-cy="update-label-btn">
             <img
                 src="{{ url_for('static', filename='img/check_thick.svg') }}"
                 style="width: 18px"
                 class="svg-white"
             />
         </button>
-        <button type="button" class="btn cancel hidden" title="Cancel">
+        <button type="button" class="btn cancel hidden" title="Cancel" data-cy="cancel-edit-btn">
             <img
                 src="{{ url_for('static', filename='img/cross_thick.svg') }}"
                 style="width: 18px"