[TEST] Add unit tests for CreateWallet (#277)

* Add unit test for CreateWallet

* run prettier

scripts/dashboard/CreateWallet.vue

@@ -49,7 +49,11 @@ async function generateWallet() {
                 </p>
             </div>
 
-            <button class="pivx-button-big" @click="generateWallet()">
+            <button
+                class="pivx-button-big"
+                @click="generateWallet()"
+                data-testid="generateWallet"
+            >
                 <span class="buttoni-icon" v-html="pLogo"> </span>
                 <span class="buttoni-text">
                     {{ translation.dCardOneButton }}
@@ -94,6 +98,7 @@ async function generateWallet() {
                             type="password"
                             :placeholder="translation.optionalPassphrase"
                             v-model="passphrase"
+                            data-testid="passPhrase"
                         />
                     </div>
                 </div>
@@ -104,6 +109,7 @@ async function generateWallet() {
                         type="button"
                         class="pivx-button-big"
                         @click="showModal = false"
+                        data-testid="seedphraseModal"
                     >
                         {{ translation.writtenDown }}
                     </button>

tests/components/CreateWallet.test.js

@@ -0,0 +1,106 @@
+import { mount } from '@vue/test-utils';
+import { nextTick, ref } from 'vue';
+import { expect } from 'vitest';
+import CreateWallet from '../../scripts/dashboard/CreateWallet.vue';
+import Modal from '../../scripts/Modal.vue';
+import { vi, it, describe } from 'vitest';
+import * as settings from '../../scripts/settings';
+
+describe('create wallet tests', () => {
+    afterEach(() => vi.clearAllMocks());
+    it('Generates wallet', async () => {
+        // mock settings to disable advancedmode
+        vi.spyOn(settings, 'fAdvancedMode', 'get').mockReturnValue(false);
+
+        const wrapper = mount(CreateWallet);
+        expect(wrapper.emitted('importWallet')).toBeUndefined();
+        // Modal with seedphrase is still hidden
+        expect(
+            wrapper
+                .findComponent(Modal)
+                .findAll('[data-testid=seedphraseModal]')
+        ).toHaveLength(0);
+        const genWalletButton = wrapper.find('[data-testid=generateWallet]');
+        expect(genWalletButton.isVisible).toBeTruthy();
+        await genWalletButton.trigger('click');
+
+        // The click generated a seedphrase modal
+        const seedphraseModals = wrapper
+            .findComponent(Modal)
+            .findAll('[data-testid=seedphraseModal]');
+        // But there is no passphrase
+        expect(
+            wrapper.findComponent(Modal).findAll('[data-testid=passPhrase]')
+        ).toHaveLength(0);
+        expect(seedphraseModals).toHaveLength(1);
+        const seedphrase = wrapper.findComponent(Modal).text();
+        // We must have 12 words in the seedphrase
+        expect(seedphrase.split(' ')).toHaveLength(12);
+        await seedphraseModals[0].trigger('click');
+        // Which now disappeared again
+        expect(
+            wrapper
+                .findComponent(Modal)
+                .findAll('[data-testid=seedphraseModal]')
+        ).toHaveLength(0);
+
+        // Ok We emitted exactly one event importWallet
+        expect(wrapper.emitted('importWallet')).toHaveLength(1);
+        // We emitted exactly the seedphrase with empty passphrase
+        expect(wrapper.emitted('importWallet')).toStrictEqual([
+            [seedphrase, ''],
+        ]);
+    });
+    it('Generates wallet advanced mode', async () => {
+        // mock settings to disable advancedmode
+        vi.spyOn(settings, 'fAdvancedMode', 'get').mockReturnValue(true);
+
+        const wrapper = mount(CreateWallet);
+        expect(wrapper.emitted('importWallet')).toBeUndefined();
+        // Modal with seedphrase and passphrase is still hidden
+        expect(
+            wrapper
+                .findComponent(Modal)
+                .findAll('[data-testid=seedphraseModal]')
+        ).toHaveLength(0);
+        expect(
+            wrapper.findComponent(Modal).findAll('[data-testid=passPhrase]')
+        ).toHaveLength(0);
+        const genWalletButton = wrapper.find('[data-testid=generateWallet]');
+        expect(genWalletButton.isVisible).toBeTruthy();
+        await genWalletButton.trigger('click');
+
+        // The click generated a modal with seedphrase and passphrase
+        const seedphraseModals = wrapper
+            .findComponent(Modal)
+            .findAll('[data-testid=seedphraseModal]');
+        expect(
+            wrapper.findComponent(Modal).findAll('[data-testid=passPhrase]')
+        ).toHaveLength(1);
+        expect(seedphraseModals).toHaveLength(1);
+        const seedphrase = wrapper.findComponent(Modal).text();
+        // We must have 12 words in the seedphrase
+        expect(seedphrase.split(' ')).toHaveLength(12);
+        // Select a pass phrase
+        const passPhrase = wrapper
+            .findComponent(Modal)
+            .find('[data-testid=passPhrase]');
+        expect(passPhrase.element.value).toBe('');
+        passPhrase.element.value = 'panleone';
+        passPhrase.trigger('input');
+        await seedphraseModals[0].trigger('click');
+        // Which now disappeared again
+        expect(
+            wrapper
+                .findComponent(Modal)
+                .findAll('[data-testid=seedphraseModal]')
+        ).toHaveLength(0);
+
+        // Ok We emitted exactly one event importWallet
+        expect(wrapper.emitted('importWallet')).toHaveLength(1);
+        // We emitted exactly the seedphrase with empty passphrase
+        expect(wrapper.emitted('importWallet')).toStrictEqual([
+            [seedphrase, 'panleone'],
+        ]);
+    });
+});