Improve state surfacing support #80
arkadiuszbachorskibuild-and-test.yml
on: pull_request
REUSE Compliance Check
/
REUSE Compliance Check
6s
Markdown Link Check
/
markdown_link_check
24s
ESLint
/
eslint
44s
Test and Coverage
/
testandcoverage
53s
Annotations
12 errors and 4 warnings
|
ESLint / eslint
Process completed with exit code 1.
|
|
ESLint / eslint
1 errors and 0 warnings
|
|
Test and Coverage / testandcoverage
Codecov:
Failed to properly upload report: The process '/home/runner/work/_actions/codecov/codecov-action/v4/dist/codecov' failed with exit code 1
|
|
src/components/DataTable/DataTable.test.tsx > DataTable > shows empty state:
src/components/DataTable/DataTable.test.tsx#L33
TestingLibraryElementError: Unable to find an element with the text: /No\sresults\sfound/. 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="rounded-md bg-surface-primary border"
>
<header
class="flex items-center border-b p-4"
>
<div
class="relative max-w-72 grow"
>
<svg
class="lucide lucide-search absolute left-3 top-2.5 size-5 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"
>
<circle
cx="11"
cy="11"
r="8"
/>
<path
d="m21 21-4.3-4.3"
/>
</svg>
<input
aria-label="Search..."
class="focus-ring flex h-10 w-full rounded-md border border-input bg-surface-primary px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 pl-10"
placeholder="Search..."
type="text"
value=""
/>
</div>
</header>
<div
class="flex-center py-8"
>
<div
class="flex gap-3 text-muted-foreground"
>
<svg
class="lucide lucide-list-x"
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="M11 12H3"
/>
<path
d="M16 6H3"
/>
<path
d="M16 18H3"
/>
<path
d="m19 10-4 4"
/>
<path
d="m15 10 4 4"
/>
</svg>
<span>
No
data
found
.
</span>
</div>
</div>
</div>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ expectEmptyStateToBeInTheDocument src/components/DataTable/DataTable.test.tsx:33:31
❯ src/components/DataTable/DataTable.test.tsx:53:5
|
|
src/components/DataTable/DataTable.test.tsx > DataTable > filters data with fuzzy search:
src/components/DataTable/DataTable.test.tsx#L127
TestingLibraryElementError: Unable to find an element with the text: /No results found/. 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="rounded-md bg-surface-primary border"
>
<header
class="flex items-center border-b p-4"
>
<div
class="relative max-w-72 grow"
>
<svg
class="lucide lucide-search absolute left-3 top-2.5 size-5 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"
>
<circle
cx="11"
cy="11"
r="8"
/>
<path
d="m21 21-4.3-4.3"
/>
</svg>
<input
aria-label="Search..."
class="focus-ring flex h-10 w-full rounded-md border border-input bg-surface-primary px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 pl-10"
placeholder="Search..."
type="text"
value=""
/>
</div>
</header>
<div
class="flex-center py-8"
>
<div
class="flex gap-3 text-muted-foreground"
>
<svg
class="lucide lucide-search-x"
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="m13.5 8.5-5 5"
/>
<path
d="m8.5 8.5 5 5"
/>
<circle
cx="11"
cy="11"
r="8"
/>
<path
d="m21 21-4.3-4.3"
/>
</svg>
<span>
No
data
found
for
<i>
"
1111
"
</i>
search
.
</span>
</div>
</div>
</div>
</div>
</body>
Ignored nodes: comments, script, style
<body>
<div>
<div
class="rounded-md bg-surface-primary border"
>
<header
class="flex items-center border-b p-4"
>
<div
class="relative max-w-72 grow"
>
<svg
class="lucide lucide-search absolute left-3 top-2.5 size-5 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"
>
<circle
cx="11"
cy="11"
r="8"
/>
<path
d="m21 21-4.3-4.3"
/>
</svg>
<input
aria-label="Search..."
class="focus-ring flex h-10 w-full rounded-md border border-input bg-surface-primary px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 pl-10"
placeholder="Search..."
type="text"
value=""
/>
</div>
</header>
<div
class="flex-center py-8"
>
<div
class="flex gap-3 text-muted-foreground"
>
<svg
class="lucide lucide-search-x"
fill
|
|
src/components/DataTable/DataTable.test.tsx > DataTable > shows correct filters empty state:
src/components/DataTable/DataTable.test.tsx#L144
TestingLibraryElementError: Unable to find an element with the text: /No\sresults\sfound\sfor\syour\sselected\sfilters/. 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="rounded-md bg-surface-primary border"
>
<header
class="flex items-center border-b p-4"
>
<div
class="relative max-w-72 grow"
>
<svg
class="lucide lucide-search absolute left-3 top-2.5 size-5 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"
>
<circle
cx="11"
cy="11"
r="8"
/>
<path
d="m21 21-4.3-4.3"
/>
</svg>
<input
aria-label="Search..."
class="focus-ring flex h-10 w-full rounded-md border border-input bg-surface-primary px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 pl-10"
placeholder="Search..."
type="text"
value=""
/>
</div>
</header>
<div
class="relative w-full overflow-auto"
>
<table
class="w-full caption-bottom text-sm"
>
<thead
class="[&_tr]:border-b"
>
<tr
class="border-b transition-colors data-[state=selected]:bg-muted"
>
<th
class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0"
>
<button
aria-label="Sort ascending by Name column"
class="inline-flex items-center justify-center whitespace-nowrap transition-colors focus-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 gap-2 relative -left-2 w-full !justify-start !px-2"
type="button"
>
Name
<div
aria-hidden="true"
class="size-4"
/>
</button>
</th>
<th
class="h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0"
>
<button
aria-label="Sort descending by Age column"
class="inline-flex items-center justify-center whitespace-nowrap transition-colors focus-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3 gap-2 relative -left-2 w-full !justify-start !px-2"
type="button"
>
Age
<div
aria-hidden="true"
class="size-4"
/>
</button>
</th>
</tr>
</thead>
<tbody
class="[&_tr:last-child]:border-0"
>
<tr
class="border-b transition-colors data-[state=selected]:bg-muted hover:bg-muted/50"
data-state="false"
>
<td
class="p-4 text-left align-middle [&:has([role=checkbox])]:pr-0"
>
John
</td>
<td
class="p-4 text-left align-middle [&:has([role=checkbox])]:pr-0"
>
52
</td>
</tr>
<tr
class="border-b transition-colors data-[state=selected]:bg-muted hover
|
|
src/components/DataTable/DataTable.test.tsx > DataTable > custom view > shows empty state:
src/components/DataTable/DataTable.test.tsx#L33
TestingLibraryElementError: Unable to find an element with the text: /No\sresults\sfound/. 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="rounded-md bg-surface-primary border"
>
<header
class="flex items-center border-b p-4"
>
<div
class="relative max-w-72 grow"
>
<svg
class="lucide lucide-search absolute left-3 top-2.5 size-5 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"
>
<circle
cx="11"
cy="11"
r="8"
/>
<path
d="m21 21-4.3-4.3"
/>
</svg>
<input
aria-label="Search..."
class="focus-ring flex h-10 w-full rounded-md border border-input bg-surface-primary px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 pl-10"
placeholder="Search..."
type="text"
value=""
/>
</div>
</header>
<div
class="flex-center py-8"
>
<div
class="flex gap-3 text-muted-foreground"
>
<svg
class="lucide lucide-list-x"
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="M11 12H3"
/>
<path
d="M16 6H3"
/>
<path
d="M16 18H3"
/>
<path
d="m19 10-4 4"
/>
<path
d="m15 10 4 4"
/>
</svg>
<span>
No
data
found
.
</span>
</div>
</div>
</div>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ expectEmptyStateToBeInTheDocument src/components/DataTable/DataTable.test.tsx:33:31
❯ src/components/DataTable/DataTable.test.tsx:247:7
|
|
src/components/ErrorState/ErrorState.test.tsx > ErrorState > renders error state:
src/components/ErrorState/ErrorState.test.tsx#L16
TestingLibraryElementError: Unable to find an accessible element with the role "alert" and name "Lorem"
Here are the accessible roles:
alert:
Name "":
<div
class="inline-flex-center border transition-colors focus-ring border-transparent bg-destructive/10 text-destructive text-sm px-3 py-2 rounded-2xl gap-3 font-medium"
role="alert"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="inline-flex-center border transition-colors focus-ring border-transparent bg-destructive/10 text-destructive text-sm px-3 py-2 rounded-2xl gap-3 font-medium"
role="alert"
>
<svg
class="lucide lucide-circle-alert"
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"
>
<circle
cx="12"
cy="12"
r="10"
/>
<line
x1="12"
x2="12"
y1="8"
y2="12"
/>
<line
x1="12"
x2="12.01"
y1="16"
y2="16"
/>
</svg>
<span>
Lorem
</span>
</div>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/components/ErrorState/ErrorState.test.tsx:16:28
|
|
src/forms/FormError/FormError.test.tsx > ErrorState > renders error state:
src/forms/FormError/FormError.test.tsx#L16
TestingLibraryElementError: Unable to find an accessible element with the role "alert" and name "Lorem"
There are no accessible roles. But there might be some inaccessible roles. If you wish to access them, then set the `hidden` option to `true`. Learn more about this here: https://testing-library.com/docs/dom-testing-library/api-queries#byrole
Ignored nodes: comments, script, style
<body>
<div />
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/forms/FormError/FormError.test.tsx:16:28
|
|
src/forms/FormError/FormError.test.tsx > ErrorState > renders entityName:
src/forms/FormError/FormError.test.tsx#L24
TestingLibraryElementError: Unable to find an element with the text: /Fetching\susers\sfailed/. 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 />
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/forms/FormError/FormError.test.tsx:24:28
|
|
src/modules/auth/SignInForm/EmailPasswordForm/EmailPasswordForm.test.tsx > EmailPasswordForm > handles:
src/modules/auth/SignInForm/EmailPasswordForm/EmailPasswordForm.test.tsx#L96
TestingLibraryElementError: Unable to find an element with the text: Provided credentials are wrong. Please try again.. 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>
<form
class="grid"
>
<div
class="flex-center pb-5"
>
<div
class="inline-flex-center border transition-colors focus-ring border-transparent bg-destructive/10 text-destructive text-sm px-3 py-2 rounded-2xl gap-3 font-medium"
role="alert"
>
<svg
class="lucide lucide-circle-alert"
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"
>
<circle
cx="12"
cy="12"
r="10"
/>
<line
x1="12"
x2="12"
y1="8"
y2="12"
/>
<line
x1="12"
x2="12.01"
y1="16"
y2="16"
/>
</svg>
<span>
Unknown error. Please try again.
</span>
</div>
</div>
<div>
<div
class="mb-2 flex gap-2"
>
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="email"
>
Email
</label>
</div>
<input
aria-errormessage=""
aria-invalid="false"
class="focus-ring flex h-10 w-full rounded-md border border-input bg-surface-primary px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
id="email"
name="email"
placeholder="[email protected]"
type="email"
value="[email protected]"
/>
<p
class="mb-1 mt-1.5 min-h-5 text-xs leading-none text-destructive"
id="email-error"
/>
</div>
<div>
<div
class="mb-2 flex gap-2"
>
<label
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
for="password"
>
Password
</label>
</div>
<input
aria-errormessage=""
aria-invalid="false"
class="focus-ring flex h-10 w-full rounded-md border border-input bg-surface-primary px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
id="password"
name="password"
type="password"
value="example1234"
/>
<p
class="mb-1 mt-1.5 min-h-5 text-xs leading-none text-destructive"
id="password-error"
/>
</div>
<button
class="inline-flex items-center justify-center whitespace-nowrap transition-colors focus-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/80 h-10 px-4 py-2 rounded-md gap-2"
type="submit"
>
<span
class="inline-flex-center relative"
>
<span
class="inline-flex-center gap-2"
>
Sign In
</span>
</span>
</button>
</form>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/modules/au
|
|
Test and Coverage / testandcoverage
Process completed with exit code 1.
|
|
REUSE Compliance Check / REUSE Compliance Check
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
Markdown Link Check / markdown_link_check
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
ESLint / eslint
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
Test and Coverage / testandcoverage
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
Artifacts
Produced during runtime
| Name | Size | |
|---|---|---|
|
eslint_report.json
|
4.32 KB |
|