tech-story: [M3-9052] - Migrate PlacementGroups to Tanstack router #21345
Annotations
10 errors and 1 warning
|
Run yarn workspace linode-manager run test:
packages/manager/src/routes/routes.test.tsx#L57
TestingLibraryElementError: Unable to find role="heading"
Ignored nodes: comments, script, style
<body
style="padding-right: 1024px; overflow: hidden;"
>
<div
aria-hidden="true"
>
<div
data-testid="migration-router"
>
<div
class="MuiGrid2-root MuiGrid2-container MuiGrid2-direction-xs-row css-1tueisv-MuiGrid2-root"
data-qa-entity-header="true"
>
<div
class="MuiGrid2-root MuiGrid2-direction-xs-row css-27y2fm-MuiGrid2-root"
>
<div
class="css-13hlpjo-StyledRootDiv"
>
<div
class="css-7wrpxj-StyledDiv"
>
<div
class="css-hfoiwb-StyledDiv"
>
<h1
class="MuiTypography-root MuiTypography-h1 css-6cpn15-MuiTypography-root-StyledH1Header"
data-qa-header="Placement Groups"
tabindex="0"
>
Placement Groups
</h1>
</div>
</div>
</div>
</div>
<div
class="MuiGrid2-root MuiGrid2-direction-xs-row css-27y2fm-MuiGrid2-root"
>
<div
class="MuiGrid2-root MuiGrid2-direction-xs-row css-6r0yxx-MuiGrid2-root"
>
<a
aria-label="Docs - link opens in a new tab"
class="css-1gyjd8d-root docsButton css-1a970vz-StyledDocsLink"
data-testid="external-link"
href="https://techdocs.akamai.com/cloud-computing/docs/work-with-placement-groups"
rel="noopener noreferrer"
target="_blank"
>
<svg
height="18"
viewBox="0 0 20 20"
width="18"
xmlns="http://www.w3.org/2000/svg"
>
<g
fill="none"
fill-rule="evenodd"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.25"
>
<path
d="M1.974 19.375c-.727 0-1.316-.56-1.316-1.25V1.875c0-.69.589-1.25 1.316-1.25h13.158c.343 0 .672.127.918.355l2.632 2.402c.254.236.397.558.397.895v15.098H1.974zM4.605 6.875L15.132 6.875M4.605 10.625L9.868 10.625M4.605 14.375L12.105 14.5"
/>
</g>
</svg>
Docs
</a>
<div
class="css-80jyct"
>
<button
aria-disabled="false"
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-colorPrimary css-r1tcgg-MuiButtonBase-root-MuiButton-root"
data-testid="button"
tabindex="0"
type="button"
>
<span
class="css-fn767b"
data-testid="loadingIcon"
>
Create Placement Group
</span>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
<div
class="MuiBox-root css-0"
>
<div
class="visually-hidden MuiBox-root css-15ybjgl"
data-testid="inputLabelWrapper"
>
<label
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated css-17cf11i-MuiFormLabel-root-MuiInputLabel-root"
data-qa-textfield-label="Search"
for="search"
>
Search
</label>
</div>
<div
class="MuiBox-root css-0"
>
<div
|
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.test.tsx#L85
TestingLibraryElementError: Unable to find an accessible element with the role "heading" and name "Delete Placement Group PG-to-delete"
Here are the accessible roles:
strong:
Name "":
<strong
style="font-size: 1rem;"
/>
--------------------------------------------------
button:
Name "Hide Error":
<button
style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;"
/>
--------------------------------------------------
code:
Name "":
<code />
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
style="padding: .5rem; max-width: 100%;"
>
<div
style="display: flex; align-items: center; gap: .5rem;"
>
<strong
style="font-size: 1rem;"
>
Something went wrong!
</strong>
<button
style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;"
>
Hide Error
</button>
</div>
<div
style="height: .25rem;"
/>
<div>
<pre
style="font-size: .7em; border: 1px solid red; border-radius: .25rem; padding: .3rem; color: red; overflow: auto;"
>
<code>
Invariant failed: You should not use <Link> outside a <Router>
</code>
</pre>
</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
❯ getByRole ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/features/PlacementGroups/PlacementGroupsDeleteModal.test.tsx:85:7
|
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.test.tsx#L127
TestingLibraryElementError: Unable to find an element by: [data-testid="textfield-input"]
Ignored nodes: comments, script, style
<body>
<div>
<div
style="padding: .5rem; max-width: 100%;"
>
<div
style="display: flex; align-items: center; gap: .5rem;"
>
<strong
style="font-size: 1rem;"
>
Something went wrong!
</strong>
<button
style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;"
>
Hide Error
</button>
</div>
<div
style="height: .25rem;"
/>
<div>
<pre
style="font-size: .7em; border: 1px solid red; border-radius: .25rem; padding: .3rem; color: red; overflow: auto;"
>
<code>
Invariant failed: You should not use <Link> outside a <Router>
</code>
</pre>
</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
❯ getByTestId ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/features/PlacementGroups/PlacementGroupsDeleteModal.test.tsx:127:23
|
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsUnassignModal.test.tsx#L51
TestingLibraryElementError: Unable to find a label with the text of: Unassign test-linode
Ignored nodes: comments, script, style
<body
style="padding-right: 1024px; overflow: hidden;"
>
<div
aria-hidden="true"
/>
<div
class="MuiDialog-root MuiModal-root css-15dpna2-MuiModal-root-MuiDialog-root"
data-qa-dialog="true"
data-qa-drawer="true"
data-testid="drawer"
role="dialog"
>
<div
aria-hidden="true"
class="MuiBackdrop-root MuiModal-backdrop css-rmx4qb-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-1sep8xo-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="unassign"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation24 MuiDialog-paper MuiDialog-paperScrollPaper MuiDialog-paperWidthSm css-sahk2q-MuiPaper-root-MuiDialog-paper"
>
<div
class="MuiBox-root css-zcxndt"
>
<h2
class="MuiTypography-root MuiTypography-h6 MuiDialogTitle-root css-n9wxm8-MuiTypography-root-MuiDialogTitle-root"
data-qa-dialog-title="Unassign"
id="unassign"
title="Unassign"
>
<div
class="MuiBox-root css-1y8wdwb"
data-qa-dialog-title="Unassign"
data-qa-drawer-title="Unassign"
>
<span
class="MuiBox-root css-0"
>
Unassign
</span>
<button
aria-label="Close"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeLarge css-1vee8jx-MuiButtonBase-root-MuiIconButton-root"
data-qa-close-drawer="true"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-6yqi1c-MuiSvgIcon-root"
data-testid="CloseIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</h2>
<div
class="MuiDialogContent-root css-keggj3-MuiDialogContent-root"
>
<div
class="MuiGrid2-root MuiGrid2-direction-xs-row css-0-error-ref error-for-scroll notice css-1vvi65p-error-errorList-root css-11f3avs-MuiGrid2-root-StyledNoticeGrid"
data-qa-error="true"
data-qa-notice="true"
data-testid="notice-error"
role="alert"
>
<div
class="css-1rzyf5b-inner"
>
<p
class="MuiTypography-root MuiTypography-body1 css-153jlhh-noticeText css-0-noticeText-ref noticeText css-4ofmxk-MuiTypography-root"
>
There was a problem retrieving this linode
</p>
</div>
</div>
<p
class="MuiTypography-root MuiTypography-body1 css-4ofmxk-MuiTypography-root"
>
Are you sure you want to unassign this Linode?
</p>
<div
class="MuiStack-root css-1udig2n-MuiStack-root"
>
<div
class="
|
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.test.tsx#L124
TestingLibraryElementError: Unable to find an element with the text: /my first pg/i. 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
style="padding: .5rem; max-width: 100%;"
>
<div
style="display: flex; align-items: center; gap: .5rem;"
>
<strong
style="font-size: 1rem;"
>
Something went wrong!
</strong>
<button
style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;"
>
Hide Error
</button>
</div>
<div
style="height: .25rem;"
/>
<div>
<pre
style="font-size: .7em; border: 1px solid red; border-radius: .25rem; padding: .3rem; color: red; overflow: auto;"
>
<code>
Invariant failed: Could not find an active match from "/placement-groups/$id"
</code>
</pre>
</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
❯ getByText ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.test.tsx:124:12
|
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.test.tsx#L89
TestingLibraryElementError: Unable to find an element with the text: /create placement group/i. 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
style="padding: .5rem; max-width: 100%;"
>
<div
style="display: flex; align-items: center; gap: .5rem;"
>
<strong
style="font-size: 1rem;"
>
Something went wrong!
</strong>
<button
style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;"
>
Hide Error
</button>
</div>
<div
style="height: .25rem;"
/>
<div>
<pre
style="font-size: .7em; border: 1px solid red; border-radius: .25rem; padding: .3rem; color: red; overflow: auto;"
>
<code>
Invariant failed: You should not use <Link> outside a <Router>
</code>
</pre>
</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
❯ getByText ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.test.tsx:89:12
|
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.test.tsx#L115
TestingLibraryElementError: Unable to find an element with the text: /group 1/i. 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
style="padding: .5rem; max-width: 100%;"
>
<div
style="display: flex; align-items: center; gap: .5rem;"
>
<strong
style="font-size: 1rem;"
>
Something went wrong!
</strong>
<button
style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;"
>
Hide Error
</button>
</div>
<div
style="height: .25rem;"
/>
<div>
<pre
style="font-size: .7em; border: 1px solid red; border-radius: .25rem; padding: .3rem; color: red; overflow: auto;"
>
<code>
Invariant failed: You should not use <Link> outside a <Router>
</code>
</pre>
</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
❯ getByText ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.test.tsx:115:12
|
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.test.tsx#L34
TestingLibraryElementError: Unable to find an element with the text: There was an error loading Linodes for this Placement Group.. 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
style="padding: .5rem; max-width: 100%;"
>
<div
style="display: flex; align-items: center; gap: .5rem;"
>
<strong
style="font-size: 1rem;"
>
Something went wrong!
</strong>
<button
style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;"
>
Hide Error
</button>
</div>
<div
style="height: .25rem;"
/>
<div>
<pre
style="font-size: .7em; border: 1px solid red; border-radius: .25rem; padding: .3rem; color: red; overflow: auto;"
>
<code>
Invariant failed: Could not find an active match from "/placement-groups/$id"
</code>
</pre>
</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
❯ getByText ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.test.tsx:34:7
|
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.test.tsx#L56
TestingLibraryElementError: Unable to find an element with the placeholder text of: Search Linodes
Ignored nodes: comments, script, style
<body>
<div>
<div
style="padding: .5rem; max-width: 100%;"
>
<div
style="display: flex; align-items: center; gap: .5rem;"
>
<strong
style="font-size: 1rem;"
>
Something went wrong!
</strong>
<button
style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;"
>
Hide Error
</button>
</div>
<div
style="height: .25rem;"
/>
<div>
<pre
style="font-size: .7em; border: 1px solid red; border-radius: .25rem; padding: .3rem; color: red; overflow: auto;"
>
<code>
Invariant failed: Could not find an active match from "/placement-groups/$id"
</code>
</pre>
</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
❯ getByPlaceholderText ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodes.test.tsx:56:12
|
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodesTable.test.tsx#L61
TestingLibraryElementError: Unable to find an accessible element with the role "columnheader"
Here are the accessible roles:
strong:
Name "":
<strong
style="font-size: 1rem;"
/>
--------------------------------------------------
button:
Name "Hide Error":
<button
style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;"
/>
--------------------------------------------------
code:
Name "":
<code />
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
style="padding: .5rem; max-width: 100%;"
>
<div
style="display: flex; align-items: center; gap: .5rem;"
>
<strong
style="font-size: 1rem;"
>
Something went wrong!
</strong>
<button
style="appearance: none; font-size: .6em; border: 1px solid currentcolor; padding: .1rem .2rem; font-weight: bold; border-radius: .25rem;"
>
Hide Error
</button>
</div>
<div
style="height: .25rem;"
/>
<div>
<pre
style="font-size: .7em; border: 1px solid red; border-radius: .25rem; padding: .3rem; color: red; overflow: auto;"
>
<code>
Invariant failed: You should not use <Link> outside a <Router>
</code>
</pre>
</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
❯ getAllByRole ../../node_modules/@testing-library/dom/dist/query-helpers.js:109:15
❯ src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsLinodes/PlacementGroupsLinodesTable.test.tsx:61:12
|
|
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
Loading