Skip to content

Commit a4a74e5

Browse files
committed
Trying to fix tests
1 parent 6003179 commit a4a74e5

File tree

7 files changed

+64
-44
lines changed

7 files changed

+64
-44
lines changed

e2e/playwright/test-utils.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -329,6 +329,18 @@ export async function getUtils(page: Page, test_?: typeof test) {
329329
browserType !== 'chromium' ? null : await page.context().newCDPSession(page)
330330

331331
const util = {
332+
async getCenterOfModelViewArea() {
333+
const windowInnerWidth = await page.evaluate(() => window.innerWidth)
334+
const windowInnerHeight = await page.evaluate(() => window.innerHeight)
335+
336+
const panes = page.getByTestId('pane-section')
337+
const bb = await panes.boundingBox()
338+
const goRightPx = bb.width > 0 ? (windowInnerWidth - bb.width) / 2 : 0
339+
return {
340+
x: windowInnerWidth / 2 + goRightPx,
341+
y: windowInnerHeight / 2,
342+
}
343+
},
332344
waitForAuthSkipAppStart: () => waitForAuthAndLsp(page),
333345
waitForPageLoad: () => waitForPageLoad(page),
334346
waitForPageLoadWithRetry: () => waitForPageLoadWithRetry(page),

e2e/playwright/testing-settings.spec.ts

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -606,31 +606,19 @@ const extrude001 = extrude(5, sketch001)
606606
`
607607
)
608608
})
609-
const viewport = { width: 1200, height: 500 }
610-
await page.setViewportSize(viewport)
609+
await page.setViewportSize({ width: 1200, height: 500 })
611610
await u.waitForAuthSkipAppStart()
612611

613-
const getMiddleOfModelingArea = async (viewport) => {
614-
const panes = page.getByTestId('pane-section')
615-
const bb = await panes.boundingBox()
616-
const goRightPx = bb.width > 0 ? (viewport.width - bb.width) / 2 : 0
617-
return {
618-
x: viewport.width / 2 + goRightPx,
619-
y: viewport.height / 2,
620-
}
621-
}
622-
623612
// Selectors and constants
624613
const editSketchButton = page.getByRole('button', { name: 'Edit Sketch' })
625614
const lineToolButton = page.getByTestId('line')
626615
const segmentOverlays = page.getByTestId('segment-overlay')
627-
const sketchOriginLocation = await getMiddleOfModelingArea(viewport)
616+
const sketchOriginLocation = await u.getCenterOfModelViewArea()
628617
const darkThemeSegmentColor: [number, number, number] = [215, 215, 215]
629618
const lightThemeSegmentColor: [number, number, number] = [90, 90, 90]
630619

631620
await test.step(`Get into sketch mode`, async () => {
632-
const aLineToClickOn = await u.getBoundingBox('[data-overlay-index="0"]')
633-
await page.mouse.move(aLineToClickOn.x, aLineToClickOn.y)
621+
await page.mouse.click(sketchOriginLocation.x, sketchOriginLocation.y)
634622

635623
await expect(editSketchButton).toBeVisible()
636624
await editSketchButton.click()
@@ -642,12 +630,20 @@ const extrude001 = extrude(5, sketch001)
642630
await page.waitForTimeout(1000)
643631
})
644632

633+
const line1 = await u.getSegmentBodyCoords(`[data-overlay-index="${0}"]`, 0)
634+
635+
// Our lines are translucent (surprise!), so we need to get on portion
636+
// of the line that is only on the background, and not on top of something
637+
// like the axis lines.
638+
line1.x -= 1
639+
line1.y -= 1
640+
645641
await test.step(`Check the sketch line color before`, async () => {
646642
await expect
647643
.poll(() =>
648-
u.getGreatestPixDiff(sketchOriginLocation, darkThemeSegmentColor)
644+
u.getGreatestPixDiff(line1, darkThemeSegmentColor)
649645
)
650-
.toBeLessThan(15)
646+
.toBeLessThanOrEqual(34)
651647
})
652648

653649
await test.step(`Change theme to light using command palette`, async () => {
@@ -663,9 +659,9 @@ const extrude001 = extrude(5, sketch001)
663659
await test.step(`Check the sketch line color after`, async () => {
664660
await expect
665661
.poll(() =>
666-
u.getGreatestPixDiff(sketchOriginLocation, lightThemeSegmentColor)
662+
u.getGreatestPixDiff(line1, lightThemeSegmentColor)
667663
)
668-
.toBeLessThan(15)
664+
.toBeLessThanOrEqual(34)
669665
})
670666
})
671667

e2e/playwright/various.spec.ts

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -500,14 +500,11 @@ test('Sketch on face', async ({ page }) => {
500500

501501
let previousCodeContent = await page.locator('.cm-content').innerText()
502502

503-
await u.openAndClearDebugPanel()
504-
await u.doAndWaitForCmd(
505-
() => page.mouse.click(625, 165),
506-
'default_camera_get_settings',
507-
true
508-
)
509-
await page.waitForTimeout(150)
510-
await u.closeDebugPanel()
503+
const center = await u.getCenterOfModelViewArea()
504+
505+
await page.mouse.move(center.x, 180)
506+
await page.mouse.click(center.x, 180)
507+
await page.mouse.click(center.x, 180)
511508

512509
const firstClickPosition = [612, 238]
513510
const secondClickPosition = [661, 242]

src/clientSideScene/CameraControls.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -924,7 +924,7 @@ export class CameraControls {
924924
if (!panes) return
925925

926926
const panesWidth = panes.offsetWidth + panes.offsetLeft
927-
const goRightPx = panesWidth > 0 ? (window.innerWidth - panesWidth) / 2 : 0
927+
const goRightPx = panesWidth > 0 ? panesWidth / 2 : 0
928928

929929
// Originally I had tried to use the default_camera_look_at endpoint and
930930
// some quaternion math to move the camera right, but it ended up being
@@ -943,7 +943,7 @@ export class CameraControls {
943943
cmd: {
944944
type: 'zoom_to_fit',
945945
object_ids: zoomObjectId ? [zoomObjectId] : [], // leave empty to zoom to all objects
946-
padding: panesWidth > 0 ? window.innerWidth / panesWidth : 0.2, // padding around the objects
946+
padding: 0.2, // padding around the objects
947947
},
948948
},
949949
{

src/components/EngineStream.tsx

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,16 @@ import useEngineStreamContext, {
1717
EngineStreamState,
1818
EngineStreamTransition,
1919
} from 'hooks/useEngineStreamContext'
20+
import { REASONABLE_TIME_TO_REFRESH_STREAM_SIZE } from 'lib/timings'
21+
2022

2123
export const EngineStream = () => {
2224
const { setAppState } = useAppState()
2325

2426
const { overallState } = useNetworkContext()
2527
const { settings } = useSettingsAuthContext()
2628
const { file } = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
29+
const last = useRef<number>(Date.now())
2730

2831
const settingsEngine = {
2932
theme: settings.context.app.theme.current,
@@ -40,10 +43,6 @@ export const EngineStream = () => {
4043

4144
const streamIdleMode = settings.context.app.streamIdleMode.current
4245

43-
// 0.25s is the average visual reaction time for humans so we'll go a bit more
44-
// so those exception people don't see.
45-
const REASONABLE_TIME_TO_REFRESH_STREAM_SIZE = 100
46-
4746
const configure = () => {
4847
engineStreamActor.send({
4948
type: EngineStreamTransition.StartOrReconfigureEngine,
@@ -81,13 +80,14 @@ export const EngineStream = () => {
8180
}, [])
8281

8382
useEffect(() => {
84-
if (!streamIdleMode) return
83+
const video = engineStreamState.context.videoRef?.current
84+
if (!video) return
85+
const canvas = engineStreamState.context.canvasRef?.current
86+
if (!canvas) return
8587

86-
const s = setInterval(() => {
87-
const video = engineStreamState.context.videoRef?.current
88-
if (!video) return
89-
const canvas = engineStreamState.context.canvasRef?.current
90-
if (!canvas) return
88+
new ResizeObserver(() => {
89+
if (Date.now() - last.current < REASONABLE_TIME_TO_REFRESH_STREAM_SIZE) return
90+
last.current = Date.now()
9191

9292
if (
9393
Math.abs(video.width - window.innerWidth) > 4 ||
@@ -96,12 +96,9 @@ export const EngineStream = () => {
9696
timeoutStart.current = Date.now()
9797
configure()
9898
}
99-
}, REASONABLE_TIME_TO_REFRESH_STREAM_SIZE)
99+
}).observe(document.body)
100100

101-
return () => {
102-
clearInterval(s)
103-
}
104-
}, [streamIdleMode, engineStreamState.value])
101+
}, [engineStreamState.value])
105102

106103
// When the video and canvas element references are set, start the engine.
107104
useEffect(() => {

src/components/ModelingSidebar/ModelingSidebar.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
2222
import { useKclContext } from 'lang/KclProvider'
2323
import { machineManager } from 'lib/machineManager'
2424
import { sceneInfra } from 'lib/singletons'
25+
import { REASONABLE_TIME_TO_REFRESH_STREAM_SIZE } from 'lib/timings'
2526

2627
interface ModelingSidebarProps {
2728
paneOpacity: '' | 'opacity-20' | 'opacity-40'
@@ -171,6 +172,20 @@ export const ModelingSidebar = forwardRef<
171172
void sceneInfra.camControls.centerModelRelativeToPanes()
172173
}, [context.store?.openPanes])
173174

175+
176+
// If the panes are resized then center the model also
177+
useEffect(() => {
178+
let width = ref.current.offsetWidth
179+
let last = Date.now()
180+
new ResizeObserver(() => {
181+
if (width === ref.current.offsetWidth) return
182+
if (Date.now() - last < REASONABLE_TIME_TO_REFRESH_STREAM_SIZE) return
183+
last = Date.now()
184+
width = ref.current.offsetWidth
185+
void sceneInfra.camControls.centerModelRelativeToPanes()
186+
}).observe(ref.current)
187+
}, [])
188+
174189
return (
175190
<Resizable
176191
className={`group flex-1 flex flex-col z-10 my-2 pr-1 ${paneOpacity} ${pointerEventsCssClass}`}

src/lib/timings.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// 0.25s is the average visual reaction time for humans so we'll go a bit less
2+
// so those exception people don't see.
3+
export const REASONABLE_TIME_TO_REFRESH_STREAM_SIZE = 100

0 commit comments

Comments
 (0)