Update change-arrow tests to use data-direction attribute instead of CSS classes

Author: sanne-san

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

@@ -3,56 +3,61 @@ import { render, screen } from '@testing-library/react'
 import { ChangeArrow } from './change-arrow'
 
 jest.mock('@heroicons/react/24/solid', () => ({
-  ArrowUpRightIcon: ({ className }: { className: string }) => (
-    <span className={className}>↑</span>
+  ArrowUpRightIcon: ({ className, ...props }: { className: string }) => (
+    <span className={className} {...props}>
+      ↑
+    </span>
   ),
-  ArrowDownRightIcon: ({ className }: { className: string }) => (
-    <span className={className}>↓</span>
+  ArrowDownRightIcon: ({ className, ...props }: { className: string }) => (
+    <span className={className} {...props}>
+      ↓
+    </span>
   )
 }))
 
-it('renders green for positive change', () => {
+it('renders up arrow for positive change', () => {
   render(<ChangeArrow change={1} className="text-xs" metric="visitors" />)
 
   const arrowElement = screen.getByTestId('change-arrow')
 
   expect(arrowElement).toHaveTextContent('↑ 1%')
-  expect(arrowElement.children[0]).toHaveClass('text-green-500')
+  expect(arrowElement.children[0]).toHaveAttribute('data-direction', 'up')
 })
 
-it('renders red for positive change', () => {
+it('renders down arrow for negative change', () => {
   render(<ChangeArrow change={-10} className="text-xs" metric="visitors" />)
 
   const arrowElement = screen.getByTestId('change-arrow')
 
   expect(arrowElement).toHaveTextContent('↓ 10%')
-  expect(arrowElement.children[0]).toHaveClass('text-red-400')
+  expect(arrowElement.children[0]).toHaveAttribute('data-direction', 'down')
 })
 
-it('renders tilde for no change', () => {
+it('renders no arrow for no change', () => {
   render(<ChangeArrow change={0} className="text-xs" metric="visitors" />)
 
   const arrowElement = screen.getByTestId('change-arrow')
 
   expect(arrowElement).toHaveTextContent('0%')
+  expect(arrowElement.children).toHaveLength(0)
 })
 
-it('inverts colors for positive bounce_rate change', () => {
+it('inverts arrow direction for positive bounce_rate change', () => {
   render(<ChangeArrow change={15} className="text-xs" metric="bounce_rate" />)
 
   const arrowElement = screen.getByTestId('change-arrow')
 
   expect(arrowElement).toHaveTextContent('↑ 15%')
-  expect(arrowElement.children[0]).toHaveClass('text-red-400')
+  expect(arrowElement.children[0]).toHaveAttribute('data-direction', 'up')
 })
 
-it('inverts colors for negative bounce_rate change', () => {
+it('inverts arrow direction for negative bounce_rate change', () => {
   render(<ChangeArrow change={-3} className="text-xs" metric="bounce_rate" />)
 
   const arrowElement = screen.getByTestId('change-arrow')
 
   expect(arrowElement).toHaveTextContent('↓ 3%')
-  expect(arrowElement.children[0]).toHaveClass('text-green-500')
+  expect(arrowElement.children[0]).toHaveAttribute('data-direction', 'down')
 })
 
 it('renders with text hidden', () => {
@@ -63,7 +68,7 @@ it('renders with text hidden', () => {
   const arrowElement = screen.getByTestId('change-arrow')
 
   expect(arrowElement).toHaveTextContent('↓')
-  expect(arrowElement.children[0]).toHaveClass('text-red-400')
+  expect(arrowElement.children[0]).toHaveAttribute('data-direction', 'down')
 })
 
 it('renders no content with text hidden and 0 change', () => {

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

@@ -22,9 +22,11 @@ export function ChangeArrow({
   )
 
   if (change > 0) {
-    icon = <ArrowUpRightIcon className={arrowClassName} />
+    icon = <ArrowUpRightIcon className={arrowClassName} data-direction="up" />
   } else if (change < 0) {
-    icon = <ArrowDownRightIcon className={arrowClassName} />
+    icon = (
+      <ArrowDownRightIcon className={arrowClassName} data-direction="down" />
+    )
   }
 
   const formattedChange = hideNumber