Added testcases for Tokens & TotalAmount Component

.gitignore

@@ -9,8 +9,9 @@
 /.idea
 /.nyc_output
 .DS_Store
-/tests/e2e/videos
-/tests/e2e/screenshots
+/tests/e2e/videos/
+/tests/e2e/screenshots/
+/coverage
 
 # local env files
 .env.local

jest.config.js

@@ -21,6 +21,7 @@ module.exports = {
     '<rootDir>/config/jest/setEnvVars.js',
     '<rootDir>/config/jest/setup.js',
   ],
+  collectCoverage: true,
   transform: {
     '^.+\\.(ts|tsx)$': 'ts-jest',
     '^.+\\.vue$': 'vue-jest',

tests/unit/TokenAmount.spec.js

@@ -0,0 +1,29 @@
+import { shallowMount } from '@vue/test-utils';
+import TokenAmount from '../../src/popup/components/TokenAmount.vue';
+
+let wrapper;
+
+describe('TokenAmount', () => {
+  beforeEach(() => {
+    wrapper = shallowMount(TokenAmount, {
+      propsData: {
+        amount: 111,
+        hideFiat: true,
+        direction: 'sent',
+        large: false,
+        noSymbol: true,
+        highPrecision: false,
+      },
+      mocks: {
+        $store: {
+          state: {},
+          getters: {},
+        },
+      },
+    });
+  });
+
+  it('should match the snapshot', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

tests/unit/Tokens.spec.js

@@ -0,0 +1,34 @@
+import { shallowMount } from '@vue/test-utils';
+import Tokens from '../../src/popup/components/Tokens.vue';
+
+let wrapper;
+
+describe('Tokens', () => {
+  beforeEach(() => {
+    wrapper = shallowMount(Tokens, {
+      propsData: {
+        tokens: [{ symbol: 'test123', contractId: '1' }, { symbol: 'test456', contractId: '2' }],
+        vertical: true,
+      },
+    });
+  });
+
+  it('should match the snapshot', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should test getAvailableCharLength', async () => {
+    const getAvailableCharLength = jest.spyOn(wrapper.vm, 'getAvailableCharLength');
+    let length = wrapper.vm.getAvailableCharLength();
+    expect(getAvailableCharLength).toHaveBeenCalled();
+    expect(length).toEqual(5);
+    await wrapper.setProps({
+      symbolLength: 11,
+      doubleSymbolLength: 5,
+      tokens: [{ symbol: 'test' }, { symbol: 'test456' }],
+      vertical: true,
+    });
+    length = wrapper.vm.getAvailableCharLength();
+    expect(length).toEqual(7);
+  });
+});

tests/unit/__snapshots__/TokenAmount.spec.js.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TokenAmount should match the snapshot 1`] = `
+<span class="token-amount sent"><span><!----> <span class="amount">
+      111
+      <!----></span></span>
+<!----></span>
+`;

tests/unit/__snapshots__/Tokens.spec.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tokens should match the snapshot 1`] = `
+<span class="tokens rg vertical"><span class="icons"><img src="https://avatars.z52da5wt.xyz/2" title="test456" class="to-token border"> <img src="https://avatars.z52da5wt.xyz/1" title="test123" class="border pair"></span> <span class="symbols"><span class="symbol">
+      test1...
+    </span> <span class="separator">
+      /
+    </span> <span class="symbol">
+      test4...
+    </span></span></span>
+`;