Chore: Cypress test for address labeling (#2021)

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",

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')
+    })
+})

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"