initial playwright setup and test (#1039)
* initial playwright setup and test * try verbose logging * double check resolution * double check token * remove logs * try running on ubuntu and macos * move e2e tests * vitest ignores playwright tests * add a series of tests * tweak yarn setup * typo * update fmt * action typo * rust toolchain? * remove .only from playwright test * A snapshot a day keeps the bugs away! 📷🐛 * A snapshot a day keeps the bugs away! 📷🐛 * add pan and zoom back * try puting os in commit message * A snapshot a day keeps the bugs away! 📷🐛 .os * A snapshot a day keeps the bugs away! 📷🐛 .os * fix commit message * A snapshot a day keeps the bugs away! 📷🐛 (OS: macos-latest) * add command logs to UI for axis tests * typo * fmt * remove .only * add auto complete test * remove .only * update queries to be more playwright recommended * move test utils * remove waits from first test * remove old snapshots * re-arrange files and tests * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest) * trigger CI * refactor plane test * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest) * remove .only * try longer wait * try snap shoting * fmt * better CI names * fix * fix linux * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest) * try make executes on load a bit more robust * fix * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest) * stabilise snapshots * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest) * A snapshot a day keeps the bugs away! 📷🐛 (OS: macos-latest) * make tests run linearly * update naming * tidy * .only * update readme * trigger CI * add set tool * util clean up * update readme * readme tweaks * self-review clean up * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * tweak * update readme * Ensure Vite preview server is running before running any Playwright tests (#1114) * Ensure that Vite is serving before tests run * Don't break secrets if developer has extra blank line in env file * @mxschmitt's suggestions * fix * add wait-on types * tsconfig fix * update readme * code template for sktech on each plane test --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Frank Noirot <frank@kittycad.io>
This commit is contained in:
Kurt Hutten
GitHub
@ -9,6 +9,7 @@ export interface CollapsiblePanelProps
|
||||
icon?: IconDefinition
|
||||
open?: boolean
|
||||
menu?: React.ReactNode
|
||||
detailsTestId?: string
|
||||
iconClassNames?: {
|
||||
bg?: string
|
||||
icon?: string
|
||||
@ -51,11 +52,13 @@ export const CollapsiblePanel = ({
|
||||
className,
|
||||
iconClassNames,
|
||||
menu,
|
||||
detailsTestId,
|
||||
...props
|
||||
}: CollapsiblePanelProps) => {
|
||||
return (
|
||||
<details
|
||||
{...props}
|
||||
data-testid={detailsTestId}
|
||||
className={styles.panel + ' group ' + (className || '')}
|
||||
>
|
||||
<PanelHeader
|
||||
|
||||
@ -1,17 +1,20 @@
|
||||
import { CollapsiblePanel, CollapsiblePanelProps } from './CollapsiblePanel'
|
||||
import { AstExplorer } from './AstExplorer'
|
||||
import { EngineCommands } from './EngineCommands'
|
||||
|
||||
export const DebugPanel = ({ className, ...props }: CollapsiblePanelProps) => {
|
||||
return (
|
||||
<CollapsiblePanel
|
||||
{...props}
|
||||
className={
|
||||
'!absolute overflow-hidden !h-auto bottom-5 right-5 ' + className
|
||||
'!absolute overflow-auto !h-auto bottom-5 right-5 ' + className
|
||||
}
|
||||
// header height, top-5, and bottom-5
|
||||
style={{ maxHeight: 'calc(100% - 3rem - 1.25rem - 1.25rem)' }}
|
||||
detailsTestId="debug-panel"
|
||||
>
|
||||
<section className="p-4 flex flex-col gap-4">
|
||||
<EngineCommands />
|
||||
<div style={{ height: '400px' }} className="overflow-y-auto">
|
||||
<AstExplorer />
|
||||
</div>
|
||||
|
||||
85
src/components/EngineCommands.tsx
Normal file
85
src/components/EngineCommands.tsx
Normal file
@ -0,0 +1,85 @@
|
||||
import { CommandLog, engineCommandManager } from 'lang/std/engineConnection'
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
function useEngineCommands(): [CommandLog[], () => void] {
|
||||
const [engineCommands, setEngineCommands] = useState<CommandLog[]>([])
|
||||
|
||||
useEffect(() => {
|
||||
engineCommandManager.registerCommandLogCallback((commands) =>
|
||||
setEngineCommands(commands)
|
||||
)
|
||||
}, [])
|
||||
|
||||
return [engineCommands, () => engineCommandManager.clearCommandLogs()]
|
||||
}
|
||||
|
||||
export const EngineCommands = () => {
|
||||
const [engineCommands, clearEngineCommands] = useEngineCommands()
|
||||
const [containsFilter, setContainsFilter] = useState('')
|
||||
const [customCmd, setCustomCmd] = useState('')
|
||||
return (
|
||||
<div>
|
||||
<input
|
||||
className="text-gray-800 bg-slate-300 px-2"
|
||||
data-testid="filter-input"
|
||||
type="text"
|
||||
value={containsFilter}
|
||||
onChange={(e) => setContainsFilter(e.target.value)}
|
||||
placeholder="Filter"
|
||||
/>
|
||||
<div className="max-w-xl max-h-36 overflow-auto">
|
||||
{engineCommands.map((command, index) => {
|
||||
const stringer = JSON.stringify(command)
|
||||
if (containsFilter && !stringer.includes(containsFilter)) return null
|
||||
return (
|
||||
<pre className="text-xs">
|
||||
<code
|
||||
key={index}
|
||||
data-message-type={command.type}
|
||||
data-command-type={
|
||||
(command.type === 'send-modeling' ||
|
||||
command.type === 'send-scene') &&
|
||||
command.data.type === 'modeling_cmd_req'
|
||||
? command?.data?.cmd?.type
|
||||
: ''
|
||||
}
|
||||
data-command-id={
|
||||
(command.type === 'send-modeling' ||
|
||||
command.type === 'send-scene') &&
|
||||
command.data.type === 'modeling_cmd_req'
|
||||
? command.data.cmd_id
|
||||
: ''
|
||||
}
|
||||
data-receive-command-type={
|
||||
command.type === 'receive-reliable' ? command.cmd_type : ''
|
||||
}
|
||||
>
|
||||
{JSON.stringify(command, null, 2)}
|
||||
</code>
|
||||
</pre>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<button data-testid="clear-commands" onClick={clearEngineCommands}>
|
||||
Clear
|
||||
</button>
|
||||
<br />
|
||||
<input
|
||||
className="text-gray-800 bg-slate-300 px-2"
|
||||
type="text"
|
||||
value={customCmd}
|
||||
onChange={(e) => setCustomCmd(e.target.value)}
|
||||
placeholder="JSON command"
|
||||
data-testid="custom-cmd-input"
|
||||
/>
|
||||
<button
|
||||
data-testid="custom-cmd-send-button"
|
||||
onClick={() =>
|
||||
engineCommandManager.sendSceneCommand(JSON.parse(customCmd))
|
||||
}
|
||||
>
|
||||
Send custom command
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -10,7 +10,10 @@ const Loading = ({ children }: React.PropsWithChildren) => {
|
||||
return () => clearTimeout(timer)
|
||||
}, [setHasLongLoadTime])
|
||||
return (
|
||||
<div className="body-bg flex flex-col items-center justify-center h-screen">
|
||||
<div
|
||||
className="body-bg flex flex-col items-center justify-center h-screen"
|
||||
data-testid="loading"
|
||||
>
|
||||
<svg viewBox="0 0 10 10" className="w-8 h-8">
|
||||
<circle cx="5" cy="5" r="4" stroke="var(--liquid-20)" fill="none" />
|
||||
<circle
|
||||
|
||||
@ -356,6 +356,8 @@ export const Stream = ({ className = '' }) => {
|
||||
|
||||
kclManager.executeAstMock(modifiedAst, true)
|
||||
})
|
||||
} else {
|
||||
engineCommandManager.sendSceneCommand(command)
|
||||
}
|
||||
|
||||
setDidDragInStream(false)
|
||||
@ -394,7 +396,9 @@ export const Stream = ({ className = '' }) => {
|
||||
/>
|
||||
{isLoading && (
|
||||
<div className="text-center absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<Loading>Loading stream...</Loading>
|
||||
<Loading>
|
||||
<span data-testid="loading-stream">Loading stream...</span>
|
||||
</Loading>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user