fix: render plain-html fallback on client init failure - #607
Merged
Annotations
10 errors and 1 warning
|
Run tests:
src/components/AccountSidebar.test.tsx#L50
AssertionError: expected "spy" to be called at least once
Ignored nodes: comments, script, style
<html>
<head />
<body
style=""
>
<div>
<div
aria-hidden="true"
class="fixed inset-0 z-40 bg-black/60"
/>
<aside
aria-label="Account details"
aria-modal="true"
class="fixed top-0 right-0 z-50 h-full flex flex-col bg-surface border-l border-line shadow-2xl animate-in slide-in-from-right duration-200 w-full sm:w-[340px]"
role="dialog"
>
<div
class="flex items-center justify-between px-4 h-14 border-b border-line shrink-0"
>
<h2
class="text-[13px] font-semibold text-ink"
>
Account
</h2>
<div
class="flex items-center gap-1 ml-auto"
>
<button
aria-label="Collapse account sidebar"
aria-pressed="false"
class="p-1.5 rounded-lg hover:bg-surface-2 text-ink-3 hover:text-ink-2 transition-colors"
type="button"
>
<svg
class="rotate-90"
color="currentColor"
fill="none"
height="14"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.9998 15C17.9998 15 13.5809 9.00001 11.9998 9C10.4187 8.99999 5.99985 15 5.99985 15"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
</svg>
</button>
<button
aria-label="Close account sidebar"
class="p-1.5 rounded-lg hover:bg-surface-2 text-ink-3 hover:text-ink-2 transition-colors"
type="button"
>
<svg
class=""
color="currentColor"
fill="none"
height="14"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18 6L6.00081 17.9992M17.9992 18L6 6.00085"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
</svg>
</button>
</div>
</div>
<div
class="flex-1 overflow-y-auto"
>
<div
class="px-4 py-4 border-b border-line"
>
<dl
class="flex flex-col gap-1"
>
<dt
class="text-[10px] font-semibold uppercase tracking-[0.1em] text-ink-4"
>
Address
</dt>
<dd
class="m-0"
>
<div
class="flex items-center gap-2 group"
>
<span
class="break-all text-[10px] select-all"
data-address="true"
data-state="closed"
>
GAAZI4TCR3TY5OJHCTJC2A4QSY6CJWJH5IAJTGKIN2ER7LBNVKOCCWNA
</span>
<button
aria-label="Copy address to clipboard"
class="shrink-0 p-1 rounded-md transition-all text-ink-3 hover:text-ink-2 hover:bg-surface-2 opacity-50 hover:opacity-100"
data-state="closed"
>
<svg
class=""
color="currentColor"
fill="none"
height="10"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
|
|
Run tests:
src/components/AccountSidebar.test.tsx#L50
AssertionError: expected "spy" to be called at least once
Ignored nodes: comments, script, style
<html>
<head />
<body
style=""
>
<div>
<div
aria-hidden="true"
class="fixed inset-0 z-40 bg-black/60"
/>
<aside
aria-label="Account details"
aria-modal="true"
class="fixed top-0 right-0 z-50 h-full flex flex-col bg-surface border-l border-line shadow-2xl animate-in slide-in-from-right duration-200 w-full sm:w-[340px]"
role="dialog"
>
<div
class="flex items-center justify-between px-4 h-14 border-b border-line shrink-0"
>
<h2
class="text-[13px] font-semibold text-ink"
>
Account
</h2>
<div
class="flex items-center gap-1 ml-auto"
>
<button
aria-label="Collapse account sidebar"
aria-pressed="false"
class="p-1.5 rounded-lg hover:bg-surface-2 text-ink-3 hover:text-ink-2 transition-colors"
type="button"
>
<svg
class="rotate-90"
color="currentColor"
fill="none"
height="14"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.9998 15C17.9998 15 13.5809 9.00001 11.9998 9C10.4187 8.99999 5.99985 15 5.99985 15"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
</svg>
</button>
<button
aria-label="Close account sidebar"
class="p-1.5 rounded-lg hover:bg-surface-2 text-ink-3 hover:text-ink-2 transition-colors"
type="button"
>
<svg
class=""
color="currentColor"
fill="none"
height="14"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18 6L6.00081 17.9992M17.9992 18L6 6.00085"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
</svg>
</button>
</div>
</div>
<div
class="flex-1 overflow-y-auto"
>
<div
class="px-4 py-4 border-b border-line"
>
<dl
class="flex flex-col gap-1"
>
<dt
class="text-[10px] font-semibold uppercase tracking-[0.1em] text-ink-4"
>
Address
</dt>
<dd
class="m-0"
>
<div
class="flex items-center gap-2 group"
>
<span
class="break-all text-[10px] select-all"
data-address="true"
data-state="closed"
>
GAAZI4TCR3TY5OJHCTJC2A4QSY6CJWJH5IAJTGKIN2ER7LBNVKOCCWNA
</span>
<button
aria-label="Copy address to clipboard"
class="shrink-0 p-1 rounded-md transition-all text-ink-3 hover:text-ink-2 hover:bg-surface-2 opacity-50 hover:opacity-100"
data-state="closed"
>
<svg
class=""
color="currentColor"
fill="none"
height="10"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
|
|
Run tests:
src/components/AccountSidebar.test.tsx#L129
AssertionError: expected "spy" to be called with arguments: [ …(3) ]
Number of calls: 0
Ignored nodes: comments, script, style
<html>
<head />
<body
style=""
>
<div>
<div
aria-hidden="true"
class="fixed inset-0 z-40 bg-black/60"
/>
<aside
aria-label="Account details"
aria-modal="true"
class="fixed top-0 right-0 z-50 h-full flex flex-col bg-surface border-l border-line shadow-2xl animate-in slide-in-from-right duration-200 w-full sm:w-[340px]"
role="dialog"
>
<div
class="flex items-center justify-between px-4 h-14 border-b border-line shrink-0"
>
<h2
class="text-[13px] font-semibold text-ink"
>
Account
</h2>
<div
class="flex items-center gap-1 ml-auto"
>
<button
aria-label="Collapse account sidebar"
aria-pressed="false"
class="p-1.5 rounded-lg hover:bg-surface-2 text-ink-3 hover:text-ink-2 transition-colors"
type="button"
>
<svg
class="rotate-90"
color="currentColor"
fill="none"
height="14"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.9998 15C17.9998 15 13.5809 9.00001 11.9998 9C10.4187 8.99999 5.99985 15 5.99985 15"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
</svg>
</button>
<button
aria-label="Close account sidebar"
class="p-1.5 rounded-lg hover:bg-surface-2 text-ink-3 hover:text-ink-2 transition-colors"
type="button"
>
<svg
class=""
color="currentColor"
fill="none"
height="14"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18 6L6.00081 17.9992M17.9992 18L6 6.00085"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
</svg>
</button>
</div>
</div>
<div
class="flex-1 overflow-y-auto"
>
<div
class="px-4 py-4 border-b border-line"
>
<dl
class="flex flex-col gap-1"
>
<dt
class="text-[10px] font-semibold uppercase tracking-[0.1em] text-ink-4"
>
Address
</dt>
<dd
class="m-0"
>
<div
class="flex items-center gap-2 group"
>
<span
class="break-all text-[10px] select-all"
data-address="true"
data-state="closed"
>
GAAZI4TCR3TY5OJHCTJC2A4QSY6CJWJH5IAJTGKIN2ER7LBNVKOCCWNA
</span>
<button
aria-label="Copy address to clipboard"
class="shrink-0 p-1 rounded-md transition-all text-ink-3 hover:text-ink-2 hover:bg-surface-2 opacity-50 hover:opacity-100"
data-state="closed"
>
<svg
class=""
color="currentColor"
fill="none"
height="10"
stroke="currentColor"
stroke-width="2"
|
|
Run tests:
src/components/AccountSidebar.test.tsx#L50
AssertionError: expected "spy" to be called at least once
Ignored nodes: comments, script, style
<html>
<head />
<body
style=""
>
<div>
<div
aria-hidden="true"
class="fixed inset-0 z-40 bg-black/60"
/>
<aside
aria-label="Account details"
aria-modal="true"
class="fixed top-0 right-0 z-50 h-full flex flex-col bg-surface border-l border-line shadow-2xl animate-in slide-in-from-right duration-200 w-full sm:w-[340px]"
role="dialog"
>
<div
class="flex items-center justify-between px-4 h-14 border-b border-line shrink-0"
>
<h2
class="text-[13px] font-semibold text-ink"
>
Account
</h2>
<div
class="flex items-center gap-1 ml-auto"
>
<button
aria-label="Collapse account sidebar"
aria-pressed="false"
class="p-1.5 rounded-lg hover:bg-surface-2 text-ink-3 hover:text-ink-2 transition-colors"
type="button"
>
<svg
class="rotate-90"
color="currentColor"
fill="none"
height="14"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.9998 15C17.9998 15 13.5809 9.00001 11.9998 9C10.4187 8.99999 5.99985 15 5.99985 15"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
</svg>
</button>
<button
aria-label="Close account sidebar"
class="p-1.5 rounded-lg hover:bg-surface-2 text-ink-3 hover:text-ink-2 transition-colors"
type="button"
>
<svg
class=""
color="currentColor"
fill="none"
height="14"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18 6L6.00081 17.9992M17.9992 18L6 6.00085"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
</svg>
</button>
</div>
</div>
<div
class="flex-1 overflow-y-auto"
>
<div
class="px-4 py-4 border-b border-line"
>
<dl
class="flex flex-col gap-1"
>
<dt
class="text-[10px] font-semibold uppercase tracking-[0.1em] text-ink-4"
>
Address
</dt>
<dd
class="m-0"
>
<div
class="flex items-center gap-2 group"
>
<span
class="break-all text-[10px] select-all"
data-address="true"
data-state="closed"
>
GAAZI4TCR3TY5OJHCTJC2A4QSY6CJWJH5IAJTGKIN2ER7LBNVKOCCWNA
</span>
<button
aria-label="Copy address to clipboard"
class="shrink-0 p-1 rounded-md transition-all text-ink-3 hover:text-ink-2 hover:bg-surface-2 opacity-50 hover:opacity-100"
data-state="closed"
>
<svg
class=""
color="currentColor"
fill="none"
height="10"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
|
|
Run tests:
src/components/AccountSidebar.test.tsx#L50
AssertionError: expected "spy" to be called at least once
Ignored nodes: comments, script, style
<html>
<head />
<body
style=""
>
<div>
<div
aria-hidden="true"
class="fixed inset-0 z-40 bg-black/60"
/>
<aside
aria-label="Account details"
aria-modal="true"
class="fixed top-0 right-0 z-50 h-full flex flex-col bg-surface border-l border-line shadow-2xl animate-in slide-in-from-right duration-200 w-full sm:w-[340px]"
role="dialog"
>
<div
class="flex items-center justify-between px-4 h-14 border-b border-line shrink-0"
>
<h2
class="text-[13px] font-semibold text-ink"
>
Account
</h2>
<div
class="flex items-center gap-1 ml-auto"
>
<button
aria-label="Collapse account sidebar"
aria-pressed="false"
class="p-1.5 rounded-lg hover:bg-surface-2 text-ink-3 hover:text-ink-2 transition-colors"
type="button"
>
<svg
class="rotate-90"
color="currentColor"
fill="none"
height="14"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.9998 15C17.9998 15 13.5809 9.00001 11.9998 9C10.4187 8.99999 5.99985 15 5.99985 15"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
</svg>
</button>
<button
aria-label="Close account sidebar"
class="p-1.5 rounded-lg hover:bg-surface-2 text-ink-3 hover:text-ink-2 transition-colors"
type="button"
>
<svg
class=""
color="currentColor"
fill="none"
height="14"
stroke="currentColor"
stroke-width="1.5"
viewBox="0 0 24 24"
width="14"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18 6L6.00081 17.9992M17.9992 18L6 6.00085"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
</svg>
</button>
</div>
</div>
<div
class="flex-1 overflow-y-auto"
>
<div
class="px-4 py-4 border-b border-line"
>
<dl
class="flex flex-col gap-1"
>
<dt
class="text-[10px] font-semibold uppercase tracking-[0.1em] text-ink-4"
>
Address
</dt>
<dd
class="m-0"
>
<div
class="flex items-center gap-2 group"
>
<span
class="break-all text-[10px] select-all"
data-address="true"
data-state="closed"
>
GAAZI4TCR3TY5OJHCTJC2A4QSY6CJWJH5IAJTGKIN2ER7LBNVKOCCWNA
</span>
<button
aria-label="Copy address to clipboard"
class="shrink-0 p-1 rounded-md transition-all text-ink-3 hover:text-ink-2 hover:bg-surface-2 opacity-50 hover:opacity-100"
data-state="closed"
>
<svg
class=""
color="currentColor"
fill="none"
height="10"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
|
|
Run tests:
src/components/AccountBalanceChart.test.tsx#L116
TestingLibraryElementError: Unable to find an accessible element with the role "region" and name "Balance History"
Here are the accessible roles:
region:
Name "Account Balance History":
<div
aria-labelledby="_r_1f8_"
class="rounded-xl border border-line bg-surface overflow-hidden"
role="region"
/>
--------------------------------------------------
heading:
Name "Account Balance History":
<h3
class="text-[14px] font-semibold text-ink"
id="_r_1f8_"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="text-[12px] text-ink-3 mt-0.5"
/>
--------------------------------------------------
button:
Name "7d":
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors bg-surface-2 text-ink"
type="button"
/>
Name "30d":
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
/>
Name "90d":
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
/>
Name "XLM":
<button
class="text-[12px] font-medium px-2.5 py-1 rounded-md transition-colors bg-brand-dim text-brand"
type="button"
/>
Name "USDC":
<button
class="text-[12px] font-medium px-2.5 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
/>
Name "7d":
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors bg-surface-2 text-ink"
type="button"
/>
Name "30d":
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-4 hover:text-ink-3"
type="button"
/>
Name "90d":
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-4 hover:text-ink-3"
type="button"
/>
--------------------------------------------------
img:
Name "Line chart with 7 data points":
<svg
aria-label="Line chart with 7 data points"
class="overflow-visible"
role="img"
viewBox="0 0 400 200"
width="100%"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body
style=""
>
<div>
<div
aria-labelledby="_r_1f8_"
class="rounded-xl border border-line bg-surface overflow-hidden"
role="region"
>
<div
class="px-5 py-4 border-b border-line flex items-center justify-between"
>
<div>
<h3
class="text-[14px] font-semibold text-ink"
id="_r_1f8_"
>
Account Balance History
</h3>
<p
class="text-[12px] text-ink-3 mt-0.5"
>
Historical balance trends
</p>
</div>
<div
class="flex items-center gap-1"
>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors bg-surface-2 text-ink"
type="button"
>
7d
</button>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
>
30d
</button>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
>
90d
</button>
</div>
</div>
<div>
<div
class="px-5 pt-4 pb-2 flex items-center justify-between"
>
<div
class="flex items-center gap-3"
>
<button
class="text-[12px] font-medium px-2.5 py-1 rounded-md transition-colors bg-brand-dim text-brand"
type="button"
>
XLM
</button>
<button
class="text-[12px] font-medium px-2.5 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
>
USDC
|
|
Run tests:
src/components/AccountBalanceChart.test.tsx#L100
TestingLibraryElementError: Unable to find an accessible element with the role "region" and name "Balance History"
Here are the accessible roles:
region:
Name "Account Balance History":
<div
aria-labelledby="_r_1f6_"
class="rounded-xl border border-line bg-surface overflow-hidden"
role="region"
/>
--------------------------------------------------
heading:
Name "Account Balance History":
<h3
class="text-[14px] font-semibold text-ink"
id="_r_1f6_"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="text-[12px] text-ink-3 mt-0.5"
/>
--------------------------------------------------
button:
Name "7d":
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors bg-surface-2 text-ink"
type="button"
/>
Name "30d":
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
/>
Name "90d":
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
/>
Name "XLM":
<button
class="text-[12px] font-medium px-2.5 py-1 rounded-md transition-colors bg-brand-dim text-brand"
type="button"
/>
Name "USDC":
<button
class="text-[12px] font-medium px-2.5 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
/>
Name "7d":
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors bg-surface-2 text-ink"
type="button"
/>
Name "30d":
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-4 hover:text-ink-3"
type="button"
/>
Name "90d":
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-4 hover:text-ink-3"
type="button"
/>
--------------------------------------------------
img:
Name "Line chart with 7 data points":
<svg
aria-label="Line chart with 7 data points"
class="overflow-visible"
role="img"
viewBox="0 0 400 200"
width="100%"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body
style=""
>
<div>
<div
aria-labelledby="_r_1f6_"
class="rounded-xl border border-line bg-surface overflow-hidden"
role="region"
>
<div
class="px-5 py-4 border-b border-line flex items-center justify-between"
>
<div>
<h3
class="text-[14px] font-semibold text-ink"
id="_r_1f6_"
>
Account Balance History
</h3>
<p
class="text-[12px] text-ink-3 mt-0.5"
>
Historical balance trends
</p>
</div>
<div
class="flex items-center gap-1"
>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors bg-surface-2 text-ink"
type="button"
>
7d
</button>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
>
30d
</button>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
>
90d
</button>
</div>
</div>
<div>
<div
class="px-5 pt-4 pb-2 flex items-center justify-between"
>
<div
class="flex items-center gap-3"
>
<button
class="text-[12px] font-medium px-2.5 py-1 rounded-md transition-colors bg-brand-dim text-brand"
type="button"
>
XLM
</button>
<button
class="text-[12px] font-medium px-2.5 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
>
USDC
|
|
Run tests:
src/components/AccountBalanceChart.test.tsx#L91
TestingLibraryElementError: Found multiple elements with the text: 30d
Here are the matching elements:
Ignored nodes: comments, script, style
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
>
30d
</button>
Ignored nodes: comments, script, style
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-4 hover:text-ink-3"
type="button"
>
30d
</button>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<body
style=""
>
<div>
<div
aria-labelledby="_r_1f5_"
class="rounded-xl border border-line bg-surface overflow-hidden"
role="region"
>
<div
class="px-5 py-4 border-b border-line flex items-center justify-between"
>
<div>
<h3
class="text-[14px] font-semibold text-ink"
id="_r_1f5_"
>
Account Balance History
</h3>
<p
class="text-[12px] text-ink-3 mt-0.5"
>
Historical balance trends
</p>
</div>
<div
class="flex items-center gap-1"
>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors bg-surface-2 text-ink"
type="button"
>
7d
</button>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
>
30d
</button>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
>
90d
</button>
</div>
</div>
<div>
<div
class="px-5 pt-4 pb-2 flex items-center justify-between"
>
<div
class="flex items-center gap-3"
>
<button
class="text-[12px] font-medium px-2.5 py-1 rounded-md transition-colors bg-brand-dim text-brand"
type="button"
>
XLM
</button>
<button
class="text-[12px] font-medium px-2.5 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
>
USDC
</button>
</div>
<div
class="flex items-center gap-1"
>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors bg-surface-2 text-ink"
type="button"
>
7d
</button>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-4 hover:text-ink-3"
type="button"
>
30d
</button>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-4 hover:text-ink-3"
type="button"
>
90d
</button>
</div>
</div>
<div
class="flex items-baseline gap-2 px-5 py-1"
>
<span
class="text-[22px] font-semibold text-ink tabular-nums"
>
11,450
</span>
<span
class="text-[11px] text-ink-3"
>
XLM
</span>
<span
class="text-[11px] font-medium ml-2 text-green"
>
+
300.00
(
+
2.7
%)
</span>
</div>
<div
class="px-2 py-2"
>
<svg
aria-label="Line chart with 7 data points"
class="overflow-visible"
role="img"
viewBox="0 0 400 200"
width="100%"
>
<defs>
<li
|
|
Run tests:
src/components/AccountBalanceChart.test.tsx#L82
TestingLibraryElementError: Found multiple elements with the text: 7d
Here are the matching elements:
Ignored nodes: comments, script, style
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors bg-surface-2 text-ink"
type="button"
>
7d
</button>
Ignored nodes: comments, script, style
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors bg-surface-2 text-ink"
type="button"
>
7d
</button>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<body
style=""
>
<div>
<div
aria-labelledby="_r_1f4_"
class="rounded-xl border border-line bg-surface overflow-hidden"
role="region"
>
<div
class="px-5 py-4 border-b border-line flex items-center justify-between"
>
<div>
<h3
class="text-[14px] font-semibold text-ink"
id="_r_1f4_"
>
Account Balance History
</h3>
<p
class="text-[12px] text-ink-3 mt-0.5"
>
Historical balance trends
</p>
</div>
<div
class="flex items-center gap-1"
>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors bg-surface-2 text-ink"
type="button"
>
7d
</button>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
>
30d
</button>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
>
90d
</button>
</div>
</div>
<div>
<div
class="px-5 pt-4 pb-2 flex items-center justify-between"
>
<div
class="flex items-center gap-3"
>
<button
class="text-[12px] font-medium px-2.5 py-1 rounded-md transition-colors bg-brand-dim text-brand"
type="button"
>
XLM
</button>
<button
class="text-[12px] font-medium px-2.5 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
>
USDC
</button>
</div>
<div
class="flex items-center gap-1"
>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors bg-surface-2 text-ink"
type="button"
>
7d
</button>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-4 hover:text-ink-3"
type="button"
>
30d
</button>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-4 hover:text-ink-3"
type="button"
>
90d
</button>
</div>
</div>
<div
class="flex items-baseline gap-2 px-5 py-1"
>
<span
class="text-[22px] font-semibold text-ink tabular-nums"
>
11,450
</span>
<span
class="text-[11px] text-ink-3"
>
XLM
</span>
<span
class="text-[11px] font-medium ml-2 text-green"
>
+
300.00
(
+
2.7
%)
</span>
</div>
<div
class="px-2 py-2"
>
<svg
aria-label="Line chart with 7 data points"
class="overflow-visible"
role="img"
viewBox="0 0 400 200"
width="100%"
>
<defs>
<lineargradient
|
|
Run tests:
src/components/AccountBalanceChart.test.tsx#L49
TestingLibraryElementError: Unable to find an element with the text: Balance History. 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
style=""
>
<div>
<div
aria-labelledby="_r_1f0_"
class="rounded-xl border border-line bg-surface overflow-hidden"
role="region"
>
<div
class="px-5 py-4 border-b border-line flex items-center justify-between"
>
<div>
<h3
class="text-[14px] font-semibold text-ink"
id="_r_1f0_"
>
Account Balance History
</h3>
<p
class="text-[12px] text-ink-3 mt-0.5"
>
Historical balance trends
</p>
</div>
<div
class="flex items-center gap-1"
>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors bg-surface-2 text-ink"
type="button"
>
7d
</button>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
>
30d
</button>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
>
90d
</button>
</div>
</div>
<div>
<div
class="px-5 pt-4 pb-2 flex items-center justify-between"
>
<div
class="flex items-center gap-3"
>
<button
class="text-[12px] font-medium px-2.5 py-1 rounded-md transition-colors bg-brand-dim text-brand"
type="button"
>
XLM
</button>
<button
class="text-[12px] font-medium px-2.5 py-1 rounded-md transition-colors text-ink-3 hover:text-ink-2"
type="button"
>
USDC
</button>
</div>
<div
class="flex items-center gap-1"
>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors bg-surface-2 text-ink"
type="button"
>
7d
</button>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-4 hover:text-ink-3"
type="button"
>
30d
</button>
<button
class="text-[11px] font-medium px-2 py-1 rounded-md transition-colors text-ink-4 hover:text-ink-3"
type="button"
>
90d
</button>
</div>
</div>
<div
class="flex items-baseline gap-2 px-5 py-1"
>
<span
class="text-[22px] font-semibold text-ink tabular-nums"
>
11,450
</span>
<span
class="text-[11px] text-ink-3"
>
XLM
</span>
<span
class="text-[11px] font-medium ml-2 text-green"
>
+
300.00
(
+
2.7
%)
</span>
</div>
<div
class="px-2 py-2"
>
<svg
aria-label="Line chart with 7 data points"
class="overflow-visible"
role="img"
viewBox="0 0 400 200"
width="100%"
>
<defs>
<lineargradient
id="gradient-55852b"
x1="0"
x2="0"
y1="0"
y2="1"
>
<stop
offset="0%"
stop-color="#55852b"
stop-opacity="0.15"
/>
<stop
offse
|
|
Complete job
Node.js 20 is deprecated. The following actions target Node.js 20 but are being forced to run on Node.js 24: actions/checkout@v4, actions/setup-node@v4. For more information see: https://github.blog/changelog/2025-09-19-deprecation-of-node-20-on-github-actions-runners/
|
background
wait
wait-all
cancel
parallel
Loading