Switch from jest to vitest (#264)

* Switch from jest to vitest

* Remove old config files

* Add TransferMenu test

* Quick test to see if github actions are working

* Revert "Quick test to see if github actions are working"

This reverts commit 3bbc2a1.

package.json

@@ -12,7 +12,7 @@
         "deploy": "gh-pages -d dist",
         "prettier": "prettier --write --cache .",
         "lint": "eslint .",
-        "test": "jest"
+        "test": "vitest"
     },
     "repository": {
         "type": "git",
@@ -30,20 +30,19 @@
     },
     "homepage": "https://github.com/PIVX-Labs/MyPIVXWallet#readme",
     "devDependencies": {
-        "@babel/preset-env": "^7.22.20",
         "@fluent/langneg": "^0.7.0",
-        "@types/jest": "^29.5.5",
         "@types/lodash-es": "^4.17.6",
         "@typescript-eslint/eslint-plugin": "^5.48.0",
         "@typescript-eslint/parser": "^5.48.0",
-        "@vue/vue3-jest": "^27.0.0",
-        "babel-plugin-transform-import-meta": "^2.2.1",
+        "@vitejs/plugin-vue": "^4.4.1",
+        "@vue/test-utils": "^2.4.2",
         "copy-webpack-plugin": "^11.0.0",
         "css-loader": "^6.7.3",
         "css-minimizer-webpack-plugin": "^4.2.2",
         "eslint": "^8.31.0",
         "file-loader": "^6.2.0",
         "gh-pages": "^5.0.0",
+        "happy-dom": "^12.10.3",
         "html-loader": "^4.2.0",
         "html-webpack-plugin": "^5.5.0",
         "mini-css-extract-plugin": "^2.7.2",
@@ -53,6 +52,7 @@
         "raw-loader": "^4.0.2",
         "resource-loader": "^4.0.0-rc4",
         "toml": "^3.0.0",
+        "vitest": "^0.34.6",
         "vue-loader": "^17.2.2",
         "webpack": "^5.75.0",
         "webpack-cli": "^5.0.1",

scripts/dashboard/TransferMenu.vue

@@ -82,6 +82,7 @@ async function selectContact() {
                             show = false;
                             $emit('close');
                         "
+                        data-testid="closeButton"
                     >
                         <i class="fa-solid fa-xmark"></i>
                     </div>
@@ -147,6 +148,7 @@ async function selectContact() {
                                     placeholder="0.00"
                                     autocomplete="nope"
                                     onkeydown="javascript: return event.keyCode == 69 ? false : true"
+                                    data-testid="amount"
                                     @input="$nextTick(syncAmountCurrency)"
                                     v-model="amount"
                                 />
@@ -185,6 +187,7 @@ async function selectContact() {
                                     placeholder="0.00"
                                     autocomplete="nope"
                                     onkeydown="javascript: return event.keyCode == 69 ? false : true"
+                                    data-testid="amountCurrency"
                                     @input="syncAmount"
                                     v-model="amountCurrency"
                                 />
@@ -232,6 +235,7 @@ async function selectContact() {
                             class="pivx-button-medium w-100"
                             style="margin: 0px"
                             @click="send()"
+                            data-testid="sendButton"
                         >
                             <span class="buttoni-icon"
                                 ><i

tests/components/TransferMenu.test.js

@@ -0,0 +1,67 @@
+import { mount } from '@vue/test-utils';
+import { nextTick, ref } from 'vue';
+import { expect } from 'vitest';
+import TransferMenu from '../../scripts/dashboard/TransferMenu.vue';
+const price = 0.4;
+const mountTM = (amount = '123', address = '') => {
+    const wrapper = mount(TransferMenu, {
+        props: {
+            show: true,
+            price,
+            currency: 'USD',
+            amount,
+            address,
+
+            'onUpdate:amount': (e) => wrapper.setProps({ amount: e }),
+        },
+    });
+    return wrapper;
+};
+
+it('Updates inputs', async () => {
+    const wrapper = mountTM();
+
+    const amount = wrapper.find('[data-testid=amount]');
+    const currency = wrapper.find('[data-testid=amountCurrency]');
+
+    amount.trigger('input');
+
+    await nextTick();
+    await nextTick();
+
+    // Test that amount -> currency updates
+    expect(amount.element.value).toBe('123');
+    expect(currency.element.value).toBe(`${123 * price}`);
+
+    // Test that currency -> amount updates
+    currency.element.value = '49';
+    currency.trigger('input');
+    await nextTick();
+
+    expect(amount.element.value).toBe(`${49 / price}`);
+    expect(currency.element.value).toBe(`49`);
+
+    // Test that setting one as empty clears the other
+    currency.element.value = '';
+    currency.trigger('input');
+    await nextTick();
+
+    expect(amount.element.value).toBe('');
+    expect(currency.element.value).toBe('');
+});
+
+it('Closes correctly', async () => {
+    const wrapper = mountTM();
+    expect(wrapper.emitted('close')).toBeUndefined();
+    wrapper.find('[data-testid=closeButton]').trigger('click');
+    expect(wrapper.emitted('close')).toHaveLength(1);
+});
+
+it('Sends transaction correctly', async () => {
+    const wrapper = mountTM('60', 'DLabsktzGMnsK5K9uRTMCF6NoYNY6ET4Bc');
+    expect(wrapper.emitted('send')).toBeUndefined();
+    wrapper.find('[data-testid=sendButton]').trigger('click');
+    expect(wrapper.emitted('send')).toStrictEqual([
+        ['DLabsktzGMnsK5K9uRTMCF6NoYNY6ET4Bc', '60'],
+    ]);
+});

tests/unit/masterkey.spec.js

@@ -1,8 +1,3 @@
-jest.mock('@ledgerhq/hw-transport-webusb', () => jest.fn());
-jest.mock('../../scripts/global.js', () => jest.fn());
-jest.mock('../../locale/template/translation.toml', () => jest.fn());
-jest.mock('../../scripts/settings.js', () => jest.fn());
-
 import { LegacyMasterKey, HdMasterKey } from '../../scripts/masterkey.js';
 import { mnemonicToSeed } from 'bip39';
 import { parseWIF, verifyPubkey } from '../../scripts/encoding.js';
@@ -58,7 +53,7 @@ describe('mainnet tests', () => {
             'YU12G8Y9LwC3wb2cwUXvvg1iMvBey1ibCF23WBAapCuaKhd6a4R6'
         );
         expect(async () => {
-            await l.getxpub();
+            l.getxpub();
         }).rejects.toThrow(/extended public key/i);
 
         expect(() => getLegacyTestnet()).toThrow(/testnet/i);

vitest.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+    assetsInclude: '**/*.toml',
+    plugins: [vue()],
+    test: {
+        environment: 'happy-dom',
+        globals: true,
+    },
+});