Some visual improvements. #1
tomusdrwAnnotations
3 errors
|
Lint and Test
Process completed with exit code 1.
|
|
src/components/StateViewer.test.tsx > StateViewer > should render with custom title:
src/components/StateViewer.test.tsx#L54
TestingLibraryElementError: Unable to find an element with the text: Custom Title. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body>
<div>
<div
class="bg-background rounded-lg border"
>
<div
class="px-6 py-4 border-b bg-muted/20"
>
<div
class="relative"
>
<svg
aria-hidden="true"
class="lucide lucide-search absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m21 21-4.34-4.34"
/>
<circle
cx="11"
cy="11"
r="8"
/>
</svg>
<input
class="w-full pl-10 pr-4 py-2 border border-border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent bg-background text-foreground"
placeholder="Search keys or values..."
type="text"
value=""
/>
</div>
</div>
<div
class="divide-y divide-border text-left"
>
<div
class="px-6 py-3 hover:bg-muted/30"
>
<div
class="space-y-2"
>
<div
class="flex items-center gap-4"
>
<label
class="text-xs font-medium text-muted-foreground uppercase tracking-wide w-16 flex-shrink-0 hidden md:block"
>
Key
</label>
<div
class="flex items-center space-x-2 flex-1 min-w-0"
>
<code
class="text-sm font-mono text-foreground break-all bg-muted px-2 py-1 rounded flex-1"
>
0x01
</code>
<button
aria-label="Copy key"
class="inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3 text-xs flex-shrink-0"
>
<svg
aria-hidden="true"
class="lucide lucide-copy h-4 w-4"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<rect
height="14"
rx="2"
ry="2"
width="14"
x="8"
y="8"
/>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
/>
</svg>
</button>
</div>
</div>
<div
class="flex items-start gap-4"
>
<div
class="w-16 flex-shrink-0 items-center gap-2 hidden md:flex"
>
<label
class="text-xs font-medium text-muted-foreground uppercase tracking-wide"
>
<span>
Value
</span>
</label>
</div>
|
|
src/components/StateViewer.test.tsx > StateViewer > should render state data correctly:
src/components/StateViewer.test.tsx#L39
TestingLibraryElementError: Unable to find an element with the text: State Data. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body>
<div>
<div
class="bg-background rounded-lg border"
>
<div
class="px-6 py-4 border-b bg-muted/20"
>
<div
class="relative"
>
<svg
aria-hidden="true"
class="lucide lucide-search absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m21 21-4.34-4.34"
/>
<circle
cx="11"
cy="11"
r="8"
/>
</svg>
<input
class="w-full pl-10 pr-4 py-2 border border-border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent bg-background text-foreground"
placeholder="Search keys or values..."
type="text"
value=""
/>
</div>
</div>
<div
class="divide-y divide-border text-left"
>
<div
class="px-6 py-3 hover:bg-muted/30"
>
<div
class="space-y-2"
>
<div
class="flex items-center gap-4"
>
<label
class="text-xs font-medium text-muted-foreground uppercase tracking-wide w-16 flex-shrink-0 hidden md:block"
>
Key
</label>
<div
class="flex items-center space-x-2 flex-1 min-w-0"
>
<code
class="text-sm font-mono text-foreground break-all bg-muted px-2 py-1 rounded flex-1"
>
0x01
</code>
<button
aria-label="Copy key"
class="inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-8 rounded-md px-3 text-xs flex-shrink-0"
>
<svg
aria-hidden="true"
class="lucide lucide-copy h-4 w-4"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<rect
height="14"
rx="2"
ry="2"
width="14"
x="8"
y="8"
/>
<path
d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
/>
</svg>
</button>
</div>
</div>
<div
class="flex items-start gap-4"
>
<div
class="w-16 flex-shrink-0 items-center gap-2 hidden md:flex"
>
<label
class="text-xs font-medium text-muted-foreground uppercase tracking-wide"
>
<span>
Value
</span>
</label>
</div>
|