Skip to content

Commit

Permalink
Fixes PriceChart tests to be component tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@karynemayer
karynemayer committed May 13, 2024
1 parent 15a17c2 commit 97ee9a8
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 116 deletions.
43 changes: 20 additions & 23 deletions src/components/PriceChart.vue
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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
Expand All @@ -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,
};
},
});
Expand All @@ -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>
Expand Down
181 changes: 88 additions & 93 deletions test/jest/__tests__/components/PriceChart.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});

0 comments on commit 97ee9a8

Please sign in to comment.