Skip to content

Commit adf1e76

Browse files
ryota-murakamiryota-murakami
committed
fix(e2e): update tests for GlassNumberStepper's text input
Update e2e tests to work with GlassNumberStepper which uses: - type="text" with inputMode="numeric" (not spinbutton role) - Zero-padded display values (05, 00 instead of 5, 0) - data-testid selectors for reliable element selection Updated files: - background-timer.spec.ts - timer-behavior.spec.ts - sound.spec.ts
1 parent bfd33e1 commit adf1e76

File tree

3 files changed

+36
-35
lines changed

3 files changed

+36
-35
lines changed

‎e2e/background-timer.spec.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ test.describe('Background Timer Functionality', () => {
2222
await page.waitForTimeout(1000)
2323

2424
// Set a 5 second timer
25-
const minutesInput = page.getByRole('spinbutton', { name: /minutes/i })
26-
const secondsInput = page.getByRole('spinbutton', { name: /seconds/i })
25+
const minutesInput = page.getByTestId('time-input-minutes')
26+
const secondsInput = page.getByTestId('time-input-seconds')
2727

2828
await minutesInput.fill('0')
2929
await secondsInput.fill('5')
@@ -74,8 +74,8 @@ test.describe('Background Timer Functionality', () => {
7474
await page.waitForTimeout(1000)
7575

7676
// Set a 3 second timer
77-
const minutesInput = page.getByRole('spinbutton', { name: /minutes/i })
78-
const secondsInput = page.getByRole('spinbutton', { name: /seconds/i })
77+
const minutesInput = page.getByTestId('time-input-minutes')
78+
const secondsInput = page.getByTestId('time-input-seconds')
7979

8080
await minutesInput.fill('0')
8181
await secondsInput.fill('3')
@@ -139,8 +139,8 @@ test.describe('Background Timer Functionality', () => {
139139
await page.waitForTimeout(1000)
140140

141141
// Set a 10 second timer
142-
const minutesInput = page.getByRole('spinbutton', { name: /minutes/i })
143-
const secondsInput = page.getByRole('spinbutton', { name: /seconds/i })
142+
const minutesInput = page.getByTestId('time-input-minutes')
143+
const secondsInput = page.getByTestId('time-input-seconds')
144144

145145
await minutesInput.fill('0')
146146
await secondsInput.fill('10')
@@ -191,8 +191,8 @@ test.describe('Background Timer Functionality', () => {
191191
await page.waitForTimeout(1000)
192192

193193
// Set a 5 second timer
194-
const minutesInput = page.getByRole('spinbutton', { name: /minutes/i })
195-
const secondsInput = page.getByRole('spinbutton', { name: /seconds/i })
194+
const minutesInput = page.getByTestId('time-input-minutes')
195+
const secondsInput = page.getByTestId('time-input-seconds')
196196

197197
await minutesInput.fill('0')
198198
await secondsInput.fill('5')
@@ -243,8 +243,8 @@ test.describe('Background Timer Functionality', () => {
243243
await page.waitForTimeout(1000)
244244

245245
// Set a 6 second timer
246-
const minutesInput = page.getByRole('spinbutton', { name: /minutes/i })
247-
const secondsInput = page.getByRole('spinbutton', { name: /seconds/i })
246+
const minutesInput = page.getByTestId('time-input-minutes')
247+
const secondsInput = page.getByTestId('time-input-seconds')
248248

249249
await minutesInput.fill('0')
250250
await secondsInput.fill('6')
@@ -294,8 +294,8 @@ test.describe('Background Timer Functionality', () => {
294294
await page.waitForTimeout(1000)
295295

296296
// Set a 10 second timer
297-
const minutesInput = page.getByRole('spinbutton', { name: /minutes/i })
298-
const secondsInput = page.getByRole('spinbutton', { name: /seconds/i })
297+
const minutesInput = page.getByTestId('time-input-minutes')
298+
const secondsInput = page.getByTestId('time-input-seconds')
299299

300300
await minutesInput.fill('0')
301301
await secondsInput.fill('10')

‎e2e/sound.spec.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,8 @@ test.describe('Sound Functionality', () => {
115115
await page.waitForTimeout(1000)
116116

117117
// Set a short timer (3 seconds - longer for more reliable testing)
118-
const minutesInput = page.getByRole('spinbutton', { name: /minutes/i })
119-
const secondsInput = page.getByRole('spinbutton', { name: /seconds/i })
118+
const minutesInput = page.getByTestId('time-input-minutes')
119+
const secondsInput = page.getByTestId('time-input-seconds')
120120

121121
// Clear existing values first
122122
await minutesInput.click()
@@ -191,8 +191,8 @@ test.describe('Sound Functionality', () => {
191191
await page.waitForTimeout(500)
192192

193193
// Set a short timer (3 seconds)
194-
const minutesInput = page.getByRole('spinbutton', { name: /minutes/i })
195-
const secondsInput = page.getByRole('spinbutton', { name: /seconds/i })
194+
const minutesInput = page.getByTestId('time-input-minutes')
195+
const secondsInput = page.getByTestId('time-input-seconds')
196196

197197
await minutesInput.click()
198198
await minutesInput.fill('0')
@@ -265,8 +265,8 @@ test.describe('Sound Functionality', () => {
265265
await doneButton.click()
266266

267267
// Set a short timer (3 seconds)
268-
const minutesInput = page.getByRole('spinbutton', { name: /minutes/i })
269-
const secondsInput = page.getByRole('spinbutton', { name: /seconds/i })
268+
const minutesInput = page.getByTestId('time-input-minutes')
269+
const secondsInput = page.getByTestId('time-input-seconds')
270270

271271
await minutesInput.fill('0')
272272
await secondsInput.fill('3')

‎e2e/timer-behavior.spec.ts‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,11 @@ test.describe('Timer Behavior', () => {
2626
const timerDisplay = page.locator('[role="timer"]')
2727
await expect(timerDisplay).toContainText('05:00')
2828

29-
const minutesInput = page.getByRole('spinbutton', { name: /minutes/i })
30-
const secondsInput = page.getByRole('spinbutton', { name: /seconds/i })
31-
await expect(minutesInput).toHaveValue('5')
32-
await expect(secondsInput).toHaveValue('0')
29+
const minutesInput = page.getByTestId('time-input-minutes')
30+
const secondsInput = page.getByTestId('time-input-seconds')
31+
// GlassNumberStepper displays values with leading zeros
32+
await expect(minutesInput).toHaveValue('05')
33+
await expect(secondsInput).toHaveValue('00')
3334

3435
// Test persisted state (6 minutes in localStorage)
3536
await page.evaluate(() => {
@@ -53,8 +54,8 @@ test.describe('Timer Behavior', () => {
5354
await expect(timerDisplay).toContainText('06:00')
5455

5556
// Wait for inputs to sync with persisted timer state (hydration + useEffect)
56-
await expect(minutesInput).toHaveValue('6', { timeout: 2000 })
57-
await expect(secondsInput).toHaveValue('0')
57+
await expect(minutesInput).toHaveValue('06', { timeout: 2000 })
58+
await expect(secondsInput).toHaveValue('00')
5859

5960
// Clean up
6061
await page.evaluate(() => localStorage.clear())
@@ -66,7 +67,7 @@ test.describe('Timer Behavior', () => {
6667
await page.goto('/en')
6768
await page.waitForLoadState('networkidle')
6869

69-
const minutesInput = page.getByRole('spinbutton', { name: /minutes/i })
70+
const minutesInput = page.getByTestId('time-input-minutes')
7071
const timerDisplay = page.locator('[role="timer"]')
7172

7273
await minutesInput.click()
@@ -98,8 +99,8 @@ test.describe('Timer Behavior', () => {
9899
await expect(timerDisplay).toContainText('05:00')
99100

100101
// Set timer to 0:0 manually
101-
const minutesInput = page.getByRole('spinbutton', { name: /minutes/i })
102-
const secondsInput = page.getByRole('spinbutton', { name: /seconds/i })
102+
const minutesInput = page.getByTestId('time-input-minutes')
103+
const secondsInput = page.getByTestId('time-input-seconds')
103104

104105
await minutesInput.click()
105106
await minutesInput.fill('0')
@@ -133,8 +134,8 @@ test.describe('Timer Behavior', () => {
133134
await page.waitForTimeout(1000)
134135

135136
// Set a short timer (2 seconds for faster test)
136-
const minutesInput = page.getByRole('spinbutton', { name: /minutes/i })
137-
const secondsInput = page.getByRole('spinbutton', { name: /seconds/i })
137+
const minutesInput = page.getByTestId('time-input-minutes')
138+
const secondsInput = page.getByTestId('time-input-seconds')
138139

139140
await minutesInput.click()
140141
await minutesInput.fill('0')
@@ -219,8 +220,8 @@ test.describe('Timer Behavior', () => {
219220
})
220221

221222
// Set a short timer (2 seconds)
222-
const minutesInput = page.getByRole('spinbutton', { name: /minutes/i })
223-
const secondsInput = page.getByRole('spinbutton', { name: /seconds/i })
223+
const minutesInput = page.getByTestId('time-input-minutes')
224+
const secondsInput = page.getByTestId('time-input-seconds')
224225

225226
await minutesInput.fill('0')
226227
await secondsInput.fill('2')
@@ -249,8 +250,8 @@ test.describe('Timer Behavior', () => {
249250
await page.waitForTimeout(1000)
250251

251252
// Set a 3 second timer
252-
const minutesInput = page.getByRole('spinbutton', { name: /minutes/i })
253-
const secondsInput = page.getByRole('spinbutton', { name: /seconds/i })
253+
const minutesInput = page.getByTestId('time-input-minutes')
254+
const secondsInput = page.getByTestId('time-input-seconds')
254255

255256
await minutesInput.fill('0')
256257
await secondsInput.fill('3')
@@ -294,8 +295,8 @@ test.describe('Timer Behavior', () => {
294295
await page.waitForTimeout(1000)
295296

296297
// Set timer to 0:0 first
297-
const minutesInput = page.getByRole('spinbutton', { name: /minutes/i })
298-
const secondsInput = page.getByRole('spinbutton', { name: /seconds/i })
298+
const minutesInput = page.getByTestId('time-input-minutes')
299+
const secondsInput = page.getByTestId('time-input-seconds')
299300

300301
await minutesInput.fill('0')
301302
await secondsInput.fill('0')

0 commit comments

Comments
 (0)