Components: upgrade Ariakit to latest #102453
Annotations
6 errors and 2 warnings
|
Running the tests:
packages/components/src/custom-select-control-v2/test/index.tsx#L37
TestingLibraryElementError: Unable to find an accessible element with the role "img" and name "april-29"
Here are the accessible roles:
combobox:
Name "Rendered":
<button
aria-autocomplete="none"
aria-controls=":r4p:"
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby=":r4o:"
class="components-custom-select-control-button css-1gp4jnk-Select-Select e1p3eej73"
data-wp-c16t="true"
data-wp-component="CustomSelectControlButton"
role="combobox"
type="button"
/>
--------------------------------------------------
img:
Name "":
<img
alt=""
src=".jpg"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<p
class="a11y-speak-intro-text"
hidden="hidden"
id="a11y-speak-intro-text"
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
>
Notifications
</p>
<div
aria-atomic="true"
aria-live="assertive"
aria-relevant="additions text"
class="a11y-speak-region"
id="a11y-speak-assertive"
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
/>
<div
aria-atomic="true"
aria-live="polite"
aria-relevant="additions text"
class="a11y-speak-region"
id="a11y-speak-polite"
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
/>
<div>
<div
class="css-hqhsrf-SelectLabel e1p3eej74"
id=":r4o:"
style="cursor: default;"
>
Rendered
</div>
<button
aria-autocomplete="none"
aria-controls=":r4p:"
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby=":r4o:"
class="components-custom-select-control-button css-1gp4jnk-Select-Select e1p3eej73"
data-wp-c16t="true"
data-wp-component="CustomSelectControlButton"
role="combobox"
type="button"
>
<div>
<img
alt=""
src=".jpg"
/>
</div>
<svg
aria-hidden="true"
focusable="false"
height="18"
viewBox="0 0 24 24"
width="18"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
/>
</svg>
</button>
<div
style="position: absolute; top: 0px; lef
|
|
Running the tests:
packages/components/src/custom-select-control-v2/test/index.tsx#L19
Error: expect(jest.fn()).not.toHaveErrored(expected)
Expected mock function not to be called but it was called with:
["Warning: An update to %s inside a test was not wrapped in act(...).·
When testing, code that causes React state updates should be wrapped into act(...):·
act(() => {
/* fire events that update state */
});
/* assert on the output */·
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act%s", "Select2", "
at /home/runner/work/gutenberg/gutenberg/packages/components/node_modules/@ariakit/react-core/cjs/__chunks/R2YVMKBR.cjs:19:49
at /home/runner/work/gutenberg/gutenberg/node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js:43:23
at UnconnectedCustomSelectButton (/home/runner/work/gutenberg/gutenberg/packages/components/src/custom-select-control-v2/custom-select.tsx:64:22)
at children (/home/runner/work/gutenberg/gutenberg/packages/components/src/custom-select-control-v2/custom-select.tsx:96:3)
at defaultValue (/home/runner/work/gutenberg/gutenberg/packages/components/src/custom-select-control-v2/default-component/index.tsx:17:10)"],["Warning: An update to %s inside a test was not wrapped in act(...).·
When testing, code that causes React state updates should be wrapped into act(...):·
act(() => {
/* fire events that update state */
});
/* assert on the output */·
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act%s", "CustomSelectControlButton", "
at UnconnectedCustomSelectButton (/home/runner/work/gutenberg/gutenberg/packages/components/src/custom-select-control-v2/custom-select.tsx:64:22)
at children (/home/runner/work/gutenberg/gutenberg/packages/components/src/custom-select-control-v2/custom-select.tsx:96:3)
at defaultValue (/home/runner/work/gutenberg/gutenberg/packages/components/src/custom-select-control-v2/default-component/index.tsx:17:10)"],["Warning: An update to %s inside a test was not wrapped in act(...).·
When testing, code that causes React state updates should be wrapped into act(...):·
act(() => {
/* fire events that update state */
});
/* assert on the output */·
This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act%s", "SelectItem2", "
at /home/runner/work/gutenberg/gutenberg/packages/components/node_modules/@ariakit/react-core/cjs/__chunks/R2YVMKBR.cjs:19:49
at /home/runner/work/gutenberg/gutenberg/node_modules/@emotion/react/dist/emotion-element-c24e4fdd.cjs.dev.js:43:23
at children (/home/runner/work/gutenberg/gutenberg/packages/components/src/custom-select-control-v2/item.tsx:15:2)
at div
at ContextProvider
at ScopedContextProvider
at ContextProvider
at ContextProvider
at ScopedContextProvider
at ContextProvider
at ScopedContextProvider
at ContextProvider
at ContextProvider
at ScopedContextProvider
at ContextProvider
at ContextProvider
at ContextProvider
at ScopedContextProvider
at ContextProvider
at ContextProvider
at ContextProvider
at ContextProvider
at ContextProvider
at ContextProvider
at ScopedContextProvider
at ContextProvider
at ContextProvider
at div
at ContextProvider
at ScopedContextProvider
at ContextProvider
at ContextProvider
at ScopedContextProvider
at ContextProvider
at ContextProvider
at ContextProvider
at ScopedContextProvider
at HeadingLevel (/home/runner/work/gutenberg/gutenberg/packages/components/node_modules/@ariakit/react-core/cjs/__chunks/FAFAXYUE.cjs:9:25)
at ContextProvider
at ScopedContextProvider
at ContextProvider
at ContextProvider
at ScopedContextProvider
at ContextProvider
at ScopedContextProvider
at ContextProvider
at ContextProvider
at ScopedContextProvider
at /home/runner/work/gutenberg/gutenberg/packages/components/node_modules/@ariakit/react-cor
|
|
Running the tests:
packages/components/src/custom-select-control-v2/test/index.tsx#L37
TestingLibraryElementError: Unable to find an accessible element with the role "img" and name "april-29"
Here are the accessible roles:
combobox:
Name "Rendered":
<button
aria-autocomplete="none"
aria-controls=":r9r:"
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby=":r9q:"
class="components-custom-select-control-button css-1gp4jnk-Select-Select e1p3eej73"
data-wp-c16t="true"
data-wp-component="CustomSelectControlButton"
role="combobox"
type="button"
/>
--------------------------------------------------
img:
Name "":
<img
alt=""
src=".jpg"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<p
class="a11y-speak-intro-text"
hidden="hidden"
id="a11y-speak-intro-text"
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
>
Notifications
</p>
<div
aria-atomic="true"
aria-live="assertive"
aria-relevant="additions text"
class="a11y-speak-region"
id="a11y-speak-assertive"
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
/>
<div
aria-atomic="true"
aria-live="polite"
aria-relevant="additions text"
class="a11y-speak-region"
id="a11y-speak-polite"
style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
/>
<div>
<div
class="css-hqhsrf-SelectLabel e1p3eej74"
id=":r9q:"
style="cursor: default;"
>
Rendered
</div>
<button
aria-autocomplete="none"
aria-controls=":r9r:"
aria-expanded="false"
aria-haspopup="listbox"
aria-labelledby=":r9q:"
class="components-custom-select-control-button css-1gp4jnk-Select-Select e1p3eej73"
data-wp-c16t="true"
data-wp-component="CustomSelectControlButton"
role="combobox"
type="button"
>
<div>
<img
alt=""
src=".jpg"
/>
</div>
<svg
aria-hidden="true"
focusable="false"
height="18"
viewBox="0 0 24 24"
width="18"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"
/>
</svg>
</button>
<div
style="position: absolute; top: 0px; lef
|
|
Running the tests:
packages/components/src/toggle-group-control/test/index.tsx#L117
Error: expect(received).toMatchSnapshot()
Snapshot name: `ToggleGroupControl uncontrolled should render correctly with icons 1`
- Snapshot - 1
+ Received + 1
@@ -245,11 +245,11 @@
>
<button
aria-checked="true"
aria-label="Uppercase"
class="emotion-12 components-toggle-group-control-option-base"
- data-active-item=""
+ data-active-item="true"
data-value="uppercase"
data-wp-c16t="true"
data-wp-component="ToggleGroupControlOptionBase"
id="toggle-group-control-as-radio-group-1-2"
role="radio"
at Object.toMatchSnapshot (/home/runner/work/gutenberg/gutenberg/packages/components/src/toggle-group-control/test/index.tsx:117:24)
at Promise.then.completed (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/utils.js:300:28)
at new Promise (<anonymous>)
at callAsyncCircusFn (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/utils.js:233:10)
at _callCircusTest (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:315:40)
at processTicksAndRejections (node:internal/process/task_queues:95:5)
at _runTest (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:251:3)
at _runTestsForDescribeBlock (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:125:9)
at _runTestsForDescribeBlock (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:120:9)
at _runTestsForDescribeBlock (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:120:9)
at run (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:70:3)
at runAndTransformResultsToJestFormat (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
at jestAdapter (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
at runTestInternal (/home/runner/work/gutenberg/gutenberg/node_modules/jest-runner/build/runTest.js:367:16)
at runTest (/home/runner/work/gutenberg/gutenberg/node_modules/jest-runner/build/runTest.js:444:34)
at Object.worker (/home/runner/work/gutenberg/gutenberg/node_modules/jest-runner/build/testWorker.js:106:12)
|
|
Running the tests:
packages/components/src/toggle-group-control/test/index.tsx#L117
Error: expect(received).toMatchSnapshot()
Snapshot name: `ToggleGroupControl controlled should render correctly with icons 1`
- Snapshot - 1
+ Received + 1
@@ -245,11 +245,11 @@
>
<button
aria-checked="true"
aria-label="Uppercase"
class="emotion-12 components-toggle-group-control-option-base"
- data-active-item=""
+ data-active-item="true"
data-value="uppercase"
data-wp-c16t="true"
data-wp-component="ToggleGroupControlOptionBase"
id="toggle-group-control-as-radio-group-10-24"
role="radio"
at Object.toMatchSnapshot (/home/runner/work/gutenberg/gutenberg/packages/components/src/toggle-group-control/test/index.tsx:117:24)
at Promise.then.completed (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/utils.js:300:28)
at new Promise (<anonymous>)
at callAsyncCircusFn (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/utils.js:233:10)
at _callCircusTest (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:315:40)
at _runTest (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:251:3)
at _runTestsForDescribeBlock (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:125:9)
at _runTestsForDescribeBlock (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:120:9)
at _runTestsForDescribeBlock (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:120:9)
at run (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/run.js:70:3)
at runAndTransformResultsToJestFormat (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
at jestAdapter (/home/runner/work/gutenberg/gutenberg/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
at runTestInternal (/home/runner/work/gutenberg/gutenberg/node_modules/jest-runner/build/runTest.js:367:16)
at runTest (/home/runner/work/gutenberg/gutenberg/node_modules/jest-runner/build/runTest.js:444:34)
at Object.worker (/home/runner/work/gutenberg/gutenberg/node_modules/jest-runner/build/testWorker.js:106:12)
|
|
Running the tests
Process completed with exit code 1.
|
|
Setup Node.js and install dependencies
Both node-version and node-version-file inputs are specified, only node-version will be used
|
|
Node.js 16 actions are deprecated. Please update the following actions to use Node.js 20: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c, actions/cache@88522ab9f39a2ea568f7027eddc7d8d8bc9d59c8. For more information see: https://github.blog/changelog/2023-09-22-github-actions-transitioning-from-node-16-to-node-20/.
|
Loading