From 97ee9a8abbd102eb4b0e5d33a66fd1cfa9097cc7 Mon Sep 17 00:00:00 2001
From: Karyne Mayer <karyne@detroitledger.tech>
Date: Mon, 13 May 2024 14:38:41 -0700
Subject: [PATCH] Fixes PriceChart tests to be component tests

---
 src/components/PriceChart.vue                 |  43 ++---
 .../__tests__/components/PriceChart.spec.ts   | 181 +++++++++---------
 2 files changed, 108 insertions(+), 116 deletions(-)

diff --git a/src/components/PriceChart.vue b/src/components/PriceChart.vue
index 819f58dc..06402ffd 100644
--- a/src/components/PriceChart.vue
+++ b/src/components/PriceChart.vue
@@ -1,12 +1,12 @@
 <script lang="ts">
-import { defineComponent, onMounted, ref } from 'vue';
-import { Chart } from 'highcharts-vue';
 import Highcharts from 'highcharts';
+import { Chart } from 'highcharts-vue';
 import exportingInit from 'highcharts/modules/exporting';
-import { DateTuple } from 'src/types';
-import { PriceChartData } from 'src/types/PriceChartData';
 import { getCssVar } from 'quasar';
 import { useNetworksStore } from 'src/stores/networks';
+import { DateTuple } from 'src/types';
+import { PriceChartData } from 'src/types/PriceChartData';
+import { defineComponent, onBeforeMount, ref } from 'vue';
 
 const ONE_MILLION = 1000000;
 const ONE_BILLION = 1000000000;
@@ -84,21 +84,22 @@ export default defineComponent({
                 },
             },
         });
-        const lastUpdated = ref(0);
         const tokenPrice = ref('');
         const marketCap = ref('');
-        const rank = ref('');
         const dayVolume = ref('');
         const dayChange = ref('');
 
         const fetchPriceChartData = async () => {
-            const data: PriceChartData = await networksStore.getCurrentNetwork.getPriceData();
-            lastUpdated.value = data.lastUpdated;
-            tokenPrice.value = formatCurrencyValue(data.tokenPrice);
-            dayChange.value = formatPercentage(data.dayChange);
-            dayVolume.value = formatCurrencyValue(data.dayVolume);
-            marketCap.value = formatCurrencyValue(data.marketCap);
-            chartOptions.value.series[0].data = data.prices;
+            try {
+                const data: PriceChartData = await networksStore.getCurrentNetwork.getPriceData();
+                tokenPrice.value = formatCurrencyValue(data.tokenPrice);
+                dayChange.value = formatPercentage(data.dayChange);
+                dayVolume.value = formatCurrencyValue(data.dayVolume);
+                marketCap.value = formatCurrencyValue(data.marketCap);
+                chartOptions.value.series[0].data = data.prices;
+            } catch(e) {
+                console.error('No price data available', e);
+            }
         };
         const formatPercentage = (val: number): string => `${val.toFixed(2)} %`;
         const formatCurrencyValue = (val: number): string => val < 1 ? `$${val.toFixed(3)}` : val < ONE_MILLION
