AI-1478: Frontend UX consistency and confirmation standardization #549
inderdeepsinghgillfrontend-qa.yml
on: pull_request
Frontend Quality Assurance
3m 25s
Annotations
10 errors
|
src/pages/GroupDetailPage.test.tsx > GroupDetailPage > US-020 – Approve Membership Request Action > shows the Approve button only on PENDING rows:
apps/frontend/src/pages/GroupDetailPage.test.tsx#L991
TestingLibraryElementError: Unable to find an accessible element with the role "tab" and name "Membership Requests"
Here are the accessible roles:
heading:
Name "g-1":
<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 "Actions":
<button
aria-controls="mantine-ak0um5oyf-dropdown"
aria-expanded="false"
aria-haspopup="menu"
class="mantine-focus-auto bcds-menu-outline-trigger m_87cf2631 mantine-UnstyledButton-root"
data-testid="group-actions-menu-btn"
id="mantine-ak0um5oyf-target"
type="button"
/>
Name "Member Member role":
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Member role"
aria-labelledby="react-aria-_r_27b_ react-aria-_r_276_"
class="bcds-react-aria-Select--Button small false"
data-rac=""
data-react-aria-pressable="true"
id="react-aria-_r_276_"
tabindex="0"
type="button"
/>
Name "Remove":
<button
class="bcds-react-aria-Button small secondary danger "
data-rac=""
data-react-aria-pressable="true"
data-testid="remove-btn-u-1"
id="react-aria-_r_27f_"
style="width: fit-content; max-width: 100%;"
tabindex="0"
type="button"
/>
Name "Admin Member role":
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Member role"
aria-labelledby="react-aria-_r_27s_ react-aria-_r_27n_"
class="bcds-react-aria-Select--Button small false"
data-rac=""
data-react-aria-pressable="true"
id="react-aria-_r_27n_"
tabindex="0"
type="button"
/>
Name "Remove":
<button
class="bcds-react-aria-Button small secondary danger "
data-rac=""
data-react-aria-pressable="true"
data-testid="remove-btn-u-2"
id="react-aria-_r_280_"
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 "Members":
<button
aria-controls="mantine-j3wxt9tcs-panel-members"
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-j3wxt9tcs-tab-members"
role="tab"
tabindex="0"
type="button"
/>
Name "Membership requests":
<button
aria-controls="mantine-j3wxt9tcs-panel-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-j3wxt9tcs-tab-requests"
role="tab"
tabindex="-1"
type="button"
/>
--------------------------------------------------
tabpanel:
Name "Members":
<div
aria-labelledby="mantine-j3wxt9tcs-tab-members"
class="m_b0c91715 mantine-Tabs-panel"
data-orientation="horizontal"
id="mantine-j3wxt9tcs-panel-members"
role="tabpanel"
style="padding-top: var(--mantine-spacing-md);"
/>
--------------------------------------------------
table:
Name "":
<table
class="bcds-data-table bcds-mantine-table m_b23fa0ef mantine-Table-table"
data-testid="members-table"
data-with-table-border="true"
style="--table-vertical-spacing: var(--mantine-spacing-sm);"
/>
--------------------------------------------------
rowgroup:
Name "":
<thead
class="m_b242d975 mantine-Table-thead"
/>
Name "":
<tbody
class="m_b2404537 mantine-Table-tbody"
/>
-------
|
|
src/pages/GroupDetailPage.test.tsx > GroupDetailPage > US-019 – Membership Requests tab > shows an empty state when there are no requests:
apps/frontend/src/pages/GroupDetailPage.test.tsx#L962
TestingLibraryElementError: Unable to find an accessible element with the role "tab" and name "Membership Requests"
Here are the accessible roles:
heading:
Name "g-1":
<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 "Actions":
<button
aria-controls="mantine-yplqbetxp-dropdown"
aria-expanded="false"
aria-haspopup="menu"
class="mantine-focus-auto bcds-menu-outline-trigger m_87cf2631 mantine-UnstyledButton-root"
data-testid="group-actions-menu-btn"
id="mantine-yplqbetxp-target"
type="button"
/>
Name "Member Member role":
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Member role"
aria-labelledby="react-aria-_r_250_ react-aria-_r_24r_"
class="bcds-react-aria-Select--Button small false"
data-rac=""
data-react-aria-pressable="true"
id="react-aria-_r_24r_"
tabindex="0"
type="button"
/>
Name "Remove":
<button
class="bcds-react-aria-Button small secondary danger "
data-rac=""
data-react-aria-pressable="true"
data-testid="remove-btn-u-1"
id="react-aria-_r_254_"
style="width: fit-content; max-width: 100%;"
tabindex="0"
type="button"
/>
Name "Admin Member role":
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Member role"
aria-labelledby="react-aria-_r_25h_ react-aria-_r_25c_"
class="bcds-react-aria-Select--Button small false"
data-rac=""
data-react-aria-pressable="true"
id="react-aria-_r_25c_"
tabindex="0"
type="button"
/>
Name "Remove":
<button
class="bcds-react-aria-Button small secondary danger "
data-rac=""
data-react-aria-pressable="true"
data-testid="remove-btn-u-2"
id="react-aria-_r_25l_"
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 "Members":
<button
aria-controls="mantine-llkl0iux5-panel-members"
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-llkl0iux5-tab-members"
role="tab"
tabindex="0"
type="button"
/>
Name "Membership requests":
<button
aria-controls="mantine-llkl0iux5-panel-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-llkl0iux5-tab-requests"
role="tab"
tabindex="-1"
type="button"
/>
--------------------------------------------------
tabpanel:
Name "Members":
<div
aria-labelledby="mantine-llkl0iux5-tab-members"
class="m_b0c91715 mantine-Tabs-panel"
data-orientation="horizontal"
id="mantine-llkl0iux5-panel-members"
role="tabpanel"
style="padding-top: var(--mantine-spacing-md);"
/>
--------------------------------------------------
table:
Name "":
<table
class="bcds-data-table bcds-mantine-table m_b23fa0ef mantine-Table-table"
data-testid="members-table"
data-with-table-border="true"
style="--table-vertical-spacing: var(--mantine-spacing-sm);"
/>
--------------------------------------------------
rowgroup:
Name "":
<thead
class="m_b242d975 mantine-Table-thead"
/>
Name "":
<tbody
class="m_b2404537 mantine-Table-tbody"
/>
-------
|
|
src/pages/GroupDetailPage.test.tsx > GroupDetailPage > US-019 – Membership Requests tab > shows an error alert when requests fail to load:
apps/frontend/src/pages/GroupDetailPage.test.tsx#L944
TestingLibraryElementError: Unable to find an accessible element with the role "tab" and name "Membership Requests"
Here are the accessible roles:
heading:
Name "g-1":
<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 "Actions":
<button
aria-controls="mantine-njfbig1ib-dropdown"
aria-expanded="false"
aria-haspopup="menu"
class="mantine-focus-auto bcds-menu-outline-trigger m_87cf2631 mantine-UnstyledButton-root"
data-testid="group-actions-menu-btn"
id="mantine-njfbig1ib-target"
type="button"
/>
Name "Member Member role":
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Member role"
aria-labelledby="react-aria-_r_237_ react-aria-_r_232_"
class="bcds-react-aria-Select--Button small false"
data-rac=""
data-react-aria-pressable="true"
id="react-aria-_r_232_"
tabindex="0"
type="button"
/>
Name "Remove":
<button
class="bcds-react-aria-Button small secondary danger "
data-rac=""
data-react-aria-pressable="true"
data-testid="remove-btn-u-1"
id="react-aria-_r_23b_"
style="width: fit-content; max-width: 100%;"
tabindex="0"
type="button"
/>
Name "Admin Member role":
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Member role"
aria-labelledby="react-aria-_r_23o_ react-aria-_r_23j_"
class="bcds-react-aria-Select--Button small false"
data-rac=""
data-react-aria-pressable="true"
id="react-aria-_r_23j_"
tabindex="0"
type="button"
/>
Name "Remove":
<button
class="bcds-react-aria-Button small secondary danger "
data-rac=""
data-react-aria-pressable="true"
data-testid="remove-btn-u-2"
id="react-aria-_r_23s_"
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 "Members":
<button
aria-controls="mantine-9oyci5il0-panel-members"
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-9oyci5il0-tab-members"
role="tab"
tabindex="0"
type="button"
/>
Name "Membership requests":
<button
aria-controls="mantine-9oyci5il0-panel-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-9oyci5il0-tab-requests"
role="tab"
tabindex="-1"
type="button"
/>
--------------------------------------------------
tabpanel:
Name "Members":
<div
aria-labelledby="mantine-9oyci5il0-tab-members"
class="m_b0c91715 mantine-Tabs-panel"
data-orientation="horizontal"
id="mantine-9oyci5il0-panel-members"
role="tabpanel"
style="padding-top: var(--mantine-spacing-md);"
/>
--------------------------------------------------
table:
Name "":
<table
class="bcds-data-table bcds-mantine-table m_b23fa0ef mantine-Table-table"
data-testid="members-table"
data-with-table-border="true"
style="--table-vertical-spacing: var(--mantine-spacing-sm);"
/>
--------------------------------------------------
rowgroup:
Name "":
<thead
class="m_b242d975 mantine-Table-thead"
/>
Name "":
<tbody
class="m_b2404537 mantine-Table-tbody"
/>
-------
|
|
src/pages/GroupDetailPage.test.tsx > GroupDetailPage > US-019 – Membership Requests tab > shows a loader while requests are loading:
apps/frontend/src/pages/GroupDetailPage.test.tsx#L926
TestingLibraryElementError: Unable to find an accessible element with the role "tab" and name "Membership Requests"
Here are the accessible roles:
heading:
Name "g-1":
<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 "Actions":
<button
aria-controls="mantine-1z29fz1uc-dropdown"
aria-expanded="false"
aria-haspopup="menu"
class="mantine-focus-auto bcds-menu-outline-trigger m_87cf2631 mantine-UnstyledButton-root"
data-testid="group-actions-menu-btn"
id="mantine-1z29fz1uc-target"
type="button"
/>
Name "Member Member role":
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Member role"
aria-labelledby="react-aria-_r_21b_ react-aria-_r_216_"
class="bcds-react-aria-Select--Button small false"
data-rac=""
data-react-aria-pressable="true"
id="react-aria-_r_216_"
tabindex="0"
type="button"
/>
Name "Remove":
<button
class="bcds-react-aria-Button small secondary danger "
data-rac=""
data-react-aria-pressable="true"
data-testid="remove-btn-u-1"
id="react-aria-_r_21f_"
style="width: fit-content; max-width: 100%;"
tabindex="0"
type="button"
/>
Name "Admin Member role":
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Member role"
aria-labelledby="react-aria-_r_21s_ react-aria-_r_21n_"
class="bcds-react-aria-Select--Button small false"
data-rac=""
data-react-aria-pressable="true"
id="react-aria-_r_21n_"
tabindex="0"
type="button"
/>
Name "Remove":
<button
class="bcds-react-aria-Button small secondary danger "
data-rac=""
data-react-aria-pressable="true"
data-testid="remove-btn-u-2"
id="react-aria-_r_220_"
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 "Members":
<button
aria-controls="mantine-9hpstui1b-panel-members"
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-9hpstui1b-tab-members"
role="tab"
tabindex="0"
type="button"
/>
Name "Membership requests":
<button
aria-controls="mantine-9hpstui1b-panel-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-9hpstui1b-tab-requests"
role="tab"
tabindex="-1"
type="button"
/>
--------------------------------------------------
tabpanel:
Name "Members":
<div
aria-labelledby="mantine-9hpstui1b-tab-members"
class="m_b0c91715 mantine-Tabs-panel"
data-orientation="horizontal"
id="mantine-9hpstui1b-panel-members"
role="tabpanel"
style="padding-top: var(--mantine-spacing-md);"
/>
--------------------------------------------------
table:
Name "":
<table
class="bcds-data-table bcds-mantine-table m_b23fa0ef mantine-Table-table"
data-testid="members-table"
data-with-table-border="true"
style="--table-vertical-spacing: var(--mantine-spacing-sm);"
/>
--------------------------------------------------
rowgroup:
Name "":
<thead
class="m_b242d975 mantine-Table-thead"
/>
Name "":
<tbody
class="m_b2404537 mantine-Table-tbody"
/>
-------
|
|
src/pages/GroupDetailPage.test.tsx > GroupDetailPage > US-019 – Membership Requests tab > renders the status filter with PENDING as the default value:
apps/frontend/src/pages/GroupDetailPage.test.tsx#L903
TestingLibraryElementError: Unable to find an accessible element with the role "tab" and name "Membership Requests"
Here are the accessible roles:
heading:
Name "g-1":
<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 "Actions":
<button
aria-controls="mantine-09klchdew-dropdown"
aria-expanded="false"
aria-haspopup="menu"
class="mantine-focus-auto bcds-menu-outline-trigger m_87cf2631 mantine-UnstyledButton-root"
data-testid="group-actions-menu-btn"
id="mantine-09klchdew-target"
type="button"
/>
Name "Member Member role":
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Member role"
aria-labelledby="react-aria-_r_1tv_ react-aria-_r_1tq_"
class="bcds-react-aria-Select--Button small false"
data-rac=""
data-react-aria-pressable="true"
id="react-aria-_r_1tq_"
tabindex="0"
type="button"
/>
Name "Remove":
<button
class="bcds-react-aria-Button small secondary danger "
data-rac=""
data-react-aria-pressable="true"
data-testid="remove-btn-u-1"
id="react-aria-_r_1u3_"
style="width: fit-content; max-width: 100%;"
tabindex="0"
type="button"
/>
Name "Admin Member role":
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Member role"
aria-labelledby="react-aria-_r_1ug_ react-aria-_r_1ub_"
class="bcds-react-aria-Select--Button small false"
data-rac=""
data-react-aria-pressable="true"
id="react-aria-_r_1ub_"
tabindex="0"
type="button"
/>
Name "Remove":
<button
class="bcds-react-aria-Button small secondary danger "
data-rac=""
data-react-aria-pressable="true"
data-testid="remove-btn-u-2"
id="react-aria-_r_1uk_"
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 "Members":
<button
aria-controls="mantine-6j4ay581a-panel-members"
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-6j4ay581a-tab-members"
role="tab"
tabindex="0"
type="button"
/>
Name "Membership requests":
<button
aria-controls="mantine-6j4ay581a-panel-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-6j4ay581a-tab-requests"
role="tab"
tabindex="-1"
type="button"
/>
--------------------------------------------------
tabpanel:
Name "Members":
<div
aria-labelledby="mantine-6j4ay581a-tab-members"
class="m_b0c91715 mantine-Tabs-panel"
data-orientation="horizontal"
id="mantine-6j4ay581a-panel-members"
role="tabpanel"
style="padding-top: var(--mantine-spacing-md);"
/>
--------------------------------------------------
table:
Name "":
<table
class="bcds-data-table bcds-mantine-table m_b23fa0ef mantine-Table-table"
data-testid="members-table"
data-with-table-border="true"
style="--table-vertical-spacing: var(--mantine-spacing-sm);"
/>
--------------------------------------------------
rowgroup:
Name "":
<thead
class="m_b242d975 mantine-Table-thead"
/>
Name "":
<tbody
class="m_b2404537 mantine-Table-tbody"
/>
-------
|
|
src/pages/GroupDetailPage.test.tsx > GroupDetailPage > US-019 – Membership Requests tab > displays the requests table with correct columns when the tab is active:
apps/frontend/src/pages/GroupDetailPage.test.tsx#L870
TestingLibraryElementError: Unable to find an accessible element with the role "tab" and name "Membership Requests"
Here are the accessible roles:
heading:
Name "g-1":
<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 "Actions":
<button
aria-controls="mantine-dvz1xj6aq-dropdown"
aria-expanded="false"
aria-haspopup="menu"
class="mantine-focus-auto bcds-menu-outline-trigger m_87cf2631 mantine-UnstyledButton-root"
data-testid="group-actions-menu-btn"
id="mantine-dvz1xj6aq-target"
type="button"
/>
Name "Member Member role":
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Member role"
aria-labelledby="react-aria-_r_1qj_ react-aria-_r_1qe_"
class="bcds-react-aria-Select--Button small false"
data-rac=""
data-react-aria-pressable="true"
id="react-aria-_r_1qe_"
tabindex="0"
type="button"
/>
Name "Remove":
<button
class="bcds-react-aria-Button small secondary danger "
data-rac=""
data-react-aria-pressable="true"
data-testid="remove-btn-u-1"
id="react-aria-_r_1qn_"
style="width: fit-content; max-width: 100%;"
tabindex="0"
type="button"
/>
Name "Admin Member role":
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Member role"
aria-labelledby="react-aria-_r_1r4_ react-aria-_r_1qv_"
class="bcds-react-aria-Select--Button small false"
data-rac=""
data-react-aria-pressable="true"
id="react-aria-_r_1qv_"
tabindex="0"
type="button"
/>
Name "Remove":
<button
class="bcds-react-aria-Button small secondary danger "
data-rac=""
data-react-aria-pressable="true"
data-testid="remove-btn-u-2"
id="react-aria-_r_1r8_"
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 "Members":
<button
aria-controls="mantine-3mjw0vayw-panel-members"
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-3mjw0vayw-tab-members"
role="tab"
tabindex="0"
type="button"
/>
Name "Membership requests":
<button
aria-controls="mantine-3mjw0vayw-panel-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-3mjw0vayw-tab-requests"
role="tab"
tabindex="-1"
type="button"
/>
--------------------------------------------------
tabpanel:
Name "Members":
<div
aria-labelledby="mantine-3mjw0vayw-tab-members"
class="m_b0c91715 mantine-Tabs-panel"
data-orientation="horizontal"
id="mantine-3mjw0vayw-panel-members"
role="tabpanel"
style="padding-top: var(--mantine-spacing-md);"
/>
--------------------------------------------------
table:
Name "":
<table
class="bcds-data-table bcds-mantine-table m_b23fa0ef mantine-Table-table"
data-testid="members-table"
data-with-table-border="true"
style="--table-vertical-spacing: var(--mantine-spacing-sm);"
/>
--------------------------------------------------
rowgroup:
Name "":
<thead
class="m_b242d975 mantine-Table-thead"
/>
Name "":
<tbody
class="m_b2404537 mantine-Table-tbody"
/>
-------
|
|
src/pages/GroupDetailPage.test.tsx > GroupDetailPage > US-019 – Membership Requests tab > shows the Membership Requests tab for a system admin:
apps/frontend/src/pages/GroupDetailPage.test.tsx#L861
TestingLibraryElementError: Unable to find an accessible element with the role "tab" and name "Membership Requests"
Here are the accessible roles:
heading:
Name "g-1":
<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 "Actions":
<button
aria-controls="mantine-y3s4vymsm-dropdown"
aria-expanded="false"
aria-haspopup="menu"
class="mantine-focus-auto bcds-menu-outline-trigger m_87cf2631 mantine-UnstyledButton-root"
data-testid="group-actions-menu-btn"
id="mantine-y3s4vymsm-target"
type="button"
/>
Name "Member Member role":
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Member role"
aria-labelledby="react-aria-_r_1n7_ react-aria-_r_1n2_"
class="bcds-react-aria-Select--Button small false"
data-rac=""
data-react-aria-pressable="true"
id="react-aria-_r_1n2_"
tabindex="0"
type="button"
/>
Name "Remove":
<button
class="bcds-react-aria-Button small secondary danger "
data-rac=""
data-react-aria-pressable="true"
data-testid="remove-btn-u-1"
id="react-aria-_r_1nb_"
style="width: fit-content; max-width: 100%;"
tabindex="0"
type="button"
/>
Name "Admin Member role":
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Member role"
aria-labelledby="react-aria-_r_1no_ react-aria-_r_1nj_"
class="bcds-react-aria-Select--Button small false"
data-rac=""
data-react-aria-pressable="true"
id="react-aria-_r_1nj_"
tabindex="0"
type="button"
/>
Name "Remove":
<button
class="bcds-react-aria-Button small secondary danger "
data-rac=""
data-react-aria-pressable="true"
data-testid="remove-btn-u-2"
id="react-aria-_r_1ns_"
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 "Members":
<button
aria-controls="mantine-1gpoaavfc-panel-members"
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-1gpoaavfc-tab-members"
role="tab"
tabindex="0"
type="button"
/>
Name "Membership requests":
<button
aria-controls="mantine-1gpoaavfc-panel-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-1gpoaavfc-tab-requests"
role="tab"
tabindex="-1"
type="button"
/>
--------------------------------------------------
tabpanel:
Name "Members":
<div
aria-labelledby="mantine-1gpoaavfc-tab-members"
class="m_b0c91715 mantine-Tabs-panel"
data-orientation="horizontal"
id="mantine-1gpoaavfc-panel-members"
role="tabpanel"
style="padding-top: var(--mantine-spacing-md);"
/>
--------------------------------------------------
table:
Name "":
<table
class="bcds-data-table bcds-mantine-table m_b23fa0ef mantine-Table-table"
data-testid="members-table"
data-with-table-border="true"
style="--table-vertical-spacing: var(--mantine-spacing-sm);"
/>
--------------------------------------------------
rowgroup:
Name "":
<thead
class="m_b242d975 mantine-Table-thead"
/>
Name "":
<tbody
class="m_b2404537 mantine-Table-tbody"
/>
-------
|
|
src/pages/GroupDetailPage.test.tsx > GroupDetailPage > US-019 – Membership Requests tab > shows the Membership Requests tab for a group admin:
apps/frontend/src/pages/GroupDetailPage.test.tsx#L851
TestingLibraryElementError: Unable to find an accessible element with the role "tab" and name "Membership Requests"
Here are the accessible roles:
heading:
Name "g-1":
<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 "Actions":
<button
aria-controls="mantine-kl8nmgd7n-dropdown"
aria-expanded="false"
aria-haspopup="menu"
class="mantine-focus-auto bcds-menu-outline-trigger m_87cf2631 mantine-UnstyledButton-root"
data-testid="group-actions-menu-btn"
id="mantine-kl8nmgd7n-target"
type="button"
/>
Name "Member Member role":
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Member role"
aria-labelledby="react-aria-_r_1jr_ react-aria-_r_1jm_"
class="bcds-react-aria-Select--Button small false"
data-rac=""
data-react-aria-pressable="true"
id="react-aria-_r_1jm_"
tabindex="0"
type="button"
/>
Name "Remove":
<button
class="bcds-react-aria-Button small secondary danger "
data-rac=""
data-react-aria-pressable="true"
data-testid="remove-btn-u-1"
id="react-aria-_r_1jv_"
style="width: fit-content; max-width: 100%;"
tabindex="0"
type="button"
/>
Name "Admin Member role":
<button
aria-expanded="false"
aria-haspopup="listbox"
aria-label="Member role"
aria-labelledby="react-aria-_r_1kc_ react-aria-_r_1k7_"
class="bcds-react-aria-Select--Button small false"
data-rac=""
data-react-aria-pressable="true"
id="react-aria-_r_1k7_"
tabindex="0"
type="button"
/>
Name "Remove":
<button
class="bcds-react-aria-Button small secondary danger "
data-rac=""
data-react-aria-pressable="true"
data-testid="remove-btn-u-2"
id="react-aria-_r_1kg_"
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 "Members":
<button
aria-controls="mantine-kvajz51ar-panel-members"
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-kvajz51ar-tab-members"
role="tab"
tabindex="0"
type="button"
/>
Name "Membership requests":
<button
aria-controls="mantine-kvajz51ar-panel-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-kvajz51ar-tab-requests"
role="tab"
tabindex="-1"
type="button"
/>
--------------------------------------------------
tabpanel:
Name "Members":
<div
aria-labelledby="mantine-kvajz51ar-tab-members"
class="m_b0c91715 mantine-Tabs-panel"
data-orientation="horizontal"
id="mantine-kvajz51ar-panel-members"
role="tabpanel"
style="padding-top: var(--mantine-spacing-md);"
/>
--------------------------------------------------
table:
Name "":
<table
class="bcds-data-table bcds-mantine-table m_b23fa0ef mantine-Table-table"
data-testid="members-table"
data-with-table-border="true"
style="--table-vertical-spacing: var(--mantine-spacing-sm);"
/>
--------------------------------------------------
rowgroup:
Name "":
<thead
class="m_b242d975 mantine-Table-thead"
/>
Name "":
<tbody
class="m_b2404537 mantine-Table-tbody"
/>
-------
|
|
src/pages/GroupDetailPage.test.tsx > GroupDetailPage > Join button > Join menu item shows 'Request Pending' when there is a pending request for this group:
apps/frontend/src/pages/GroupDetailPage.test.tsx#L254
Error: expect(element).toHaveTextContent()
Expected element to have text content:
Request Pending
Received:
request pending
Ignored nodes: comments, script, style
<html
data-mantine-color-scheme="light"
>
<head />
<body>
<div
data-mantine-shared-portal-node="true"
data-portal="true"
>
<div
aria-labelledby="mantine-dos3rm3t3-target"
aria-orientation="vertical"
class="m_38a85659 mantine-Menu-dropdown m_dc9b7c9f"
data-menu-dropdown="true"
data-position="bottom-end"
id="mantine-dos3rm3t3-dropdown"
role="menu"
style="--popover-shadow: var(--mantine-shadow-md); transition-property: opacity; -webkit-backface-visibility: hidden; transition-duration: 150ms; transition-timing-function: ease; opacity: 1; z-index: 300; top: 8px; left: 0px; width: calc(11.25rem * var(--mantine-scale)); display: none;"
tabindex="-1"
>
<div
data-autofocus="true"
data-mantine-stop-propagation="true"
style="outline: 0px;"
tabindex="-1"
/>
<button
class="mantine-focus-auto m_99ac2aa1 mantine-Menu-item m_87cf2631 mantine-UnstyledButton-root"
data-disabled="true"
data-mantine-stop-propagation="true"
data-menu-item="true"
data-testid="join-group-menu-item"
disabled=""
role="menuitem"
tabindex="-1"
type="button"
>
<div
class="m_5476e0d3 mantine-Menu-itemLabel"
>
request pending
</div>
</button>
</div>
</div>
<div>
<div
class="m_6d731127 mantine-Stack-root"
style="--stack-gap: var(--mantine-spacing-lg); --stack-align: stretch; --stack-justify: flex-start;"
>
<div
class="m_4081bf90 mantine-Group-root"
style="--group-gap: var(--mantine-spacing-md); --group-align: flex-start; --group-justify: space-between; --group-wrap: wrap;"
>
<div
class="bcds-page-header__title-block m_6d731127 mantine-Stack-root"
style="--stack-gap: var(--mantine-spacing-md); --stack-align: stretch; --stack-justify: flex-start; gap: var(--layout-margin-xsmall);"
>
<h2
class="bcds-react-aria-Heading primary"
style="margin-top: 0rem; margin-bottom: 0rem;"
>
g-1
</h2>
<p
class="bcds-react-aria-Text small secondary"
style="margin-top: 0rem; margin-bottom: 0rem;"
>
Group details and membership.
</p>
</div>
<div
class="bcds-page-header__meta m_4081bf90 mantine-Group-root"
style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: flex-start; --group-wrap: wrap;"
>
<button
aria-controls="mantine-dos3rm3t3-dropdown"
aria-expanded="true"
aria-haspopup="menu"
class="mantine-focus-auto bcds-menu-outline-trigger m_87cf2631 mantine-UnstyledButton-root"
data-expanded="true"
data-testid="group-actions-menu-btn"
id="mantine-dos3rm3t3-target"
type="button"
>
Actions
</button>
</div>
</div>
</div>
</div>
</body>
</html>...
❯ src/pages/GroupDetailPage.test.tsx:254:22
❯ runWithExpensiveErrorDiagnosticsDisabled ../../node_modules/@testing-library/dom/dist/config.js:47:12
❯ checkCallback ../../node_modules/@testing-library/dom/dist/wait-for.js:124:77
❯ Timeout.checkRealTimersCallback ../../node_modules/@testing-library/dom/dist/wait-for.js:118:16
|
|
src/pages/GroupDetailPage.test.tsx > GroupDetailPage > Join button > Join menu item is enabled when there is no pending request:
apps/frontend/src/pages/GroupDetailPage.test.tsx#L230
Error: expect(element).toHaveTextContent()
Expected element to have text content:
Join
Received:
join
Ignored nodes: comments, script, style
<html
data-mantine-color-scheme="light"
>
<head />
<body>
<div
data-mantine-shared-portal-node="true"
data-portal="true"
>
<div
aria-labelledby="mantine-fzqpwyjjn-target"
aria-orientation="vertical"
class="m_38a85659 mantine-Menu-dropdown m_dc9b7c9f"
data-menu-dropdown="true"
data-position="bottom-end"
id="mantine-fzqpwyjjn-dropdown"
role="menu"
style="--popover-shadow: var(--mantine-shadow-md); transition-property: opacity; -webkit-backface-visibility: hidden; transition-duration: 150ms; transition-timing-function: ease; opacity: 1; z-index: 300; top: 8px; left: 0px; width: calc(11.25rem * var(--mantine-scale)); display: none;"
tabindex="-1"
>
<div
data-autofocus="true"
data-mantine-stop-propagation="true"
style="outline: 0px;"
tabindex="-1"
/>
<button
class="mantine-focus-auto m_99ac2aa1 mantine-Menu-item m_87cf2631 mantine-UnstyledButton-root"
data-mantine-stop-propagation="true"
data-menu-item="true"
data-testid="join-group-menu-item"
role="menuitem"
tabindex="-1"
type="button"
>
<div
class="m_5476e0d3 mantine-Menu-itemLabel"
>
join
</div>
</button>
</div>
</div>
<div>
<div
class="m_6d731127 mantine-Stack-root"
style="--stack-gap: var(--mantine-spacing-lg); --stack-align: stretch; --stack-justify: flex-start;"
>
<div
class="m_4081bf90 mantine-Group-root"
style="--group-gap: var(--mantine-spacing-md); --group-align: flex-start; --group-justify: space-between; --group-wrap: wrap;"
>
<div
class="bcds-page-header__title-block m_6d731127 mantine-Stack-root"
style="--stack-gap: var(--mantine-spacing-md); --stack-align: stretch; --stack-justify: flex-start; gap: var(--layout-margin-xsmall);"
>
<h2
class="bcds-react-aria-Heading primary"
style="margin-top: 0rem; margin-bottom: 0rem;"
>
g-1
</h2>
<p
class="bcds-react-aria-Text small secondary"
style="margin-top: 0rem; margin-bottom: 0rem;"
>
Group details and membership.
</p>
</div>
<div
class="bcds-page-header__meta m_4081bf90 mantine-Group-root"
style="--group-gap: var(--mantine-spacing-md); --group-align: center; --group-justify: flex-start; --group-wrap: wrap;"
>
<button
aria-controls="mantine-fzqpwyjjn-dropdown"
aria-expanded="true"
aria-haspopup="menu"
class="mantine-focus-auto bcds-menu-outline-trigger m_87cf2631 mantine-UnstyledButton-root"
data-expanded="true"
data-testid="group-actions-menu-btn"
id="mantine-fzqpwyjjn-target"
type="button"
>
Actions
</button>
</div>
</div>
</div>
</div>
</body>
</html>...
❯ src/pages/GroupDetailPage.test.tsx:230:22
❯ runWithExpensiveErrorDiagnosticsDisabled ../../node_modules/@testing-library/dom/dist/config.js:47:12
❯ checkCallback ../../node_modules/@testing-library/dom/dist/wait-for.js:124:77
❯ Timeout.checkRealTimersCallback ../../node_modules/@testing-library/dom/dist/wait-for.js:118:16
|