tech-story: [M3-9052] - Migrate PlacementGroups to Tanstack router #21215
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-wkum4l-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/PlacementGroupsAssignLinodesDrawer.test.tsx#L147
TestingLibraryElementError: Unable to find an element with the text: Linode-11. 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
style="padding-right: 1024px; overflow: hidden;"
>
<div
aria-hidden="true"
/>
<div
aria-labelledby="assignLinodesToPlacementGroupPg1"
class="MuiDrawer-root MuiDrawer-modal MuiModal-root css-xvvah-MuiModal-root-MuiDrawer-root"
data-qa-drawer="true"
data-testid="drawer"
role="dialog"
>
<div
aria-hidden="true"
class="MuiBackdrop-root MuiModal-backdrop css-5wkxgu-MuiBackdrop-root-MuiModal-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="MuiPaper-root MuiPaper-elevation MuiPaper-elevation16 MuiDrawer-paper css-13aj6q8-common-default MuiDrawer-paperAnchorRight css-1jnuxa1-MuiPaper-root-MuiDrawer-paper"
tabindex="-1"
>
<div
class="MuiGrid2-root MuiGrid2-container MuiGrid2-wrap-xs-nowrap MuiGrid2-direction-xs-row css-1oum9fv-drawerHeader css-xsbm6p-MuiGrid2-root"
>
<div
class="MuiGrid2-root MuiGrid2-direction-xs-row css-27y2fm-MuiGrid2-root"
>
<h2
class="MuiTypography-root MuiTypography-h2 css-156khuw-title css-1j96obb-MuiTypography-root"
data-qa-drawer-title="Assign Linodes to Placement Group PG-1"
data-testid="drawer-title"
id="assignLinodesToPlacementGroupPg1"
>
Assign Linodes to Placement Group PG-1
</h2>
</div>
<div
class="MuiGrid2-root MuiGrid2-direction-xs-row css-27y2fm-MuiGrid2-root"
>
<button
aria-label="Close drawer"
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeLarge css-1hc97o1-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>
</div>
<div
class="MuiBox-root css-k008qs"
>
<dl
class="MuiGrid2-root MuiGrid2-container MuiGrid2-direction-xs-row css-1wzkr4e-MuiGrid2-root-StyledDL"
>
<div
class="MuiGrid2-root MuiGrid2-direction-xs-row css-1t2u0mk-MuiGrid2-root-StyledDLItemSeparator"
>
<dt
class="MuiTypography-root MuiTypography-body1 css-1iparo0-MuiTypography-root-StyledDT"
>
Placement Group Type
</dt>
<dd
class="MuiTypography-root MuiTypography-body1 css-4ofmxk-MuiTypography-root"
>
Anti-affinity
</dd>
</div>
<div
class="MuiGrid2-root MuiGrid2-direction-xs-row css-1t2u0mk-MuiGrid2-root-StyledDLItemSeparator"
>
<dt
class="MuiTypography-root MuiTypography-body1 css-1iparo0-MuiTypography-root-StyledDT"
>
Placement Group Policy
</dt>
<dd
class="MuiTypography-root MuiTypography-body1 css-4ofmxk-MuiTypography-root"
>
Strict
</dd>
</div>
</dl>
</div>
<hr
class="Mui
|
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.test.tsx#L63
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
style=""
>
<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:63:7
|
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsDeleteModal.test.tsx#L100
TestingLibraryElementError: Unable to find an element by: [data-testid="textfield-input"]
Ignored nodes: comments, script, style
<body
style=""
>
<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:100:23
|
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.test.tsx#L86
TestingLibraryElementError: Unable to find an accessible element with the role "combobox"
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>
Cannot read properties of undefined (reading 'location')
</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/PlacementGroupsDetailPanel.test.tsx:86:12
|
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.test.tsx#L100
TestingLibraryElementError: Unable to find an accessible element with the role "combobox"
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>
Cannot read properties of undefined (reading 'location')
</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/PlacementGroupsDetailPanel.test.tsx:100:12
|
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.test.tsx#L114
TestingLibraryElementError: Unable to find an accessible element with the role "combobox"
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>
Cannot read properties of undefined (reading 'location')
</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/PlacementGroupsDetailPanel.test.tsx:114:12
|
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsDetailPanel.test.tsx#L131
TestingLibraryElementError: Unable to find an element with the placeholder text of: None
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>
Cannot read properties of undefined (reading 'location')
</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/PlacementGroupsDetailPanel.test.tsx:131:20
|
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.test.tsx#L115
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>
Cannot read properties of undefined (reading 'location')
</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:115:12
|
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsLanding/PlacementGroupsLanding.test.tsx#L80
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>
Cannot read properties of undefined (reading 'location')
</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:80:12
|
|
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
Loading