@@ -107,21 +108,17 @@ export default defineComponent({
                 ? `$${(val / ONE_MILLION).toFixed(2)}M`
                 : `$${(val / ONE_BILLION).toFixed(2)}B`;
 
-        onMounted(async () => {
+        onBeforeMount(async () => {
             await fetchPriceChartData();
         });
+
         return {
             hcInstance,
             chartOptions,
-            lastUpdated,
             tokenPrice,
             marketCap,
-            rank,
             dayVolume,
             dayChange,
-            fetchPriceChartData,
-            formatPercentage,
-            formatCurrencyValue,
         };
     },
 });
@@ -141,23 +138,23 @@ export default defineComponent({
             <div class="col-12 flex row q-mt-md">
                 <div class="col-6 chart-info">
                     <p>TOKEN PRICE</p>
-                    <p class="sub-title">{{ tokenPrice}}</p>
+                    <p class="sub-title" data-test="tokenPrice">{{ tokenPrice }}</p>
                     <p class="border-line"></p>
                 </div>
                 <div class="col-6 chart-info">
                     <p>MARKETCAP</p>
-                    <p class="sub-title">{{ marketCap }}</p>
+                    <p class="sub-title" data-test="marketCap">{{ marketCap }}</p>
                     <p class="border-line"></p>
                 </div>
             </div>
             <div class="col-12 flex row">
                 <div class="col-6 chart-info">
                     <p>24H CHANGE</p>
-                    <p class="sub-title">{{ dayChange  }}</p>
+                    <p class="sub-title" data-test="dayChange">{{ dayChange  }}</p>
                 </div>
                 <div class="col-6 chart-info">
                     <p>24H VOLUME</p>
-                    <p class="sub-title">{{ dayVolume }}</p>
+                    <p class="sub-title" data-test="dayVolume">{{ dayVolume }}</p>
                 </div>
             </div>
         </div>
diff --git a/test/jest/__tests__/components/PriceChart.spec.ts b/test/jest/__tests__/components/PriceChart.spec.ts
index f95d21a0..836648a8 100644
--- a/test/jest/__tests__/components/PriceChart.spec.ts
+++ b/test/jest/__tests__/components/PriceChart.spec.ts
@@ -2,121 +2,116 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import {
+    afterEach,
     describe,
     expect,
     it,
     jest,
-    afterEach,
-    beforeEach,
 } from '@jest/globals';
 import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
 import { mount } from '@vue/test-utils';
 import PriceChart from 'src/components/PriceChart.vue';
-import { PriceStats, PriceHistory } from 'src/types';
-import axios from 'axios';
-
-const mockExchangeStats: PriceStats = {
-    data: {
-        telos: {
-            last_updated_at: 160123456,
-            usd: 2.01,
-            usd_24h_change: 30000000,
-            usd_24h_vol: 4444444,
-            usd_market_cap: 1123456789,
-        },
-    },
-};
-
-const mockHistoryData: PriceHistory = {
-    data: {
-        prices: [
-            [123, 111],
-            [456, 222],
-            [789, 333],
-        ],
-    },
-};
 
 installQuasarPlugin();
 
+jest.mock('src/stores/networks', () => ({
+    useNetworksStore: jest.fn().mockImplementationOnce(()=> ({
+        getCurrentNetwork: {
+            getSystemToken: () => ({ symbol: 'TLOS', contract: 'eosio.token', precision: 4 }),
+            getPriceData: () => ({
+                tokenPrice: 0,
+                dayChange: 0,
+                dayVolume: 0,
+                marketCap: 0,
+                prices: [
+                    [123, 111],
+                    [456, 222],
+                    [789, 333],
+                ],
+            }),
+        },
+    })).mockImplementation(() => ({
+        getCurrentNetwork: {
+            getSystemToken: () => ({ symbol: 'TLOS', contract: 'eosio.token', precision: 4 }),
+            getPriceData: () => ({
+                tokenPrice: 999999.9911,
+                dayChange: 123.456,
+                dayVolume: 1234567.89,
+                marketCap: 123456789123.45678,
+                prices: [
+                    [123, 111],
+                    [456, 222],
+                    [789, 333],
+                ],
+            }),
+        },
+    })),
+}));
+
 describe('PriceChart', () => {
-    beforeEach(() => {
-        const mock = jest.spyOn(axios, 'get');
-        mock.mockResolvedValueOnce(mockExchangeStats);
-        mock.mockResolvedValueOnce(mockHistoryData);
-    });
 
     afterEach(() => {
         jest.clearAllMocks();
     });
 
-    describe('methods', () => {
-        describe('formatPercentage', () => {
-            it('returns value rounded to 2 decimals as a % string', () => {
-                const testVal = 123.456;
-                const expected = '123.46 %';
-                const wrapper = mount(PriceChart, {
-                    global: {
-                        stubs: {
-                            Highcharts: {
-                                template: '<span />',
-                            },
-                        },
+    it('shows 0 when no data is available', async () => {
+        const wrapper = mount(PriceChart, {
+            global: {
+                stubs: {
+                    Highcharts: {
+                        template: '<span />',
                     },
-                });
-                const received = wrapper.vm.formatPercentage(testVal);
-                expect(received).toBe(expected);
-            });
+                },
+            },
         });
-        describe('formatCurrencyValue', () => {
-            it('returns value as "$" rounded to 2 decimals if value is less than a million', () => {
-                const testVal = 999999.9911;
-                const expected = '$999999.99';
-                const wrapper = mount(PriceChart, {
-                    global: {
-                        stubs: {
-                            Highcharts: {
-                                template: '<span />',
-                            },
-                        },
-                    },
-                });
-                const received = wrapper.vm.formatCurrencyValue(testVal);
 
-                expect(received).toBe(expected);
-            });
-            it('returns value "$" divided by a million rounded to 2 decimals and appended with "M" if value is greater than a million and less than a billion', () => {
-                const testVal = 1234567.89;
-                const expected = '$1.23M';
-                const wrapper =  mount(PriceChart, {
-                    global: {
-                        stubs: {
-                            Highcharts: {
-                                template: '<span />',
-                            },
-                        },
-                    },
-                });
-                const received = wrapper.vm.formatCurrencyValue(testVal);
+        await wrapper.vm.$nextTick();
 
-                expect(received).toBe(expected);
-            });
-            it('returns value "$" divided by a billion rounded to 2 decimals and appended with "B" if value is greater than a billion', () => {
-                const testVal = 123456789123.45678;
-                const expected = '$123.46B';
-                const wrapper =  mount(PriceChart, {
-                    global: {
-                        stubs: {
-                            Highcharts: {
-                                template: '<span />',
-                            },
-                        },
-                    },
-                });
-                const received = wrapper.vm.formatCurrencyValue(testVal);
+        expect(wrapper).not.toBe(null);
+
+        const tokenPrice = wrapper.find('[data-test="tokenPrice"]');
+        const marketCap = wrapper.find('[data-test="marketCap"]');
+        const dayChange = wrapper.find('[data-test="dayChange"]');
+        const dayVolume = wrapper.find('[data-test="dayVolume"]');
+
+        const expectedTokenPrice = '$0.000';
+        const expectedDayVolume = '$0.000';
+        const expectedDayChange = '0.00 %';
+        const expectedMarketCap = '$0.000';
 
-                expect(received).toBe(expected);
-            });
+        expect(dayChange.text()).toBe(expectedDayChange);
+        expect(tokenPrice.text()).toBe(expectedTokenPrice);
+        expect(marketCap.text()).toBe(expectedMarketCap);
+        expect(dayVolume.text()).toBe(expectedDayVolume);
+    });
+    it('shows data properly formatted', async () => {
+        const wrapper = mount(PriceChart, {
+            global: {
+                stubs: {
+                    Highcharts: {
+                        template: '<span />',
+                    },
+                },
+            },
         });
+
+        await wrapper.vm.$nextTick();
+
+        expect(wrapper).not.toBe(null);
+
+        const tokenPrice = wrapper.find('[data-test="tokenPrice"]');
+        const marketCap = wrapper.find('[data-test="marketCap"]');
+        const dayChange = wrapper.find('[data-test="dayChange"]');
+        const dayVolume = wrapper.find('[data-test="dayVolume"]');
+
+        const expectedTokenPrice = '$999999.99';
+        const expectedDayVolume = '$1.23M';
+        const expectedDayChange = '123.46 %';
+        const expectedMarketCap = '$123.46B';
+
+        expect(dayChange.text()).toBe(expectedDayChange);
+        expect(tokenPrice.text()).toBe(expectedTokenPrice);
+        expect(marketCap.text()).toBe(expectedMarketCap);
+        expect(dayVolume.text()).toBe(expectedDayVolume);
     });
 });