@titan-design/react-ui 0.6.0 → 0.8.0

package/src/components/custom/Workout/SetRow.test.tsx

@@ -1,219 +1,147 @@
-import { describe, it, expect, vi } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
 import { axe } from 'jest-axe'
-import { SetRow } from './SetRow'
+import { View } from 'react-native'
+import { SetRow, type SetRowProps } from './SetRow'
 
-const baseProps = {
-  mode: 'completed' as const,
+// Literal-hex text treatments (dark theme neutral 100 / 400).
+const T_ACTIVE = '#F3F4F6'
+const T_MUTED = '#9CA3AF'
+
+const doneRow: SetRowProps = {
+  state: 'done',
   setNumber: 1,
+  unit: 'lbs',
   reps: 8,
   weight: 135,
-  unit: 'lbs' as const,
+  rpe: 7.5,
+  velocities: [1.1, 0.95, 0.82],
+}
+
+const liveRow: SetRowProps = {
+  state: 'live',
+  setNumber: 2,
+  unit: 'lbs',
+  target: { reps: 10, weight: 150 },
+  reps: 4,
+  weight: 150,
+  velocities: [0.95, 0.9],
+}
+
+const todoRow: SetRowProps = {
+  state: 'todo',
+  setNumber: 3,
+  unit: 'lbs',
+  target: { reps: 10, weight: 150 },
 }
 
 describe('SetRow', () => {
-  describe('completed mode', () => {
-    it('renders set number, reps, weight', () => {
-      render(<SetRow {...baseProps} />)
+  describe('done state', () => {
+    it('renders set number, recorded reps and weight', () => {
+      render(<SetRow {...doneRow} />)
       expect(screen.getByTestId('set-row')).toBeInTheDocument()
       expect(screen.getByTestId('set-row-set-number')).toHaveTextContent('1')
       expect(screen.getByTestId('set-row-reps')).toHaveTextContent('8')
       expect(screen.getByTestId('set-row-weight')).toHaveTextContent('135')
     })
 
-    it('displays previous data when provided', () => {
-      render(<SetRow {...baseProps} previous={{ reps: 6, weight: 130 }} />)
-      expect(screen.getByTestId('set-row-previous')).toHaveTextContent(
-        '6 x 130',
-      )
-    })
-
-    it('displays dash when no previous data', () => {
-      render(<SetRow {...baseProps} />)
-      expect(screen.getByTestId('set-row-previous')).toHaveTextContent('\u2014')
-    })
-
-    it('applies reduced opacity for non-next completed sets', () => {
-      render(<SetRow {...baseProps} />)
-      const row = screen.getByTestId('set-row')
-      expect(row).toHaveStyle({ opacity: 0.55 })
+    it('renders the RPE value', () => {
+      render(<SetRow {...doneRow} rpe={9.5} />)
+      expect(screen.getByTestId('set-row-rpe')).toHaveTextContent('9.5')
     })
-  })
 
-  describe('active mode', () => {
-    it('renders target values when reps/weight are null', () => {
-      render(
-        <SetRow
-          mode="active"
-          setNumber={2}
-          reps={null}
-          weight={null}
-          unit="lbs"
-          targets={{ reps: 10, weight: 150 }}
-        />,
-      )
-      expect(screen.getByTestId('set-row-target-reps')).toHaveTextContent('10')
-      expect(screen.getByTestId('set-row-target-weight')).toHaveTextContent(
-        '150',
-      )
+    it('is muted (done + upcoming share one treatment)', () => {
+      render(<SetRow {...doneRow} />)
+      expect(screen.getByText('8')).toHaveStyle({ color: T_MUTED })
     })
 
-    it('renders dashes when no targets and values are null', () => {
-      render(
-        <SetRow mode="active" setNumber={2} reps={null} weight={null} unit="lbs" />,
-      )
-      expect(screen.getByTestId('set-row-reps')).toHaveTextContent('\u2014')
-      expect(screen.getByTestId('set-row-weight')).toHaveTextContent('\u2014')
+    it('renders a flat mini strip (done reps, no todo stubs)', () => {
+      render(<SetRow {...doneRow} />)
+      expect(screen.getByTestId('velocity-strip-mini')).toBeInTheDocument()
+      expect(screen.getAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(3)
+      expect(screen.queryByTestId('velocity-slot-todo')).not.toBeInTheDocument()
     })
   })
 
-  describe('isNextSet highlighting', () => {
-    it('applies highlight styles for active isNextSet', () => {
-      render(
-        <SetRow
-          mode="active"
-          setNumber={1}
-          reps={null}
-          weight={null}
-          unit="lbs"
-          isNextSet
-        />,
-      )
-      const row = screen.getByTestId('set-row')
-      const style = row.getAttribute('style') ?? ''
-      expect(style).toContain('background-color')
-      expect(style).toContain('border')
+  describe('live state', () => {
+    it('shows the TARGET reps and weight (no "reps-done/target")', () => {
+      render(<SetRow {...liveRow} />)
+      expect(screen.getByTestId('set-row-reps')).toHaveTextContent('10')
+      expect(screen.getByTestId('set-row-weight')).toHaveTextContent('150')
+      expect(screen.getByTestId('set-row-reps')).not.toHaveTextContent('4/10')
     })
 
-    it('does not apply highlight for non-next active sets', () => {
-      render(
-        <SetRow mode="active" setNumber={1} reps={null} weight={null} unit="lbs" />,
-      )
-      const row = screen.getByTestId('set-row')
-      expect(row).not.toHaveStyle({
-        backgroundColor: 'rgba(255,121,0,0.06)',
-      })
+    it('stands out by brightness (neutral 100)', () => {
+      render(<SetRow {...liveRow} />)
+      expect(screen.getByText('2')).toHaveStyle({ color: T_ACTIVE })
     })
-  })
 
-  describe('history mode', () => {
-    it('renders like completed mode', () => {
-      render(
-        <SetRow mode="history" setNumber={3} reps={5} weight={200} unit="kg" />,
-      )
-      expect(screen.getByTestId('set-row-reps')).toHaveTextContent('5')
-      expect(screen.getByTestId('set-row-weight')).toHaveTextContent('200')
+    it('renders the compact velocity-height spotlight strip', () => {
+      render(<SetRow {...liveRow} />)
+      expect(screen.getByTestId('velocity-strip-compact')).toBeInTheDocument()
+      // 2 performed reps + grey stubs to the target (10).
+      expect(screen.getAllByTestId(/^velocity-bar-\d+$/)).toHaveLength(2)
+      expect(screen.getAllByTestId('velocity-slot-todo')).toHaveLength(8)
     })
   })
 
-  describe('velocity strip', () => {
-    it('renders velocity strip when velocities provided', () => {
-      render(
-        <SetRow {...baseProps} velocities={[1.1, 0.95, 0.82]} />,
-      )
-      expect(screen.getByTestId('set-row-velocity-strip')).toBeInTheDocument()
+  describe('todo state', () => {
+    it('shows the target and a dash for RPE', () => {
+      render(<SetRow {...todoRow} />)
+      expect(screen.getByTestId('set-row-reps')).toHaveTextContent('10')
+      expect(screen.getByTestId('set-row-weight')).toHaveTextContent('150')
+      expect(screen.getByTestId('set-row-rpe')).toHaveTextContent('—')
     })
 
-    it('does not render velocity strip when no velocities', () => {
-      render(<SetRow {...baseProps} />)
-      expect(
-        screen.queryByTestId('set-row-velocity-strip'),
-      ).not.toBeInTheDocument()
+    it('is muted and renders an all-grey mini stub strip', () => {
+      render(<SetRow {...todoRow} />)
+      expect(screen.getByText('3')).toHaveStyle({ color: T_MUTED })
+      expect(screen.getByTestId('velocity-strip-mini')).toBeInTheDocument()
+      expect(screen.getAllByTestId('velocity-slot-todo')).toHaveLength(10)
+      expect(screen.queryByTestId(/^velocity-bar-\d+$/)).not.toBeInTheDocument()
     })
 
-    it('passes onVelocityToggle to velocity strip', () => {
-      const onToggle = vi.fn()
-      render(
-        <SetRow
-          {...baseProps}
-          velocities={[1.1, 0.95]}
-          onVelocityToggle={onToggle}
-        />,
-      )
-      const pressable = screen.getByTestId('velocity-strip-pressable')
-      fireEvent.click(pressable)
-      expect(onToggle).toHaveBeenCalledOnce()
+    it('honors an explicit planned count for the stubs', () => {
+      render(<SetRow {...todoRow} planned={6} />)
+      expect(screen.getAllByTestId('velocity-slot-todo')).toHaveLength(6)
     })
   })
 
   describe('set type badge', () => {
-    it('renders set type badge instead of set number', () => {
-      render(<SetRow {...baseProps} setType="W" />)
+    it('renders the set-type badge instead of the set number', () => {
+      render(<SetRow {...doneRow} setType="W" />)
       expect(screen.getByTestId('set-row-type-badge')).toHaveTextContent('W')
     })
 
-    it('does not render type badge when setType is not provided', () => {
-      render(<SetRow {...baseProps} />)
-      expect(
-        screen.queryByTestId('set-row-type-badge'),
-      ).not.toBeInTheDocument()
-    })
-  })
-
-  describe('PR badges', () => {
-    it('renders PR badges when provided', () => {
-      render(
-        <SetRow
-          {...baseProps}
-          prBadges={[{ type: 'e1rm', label: 'PR e1RM' }]}
-        />,
-      )
-      expect(screen.getByTestId('set-row-pr-badges')).toBeInTheDocument()
-    })
-
-    it('does not render PR badges container when no badges', () => {
-      render(<SetRow {...baseProps} />)
-      expect(
-        screen.queryByTestId('set-row-pr-badges'),
-      ).not.toBeInTheDocument()
-    })
-  })
-
-  describe('RPE', () => {
-    it('displays RPE value with color coding', () => {
-      render(<SetRow {...baseProps} rpe={9.5} />)
-      expect(screen.getByTestId('set-row-rpe')).toHaveTextContent('9.5')
-    })
-
-    it('displays dash when RPE is null', () => {
-      render(<SetRow {...baseProps} rpe={null} />)
-      expect(screen.getByTestId('set-row-rpe')).toHaveTextContent('\u2014')
+    it('does not render the type badge when setType is absent', () => {
+      render(<SetRow {...doneRow} />)
+      expect(screen.queryByTestId('set-row-type-badge')).not.toBeInTheDocument()
     })
   })
 
   describe('accessibility', () => {
-    it('has correct accessibility label', () => {
-      render(<SetRow {...baseProps} />)
-      expect(
-        screen.getByLabelText('Set 1: 8 reps at 135 lbs'),
-      ).toBeInTheDocument()
+    it('labels a done row with its recorded values', () => {
+      render(<SetRow {...doneRow} />)
+      expect(screen.getByLabelText('Set 1: 8 reps at 135 lbs')).toBeInTheDocument()
     })
 
-    it('has correct accessibility label with null values', () => {
-      render(
-        <SetRow mode="active" setNumber={2} reps={null} weight={null} unit="kg" />,
-      )
-      expect(
-        screen.getByLabelText('Set 2: no reps'),
-      ).toBeInTheDocument()
+    it('labels a live row as in progress against its target', () => {
+      render(<SetRow {...liveRow} />)
+      expect(screen.getByLabelText('Set 2: 10 reps at 150 lbs, in progress')).toBeInTheDocument()
     })
 
-    it('has no accessibility violations', async () => {
-      const { container } = render(<SetRow {...baseProps} />)
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
+    it('labels a todo row as upcoming', () => {
+      render(<SetRow {...todoRow} />)
+      expect(screen.getByLabelText('Set 3: 10 reps at 150 lbs, upcoming')).toBeInTheDocument()
     })
 
-    it('has no accessibility violations with all features', async () => {
+    it('has no accessibility violations across states', async () => {
       const { container } = render(
-        <SetRow
-          {...baseProps}
-          rpe={8}
-          velocities={[1.1, 0.95]}
-          setType="W"
-          prBadges={[{ type: 'e1rm', label: 'PR e1RM' }]}
-          previous={{ reps: 6, weight: 130 }}
-        />,
+        <View>
+          <SetRow {...doneRow} />
+          <SetRow {...liveRow} />
+          <SetRow {...todoRow} />
+        </View>
       )
       const results = await axe(container)
       expect(results).toHaveNoViolations()