Add Dialog component
#128
b-yogeshAnnotations
4 errors and 1 warning
|
src/plugins/mui/Dialog.test.tsx > Dialog > should handle onClose event and call onChange:
chartlets.js/packages/lib/src/plugins/mui/Dialog.test.tsx#L56
AssertionError: expected +0 to be 1 // Object.is equality
- Expected
+ Received
- 1
+ 0
❯ src/plugins/mui/Dialog.test.tsx:56:35
|
|
src/plugins/mui/Dialog.test.tsx > Dialog > should render children within DialogActions:
chartlets.js/packages/lib/src/plugins/mui/Dialog.test.tsx#L79
TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "Test Button"
Here are the accessible roles:
presentation:
Name "":
<div
class="MuiDialog-root MuiModal-root css-1424xw8-MuiModal-root-MuiDialog-root"
id="test-dialog"
role="presentation"
/>
Name "":
<div
class="MuiDialog-container MuiDialog-scrollPaper css-19do60a-MuiDialog-container"
role="presentation"
style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
tabindex="-1"
/>
--------------------------------------------------
dialog:
Name "Test Title":
<div
aria-labelledby=":r2:"
aria-modal="true"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm css-10d30g3-MuiPaper-root-MuiDialog-paper"
role="dialog"
style="--Paper-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12);"
/>
--------------------------------------------------
heading:
Name "Test Title":
<h2
class="MuiTypography-root MuiTypography-h6 MuiDialogTitle-root css-rvoa5x-MuiTypography-root-MuiDialogTitle-root"
id=":r2:"
/>
--------------------------------------------------
paragraph:
Name "":
<p
class="MuiTypography-root MuiDialogContentText-root MuiTypography-body1 MuiDialogContentText-root css-ujudvl-MuiTypography-root-MuiDialogContentText-root"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body
style="padding-right: 1024px; overflow: hidden;"
>
<div
aria-hidden="true"
/>
<div
class="MuiDialog-root MuiModal-root css-1424xw8-MuiModal-root-MuiDialog-root"
id="test-dialog"
role="presentation"
>
<div
aria-hidden="true"
class="MuiBackdrop-root MuiModal-backdrop css-1cennmq-MuiBackdrop-root-MuiDialog-backdrop"
style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
/>
<div
data-testid="sentinelStart"
tabindex="0"
/>
<div
class="MuiDialog-container MuiDialog-scrollPaper css-19do60a-MuiDialog-container"
role="presentation"
style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
tabindex="-1"
>
<div
aria-labelledby=":r2:"
aria-modal="true"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm css-10d30g3-MuiPaper-root-MuiDialog-paper"
role="dialog"
style="--Paper-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12);"
>
<h2
class="MuiTypography-root MuiTypography-h6 MuiDialogTitle-root css-rvoa5x-MuiTypography-root-MuiDialogTitle-root"
id=":r2:"
>
Test Title
</h2>
<div
class="MuiDialogContent-root css-kw13he-MuiDialogContent-root"
>
<p
class="MuiTypography-root MuiDialogContentText-root MuiTypography-body1 MuiDialogContentText-root css-ujudvl-MuiTypography-root-MuiDialogContentText-root"
>
Test Content
</p>
</div>
<div
class="MuiDialogActions-root MuiDialogActions-spacing css-15fu35s-MuiDialogActions-root"
/>
</div>
</div>
<div
data-testid="sentinelEnd"
tabindex="0"
/>
</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
❯ getByRole ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/plugi
|
|
src/plugins/mui/Dialog.test.tsx > Dialog > should handle onClose event and call onChange with correct data:
chartlets.js/packages/lib/src/plugins/mui/Dialog.test.tsx#L97
TestingLibraryElementError: Found multiple elements with the role "presentation"
Here are the matching elements:
Ignored nodes: comments, script, style
<div
class="MuiDialog-root MuiModal-root css-1424xw8-MuiModal-root-MuiDialog-root"
id="test-dialog"
role="presentation"
>
<div
aria-hidden="true"
class="MuiBackdrop-root MuiModal-backdrop css-1cennmq-MuiBackdrop-root-MuiDialog-backdrop"
style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
/>
<div
data-testid="sentinelStart"
tabindex="0"
/>
<div
class="MuiDialog-container MuiDialog-scrollPaper css-19do60a-MuiDialog-container"
role="presentation"
style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
tabindex="-1"
>
<div
aria-labelledby=":r3:"
aria-modal="true"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm css-10d30g3-MuiPaper-root-MuiDialog-paper"
role="dialog"
style="--Paper-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12);"
>
<h2
class="MuiTypography-root MuiTypography-h6 MuiDialogTitle-root css-rvoa5x-MuiTypography-root-MuiDialogTitle-root"
id=":r3:"
>
Test Title
</h2>
<div
class="MuiDialogContent-root css-kw13he-MuiDialogContent-root"
>
<p
class="MuiTypography-root MuiDialogContentText-root MuiTypography-body1 MuiDialogContentText-root css-ujudvl-MuiTypography-root-MuiDialogContentText-root"
>
Test Content
</p>
</div>
</div>
</div>
<div
data-testid="sentinelEnd"
tabindex="0"
/>
</div>
Ignored nodes: comments, script, style
<div
class="MuiDialog-container MuiDialog-scrollPaper css-19do60a-MuiDialog-container"
role="presentation"
style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
tabindex="-1"
>
<div
aria-labelledby=":r3:"
aria-modal="true"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm css-10d30g3-MuiPaper-root-MuiDialog-paper"
role="dialog"
style="--Paper-shadow: 0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12);"
>
<h2
class="MuiTypography-root MuiTypography-h6 MuiDialogTitle-root css-rvoa5x-MuiTypography-root-MuiDialogTitle-root"
id=":r3:"
>
Test Title
</h2>
<div
class="MuiDialogContent-root css-kw13he-MuiDialogContent-root"
>
<p
class="MuiTypography-root MuiDialogContentText-root MuiTypography-body1 MuiDialogContentText-root css-ujudvl-MuiTypography-root-MuiDialogContentText-root"
>
Test Content
</p>
</div>
</div>
</div>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<body
style="padding-right: 1024px; overflow: hidden;"
>
<div
aria-hidden="true"
/>
<div
class="MuiDialog-root MuiModal-root css-1424xw8-MuiModal-root-MuiDialog-root"
id="test-dialog"
role="presentation"
>
<div
aria-hidden="true"
class="MuiBackdrop-root MuiModal-backdrop css-1cennmq-MuiBackdrop-root-MuiDialog-backdrop"
style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
/>
<div
data-testid="sentinelStart"
tabindex="0"
/>
<div
class="MuiDialog-container MuiDialog-scrollPaper css-19do60a-MuiDialog-container"
role="presentation"
style="opacity: 1; webkit-transition: opacity 225ms c
|
|
frontend
Process completed with exit code 1.
|
|
frontend
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|