Updated metric-value test

Author: sanne-san

assets/js/dashboard/stats/reports/change-arrow.tsx

@@ -15,10 +15,6 @@ export function ChangeArrow({
   className: string
   hideNumber?: boolean
 }) {
-  const formattedChange = hideNumber
-    ? null
-    : ` ${numberShortFormatter(Math.abs(change))}%`
-
   let icon = null
   const arrowClassName = classNames(
     color(change, metric),
@@ -31,6 +27,10 @@ export function ChangeArrow({
     icon = <ArrowDownRightIcon className={arrowClassName} />
   }
 
+  const formattedChange = hideNumber
+    ? null
+    : `${icon ? ' ' : ''}${numberShortFormatter(Math.abs(change))}%`
+
   return (
     <span className={className} data-testid="change-arrow">
       {icon}

assets/js/dashboard/stats/reports/metric-value.test.tsx

@@ -11,10 +11,9 @@ const REVENUE = { long: '$1,659.50', short: '$1.7K' }
 
 describe('single value', () => {
   it('renders small value', async () => {
-    await renderWithTooltip(<MetricValue {...valueProps('visitors', 10)} />)
+    render(<MetricValue {...valueProps('visitors', 10)} />)
 
     expect(screen.getByTestId('metric-value')).toHaveTextContent('10')
-    expect(screen.getByRole('tooltip')).toHaveTextContent('10')
   })
 
   it('renders large value', async () => {
@@ -25,31 +24,28 @@ describe('single value', () => {
   })
 
   it('renders percentages', async () => {
-    await renderWithTooltip(<MetricValue {...valueProps('bounce_rate', 5.3)} />)
+    render(<MetricValue {...valueProps('bounce_rate', 5.3)} />)
 
     expect(screen.getByTestId('metric-value')).toHaveTextContent('5.3%')
-    expect(screen.getByRole('tooltip')).toHaveTextContent('5.3%')
   })
 
   it('renders durations', async () => {
-    await renderWithTooltip(
+    render(
       <MetricValue {...valueProps('visit_duration', 60)} />
     )
 
     expect(screen.getByTestId('metric-value')).toHaveTextContent('1m 00s')
-    expect(screen.getByRole('tooltip')).toHaveTextContent('1m 00s')
   })
 
   it('renders with custom formatter', async () => {
-    await renderWithTooltip(
+    render(
       <MetricValue
         {...valueProps('test_money', 5.3)}
         formatter={(value) => `${value}$`}
       />
     )
 
     expect(screen.getByTestId('metric-value')).toHaveTextContent('5.3$')
-    expect(screen.getByRole('tooltip')).toHaveTextContent('5.3$')
   })
 
   it('renders revenue properly', async () => {
@@ -80,9 +76,8 @@ describe('comparisons', () => {
     expect(screen.getByRole('tooltip')).toHaveTextContent(
       [
         '10 visitors',
-        '↑ 100%',
         '01 Aug - 31 Aug',
-        'vs',
+        '↑ 100%',
         '5 visitors',
         '01 July - 31 July'
       ].join('')
@@ -98,9 +93,8 @@ describe('comparisons', () => {
     expect(screen.getByRole('tooltip')).toHaveTextContent(
       [
         '5 visitors',
-        '↓ 50%',
         '01 Aug - 31 Aug',
-        'vs',
+        '↓ 50%',
         '10 visitors',
         '01 July - 31 July'
       ].join('')
@@ -116,9 +110,8 @@ describe('comparisons', () => {
     expect(screen.getByRole('tooltip')).toHaveTextContent(
       [
         '10 visitors',
-        '〰 0%',
         '01 Aug - 31 Aug',
-        'vs',
+        '0%',
         '10 visitors',
         '01 July - 31 July'
       ].join('')
@@ -136,9 +129,8 @@ describe('comparisons', () => {
     expect(screen.getByRole('tooltip')).toHaveTextContent(
       [
         '10 conversions',
-        '〰 0%',
         '01 Aug - 31 Aug',
-        'vs',
+        '0%',
         '10 conversions',
         '01 July - 31 July'
       ].join('')
@@ -156,9 +148,8 @@ describe('comparisons', () => {
     expect(screen.getByRole('tooltip')).toHaveTextContent(
       [
         '10% ',
-        '〰 0%',
         '01 Aug - 31 Aug',
-        'vs',
+        '0%',
         '10% ',
         '01 July - 31 July'
       ].join('')
@@ -177,9 +168,8 @@ describe('comparisons', () => {
     expect(screen.getByRole('tooltip')).toHaveTextContent(
       [
         '10$ test',
-        '↑ 100%',
         '01 Aug - 31 Aug',
-        'vs',
+        '↑ 100%',
         '5$ test',
         '01 July - 31 July'
       ].join('')
@@ -200,9 +190,8 @@ describe('comparisons', () => {
     expect(screen.getByRole('tooltip')).toHaveTextContent(
       [
         '$1,659.50 average_revenue',
-        '〰 0%',
         '01 Aug - 31 Aug',
-        'vs',
+        '0%',
         '$1,659.50 average_revenue',
         '01 July - 31 July'
       ].join('')