feat: Add Character Count to Text Input #6233
RODO94pull-request.yml
on: pull_request
Check file changes
3s
Run Integration tests
5m 21s
Run API Tests
0s
Run React Tests
6m 18s
Generate Hasura Change Summary
0s
E2E tests
9m 46s
Run Pulumi Preview
0s
Run Healthcheck on Pizza Services
32s
Annotations
3 errors, 11 warnings, and 1 notice
|
src/@planx/components/TextInput/Public.test.tsx > character limit counter should change when typed:
editor.planx.uk/src/@planx/components/TextInput/Public.test.tsx#L194
TestingLibraryElementError: Unable to find an accessible element with the role "textbox" and name `/hello You have 0 characters remaining/i`
Here are the accessible roles:
heading:
Name "hello":
<h1
aria-level="1"
class="MuiTypography-root MuiTypography-h2 css-1d5adkd-MuiTypography-root"
role="heading"
/>
--------------------------------------------------
alert:
Name "":
<div
class="MuiBox-root css-qsaw8"
data-testid="error-wrapper"
role="alert"
/>
--------------------------------------------------
textbox:
Name "hello":
<textarea
aria-describedby=" character-hint"
class="MuiInputBase-input MuiInputBase-inputMultiline css-qevo51-MuiInputBase-input"
name="text"
rows="5"
style="height: 0px; overflow: hidden;"
/>
--------------------------------------------------
button:
Name "Continue":
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrompt MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedPrompt MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-disableElevation css-1vcou81-MuiButtonBase-root-MuiButton-root"
data-testid="continue-button"
tabindex="0"
type="submit"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div>
<div
class="MuiContainer-root MuiContainer-maxWidthContentWrap css-kr6d9s-MuiContainer-root"
>
<div
class="MuiBox-root css-1qcf0b8"
>
<div
class="MuiBox-root css-m5hp4z"
>
<div
class="MuiBox-root css-1fwc72z"
>
<h1
aria-level="1"
class="MuiTypography-root MuiTypography-h2 css-1d5adkd-MuiTypography-root"
role="heading"
>
hello
</h1>
</div>
</div>
<div
class="MuiBox-root css-1vg8n85"
>
<label
class="css-7wh13m"
>
<p
class="MuiTypography-root MuiTypography-body1 css-8pd92s-MuiTypography-root"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"
>
hello
</p>
<div
class="MuiBox-root css-qsaw8"
data-testid="error-wrapper"
role="alert"
>
<p
class="MuiTypography-root MuiTypography-body1 css-l4bkyg-MuiTypography-root"
/>
<div
class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-multiline Input-multiline css-1b0sg03-MuiInputBase-root"
>
<textarea
aria-describedby=" character-hint"
class="MuiInputBase-input MuiInputBase-inputMultiline css-qevo51-MuiInputBase-input"
name="text"
rows="5"
style="height: 0px; overflow: hidden;"
/>
<textarea
aria-hidden="true"
class="MuiInputBase-input MuiInputBase-inputMultiline css-qevo51-MuiInputBase-input"
readonly=""
style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0); padding-top: 0px; padding-bottom: 0px; width: 100%;"
tabindex="-1"
/>
</div>
<p
aria-hidden="true"
class="MuiTypography-root MuiTypography-body1 css-t51t2-MuiTypography-root"
id="character-hint"
>
You can enter up to 250 characters
</p>
<p
aria-hidden="true"
|
|
src/@planx/components/TextInput/Public.test.tsx > character limit counter shows error state when over limit:
editor.planx.uk/src/@planx/components/TextInput/Public.test.tsx#L209
TestingLibraryElementError: Unable to find an accessible element with the role "textbox" and name `/hello You have 0 characters remaining/i`
Here are the accessible roles:
heading:
Name "hello":
<h1
aria-level="1"
class="MuiTypography-root MuiTypography-h2 css-1d5adkd-MuiTypography-root"
role="heading"
/>
--------------------------------------------------
alert:
Name "":
<div
class="MuiBox-root css-qsaw8"
data-testid="error-wrapper"
role="alert"
/>
--------------------------------------------------
textbox:
Name "hello":
<textarea
aria-describedby=" character-hint"
class="MuiInputBase-input MuiInputBase-inputMultiline css-qevo51-MuiInputBase-input"
name="text"
rows="5"
style="height: 0px; overflow: hidden;"
/>
--------------------------------------------------
button:
Name "Continue":
<button
class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrompt MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-disableElevation MuiButton-root MuiButton-contained MuiButton-containedPrompt MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-disableElevation css-1vcou81-MuiButtonBase-root-MuiButton-root"
data-testid="continue-button"
tabindex="0"
type="submit"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div>
<div
class="MuiContainer-root MuiContainer-maxWidthContentWrap css-kr6d9s-MuiContainer-root"
>
<div
class="MuiBox-root css-1qcf0b8"
>
<div
class="MuiBox-root css-m5hp4z"
>
<div
class="MuiBox-root css-1fwc72z"
>
<h1
aria-level="1"
class="MuiTypography-root MuiTypography-h2 css-1d5adkd-MuiTypography-root"
role="heading"
>
hello
</h1>
</div>
</div>
<div
class="MuiBox-root css-1vg8n85"
>
<label
class="css-7wh13m"
>
<p
class="MuiTypography-root MuiTypography-body1 css-8pd92s-MuiTypography-root"
style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;"
>
hello
</p>
<div
class="MuiBox-root css-qsaw8"
data-testid="error-wrapper"
role="alert"
>
<p
class="MuiTypography-root MuiTypography-body1 css-l4bkyg-MuiTypography-root"
/>
<div
class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-multiline Input-multiline css-1b0sg03-MuiInputBase-root"
>
<textarea
aria-describedby=" character-hint"
class="MuiInputBase-input MuiInputBase-inputMultiline css-qevo51-MuiInputBase-input"
name="text"
rows="5"
style="height: 0px; overflow: hidden;"
/>
<textarea
aria-hidden="true"
class="MuiInputBase-input MuiInputBase-inputMultiline css-qevo51-MuiInputBase-input"
readonly=""
style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0); padding-top: 0px; padding-bottom: 0px; width: 100%;"
tabindex="-1"
/>
</div>
<p
aria-hidden="true"
class="MuiTypography-root MuiTypography-body1 css-t51t2-MuiTypography-root"
id="character-hint"
>
You can enter up to 250 characters
</p>
<p
aria-hidden="true"
|
|
Run React Tests
Process completed with exit code 1.
|
|
Check file changes
The following actions use a deprecated Node.js version and will be forced to run on node20: dorny/paths-filter@v2. For more info: https://github.blog/changelog/2024-03-07-github-actions-all-actions-will-run-on-node20-instead-of-node16-by-default/
|
|
Run Integration tests
The following actions use a deprecated Node.js version and will be forced to run on node20: andstor/file-existence-action@v2. For more info: https://github.blog/changelog/2024-03-07-github-actions-all-actions-will-run-on-node20-instead-of-node16-by-default/
|
|
Run React Tests
The following actions use a deprecated Node.js version and will be forced to run on node20: andstor/file-existence-action@v2. For more info: https://github.blog/changelog/2024-03-07-github-actions-all-actions-will-run-on-node20-instead-of-node16-by-default/
|
|
E2E tests:
e2e/tests/ui-driven/src/invite-to-pay/agent.spec.ts#L97
Unexpected use of networkidle
|
|
E2E tests:
e2e/tests/ui-driven/src/invite-to-pay/nominee.spec.ts#L88
Unexpected use of networkidle
|
|
E2E tests:
e2e/tests/ui-driven/src/invite-to-pay/nominee.spec.ts#L97
Unexpected use of networkidle
|
|
E2E tests:
e2e/tests/ui-driven/src/invite-to-pay/nominee.spec.ts#L132
Unexpected use of networkidle
|
|
Slow Test:
e2e/tests/ui-driven/[chromium] › create-flow.spec.ts#L1
e2e/tests/ui-driven/[chromium] › create-flow.spec.ts took 27.5s
|
|
Slow Test:
e2e/tests/ui-driven/[chromium] › create-flow-with-geospatial.spec.ts#L1
e2e/tests/ui-driven/[chromium] › create-flow-with-geospatial.spec.ts took 21.3s
|
|
Slow Test:
e2e/tests/ui-driven/[chromium] › sections.spec.ts#L1
e2e/tests/ui-driven/[chromium] › sections.spec.ts took 15.3s
|
|
Slow Test:
e2e/tests/ui-driven/[chromium] › save-and-return.spec.ts#L1
e2e/tests/ui-driven/[chromium] › save-and-return.spec.ts took 15.2s
|
|
🎭 Playwright Run Summary
21 passed (1.5m)
|