Skip to content

chore: stabilize tests #7185

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
schiller-manuel merged 1 commit into from
Apr 13, 2026
+57 −46
Merged

chore: stabilize tests #7185

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions e2e/react-start/rsc/src/routes/rsc-ssr-false.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,6 +298,7 @@ function RscSsrFalseComponent() {

const canvasRef = React.useRef<HTMLCanvasElement>(null)
const hasMounted = React.useRef(false)
const isDrawingRef = React.useRef(false)
const [isDrawing, setIsDrawing] = React.useState(false)
const [brushSize, setBrushSize] = React.useState(tools.brushSizes[1])
// Initialize color from localStorage if available, otherwise use default
Expand Down Expand Up @@ -362,6 +363,7 @@ function RscSsrFalseComponent() {
const canvas = canvasRef.current
if (!canvas) return

isDrawingRef.current = true
setIsDrawing(true)
const rect = canvas.getBoundingClientRect()
const ctx = canvas.getContext('2d')
Expand All @@ -372,7 +374,7 @@ function RscSsrFalseComponent() {
}

const draw = (e: React.MouseEvent<HTMLCanvasElement>) => {
if (!isDrawing) return
if (!isDrawingRef.current) return

const canvas = canvasRef.current
if (!canvas) return
Expand All @@ -389,7 +391,8 @@ function RscSsrFalseComponent() {
}

const stopDrawing = () => {
if (isDrawing) {
if (isDrawingRef.current) {
isDrawingRef.current = false
setStrokeCount((c) => {
const newCount = c + 1
// Save stroke count to localStorage
Expand Down
96 changes: 52 additions & 44 deletions e2e/react-start/rsc/tests/rsc-ssr-false.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
import { expect } from '@playwright/test'
import { test } from '@tanstack/router-e2e-utils'

type Point = {
x: number
y: number
}

// This warning can occur during rapid navigation/hydration cycles and doesn't affect functionality
// It's a React development mode warning about async state updates during mounting
test.use({
Expand All @@ -20,6 +25,31 @@ test.describe('RSC SSR False Tests - Both loader and component on client', () =>
})
}

async function drawStroke(page: any, start: Point, end: Point) {
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai bot Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify weakly typed Playwright page params in this spec
rg -nP '\bpage\s*:\s*any\b' e2e/react-start/rsc/tests/rsc-ssr-false.spec.ts

Repository: TanStack/router

Length of output: 181

Replace page: any with Playwright Page type in helper functions.

Multiple helper functions use page: any, weakening type safety. Type them as Page instead.

🔧 Proposed fix 
-import { expect } from '@playwright/test'
+import { expect, type Page } from '@playwright/test'
@@
-  async function clearDrawingStorage(page: any) {
+  async function clearDrawingStorage(page: Page) {
@@
-  async function drawStroke(page: any, start: Point, end: Point) {
+  async function drawStroke(page: Page, start: Point, end: Point) {

Per coding guidelines: **/*.{ts,tsx}: Use TypeScript strict mode with extensive type safety.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@e2e/react-start/rsc/tests/rsc-ssr-false.spec.ts` at line 28, The helper
functions (e.g., drawStroke) currently declare page as any; replace page: any
with the Playwright Page type (imported from 'playwright' or '@playwright/test'
as used in this repo) to restore type safety, update all helpers in this file
that use page (such as drawStroke and any other drawing/navigation helpers) to
accept page: Page, and ensure the Page import is added at the top of the file
and any Point type usages remain compatible.

await page.getByTestId('drawing-canvas').evaluate(
(
canvas: HTMLCanvasElement,
{ start, end }: { start: Point; end: Point },
) => {
const rect = canvas.getBoundingClientRect()

const createMouseEvent = (type: string, point: Point) =>
new MouseEvent(type, {
bubbles: true,
cancelable: true,
clientX: rect.left + point.x,
clientY: rect.top + point.y,
})

canvas.dispatchEvent(createMouseEvent('mousedown', start))
canvas.dispatchEvent(createMouseEvent('mousemove', start))
canvas.dispatchEvent(createMouseEvent('mousemove', end))
canvas.dispatchEvent(createMouseEvent('mouseup', end))
},
{ start, end },
)
}

test('Page renders with RSC content after initial client load', async ({
page,
}) => {
Expand Down Expand Up @@ -117,33 +147,21 @@ test.describe('RSC SSR False Tests - Both loader and component on client', () =>

await expect(page.getByTestId('canvas-container')).toBeVisible()

const canvas = page.getByTestId('drawing-canvas')
const box = await canvas.boundingBox()
expect(box).not.toBeNull()

// Draw a stroke
await page.mouse.move(box!.x + 50, box!.y + 50)
await page.mouse.down()
await page.mouse.move(box!.x + 150, box!.y + 100)
await page.mouse.up()
await drawStroke(page, { x: 50, y: 50 }, { x: 150, y: 100 })

// Verify stroke count increased
const containerText = await page
.getByTestId('canvas-container')
.textContent()
expect(containerText).toContain('Strokes: 1')
await expect(page.getByTestId('canvas-container')).toContainText(
'Strokes: 1',
)

// Draw another stroke
await page.mouse.move(box!.x + 100, box!.y + 30)
await page.mouse.down()
await page.mouse.move(box!.x + 200, box!.y + 80)
await page.mouse.up()
await drawStroke(page, { x: 100, y: 30 }, { x: 200, y: 80 })

// Verify stroke count increased again
const containerText2 = await page
.getByTestId('canvas-container')
.textContent()
expect(containerText2).toContain('Strokes: 2')
await expect(page.getByTestId('canvas-container')).toContainText(
'Strokes: 2',
)
})

test('Clear canvas button works', async ({ page }) => {
Expand All @@ -153,26 +171,21 @@ test.describe('RSC SSR False Tests - Both loader and component on client', () =>

await expect(page.getByTestId('canvas-container')).toBeVisible()

const canvas = page.getByTestId('drawing-canvas')
const box = await canvas.boundingBox()
expect(box).not.toBeNull()

// Draw a stroke
await page.mouse.move(box!.x + 50, box!.y + 50)
await page.mouse.down()
await page.mouse.move(box!.x + 150, box!.y + 100)
await page.mouse.up()
await drawStroke(page, { x: 50, y: 50 }, { x: 150, y: 100 })

// Verify stroke was recorded
let containerText = await page.getByTestId('canvas-container').textContent()
expect(containerText).toContain('Strokes: 1')
await expect(page.getByTestId('canvas-container')).toContainText(
'Strokes: 1',
)

// Clear canvas
await page.getByTestId('clear-canvas-btn').click()

// Verify stroke count reset
containerText = await page.getByTestId('canvas-container').textContent()
expect(containerText).toContain('Strokes: 0')
await expect(page.getByTestId('canvas-container')).toContainText(
'Strokes: 0',
)
})

test('Save controls are visible and functional', async ({ page }) => {
Expand Down Expand Up @@ -313,18 +326,12 @@ test.describe('RSC SSR False Tests - Both loader and component on client', () =>
await page.getByTestId('clear-canvas-btn').click()

// Draw something
const canvas = page.getByTestId('drawing-canvas')
const box = await canvas.boundingBox()
expect(box).not.toBeNull()

await page.mouse.move(box!.x + 50, box!.y + 50)
await page.mouse.down()
await page.mouse.move(box!.x + 150, box!.y + 100)
await page.mouse.up()
await drawStroke(page, { x: 50, y: 50 }, { x: 150, y: 100 })

// Verify stroke was counted
let containerText = await page.getByTestId('canvas-container').textContent()
expect(containerText).toContain('Strokes: 1')
await expect(page.getByTestId('canvas-container')).toContainText(
'Strokes: 1',
)

// Reload page
await page.reload()
Expand All @@ -340,7 +347,8 @@ test.describe('RSC SSR False Tests - Both loader and component on client', () =>
)

// Verify stroke count was also restored
containerText = await page.getByTestId('canvas-container').textContent()
expect(containerText).toContain('Strokes: 1')
await expect(page.getByTestId('canvas-container')).toContainText(
'Strokes: 1',
)
})
})
Loading