feat: fix and add test for <ColoredBadgeFormat /> and `<DurationFor…

…mat />` components

components/data-table/cells/colored-badge-format.cy.tsx

@@ -0,0 +1,32 @@
+import { ColoredBadgeFormat } from './colored-badge-format'
+
+describe('<ColoredBadgeFormat />', () => {
+  it('renders correctly with a value', () => {
+    cy.mount(<ColoredBadgeFormat value="Test" />)
+    cy.get('span').should('contain', 'Test')
+  })
+
+  it('applies the correct color based on value', () => {
+    cy.mount(<ColoredBadgeFormat value="Test" />)
+
+    // Have bg-* class
+    cy.get('span').should('have.css', 'background-color')
+    // Have text-* class
+    cy.get('span').should('have.css', 'color')
+  })
+
+  it('does not render when value is empty', () => {
+    cy.mount(<ColoredBadgeFormat value="" />)
+    cy.get('span').should('not.exist')
+  })
+
+  it('does not render when value is null', () => {
+    cy.mount(<ColoredBadgeFormat value={null} />)
+    cy.get('span').should('not.exist')
+  })
+
+  it('applies additional className', () => {
+    cy.mount(<ColoredBadgeFormat value="Test" className="extra-class" />)
+    cy.get('span').should('have.class', 'extra-class')
+  })
+})

components/data-table/cells/colored-badge-format.tsx

@@ -9,6 +9,10 @@ export function ColoredBadgeFormat({
   value,
   className,
 }: ColoredBadgeFormatProps) {
+  if (!value || value === '') {
+    return
+  }
+
   const colors = [
     'bg-green-100 text-green-800',
     'bg-yellow-100 text-yellow-800',

components/data-table/cells/duration-format.cy.tsx

@@ -0,0 +1,40 @@
+import { DurationFormat } from './duration-format'
+
+describe('<DurationFormat />', () => {
+  it('renders 120s correctly', async () => {
+    cy.mount(<DurationFormat value="120" />)
+    cy.get('span').should('have.attr', 'title').and('match', /120/)
+    cy.get('span').should('contain', '2 minutes')
+  })
+
+  it('renders 12000s correctly', async () => {
+    cy.mount(<DurationFormat value="12000" />)
+    cy.get('span').should('have.attr', 'title').and('match', /12000/)
+    cy.get('span').should('contain', '3 hours')
+  })
+
+  it('renders 0s correctly', async () => {
+    cy.mount(<DurationFormat value="0" />)
+    cy.get('span').should('have.attr', 'title').and('match', /0/)
+    cy.get('span').should('contain', 'a few seconds')
+  })
+
+  it('renders -100s correctly', async () => {
+    cy.mount(<DurationFormat value="-100" />)
+    cy.get('span').should('contain', '2 minutes ago')
+  })
+
+  it('handles invalid value gracefully', async () => {
+    cy.mount(<DurationFormat value="invalid" />)
+    cy.get('span')
+      .should('have.attr', 'title')
+      .and('match', /invalid/)
+    cy.get('span').should('contain', 'invalid')
+  })
+
+  it('renders with a title attribute', async () => {
+    const testValue = '300'
+    cy.mount(<DurationFormat value={testValue} />)
+    cy.get('span').should('have.attr', 'title', testValue)
+  })
+})

components/data-table/cells/duration-format.tsx

@@ -4,10 +4,15 @@ interface DurationFormatProps {
   value: any
 }
 
-export async function DurationFormat({ value }: DurationFormatProps) {
-  let humanized = dayjs
-    .duration({ seconds: parseFloat(value as string) })
-    .humanize()
+export function DurationFormat({ value }: DurationFormatProps) {
+  let humanized = value
+  const seconds = parseFloat(value as string)
+
+  if (!Number.isNaN(seconds)) {
+    humanized = dayjs
+      .duration({ seconds: parseFloat(value as string) })
+      .humanize(seconds < 0 ? true : false) // 2 minutes "ago" for negative values
+  }
 
   return <span title={value as string}>{humanized}</span>
 }