Add unit tests for ExportPrivKey (#280)

scripts/dashboard/ExportPrivKey.vue

@@ -29,6 +29,7 @@ function close() {
                     class="close"
                     @click="close()"
                     aria-label="Close"
+                    data-testid="closeBtn"
                 >
                     <i class="fa-solid fa-xmark closeCross"></i>
                 </button>
@@ -39,12 +40,20 @@ function close() {
                     <h3>{{ translation.viewPrivateKey }}</h3>
                     <span class="span1">{{ translation.privateWarning1 }}</span>
                     <span class="span2">{{ translation.privateWarning2 }}</span>
-                    <code :class="{ blurred: blur }">{{ privateKey }}</code>
+                    <code
+                        :class="{ blurred: blur }"
+                        data-testid="privateKeyText"
+                        >{{ privateKey }}</code
+                    >
                 </div>
             </template>
             <template #footer>
                 <center>
-                    <button class="pivx-button-big" @click="blur = !blur">
+                    <button
+                        class="pivx-button-big"
+                        @click="blur = !blur"
+                        data-testid="blurBtn"
+                    >
                         <span data-i18n="viewKey" class="buttoni-text"
                             >{{ translation.viewKey }}
                         </span>

tests/components/ExportPrivKey.test.js

@@ -0,0 +1,78 @@
+import { mount } from '@vue/test-utils';
+import { expect } from 'vitest';
+import ExportPrivKey from '../../scripts/dashboard/ExportPrivKey.vue';
+import Modal from '../../scripts/Modal.vue';
+import { vi, it, describe } from 'vitest';
+
+describe('Export private key tests', () => {
+    afterEach(() => vi.clearAllMocks());
+    it('Export Private key (showed)', async () => {
+        const wrapper = mount(ExportPrivKey, {
+            props: {
+                privateKey: 'MyPrivateSecretKey',
+                show: true,
+            },
+        });
+        expect(wrapper.emitted('close')).toBeUndefined();
+        // show = true, i.e. both privateKeyText, blurButton and close button are visible
+        expect(
+            wrapper.findComponent(Modal).findAll('[data-testid=privateKeyText]')
+        ).toHaveLength(1);
+        expect(
+            wrapper.findComponent(Modal).findAll('[data-testid=blurBtn]')
+        ).toHaveLength(1);
+        expect(
+            wrapper.findComponent(Modal).findAll('[data-testid=closeBtn]')
+        ).toHaveLength(1);
+
+        const privKeyText = wrapper
+            .findComponent(Modal)
+            .findAll('[data-testid=privateKeyText]')[0];
+        const blurBtn = wrapper
+            .findComponent(Modal)
+            .findAll('[data-testid=blurBtn]')[0];
+        const closeBtn = wrapper
+            .findComponent(Modal)
+            .findAll('[data-testid=closeBtn]')[0];
+
+        // Private key must be blurred
+        expect(privKeyText.attributes()['class']).toBe('blurred');
+        expect(privKeyText.text()).toBe('MyPrivateSecretKey');
+        // Click the button and privateKey should unblur
+        await blurBtn.trigger('click');
+        expect(privKeyText.attributes()['class']).toBe('');
+        expect(privKeyText.text()).toBe('MyPrivateSecretKey');
+        // Click it again and it should blur again
+        await blurBtn.trigger('click');
+        expect(privKeyText.attributes()['class']).toBe('blurred');
+        expect(privKeyText.text()).toBe('MyPrivateSecretKey');
+        // Finally unblur and close it
+        await blurBtn.trigger('click');
+        await closeBtn.trigger('click');
+        // on closing the privateKey must be blurred
+        expect(privKeyText.attributes()['class']).toBe('blurred');
+        expect(privKeyText.text()).toBe('MyPrivateSecretKey');
+        // The event close must have been emitted
+        expect(wrapper.emitted('close')).toHaveLength(1);
+        expect(wrapper.emitted('close')).toStrictEqual([[]]);
+    });
+    it('Export Private key (closed)', async () => {
+        const wrapper = mount(ExportPrivKey, {
+            props: {
+                privateKey: 'MyPrivateSecretKey',
+                show: false,
+            },
+        });
+        expect(wrapper.emitted('close')).toBeUndefined();
+        // show = false, i.e. nothing is there
+        expect(
+            wrapper.findComponent(Modal).findAll('[data-testid=privateKeyText]')
+        ).toHaveLength(0);
+        expect(
+            wrapper.findComponent(Modal).findAll('[data-testid=blurBtn]')
+        ).toHaveLength(0);
+        expect(
+            wrapper.findComponent(Modal).findAll('[data-testid=closeBtn]')
+        ).toHaveLength(0);
+    });
+});