AI-1478: Frontend UX consistency and confirmation standardization #550
inderdeepsinghgillfrontend-qa.yml
on: pull_request
Frontend Quality Assurance
2m 58s
Annotations
10 errors
|
src/pages/GroupsPage.test.tsx > GroupsPage > Scenario 5 – My Requests tab displays request data > shows an error notification when the cancel API call fails:
apps/frontend/src/pages/GroupsPage.test.tsx#L518
TestingLibraryElementError: Unable to find an accessible element with the role "tab" and name "My Requests"
Here are the accessible roles:
heading:
Name "Groups":
<h2
class="bcds-react-aria-Heading primary"
style="margin-top: 0rem; margin-bottom: 0rem;"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="bcds-react-aria-Text small secondary"
style="margin-top: 0rem; margin-bottom: 0rem;"
/>
--------------------------------------------------
tablist:
Name "":
<div
aria-orientation="horizontal"
class="m_576c9d4 m_89d33d6d mantine-Tabs-list"
data-orientation="horizontal"
data-variant="default"
role="tablist"
/>
--------------------------------------------------
tab:
Name "My groups":
<button
aria-controls="mantine-cx32hu00u-panel-my-groups"
aria-selected="true"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-active="true"
data-orientation="horizontal"
data-variant="default"
id="mantine-cx32hu00u-tab-my-groups"
role="tab"
tabindex="0"
type="button"
/>
Name "My requests":
<button
aria-controls="mantine-cx32hu00u-panel-my-requests"
aria-selected="false"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-orientation="horizontal"
data-variant="default"
id="mantine-cx32hu00u-tab-my-requests"
role="tab"
tabindex="-1"
type="button"
/>
Name "All groups":
<button
aria-controls="mantine-cx32hu00u-panel-all-groups"
aria-selected="false"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-orientation="horizontal"
data-variant="default"
id="mantine-cx32hu00u-tab-all-groups"
role="tab"
tabindex="-1"
type="button"
/>
--------------------------------------------------
tabpanel:
Name "My groups":
<div
aria-labelledby="mantine-cx32hu00u-tab-my-groups"
class="m_b0c91715 mantine-Tabs-panel"
data-orientation="horizontal"
id="mantine-cx32hu00u-panel-my-groups"
role="tabpanel"
style="padding-top: var(--mantine-spacing-md);"
/>
--------------------------------------------------
textbox:
Name "Search by name or description…":
<input
aria-label="Search by name or description…"
class="bcds-react-aria-TextField--Input"
data-rac=""
id="react-aria-_r_vg_"
tabindex="0"
title=""
type="text"
value=""
/>
--------------------------------------------------
table:
Name "2 groups":
<table
class="bcds-data-table bcds-mantine-table m_b23fa0ef mantine-Table-table"
data-with-table-border="true"
style="--table-vertical-spacing: var(--mantine-spacing-sm);"
/>
--------------------------------------------------
caption:
Name "2 groups":
<caption
class="m_9e5a3ac7 mantine-Table-caption"
data-side="bottom"
/>
--------------------------------------------------
rowgroup:
Name "":
<thead
class="m_b242d975 mantine-Table-thead"
/>
Name "":
<tbody
class="m_b2404537 mantine-Table-tbody"
/>
--------------------------------------------------
row:
Name "Name Description Actions":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
/>
Name "My Team A Leave":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
style="cursor: pointer;"
/>
Name "My Team B Leave":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
style="cursor: pointer;"
/>
--------------------------------------------------
columnheader:
Name "Name":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
Name "Description":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
Name "Actions":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
---------------------------------
|
|
src/pages/GroupsPage.test.tsx > GroupsPage > Scenario 5 – My Requests tab displays request data > does not call the cancel mutation when the confirmation dialog is dismissed:
apps/frontend/src/pages/GroupsPage.test.tsx#L474
TestingLibraryElementError: Unable to find an accessible element with the role "tab" and name "My Requests"
Here are the accessible roles:
heading:
Name "Groups":
<h2
class="bcds-react-aria-Heading primary"
style="margin-top: 0rem; margin-bottom: 0rem;"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="bcds-react-aria-Text small secondary"
style="margin-top: 0rem; margin-bottom: 0rem;"
/>
--------------------------------------------------
tablist:
Name "":
<div
aria-orientation="horizontal"
class="m_576c9d4 m_89d33d6d mantine-Tabs-list"
data-orientation="horizontal"
data-variant="default"
role="tablist"
/>
--------------------------------------------------
tab:
Name "My groups":
<button
aria-controls="mantine-rx9orrjgc-panel-my-groups"
aria-selected="true"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-active="true"
data-orientation="horizontal"
data-variant="default"
id="mantine-rx9orrjgc-tab-my-groups"
role="tab"
tabindex="0"
type="button"
/>
Name "My requests":
<button
aria-controls="mantine-rx9orrjgc-panel-my-requests"
aria-selected="false"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-orientation="horizontal"
data-variant="default"
id="mantine-rx9orrjgc-tab-my-requests"
role="tab"
tabindex="-1"
type="button"
/>
Name "All groups":
<button
aria-controls="mantine-rx9orrjgc-panel-all-groups"
aria-selected="false"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-orientation="horizontal"
data-variant="default"
id="mantine-rx9orrjgc-tab-all-groups"
role="tab"
tabindex="-1"
type="button"
/>
--------------------------------------------------
tabpanel:
Name "My groups":
<div
aria-labelledby="mantine-rx9orrjgc-tab-my-groups"
class="m_b0c91715 mantine-Tabs-panel"
data-orientation="horizontal"
id="mantine-rx9orrjgc-panel-my-groups"
role="tabpanel"
style="padding-top: var(--mantine-spacing-md);"
/>
--------------------------------------------------
textbox:
Name "Search by name or description…":
<input
aria-label="Search by name or description…"
class="bcds-react-aria-TextField--Input"
data-rac=""
id="react-aria-_r_sj_"
tabindex="0"
title=""
type="text"
value=""
/>
--------------------------------------------------
table:
Name "2 groups":
<table
class="bcds-data-table bcds-mantine-table m_b23fa0ef mantine-Table-table"
data-with-table-border="true"
style="--table-vertical-spacing: var(--mantine-spacing-sm);"
/>
--------------------------------------------------
caption:
Name "2 groups":
<caption
class="m_9e5a3ac7 mantine-Table-caption"
data-side="bottom"
/>
--------------------------------------------------
rowgroup:
Name "":
<thead
class="m_b242d975 mantine-Table-thead"
/>
Name "":
<tbody
class="m_b2404537 mantine-Table-tbody"
/>
--------------------------------------------------
row:
Name "Name Description Actions":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
/>
Name "My Team A Leave":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
style="cursor: pointer;"
/>
Name "My Team B Leave":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
style="cursor: pointer;"
/>
--------------------------------------------------
columnheader:
Name "Name":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
Name "Description":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
Name "Actions":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
---------------------------------
|
|
src/pages/GroupsPage.test.tsx > GroupsPage > Scenario 5 – My Requests tab displays request data > calls the cancel mutation when the confirmation dialog is confirmed:
apps/frontend/src/pages/GroupsPage.test.tsx#L435
TestingLibraryElementError: Unable to find an accessible element with the role "tab" and name "My Requests"
Here are the accessible roles:
heading:
Name "Groups":
<h2
class="bcds-react-aria-Heading primary"
style="margin-top: 0rem; margin-bottom: 0rem;"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="bcds-react-aria-Text small secondary"
style="margin-top: 0rem; margin-bottom: 0rem;"
/>
--------------------------------------------------
tablist:
Name "":
<div
aria-orientation="horizontal"
class="m_576c9d4 m_89d33d6d mantine-Tabs-list"
data-orientation="horizontal"
data-variant="default"
role="tablist"
/>
--------------------------------------------------
tab:
Name "My groups":
<button
aria-controls="mantine-bu6k63tc8-panel-my-groups"
aria-selected="true"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-active="true"
data-orientation="horizontal"
data-variant="default"
id="mantine-bu6k63tc8-tab-my-groups"
role="tab"
tabindex="0"
type="button"
/>
Name "My requests":
<button
aria-controls="mantine-bu6k63tc8-panel-my-requests"
aria-selected="false"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-orientation="horizontal"
data-variant="default"
id="mantine-bu6k63tc8-tab-my-requests"
role="tab"
tabindex="-1"
type="button"
/>
Name "All groups":
<button
aria-controls="mantine-bu6k63tc8-panel-all-groups"
aria-selected="false"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-orientation="horizontal"
data-variant="default"
id="mantine-bu6k63tc8-tab-all-groups"
role="tab"
tabindex="-1"
type="button"
/>
--------------------------------------------------
tabpanel:
Name "My groups":
<div
aria-labelledby="mantine-bu6k63tc8-tab-my-groups"
class="m_b0c91715 mantine-Tabs-panel"
data-orientation="horizontal"
id="mantine-bu6k63tc8-panel-my-groups"
role="tabpanel"
style="padding-top: var(--mantine-spacing-md);"
/>
--------------------------------------------------
textbox:
Name "Search by name or description…":
<input
aria-label="Search by name or description…"
class="bcds-react-aria-TextField--Input"
data-rac=""
id="react-aria-_r_pm_"
tabindex="0"
title=""
type="text"
value=""
/>
--------------------------------------------------
table:
Name "2 groups":
<table
class="bcds-data-table bcds-mantine-table m_b23fa0ef mantine-Table-table"
data-with-table-border="true"
style="--table-vertical-spacing: var(--mantine-spacing-sm);"
/>
--------------------------------------------------
caption:
Name "2 groups":
<caption
class="m_9e5a3ac7 mantine-Table-caption"
data-side="bottom"
/>
--------------------------------------------------
rowgroup:
Name "":
<thead
class="m_b242d975 mantine-Table-thead"
/>
Name "":
<tbody
class="m_b2404537 mantine-Table-tbody"
/>
--------------------------------------------------
row:
Name "Name Description Actions":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
/>
Name "My Team A Leave":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
style="cursor: pointer;"
/>
Name "My Team B Leave":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
style="cursor: pointer;"
/>
--------------------------------------------------
columnheader:
Name "Name":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
Name "Description":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
Name "Actions":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
---------------------------------
|
|
src/pages/GroupsPage.test.tsx > GroupsPage > Scenario 5 – My Requests tab displays request data > opens the confirmation dialog when the cancel button is clicked:
apps/frontend/src/pages/GroupsPage.test.tsx#L398
TestingLibraryElementError: Unable to find an accessible element with the role "tab" and name "My Requests"
Here are the accessible roles:
heading:
Name "Groups":
<h2
class="bcds-react-aria-Heading primary"
style="margin-top: 0rem; margin-bottom: 0rem;"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="bcds-react-aria-Text small secondary"
style="margin-top: 0rem; margin-bottom: 0rem;"
/>
--------------------------------------------------
tablist:
Name "":
<div
aria-orientation="horizontal"
class="m_576c9d4 m_89d33d6d mantine-Tabs-list"
data-orientation="horizontal"
data-variant="default"
role="tablist"
/>
--------------------------------------------------
tab:
Name "My groups":
<button
aria-controls="mantine-y7ztow4bb-panel-my-groups"
aria-selected="true"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-active="true"
data-orientation="horizontal"
data-variant="default"
id="mantine-y7ztow4bb-tab-my-groups"
role="tab"
tabindex="0"
type="button"
/>
Name "My requests":
<button
aria-controls="mantine-y7ztow4bb-panel-my-requests"
aria-selected="false"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-orientation="horizontal"
data-variant="default"
id="mantine-y7ztow4bb-tab-my-requests"
role="tab"
tabindex="-1"
type="button"
/>
Name "All groups":
<button
aria-controls="mantine-y7ztow4bb-panel-all-groups"
aria-selected="false"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-orientation="horizontal"
data-variant="default"
id="mantine-y7ztow4bb-tab-all-groups"
role="tab"
tabindex="-1"
type="button"
/>
--------------------------------------------------
tabpanel:
Name "My groups":
<div
aria-labelledby="mantine-y7ztow4bb-tab-my-groups"
class="m_b0c91715 mantine-Tabs-panel"
data-orientation="horizontal"
id="mantine-y7ztow4bb-panel-my-groups"
role="tabpanel"
style="padding-top: var(--mantine-spacing-md);"
/>
--------------------------------------------------
textbox:
Name "Search by name or description…":
<input
aria-label="Search by name or description…"
class="bcds-react-aria-TextField--Input"
data-rac=""
id="react-aria-_r_mp_"
tabindex="0"
title=""
type="text"
value=""
/>
--------------------------------------------------
table:
Name "2 groups":
<table
class="bcds-data-table bcds-mantine-table m_b23fa0ef mantine-Table-table"
data-with-table-border="true"
style="--table-vertical-spacing: var(--mantine-spacing-sm);"
/>
--------------------------------------------------
caption:
Name "2 groups":
<caption
class="m_9e5a3ac7 mantine-Table-caption"
data-side="bottom"
/>
--------------------------------------------------
rowgroup:
Name "":
<thead
class="m_b242d975 mantine-Table-thead"
/>
Name "":
<tbody
class="m_b2404537 mantine-Table-tbody"
/>
--------------------------------------------------
row:
Name "Name Description Actions":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
/>
Name "My Team A Leave":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
style="cursor: pointer;"
/>
Name "My Team B Leave":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
style="cursor: pointer;"
/>
--------------------------------------------------
columnheader:
Name "Name":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
Name "Description":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
Name "Actions":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
---------------------------------
|
|
src/pages/GroupsPage.test.tsx > GroupsPage > Scenario 5 – My Requests tab displays request data > shows a cancel button only for PENDING requests:
apps/frontend/src/pages/GroupsPage.test.tsx#L371
TestingLibraryElementError: Unable to find an accessible element with the role "tab" and name "My Requests"
Here are the accessible roles:
heading:
Name "Groups":
<h2
class="bcds-react-aria-Heading primary"
style="margin-top: 0rem; margin-bottom: 0rem;"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="bcds-react-aria-Text small secondary"
style="margin-top: 0rem; margin-bottom: 0rem;"
/>
--------------------------------------------------
tablist:
Name "":
<div
aria-orientation="horizontal"
class="m_576c9d4 m_89d33d6d mantine-Tabs-list"
data-orientation="horizontal"
data-variant="default"
role="tablist"
/>
--------------------------------------------------
tab:
Name "My groups":
<button
aria-controls="mantine-tgogzuwck-panel-my-groups"
aria-selected="true"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-active="true"
data-orientation="horizontal"
data-variant="default"
id="mantine-tgogzuwck-tab-my-groups"
role="tab"
tabindex="0"
type="button"
/>
Name "My requests":
<button
aria-controls="mantine-tgogzuwck-panel-my-requests"
aria-selected="false"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-orientation="horizontal"
data-variant="default"
id="mantine-tgogzuwck-tab-my-requests"
role="tab"
tabindex="-1"
type="button"
/>
Name "All groups":
<button
aria-controls="mantine-tgogzuwck-panel-all-groups"
aria-selected="false"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-orientation="horizontal"
data-variant="default"
id="mantine-tgogzuwck-tab-all-groups"
role="tab"
tabindex="-1"
type="button"
/>
--------------------------------------------------
tabpanel:
Name "My groups":
<div
aria-labelledby="mantine-tgogzuwck-tab-my-groups"
class="m_b0c91715 mantine-Tabs-panel"
data-orientation="horizontal"
id="mantine-tgogzuwck-panel-my-groups"
role="tabpanel"
style="padding-top: var(--mantine-spacing-md);"
/>
--------------------------------------------------
textbox:
Name "Search by name or description…":
<input
aria-label="Search by name or description…"
class="bcds-react-aria-TextField--Input"
data-rac=""
id="react-aria-_r_jv_"
tabindex="0"
title=""
type="text"
value=""
/>
--------------------------------------------------
table:
Name "2 groups":
<table
class="bcds-data-table bcds-mantine-table m_b23fa0ef mantine-Table-table"
data-with-table-border="true"
style="--table-vertical-spacing: var(--mantine-spacing-sm);"
/>
--------------------------------------------------
caption:
Name "2 groups":
<caption
class="m_9e5a3ac7 mantine-Table-caption"
data-side="bottom"
/>
--------------------------------------------------
rowgroup:
Name "":
<thead
class="m_b242d975 mantine-Table-thead"
/>
Name "":
<tbody
class="m_b2404537 mantine-Table-tbody"
/>
--------------------------------------------------
row:
Name "Name Description Actions":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
/>
Name "My Team A Leave":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
style="cursor: pointer;"
/>
Name "My Team B Leave":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
style="cursor: pointer;"
/>
--------------------------------------------------
columnheader:
Name "Name":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
Name "Description":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
Name "Actions":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
---------------------------------
|
|
src/pages/GroupsPage.test.tsx > GroupsPage > Scenario 5 – My Requests tab displays request data > displays the request group name, status and date:
apps/frontend/src/pages/GroupsPage.test.tsx#L339
TestingLibraryElementError: Unable to find an accessible element with the role "tab" and name "My Requests"
Here are the accessible roles:
heading:
Name "Groups":
<h2
class="bcds-react-aria-Heading primary"
style="margin-top: 0rem; margin-bottom: 0rem;"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="bcds-react-aria-Text small secondary"
style="margin-top: 0rem; margin-bottom: 0rem;"
/>
--------------------------------------------------
tablist:
Name "":
<div
aria-orientation="horizontal"
class="m_576c9d4 m_89d33d6d mantine-Tabs-list"
data-orientation="horizontal"
data-variant="default"
role="tablist"
/>
--------------------------------------------------
tab:
Name "My groups":
<button
aria-controls="mantine-l58t21rd6-panel-my-groups"
aria-selected="true"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-active="true"
data-orientation="horizontal"
data-variant="default"
id="mantine-l58t21rd6-tab-my-groups"
role="tab"
tabindex="0"
type="button"
/>
Name "My requests":
<button
aria-controls="mantine-l58t21rd6-panel-my-requests"
aria-selected="false"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-orientation="horizontal"
data-variant="default"
id="mantine-l58t21rd6-tab-my-requests"
role="tab"
tabindex="-1"
type="button"
/>
Name "All groups":
<button
aria-controls="mantine-l58t21rd6-panel-all-groups"
aria-selected="false"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-orientation="horizontal"
data-variant="default"
id="mantine-l58t21rd6-tab-all-groups"
role="tab"
tabindex="-1"
type="button"
/>
--------------------------------------------------
tabpanel:
Name "My groups":
<div
aria-labelledby="mantine-l58t21rd6-tab-my-groups"
class="m_b0c91715 mantine-Tabs-panel"
data-orientation="horizontal"
id="mantine-l58t21rd6-panel-my-groups"
role="tabpanel"
style="padding-top: var(--mantine-spacing-md);"
/>
--------------------------------------------------
textbox:
Name "Search by name or description…":
<input
aria-label="Search by name or description…"
class="bcds-react-aria-TextField--Input"
data-rac=""
id="react-aria-_r_h2_"
tabindex="0"
title=""
type="text"
value=""
/>
--------------------------------------------------
table:
Name "2 groups":
<table
class="bcds-data-table bcds-mantine-table m_b23fa0ef mantine-Table-table"
data-with-table-border="true"
style="--table-vertical-spacing: var(--mantine-spacing-sm);"
/>
--------------------------------------------------
caption:
Name "2 groups":
<caption
class="m_9e5a3ac7 mantine-Table-caption"
data-side="bottom"
/>
--------------------------------------------------
rowgroup:
Name "":
<thead
class="m_b242d975 mantine-Table-thead"
/>
Name "":
<tbody
class="m_b2404537 mantine-Table-tbody"
/>
--------------------------------------------------
row:
Name "Name Description Actions":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
/>
Name "My Team A Leave":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
style="cursor: pointer;"
/>
Name "My Team B Leave":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
style="cursor: pointer;"
/>
--------------------------------------------------
columnheader:
Name "Name":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
Name "Description":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
Name "Actions":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
---------------------------------
|
|
src/pages/GroupsPage.test.tsx > GroupsPage > Scenario 5 – My Requests tab displays request data > shows the requests table with expected columns when the tab is activated:
apps/frontend/src/pages/GroupsPage.test.tsx#L299
TestingLibraryElementError: Unable to find an accessible element with the role "tab" and name "My Requests"
Here are the accessible roles:
heading:
Name "Groups":
<h2
class="bcds-react-aria-Heading primary"
style="margin-top: 0rem; margin-bottom: 0rem;"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="bcds-react-aria-Text small secondary"
style="margin-top: 0rem; margin-bottom: 0rem;"
/>
--------------------------------------------------
tablist:
Name "":
<div
aria-orientation="horizontal"
class="m_576c9d4 m_89d33d6d mantine-Tabs-list"
data-orientation="horizontal"
data-variant="default"
role="tablist"
/>
--------------------------------------------------
tab:
Name "My groups":
<button
aria-controls="mantine-dw93t9idw-panel-my-groups"
aria-selected="true"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-active="true"
data-orientation="horizontal"
data-variant="default"
id="mantine-dw93t9idw-tab-my-groups"
role="tab"
tabindex="0"
type="button"
/>
Name "My requests":
<button
aria-controls="mantine-dw93t9idw-panel-my-requests"
aria-selected="false"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-orientation="horizontal"
data-variant="default"
id="mantine-dw93t9idw-tab-my-requests"
role="tab"
tabindex="-1"
type="button"
/>
Name "All groups":
<button
aria-controls="mantine-dw93t9idw-panel-all-groups"
aria-selected="false"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-orientation="horizontal"
data-variant="default"
id="mantine-dw93t9idw-tab-all-groups"
role="tab"
tabindex="-1"
type="button"
/>
--------------------------------------------------
tabpanel:
Name "My groups":
<div
aria-labelledby="mantine-dw93t9idw-tab-my-groups"
class="m_b0c91715 mantine-Tabs-panel"
data-orientation="horizontal"
id="mantine-dw93t9idw-panel-my-groups"
role="tabpanel"
style="padding-top: var(--mantine-spacing-md);"
/>
--------------------------------------------------
textbox:
Name "Search by name or description…":
<input
aria-label="Search by name or description…"
class="bcds-react-aria-TextField--Input"
data-rac=""
id="react-aria-_r_e5_"
tabindex="0"
title=""
type="text"
value=""
/>
--------------------------------------------------
table:
Name "2 groups":
<table
class="bcds-data-table bcds-mantine-table m_b23fa0ef mantine-Table-table"
data-with-table-border="true"
style="--table-vertical-spacing: var(--mantine-spacing-sm);"
/>
--------------------------------------------------
caption:
Name "2 groups":
<caption
class="m_9e5a3ac7 mantine-Table-caption"
data-side="bottom"
/>
--------------------------------------------------
rowgroup:
Name "":
<thead
class="m_b242d975 mantine-Table-thead"
/>
Name "":
<tbody
class="m_b2404537 mantine-Table-tbody"
/>
--------------------------------------------------
row:
Name "Name Description Actions":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
/>
Name "My Team A Leave":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
style="cursor: pointer;"
/>
Name "My Team B Leave":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
style="cursor: pointer;"
/>
--------------------------------------------------
columnheader:
Name "Name":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
Name "Description":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
Name "Actions":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
---------------------------------
|
|
src/pages/GroupsPage.test.tsx > GroupsPage > Scenario 3 – System admin sees their groups > renders only the groups the admin belongs to on My Groups tab:
apps/frontend/src/pages/GroupsPage.test.tsx#L242
TestingLibraryElementError: Unable to find an accessible element with the role "tabpanel" and name "My Groups"
Here are the accessible roles:
heading:
Name "Groups":
<h2
class="bcds-react-aria-Heading primary"
style="margin-top: 0rem; margin-bottom: 0rem;"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="bcds-react-aria-Text small secondary"
style="margin-top: 0rem; margin-bottom: 0rem;"
/>
--------------------------------------------------
button:
Name "Create group":
<button
class="bcds-react-aria-Button medium primary "
data-rac=""
data-react-aria-pressable="true"
data-testid="create-group-btn"
id="react-aria-_r_6u_"
style="width: fit-content; max-width: 100%;"
tabindex="0"
type="button"
/>
Name "Name":
<button
class="mantine-focus-auto m_87cf2631 mantine-UnstyledButton-root"
data-testid="sort-name"
style="display: flex; align-items: center; gap: 4px;"
type="button"
/>
Name "Description":
<button
class="mantine-focus-auto m_87cf2631 mantine-UnstyledButton-root"
data-testid="sort-description"
style="display: flex; align-items: center; gap: 4px;"
type="button"
/>
Name "Leave":
<button
class="bcds-react-aria-Button small secondary danger "
data-rac=""
data-react-aria-pressable="true"
data-testid="leave-btn-g-1"
id="react-aria-_r_7s_"
style="width: fit-content; max-width: 100%;"
tabindex="0"
type="button"
/>
Name "Leave":
<button
class="bcds-react-aria-Button small secondary danger "
data-rac=""
data-react-aria-pressable="true"
data-testid="leave-btn-g-2"
id="react-aria-_r_82_"
style="width: fit-content; max-width: 100%;"
tabindex="0"
type="button"
/>
--------------------------------------------------
tablist:
Name "":
<div
aria-orientation="horizontal"
class="m_576c9d4 m_89d33d6d mantine-Tabs-list"
data-orientation="horizontal"
data-variant="default"
role="tablist"
/>
--------------------------------------------------
tab:
Name "My groups":
<button
aria-controls="mantine-tgcmvkjow-panel-my-groups"
aria-selected="true"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-active="true"
data-orientation="horizontal"
data-variant="default"
id="mantine-tgcmvkjow-tab-my-groups"
role="tab"
tabindex="0"
type="button"
/>
Name "My requests":
<button
aria-controls="mantine-tgcmvkjow-panel-my-requests"
aria-selected="false"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-orientation="horizontal"
data-variant="default"
id="mantine-tgcmvkjow-tab-my-requests"
role="tab"
tabindex="-1"
type="button"
/>
Name "All groups":
<button
aria-controls="mantine-tgcmvkjow-panel-all-groups"
aria-selected="false"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-orientation="horizontal"
data-variant="default"
id="mantine-tgcmvkjow-tab-all-groups"
role="tab"
tabindex="-1"
type="button"
/>
--------------------------------------------------
tabpanel:
Name "My groups":
<div
aria-labelledby="mantine-tgcmvkjow-tab-my-groups"
class="m_b0c91715 mantine-Tabs-panel"
data-orientation="horizontal"
id="mantine-tgcmvkjow-panel-my-groups"
role="tabpanel"
style="padding-top: var(--mantine-spacing-md);"
/>
--------------------------------------------------
textbox:
Name "Search by name or description…":
<input
aria-label="Search by name or description…"
class="bcds-react-aria-TextField--Input"
data-rac=""
id="react-aria-_r_79_"
tabindex="0"
title=""
type="text"
value=""
/>
--------------------------------------------------
table:
Name "2 groups":
<table
class="bcds-data-table bcds-mantine-t
|
|
src/pages/GroupsPage.test.tsx > GroupsPage > Scenario 2 – Non-admin user sees only their groups > renders only the user's groups in the table:
apps/frontend/src/pages/GroupsPage.test.tsx#L212
TestingLibraryElementError: Unable to find an accessible element with the role "tabpanel" and name "My Groups"
Here are the accessible roles:
heading:
Name "Groups":
<h2
class="bcds-react-aria-Heading primary"
style="margin-top: 0rem; margin-bottom: 0rem;"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="bcds-react-aria-Text small secondary"
style="margin-top: 0rem; margin-bottom: 0rem;"
/>
--------------------------------------------------
tablist:
Name "":
<div
aria-orientation="horizontal"
class="m_576c9d4 m_89d33d6d mantine-Tabs-list"
data-orientation="horizontal"
data-variant="default"
role="tablist"
/>
--------------------------------------------------
tab:
Name "My groups":
<button
aria-controls="mantine-4xtxd73cz-panel-my-groups"
aria-selected="true"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-active="true"
data-orientation="horizontal"
data-variant="default"
id="mantine-4xtxd73cz-tab-my-groups"
role="tab"
tabindex="0"
type="button"
/>
Name "My requests":
<button
aria-controls="mantine-4xtxd73cz-panel-my-requests"
aria-selected="false"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-orientation="horizontal"
data-variant="default"
id="mantine-4xtxd73cz-tab-my-requests"
role="tab"
tabindex="-1"
type="button"
/>
Name "All groups":
<button
aria-controls="mantine-4xtxd73cz-panel-all-groups"
aria-selected="false"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-orientation="horizontal"
data-variant="default"
id="mantine-4xtxd73cz-tab-all-groups"
role="tab"
tabindex="-1"
type="button"
/>
--------------------------------------------------
tabpanel:
Name "My groups":
<div
aria-labelledby="mantine-4xtxd73cz-tab-my-groups"
class="m_b0c91715 mantine-Tabs-panel"
data-orientation="horizontal"
id="mantine-4xtxd73cz-panel-my-groups"
role="tabpanel"
style="padding-top: var(--mantine-spacing-md);"
/>
--------------------------------------------------
textbox:
Name "Search by name or description…":
<input
aria-label="Search by name or description…"
class="bcds-react-aria-TextField--Input"
data-rac=""
id="react-aria-_r_3a_"
tabindex="0"
title=""
type="text"
value=""
/>
--------------------------------------------------
table:
Name "2 groups":
<table
class="bcds-data-table bcds-mantine-table m_b23fa0ef mantine-Table-table"
data-with-table-border="true"
style="--table-vertical-spacing: var(--mantine-spacing-sm);"
/>
--------------------------------------------------
caption:
Name "2 groups":
<caption
class="m_9e5a3ac7 mantine-Table-caption"
data-side="bottom"
/>
--------------------------------------------------
rowgroup:
Name "":
<thead
class="m_b242d975 mantine-Table-thead"
/>
Name "":
<tbody
class="m_b2404537 mantine-Table-tbody"
/>
--------------------------------------------------
row:
Name "Name Description Actions":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
/>
Name "My Team A Leave":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
style="cursor: pointer;"
/>
Name "My Team B Leave":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
style="cursor: pointer;"
/>
--------------------------------------------------
columnheader:
Name "Name":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
Name "Description":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
Name "Actions":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
------------------------------
|
|
src/pages/GroupsPage.test.tsx > GroupsPage > Scenario 1 – Page renders with three tabs > shows the My Groups, My Requests, and All Groups tabs:
apps/frontend/src/pages/GroupsPage.test.tsx#L179
TestingLibraryElementError: Unable to find an accessible element with the role "tab" and name "My Groups"
Here are the accessible roles:
heading:
Name "Groups":
<h2
class="bcds-react-aria-Heading primary"
style="margin-top: 0rem; margin-bottom: 0rem;"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="bcds-react-aria-Text small secondary"
style="margin-top: 0rem; margin-bottom: 0rem;"
/>
--------------------------------------------------
tablist:
Name "":
<div
aria-orientation="horizontal"
class="m_576c9d4 m_89d33d6d mantine-Tabs-list"
data-orientation="horizontal"
data-variant="default"
role="tablist"
/>
--------------------------------------------------
tab:
Name "My groups":
<button
aria-controls="mantine-q5sk8qq8s-panel-my-groups"
aria-selected="true"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-active="true"
data-orientation="horizontal"
data-variant="default"
id="mantine-q5sk8qq8s-tab-my-groups"
role="tab"
tabindex="0"
type="button"
/>
Name "My requests":
<button
aria-controls="mantine-q5sk8qq8s-panel-my-requests"
aria-selected="false"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-orientation="horizontal"
data-variant="default"
id="mantine-q5sk8qq8s-tab-my-requests"
role="tab"
tabindex="-1"
type="button"
/>
Name "All groups":
<button
aria-controls="mantine-q5sk8qq8s-panel-all-groups"
aria-selected="false"
class="mantine-focus-auto m_539e827b m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root"
data-orientation="horizontal"
data-variant="default"
id="mantine-q5sk8qq8s-tab-all-groups"
role="tab"
tabindex="-1"
type="button"
/>
--------------------------------------------------
tabpanel:
Name "My groups":
<div
aria-labelledby="mantine-q5sk8qq8s-tab-my-groups"
class="m_b0c91715 mantine-Tabs-panel"
data-orientation="horizontal"
id="mantine-q5sk8qq8s-panel-my-groups"
role="tabpanel"
style="padding-top: var(--mantine-spacing-md);"
/>
--------------------------------------------------
textbox:
Name "Search by name or description…":
<input
aria-label="Search by name or description…"
class="bcds-react-aria-TextField--Input"
data-rac=""
id="react-aria-_r_d_"
tabindex="0"
title=""
type="text"
value=""
/>
--------------------------------------------------
table:
Name "2 groups":
<table
class="bcds-data-table bcds-mantine-table m_b23fa0ef mantine-Table-table"
data-with-table-border="true"
style="--table-vertical-spacing: var(--mantine-spacing-sm);"
/>
--------------------------------------------------
caption:
Name "2 groups":
<caption
class="m_9e5a3ac7 mantine-Table-caption"
data-side="bottom"
/>
--------------------------------------------------
rowgroup:
Name "":
<thead
class="m_b242d975 mantine-Table-thead"
/>
Name "":
<tbody
class="m_b2404537 mantine-Table-tbody"
/>
--------------------------------------------------
row:
Name "Name Description Actions":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
/>
Name "My Team A Leave":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
style="cursor: pointer;"
/>
Name "My Team B Leave":
<tr
class="m_4e7aa4fd mantine-Table-tr"
data-hover="true"
data-with-row-border="true"
style="cursor: pointer;"
/>
--------------------------------------------------
columnheader:
Name "Name":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
Name "Description":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
Name "Actions":
<th
class="m_4e7aa4f3 mantine-Table-th"
/>
------------------------------------
|