remove before enter fetch to before mount

Author: plecrx

src/components/chart.vue

@@ -2,7 +2,7 @@
 defineProps<{
     recordValues: Record<string | number, number>
 }>()
-const getBarHeight = (value: number) => `${value * 10}px`
+const getBarHeight = (value: number) => `${value * 20}px`
 </script>
 
 <template>
@@ -14,6 +14,7 @@ const getBarHeight = (value: number) => `${value * 10}px`
             :style="{ height: `${getBarHeight(occurrences)}` }"
             data-testid="chart-bar"
         >
+            <span class="occurrence-label" data-testid="chart-bar-occurrence-amount">{{ occurrences }}</span>
             <span class="label" data-testid="chart-bar-label">{{ label }}</span>
         </div>
     </div>
@@ -43,4 +44,8 @@ const getBarHeight = (value: number) => `${value * 10}px`
     left: 50%;
     transform: translateX(-50%);
 }
+
+.occurrence-label {
+    color: whitesmoke;
+}
 </style>

src/pages/home-page.vue

@@ -4,13 +4,16 @@ import Chart from '@/components/chart.vue'
 import PageLayout from '@/layouts/page-layout.vue'
 import { useRandomIntegersStore } from '@/stores/useRandomIntegers.store.ts'
 import { storeToRefs } from 'pinia'
-
+import { onBeforeMount } from 'vue'
 const { integersArray } = storeToRefs(useRandomIntegersStore())
 const { searchIntegers } = useRandomIntegersStore()
 
+const params = { num: 100, min: 0, max: 10, col: 1, base: 10, format: 'plain' }
 const handleSearchButtonClick = () => {
-    searchIntegers({ num: 20, min: 1, max: 10, col: 1, base: 2, format: 'plain' })
+    searchIntegers(params)
 }
+
+onBeforeMount(() => searchIntegers(params))
 </script>
 
 <template>

src/router/index.ts

@@ -1,4 +1,3 @@
-import { useRandomIntegersStore } from '@/stores/useRandomIntegers.store.ts'
 import { createRouter, createWebHistory } from 'vue-router'
 import HomePage from '@/pages/home-page.vue'
 
@@ -9,15 +8,6 @@ const router = createRouter({
             path: '/',
             name: 'home',
             component: HomePage,
-            beforeEnter: () =>
-                useRandomIntegersStore().searchIntegers({
-                    num: 20,
-                    min: 1,
-                    max: 10,
-                    col: 1,
-                    base: 10,
-                    format: 'plain'
-                })
         }
     ]
 })

tests/components/chart.spec.ts

@@ -49,4 +49,11 @@ describe('Chart', () => {
         expect(first.text()).toBe('15')
         expect(second.text()).toBe('20')
     })
+
+    it('should render the amount of occurrences', async () => {
+        await wrapper.setProps({ recordValues: { '15': '1' } })
+        const occurrenceLabel = wrapper.find('[data-testid="chart-bar-occurrence-amount"]')
+
+        expect(occurrenceLabel.text()).toBe('1')
+    })
 })