refactor to jest rtl

Author: lhz516

package.json

@@ -67,7 +67,10 @@
     "@storybook/addon-docs": "^9.0.0",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "@storybook/react-webpack5": "^9.0.0",
-    "storybook": "^9.0.0",
+    "@testing-library/dom": "^10.0.0",
+    "@testing-library/jest-dom": "^6.4.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/events": "^3.0.0",
     "@types/react": "^19",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
@@ -82,10 +85,6 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.35.0",
     "husky": "^9.0.0",
-    "@testing-library/jest-dom": "^6.4.0",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@testing-library/dom": "^10.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "less-plugin-sass2less": "^1.2.0",
@@ -97,7 +96,9 @@
     "remark-gfm": "^4.0.0",
     "sass": "^1.26.8",
     "sass-loader": "^10.2.0",
+    "semver": "^7.7.2",
     "static-server": "^2.2.1",
+    "storybook": "^9.0.0",
     "style-loader": "^4.0.0",
     "typescript": "^5.4.0",
     "webpack": "^5",

src/CurrentTime.test.js

@@ -1,14 +1,146 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, act } from '@testing-library/react'
 import CurrentTime from './CurrentTime'
 
+// Helper to create a mock HTMLAudioElement-like object
+function createMockAudio({ currentTime = 0, duration = 0 } = {}) {
+	const listeners = {}
+	const audio = {
+		currentTime,
+		duration,
+		addEventListener: jest.fn((event, cb) => {
+			listeners[event] = cb
+		}),
+		removeEventListener: jest.fn((event) => {
+			delete listeners[event]
+		}),
+		// Utility to trigger an event
+		dispatch(event) {
+			if (listeners[event]) {
+				listeners[event]({ target: audio })
+			}
+		},
+	}
+	return audio
+}
+
 describe('CurrentTime component', () => {
-	it('renders with default current time (placeholder)', () => {
+	const defaultDisplay = '00:00'
+
+	it('renders defaultCurrentTime when no audio provided', () => {
+		const { container } = render(
+			<CurrentTime
+				defaultCurrentTime={defaultDisplay}
+				isLeftTime={false}
+				timeFormat="auto"
+			/>
+		)
+		expect(container.textContent).toBe(defaultDisplay)
+	})
+
+	it('displays current playback time (mm:ss) after metadata loaded', () => {
+		const audio = createMockAudio({ currentTime: 30, duration: 300 })
+		const { container } = render(
+			<CurrentTime
+				audio={audio}
+				defaultCurrentTime={defaultDisplay}
+				isLeftTime={false}
+				timeFormat="auto"
+			/>
+		)
+		// Simulate browser firing loadedmetadata first
+		act(() => {
+			audio.dispatch('loadedmetadata')
+		})
+		expect(container.textContent).toBe('05:00' === '05:00' ? '00:30' : '00:30') // ensure explicit expected
+		// Now update currentTime and fire timeupdate
+		audio.currentTime = 90
+		act(() => {
+			audio.dispatch('timeupdate')
+		})
+		expect(container.textContent).toBe('01:30')
+	})
+
+	it('displays remaining (left) time when isLeftTime is true', () => {
+		const audio = createMockAudio({ currentTime: 60, duration: 300 }) // remaining 240s => 04:00
+		const { container } = render(
+			<CurrentTime
+				audio={audio}
+				defaultCurrentTime={defaultDisplay}
+				isLeftTime={true}
+				timeFormat="mm:ss"
+			/>
+		)
+		act(() => {
+			audio.dispatch('loadedmetadata')
+		})
+		expect(container.textContent).toBe('04:00')
+		// Advance playback
+		audio.currentTime = 90 // remaining 210 -> 03:30
+		act(() => {
+			audio.dispatch('timeupdate')
+		})
+		expect(container.textContent).toBe('03:30')
+	})
+
+	it('formats as hh:mm:ss when auto and total duration >= 3600', () => {
+		const audio = createMockAudio({ currentTime: 100, duration: 3700 }) // remaining 3600 -> 1:00:00
 		const { container } = render(
-			// @ts-ignore testing JS placeholder
-			React.createElement(CurrentTime, { defaultCurrentTime: null, isLeftTime: false, timeFormat: 'auto' })
+			<CurrentTime
+				audio={audio}
+				defaultCurrentTime={defaultDisplay}
+				isLeftTime={true}
+				timeFormat="auto"
+			/>
+		)
+		act(() => {
+			audio.dispatch('loadedmetadata')
+		})
+		expect(container.textContent).toBe('1:00:00')
+	})
+
+	it('honors explicit hh:mm:ss formatting', () => {
+		const audio = createMockAudio({ currentTime: 3661, duration: 5400 }) // 1:01:01
+		const { container } = render(
+			<CurrentTime
+				audio={audio}
+				defaultCurrentTime={defaultDisplay}
+				isLeftTime={false}
+				timeFormat="hh:mm:ss"
+			/>
+		)
+		act(() => {
+			audio.dispatch('loadedmetadata')
+		})
+		expect(container.textContent).toBe('1:01:01')
+	})
+
+	it('adds audio event listeners only once across re-renders', () => {
+		const audio = createMockAudio({ currentTime: 0, duration: 100 })
+		const { rerender } = render(
+			<CurrentTime
+				audio={audio}
+				defaultCurrentTime={defaultDisplay}
+				isLeftTime={false}
+				timeFormat="auto"
+			/>
+		)
+		// Re-render with different prop that triggers componentDidUpdate
+		rerender(
+			<CurrentTime
+				audio={audio}
+				defaultCurrentTime={defaultDisplay}
+				isLeftTime={false}
+				timeFormat="mm:ss" // change format
+			/>
 		)
-		expect(container).toBeTruthy()
+		// Only two listeners (timeupdate & loadedmetadata) should be registered once
+		expect(audio.addEventListener).toHaveBeenCalledTimes(2)
+		// Fire timeupdate to ensure still functional
+		audio.currentTime = 10
+		act(() => {
+			audio.dispatch('timeupdate')
+		})
 	})
 })
 

src/Duration.test.js

@@ -1,14 +1,113 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render, act } from '@testing-library/react'
 import Duration from './Duration'
 
+function createMockAudio({ duration = 0 } = {}) {
+	const listeners = {}
+	const audio = {
+		duration,
+		addEventListener: jest.fn((event, cb) => {
+			listeners[event] = cb
+		}),
+		removeEventListener: jest.fn((event) => {
+			delete listeners[event]
+		}),
+		dispatch(event) {
+			if (listeners[event]) listeners[event]({ target: audio })
+		},
+	}
+	return audio
+}
+
 describe('Duration component', () => {
-	it('renders with null default (no crash)', () => {
+	const defaultDisplay = '00:00'
+
+	it('renders defaultDuration when no audio provided', () => {
+		const { container } = render(
+			<Duration defaultDuration={defaultDisplay} timeFormat="auto" />
+		)
+		expect(container.textContent).toBe(defaultDisplay)
+	})
+
+	it('displays duration (mm:ss) with audio and format auto (< 1h)', () => {
+		const audio = createMockAudio({ duration: 305 }) // 5:05
+		const { container } = render(
+			<Duration audio={audio} defaultDuration={defaultDisplay} timeFormat="auto" />
+		)
+		// Initial render already computes value
+		expect(container.textContent).toBe('05:05')
+	})
+
+	it('displays duration (hh:mm:ss) when auto and >= 3600', () => {
+		const audio = createMockAudio({ duration: 3661 }) // 1:01:01
+		const { container } = render(
+			<Duration audio={audio} defaultDuration={defaultDisplay} timeFormat="auto" />
+		)
+		expect(container.textContent).toBe('1:01:01')
+	})
+
+	it('honors explicit mm:ss', () => {
+		const audio = createMockAudio({ duration: 3661 })
+		const { container } = render(
+			<Duration audio={audio} defaultDuration={defaultDisplay} timeFormat="mm:ss" />
+		)
+		// Even though >= 1h, should truncate to minutes only
+		expect(container.textContent).toBe('61:01')
+	})
+
+	it('honors explicit hh:mm:ss', () => {
+		const audio = createMockAudio({ duration: 59 })
+		const { container } = render(
+			<Duration audio={audio} defaultDuration={defaultDisplay} timeFormat="hh:mm:ss" />
+		)
+		expect(container.textContent).toBe('0:00:59')
+	})
+
+	it('updates on durationchange event', () => {
+		const audio = createMockAudio({ duration: 10 })
 		const { container } = render(
-			// @ts-ignore testing JS placeholder
-			React.createElement(Duration, { defaultDuration: null, timeFormat: 'auto' })
+			<Duration audio={audio} defaultDuration={defaultDisplay} timeFormat="mm:ss" />
+		)
+		expect(container.textContent).toBe('00:10')
+		audio.duration = 25
+		act(() => {
+			audio.dispatch('durationchange')
+		})
+		expect(container.textContent).toBe('00:25')
+	})
+
+		it('falls back to defaultDuration after event when initial formatter returns null (NaN)', () => {
+			const audio = createMockAudio({ duration: NaN })
+			const { container } = render(
+				<Duration audio={audio} defaultDuration={defaultDisplay} timeFormat="auto" />
+			)
+			// Initial state stores null directly (renders empty string)
+			expect(container.textContent).toBe('')
+			act(() => {
+				audio.dispatch('durationchange')
+			})
+			expect(container.textContent).toBe(defaultDisplay)
+		})
+
+	it('adds listeners only once across re-renders', () => {
+		const audio = createMockAudio({ duration: 100 })
+		const { rerender } = render(
+			<Duration audio={audio} defaultDuration={defaultDisplay} timeFormat="mm:ss" />
+		)
+		// Re-render with different timeFormat
+		rerender(
+			<Duration audio={audio} defaultDuration={defaultDisplay} timeFormat="hh:mm:ss" />
+		)
+		expect(audio.addEventListener).toHaveBeenCalledTimes(2) // durationchange + abort
+	})
+
+	it('removes listeners on unmount', () => {
+		const audio = createMockAudio({ duration: 50 })
+		const { unmount } = render(
+			<Duration audio={audio} defaultDuration={defaultDisplay} timeFormat="mm:ss" />
 		)
-		expect(container).toBeTruthy()
+		unmount()
+		expect(audio.removeEventListener).toHaveBeenCalledTimes(2)
 	})
 })