tech-story: [M3-9052] - Migrate PlacementGroups to Tanstack router #21162
Annotations
10 errors and 1 warning
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx#L74
TypeError: Cannot read properties of null (reading '__store')
❯ useRouterState ../../node_modules/@tanstack/react-router/src/useRouterState.tsx:15:51
❯ Module.useLocation ../../node_modules/@tanstack/react-router/src/useLocation.tsx:9:10
❯ PlacementGroupsCreateDrawer src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx:74:20
❯ renderWithHooks ../../node_modules/react-dom/cjs/react-dom.development.js:15486:18
❯ mountIndeterminateComponent ../../node_modules/react-dom/cjs/react-dom.development.js:20103:13
❯ beginWork ../../node_modules/react-dom/cjs/react-dom.development.js:21626:16
❯ beginWork$1 ../../node_modules/react-dom/cjs/react-dom.development.js:27465:14
❯ performUnitOfWork ../../node_modules/react-dom/cjs/react-dom.development.js:26599:12
❯ workLoopSync ../../node_modules/react-dom/cjs/react-dom.development.js:26505:5
❯ renderRootSync ../../node_modules/react-dom/cjs/react-dom.development.js:26473:7
This error originated in "src/features/Linodes/LinodeCreate/Details/Details.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
The latest test that might've caused the error is "renders a placement group details". It might mean one of the following:
- The error was thrown, while Vitest was running this test.
- If the error occurred after the test had been completed, this was the last documented test before it was thrown.
|
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx#L74
TypeError: Cannot read properties of null (reading '__store')
❯ useRouterState ../../node_modules/@tanstack/react-router/src/useRouterState.tsx:15:51
❯ Module.useLocation ../../node_modules/@tanstack/react-router/src/useLocation.tsx:9:10
❯ PlacementGroupsCreateDrawer src/features/PlacementGroups/PlacementGroupsCreateDrawer.tsx:74:20
❯ renderWithHooks ../../node_modules/react-dom/cjs/react-dom.development.js:15486:18
❯ mountIndeterminateComponent ../../node_modules/react-dom/cjs/react-dom.development.js:20103:13
❯ beginWork ../../node_modules/react-dom/cjs/react-dom.development.js:21626:16
❯ beginWork$1 ../../node_modules/react-dom/cjs/react-dom.development.js:27465:14
❯ performUnitOfWork ../../node_modules/react-dom/cjs/react-dom.development.js:26599:12
❯ workLoopSync ../../node_modules/react-dom/cjs/react-dom.development.js:26505:5
❯ renderRootSync ../../node_modules/react-dom/cjs/react-dom.development.js:26473:7
This error originated in "src/features/Linodes/LinodeCreate/Details/Details.test.tsx" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
The latest test that might've caused the error is "should disable the label and tag TextFields if the user does not have permission to create a linode". It might mean one of the following:
- The error was thrown, while Vitest was running this test.
- If the error occurred after the test had been completed, this was the last documented test before it was thrown.
|
|
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/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#L148
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/PlacementGroupsDetail/PlacementGroupsDetail.test.tsx#L57
TestingLibraryElementError: Unable to find an element with the text: Not Found. 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:57:12
|
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.test.tsx#L93
TestingLibraryElementError: Unable to find an accessible element with the role "progressbar"
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: 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
❯ getByRole ../../node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.test.tsx:93:12
|
|
Run yarn workspace linode-manager run test:
packages/manager/src/features/PlacementGroups/PlacementGroupsDetail/PlacementGroupsDetail.test.tsx#L114
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:114:12
|
|
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
Loading