feat(small): Extract ResetSection component from ConnectView.tsx (#8955)

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
Co-authored-by: arii <342438+arii@users.noreply.github.com>

Author: arii

app/client/connect/ConnectView.test.tsx

@@ -1,9 +1,10 @@
 /**
  * @jest-environment jsdom
  */
-import { render, screen, fireEvent } from '@testing-library/react'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import ConnectView from './ConnectView'
 import { WorkoutStatus } from '../../../types/workout'
+import { MeasurementSystem, Gender } from '../../../types/core'
 
 describe('ConnectView', () => {
   const defaultProps = {
@@ -13,27 +14,31 @@ describe('ConnectView', () => {
     setUserName: jest.fn(),
     userAge: '30',
     setUserAge: jest.fn(),
-    userHeight: '5.9',
+    onAgeBlur: jest.fn(),
+    ageError: null,
+    userHeight: { cm: '180', feet: '5', inches: '11' },
     setUserHeight: jest.fn(),
+    onHeightBlur: jest.fn(),
+    heightError: null,
     userWeight: '154',
     setUserWeight: jest.fn(),
-    unit: 'imperial' as 'metric' | 'imperial',
-    setUnit: jest.fn(),
-    ageError: null,
-    heightError: null,
+    onWeightBlur: jest.fn(),
     weightError: null,
-    validateAge: jest.fn(),
-    validateHeight: jest.fn(),
-    validateWeight: jest.fn(),
+    gender: 'MALE' as Gender,
+    setGender: jest.fn(),
+    unitSystem: 'IMPERIAL' as MeasurementSystem,
+    onUnitChange: jest.fn(),
     isConnected: false,
     deviceStatus: 'Disconnected',
     batteryLevel: null,
     onConnect: jest.fn(),
     onDisconnect: jest.fn(),
     onForgetDevice: jest.fn().mockResolvedValue(undefined),
     isSupported: true,
+    signalPeriodMs: 1000,
     currentHR: 0,
-    hrZoneProps: { percentage: 0, progressColor: 'grey' },
+    hrZoneProps: { percentage: 0 },
+    zone: { min: 0, max: 0, name: 'Rest', color: 'grey' },
     connectionStatus: 'Disconnected',
     bluetoothConnected: false,
     hasStarted: false,
@@ -44,33 +49,44 @@ describe('ConnectView', () => {
     onEndWorkout: jest.fn(),
   }
 
-  it('displays an error message for invalid age', () => {
+  it('displays an error message for invalid age only when ageError is set', () => {
+    // Negative assertion: no error initially
+    const { rerender } = render(<ConnectView {...defaultProps} />)
+    expect(screen.queryByText('Invalid age')).not.toBeInTheDocument()
+
+    // Positive assertion: error appears when prop is set
     const props = { ...defaultProps, ageError: 'Invalid age' }
-    render(<ConnectView {...props} />)
+    rerender(<ConnectView {...props} />)
     expect(screen.getByText('Invalid age')).toBeInTheDocument()
   })
 
-  it('displays an error message for invalid height', () => {
+  it('displays an error message for invalid height only when heightError is set', () => {
+    const { rerender } = render(<ConnectView {...defaultProps} />)
+    expect(screen.queryByText('Invalid height')).not.toBeInTheDocument()
+
     const props = { ...defaultProps, heightError: 'Invalid height' }
-    render(<ConnectView {...props} />)
+    rerender(<ConnectView {...props} />)
     expect(screen.getByText('Invalid height')).toBeInTheDocument()
   })
 
-  it('displays an error message for invalid weight', () => {
+  it('displays an error message for invalid weight only when weightError is set', () => {
+    const { rerender } = render(<ConnectView {...defaultProps} />)
+    expect(screen.queryByText('Invalid weight')).not.toBeInTheDocument()
+
     const props = { ...defaultProps, weightError: 'Invalid weight' }
-    render(<ConnectView {...props} />)
+    rerender(<ConnectView {...props} />)
     expect(screen.getByText('Invalid weight')).toBeInTheDocument()
   })
 
-  it('calls setUnit when the unit toggle is clicked', () => {
+  it('calls onUnitChange when the unit toggle is clicked', () => {
     render(<ConnectView {...defaultProps} />)
-    const metricButton = screen.getByText('Metric (kg, cm)')
+    const metricButton = screen.getByLabelText('metric')
     fireEvent.click(metricButton)
-    expect(defaultProps.setUnit).toHaveBeenCalledWith('metric')
+    expect(defaultProps.onUnitChange).toHaveBeenCalledWith('METRIC')
   })
 
   it('renders metric inputs when unit is metric', () => {
-    const props = { ...defaultProps, unit: 'metric' as 'metric' | 'imperial' }
+    const props = { ...defaultProps, unitSystem: 'METRIC' as MeasurementSystem }
     render(<ConnectView {...props} />)
     expect(screen.getByLabelText('Your Height (cm)')).toBeInTheDocument()
     expect(screen.getByLabelText('Your Weight (kg)')).toBeInTheDocument()
@@ -82,4 +98,25 @@ describe('ConnectView', () => {
     expect(screen.getByLabelText('Inches')).toBeInTheDocument()
     expect(screen.getByLabelText('Your Weight (lbs)')).toBeInTheDocument()
   })
+
+  it('renders the reset section with correct text', () => {
+    render(<ConnectView {...defaultProps} />)
+    expect(screen.getByText('Reset Permissions & Settings')).toBeInTheDocument()
+    expect(
+      screen.getByText(
+        'Resets stored permissions and device settings, including Bluetooth connection.'
+      )
+    ).toBeInTheDocument()
+  })
+
+  it('calls onReset when reset button is clicked', async () => {
+    render(<ConnectView {...defaultProps} />)
+    const resetButton = screen.getByText('Reset Permissions & Settings')
+    fireEvent.click(resetButton)
+
+    await waitFor(() => {
+      expect(defaultProps.onForgetDevice).toHaveBeenCalled()
+      expect(defaultProps.onReset).toHaveBeenCalled()
+    })
+  })
 })