[TEST] Unit tests for Login component

scripts/dashboard/CreateWallet.vue

@@ -4,14 +4,18 @@ import pLogo from '../../assets/p_logo.svg';
 import Modal from '../Modal.vue';
 import { generateMnemonic } from 'bip39';
 import { translation } from '../i18n.js';
-import { ref, watch } from 'vue';
-import { fAdvancedMode } from '../settings';
+import { ref, watch, toRefs } from 'vue';
 
 const emit = defineEmits(['importWallet']);
 const showModal = ref(false);
 const mnemonic = ref('');
 const passphrase = ref('');
 
+const props = defineProps({
+    advancedMode: Boolean,
+});
+const { advancedMode } = toRefs(props);
+
 async function informUserOfMnemonic() {
     return await new Promise((res, _) => {
         showModal.value = true;
@@ -91,7 +95,7 @@ async function generateWallet() {
                         <i v-html="translation.digitalStoreNotAdvised"></i>
                     </a>
                     <br />
-                    <div v-if="fAdvancedMode">
+                    <div v-if="advancedMode">
                         <br />
                         <input
                             class="center-text"

scripts/dashboard/Login.vue

@@ -17,6 +17,7 @@ const { advancedMode } = toRefs(props);
 <template>
     <div class="row m-0">
         <CreateWallet
+            :advanced-mode="advancedMode"
             @import-wallet="
                 (mnemonic, password) =>
                     $emit('import-wallet', {
@@ -60,6 +61,7 @@ const { advancedMode } = toRefs(props);
                     <button
                         class="pivx-button-big"
                         @click="$emit('import-wallet', { type: 'hardware' })"
+                        data-testid="hardwareWalletBtn"
                     >
                         <span class="buttoni-icon" v-html="pLogo"> </span>
 

tests/components/CreateWallet.test.js

@@ -1,18 +1,16 @@
 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);
+        const wrapper = mount(CreateWallet, {
+            props: {
+                advancedMode: false,
+            },
+        });
         expect(wrapper.emitted('importWallet')).toBeUndefined();
         // Modal with seedphrase is still hidden
         expect(
@@ -52,10 +50,11 @@ describe('create wallet tests', () => {
         ]);
     });
     it('Generates wallet advanced mode', async () => {
-        // mock settings to disable advancedmode
-        vi.spyOn(settings, 'fAdvancedMode', 'get').mockReturnValue(true);
-
-        const wrapper = mount(CreateWallet);
+        const wrapper = mount(CreateWallet, {
+            props: {
+                advancedMode: true,
+            },
+        });
         expect(wrapper.emitted('importWallet')).toBeUndefined();
         // Modal with seedphrase and passphrase is still hidden
         expect(

tests/components/Login.test.js

@@ -0,0 +1,146 @@
+import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { expect } from 'vitest';
+import Login from '../../scripts/dashboard/Login.vue';
+import CreateWallet from '../../scripts/dashboard/CreateWallet.vue';
+import VanityGen from '../../scripts/dashboard/VanityGen.vue';
+import AccessWallet from '../../scripts/dashboard/AccessWallet.vue';
+import { vi, it, describe } from 'vitest';
+
+// We need to attach the component to a HTML,
+// or .isVisible() function does not work
+document.body.innerHTML = `
+  <div>
+    <div id="app"></div>
+  </div>
+`;
+
+describe('Login tests', () => {
+    afterEach(() => vi.clearAllMocks());
+    test('Create wallet login (no advanced)', async () => {
+        const wrapper = shallowMount(Login, {
+            props: {
+                advancedMode: false,
+            },
+            attachTo: document.getElementById('app'),
+        });
+        expect(wrapper.emitted('import-wallet')).toBeUndefined();
+        const createWalletComponent = wrapper.findComponent(CreateWallet);
+        // Create Wallet component must be visible
+        expect(createWalletComponent.isVisible()).toBeTruthy();
+        expect(createWalletComponent.props()).toStrictEqual({
+            advancedMode: false,
+        });
+        // We can just emit the event: CreateWallet has already been unit tested!
+        createWalletComponent.vm.$emit('import-wallet', 'mySecret', '');
+        // Make sure the Login component relays the right event
+        expect(wrapper.emitted('import-wallet')).toHaveLength(1);
+        expect(wrapper.emitted('import-wallet')).toStrictEqual([
+            [{ password: '', secret: 'mySecret', type: 'hd' }],
+        ]);
+    });
+    test('Create wallet login (advanced)', async () => {
+        const wrapper = shallowMount(Login, {
+            props: {
+                advancedMode: true,
+            },
+            attachTo: document.getElementById('app'),
+        });
+        expect(wrapper.emitted('import-wallet')).toBeUndefined();
+        const createWalletComponent = wrapper.findComponent(CreateWallet);
+        // Create Wallet component must be visible
+        expect(createWalletComponent.isVisible()).toBeTruthy();
+        expect(createWalletComponent.props()).toStrictEqual({
+            advancedMode: true,
+        });
+        // We can just emit the event: CreateWallet has already been unit tested!
+        createWalletComponent.vm.$emit('import-wallet', 'mySecret', 'myPass');
+        // Make sure the Login component relays the right event
+        expect(wrapper.emitted('import-wallet')).toHaveLength(1);
+        expect(wrapper.emitted('import-wallet')).toStrictEqual([
+            [{ password: 'myPass', secret: 'mySecret', type: 'hd' }],
+        ]);
+    });
+    test('Vanity gen login', async () => {
+        const wrapper = shallowMount(Login, {
+            props: {
+                advancedMode: false,
+            },
+            attachTo: document.getElementById('app'),
+        });
+        expect(wrapper.emitted('import-wallet')).toBeUndefined();
+        const vanityGenComponent = wrapper.findComponent(VanityGen);
+        // Create Wallet component must be visible
+        expect(vanityGenComponent.isVisible()).toBeTruthy();
+        // Vanity gen is easy: it has no props
+        expect(vanityGenComponent.props()).toStrictEqual({});
+        // We can just emit a complete random event: VanityGen has already been unit tested!
+        vanityGenComponent.vm.$emit('import-wallet', 'mySecret');
+        // Make sure the Login component relays the right event
+        expect(wrapper.emitted('import-wallet')).toHaveLength(1);
+        expect(wrapper.emitted('import-wallet')).toStrictEqual([
+            [{ secret: 'mySecret', type: 'legacy' }],
+        ]);
+    });
+    test('Access wallet login (no advanced)', async () => {
+        const wrapper = shallowMount(Login, {
+            props: {
+                advancedMode: false,
+            },
+            attachTo: document.getElementById('app'),
+        });
+        expect(wrapper.emitted('import-wallet')).toBeUndefined();
+        const accessWalletComponent = wrapper.findComponent(AccessWallet);
+        // Make sure that access Wallet Component has been created with the correct props
+        expect(accessWalletComponent.props()).toStrictEqual({
+            advancedMode: false,
+        });
+        // We can just emit a complete random event: AccessWallet has already been unit tested!
+        accessWalletComponent.vm.$emit('import-wallet', 'mySecret', '');
+        // Make sure the Login component relays the right event
+        expect(wrapper.emitted('import-wallet')).toHaveLength(1);
+        expect(wrapper.emitted('import-wallet')).toStrictEqual([
+            [{ secret: 'mySecret', type: 'hd', password: '' }],
+        ]);
+    });
+    test('Access wallet login (advanced)', async () => {
+        const wrapper = shallowMount(Login, {
+            props: {
+                advancedMode: true,
+            },
+            attachTo: document.getElementById('app'),
+        });
+        expect(wrapper.emitted('import-wallet')).toBeUndefined();
+        const accessWalletComponent = wrapper.findComponent(AccessWallet);
+        // Make sure that access Wallet Component has been created with the correct props
+        expect(accessWalletComponent.props()).toStrictEqual({
+            advancedMode: true,
+        });
+        // We can just emit a complete random event: AccessWallet has already been unit tested!
+        accessWalletComponent.vm.$emit('import-wallet', 'mySecret', 'myPass');
+        // Make sure the Login component relays the right event
+        expect(wrapper.emitted('import-wallet')).toHaveLength(1);
+        expect(wrapper.emitted('import-wallet')).toStrictEqual([
+            [{ secret: 'mySecret', type: 'hd', password: 'myPass' }],
+        ]);
+    });
+    test('HardwareWallet login', async () => {
+        const wrapper = shallowMount(Login, {
+            props: {
+                advancedMode: false,
+            },
+            attachTo: document.getElementById('app'),
+        });
+        const hardwareWalletBtn = wrapper.find(
+            '[data-testid=hardwareWalletBtn]'
+        );
+        // Make sure it's visible and click it
+        expect(hardwareWalletBtn.isVisible()).toBeTruthy();
+        await hardwareWalletBtn.trigger('click');
+        // Make sure the Login component relays the right event
+        expect(wrapper.emitted('import-wallet')).toHaveLength(1);
+        expect(wrapper.emitted('import-wallet')).toStrictEqual([
+            [{ type: 'hardware' }],
+        ]);
+    });
+});