feat: Add Character Count to Text Input #6135
RODO94pull-request.yml
on: pull_request
Check file changes
4s
Run Integration tests
4m 58s
Run API Tests
0s
Run React Tests
6m 6s
Generate Hasura Change Summary
0s
E2E tests
9m 55s
Run Pulumi Preview
0s
Run Healthcheck on Pizza Services
33s
Annotations
9 errors, 11 warnings, and 1 notice
|
src/@planx/components/TextInput/Public.test.tsx > requires a value before being able to continue:
editor.planx.uk/src/@planx/components/TextInput/Public.test.tsx#L20
TestingLibraryElementError: Unable to find a label with the text of: hello
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-1cx2wey"
>
<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 css-1mm4pgd-MuiInputBase-root"
>
<input
aria-describedby=""
class="MuiInputBase-input css-1dj7bbi-MuiInputBase-input"
name="text"
type="text"
value=""
/>
</div>
</div>
<p
class="MuiTypography-root MuiTypography-body1 css-zbyezo-MuiTypography-root"
id="character-hint"
>
You can enter up to 0 characters
</p>
<p
aria-hidden="true"
class="MuiTypography-root MuiTypography-body2 css-1iiyj8r-MuiTypography-root"
id="character-live-hint"
>
You have 0 characters too many
</p>
<p
aria-atomic="true"
aria-live="polite"
class="MuiTypography-root MuiTypography-body1 css-zbyezo-MuiTypography-root"
>
You have 0 characters remaining
</p>
</label>
</div>
<div
class="MuiBox-root css-7w6khc"
>
<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"
>
Continue
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
❯ Object.getElementError node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/config.js:37:19
❯ getAllByLabelText node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/queries/label-text.js:111:38
❯ node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/@planx/components/TextInput/Public.test.tsx:20:26
|
|
src/@planx/components/TextInput/Public.test.tsx > requires a valid email before being able to continue:
editor.planx.uk/src/@planx/components/TextInput/Public.test.tsx#L39
TestingLibraryElementError: Unable to find a label with the text of: hello
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-1cx2wey"
>
<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 css-1mm4pgd-MuiInputBase-root"
>
<input
aria-describedby=""
class="MuiInputBase-input css-1dj7bbi-MuiInputBase-input"
name="text"
type="email"
value=""
/>
</div>
</div>
<p
class="MuiTypography-root MuiTypography-body1 css-zbyezo-MuiTypography-root"
id="character-hint"
>
You can enter up to 0 characters
</p>
<p
aria-hidden="true"
class="MuiTypography-root MuiTypography-body2 css-1iiyj8r-MuiTypography-root"
id="character-live-hint"
>
You have 0 characters too many
</p>
<p
aria-atomic="true"
aria-live="polite"
class="MuiTypography-root MuiTypography-body1 css-zbyezo-MuiTypography-root"
>
You have 0 characters remaining
</p>
</label>
</div>
<div
class="MuiBox-root css-7w6khc"
>
<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"
>
Continue
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
❯ Object.getElementError node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/config.js:37:19
❯ getAllByLabelText node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/queries/label-text.js:111:38
❯ node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/@planx/components/TextInput/Public.test.tsx:39:26
|
|
src/@planx/components/TextInput/Public.test.tsx > continues for valid phone number example 01632 960000:
editor.planx.uk/src/@planx/components/TextInput/Public.test.tsx#L119
TestingLibraryElementError: Unable to find a label with the text of: phone
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"
>
phone
</h1>
</div>
</div>
<div
class="MuiBox-root css-1cx2wey"
>
<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;"
>
phone
</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 css-1mm4pgd-MuiInputBase-root"
>
<input
aria-describedby=""
class="MuiInputBase-input css-1dj7bbi-MuiInputBase-input"
name="text"
type="tel"
value=""
/>
</div>
</div>
<p
class="MuiTypography-root MuiTypography-body1 css-zbyezo-MuiTypography-root"
id="character-hint"
>
You can enter up to 0 characters
</p>
<p
aria-hidden="true"
class="MuiTypography-root MuiTypography-body2 css-1iiyj8r-MuiTypography-root"
id="character-live-hint"
>
You have 0 characters too many
</p>
<p
aria-atomic="true"
aria-live="polite"
class="MuiTypography-root MuiTypography-body1 css-zbyezo-MuiTypography-root"
>
You have 0 characters remaining
</p>
</label>
</div>
<div
class="MuiBox-root css-7w6khc"
>
<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"
>
Continue
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
❯ Object.getElementError node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/config.js:37:19
❯ getAllByLabelText node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/queries/label-text.js:111:38
❯ node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/@planx/components/TextInput/Public.test.tsx:119:29
|
|
src/@planx/components/TextInput/Public.test.tsx > continues for valid phone number example 020 7946 0999:
editor.planx.uk/src/@planx/components/TextInput/Public.test.tsx#L119
TestingLibraryElementError: Unable to find a label with the text of: phone
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"
>
phone
</h1>
</div>
</div>
<div
class="MuiBox-root css-1cx2wey"
>
<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;"
>
phone
</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 css-1mm4pgd-MuiInputBase-root"
>
<input
aria-describedby=""
class="MuiInputBase-input css-1dj7bbi-MuiInputBase-input"
name="text"
type="tel"
value=""
/>
</div>
</div>
<p
class="MuiTypography-root MuiTypography-body1 css-zbyezo-MuiTypography-root"
id="character-hint"
>
You can enter up to 0 characters
</p>
<p
aria-hidden="true"
class="MuiTypography-root MuiTypography-body2 css-1iiyj8r-MuiTypography-root"
id="character-live-hint"
>
You have 0 characters too many
</p>
<p
aria-atomic="true"
aria-live="polite"
class="MuiTypography-root MuiTypography-body1 css-zbyezo-MuiTypography-root"
>
You have 0 characters remaining
</p>
</label>
</div>
<div
class="MuiBox-root css-7w6khc"
>
<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"
>
Continue
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
❯ Object.getElementError node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/config.js:37:19
❯ getAllByLabelText node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/queries/label-text.js:111:38
❯ node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/@planx/components/TextInput/Public.test.tsx:119:29
|
|
src/@planx/components/TextInput/Public.test.tsx > continues for valid phone number example 07700 900999:
editor.planx.uk/src/@planx/components/TextInput/Public.test.tsx#L119
TestingLibraryElementError: Unable to find a label with the text of: phone
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"
>
phone
</h1>
</div>
</div>
<div
class="MuiBox-root css-1cx2wey"
>
<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;"
>
phone
</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 css-1mm4pgd-MuiInputBase-root"
>
<input
aria-describedby=""
class="MuiInputBase-input css-1dj7bbi-MuiInputBase-input"
name="text"
type="tel"
value=""
/>
</div>
</div>
<p
class="MuiTypography-root MuiTypography-body1 css-zbyezo-MuiTypography-root"
id="character-hint"
>
You can enter up to 0 characters
</p>
<p
aria-hidden="true"
class="MuiTypography-root MuiTypography-body2 css-1iiyj8r-MuiTypography-root"
id="character-live-hint"
>
You have 0 characters too many
</p>
<p
aria-atomic="true"
aria-live="polite"
class="MuiTypography-root MuiTypography-body1 css-zbyezo-MuiTypography-root"
>
You have 0 characters remaining
</p>
</label>
</div>
<div
class="MuiBox-root css-7w6khc"
>
<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"
>
Continue
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
❯ Object.getElementError node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/config.js:37:19
❯ getAllByLabelText node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/queries/label-text.js:111:38
❯ node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/@planx/components/TextInput/Public.test.tsx:119:29
|
|
src/@planx/components/TextInput/Public.test.tsx > continues for valid phone number example 004408081570192:
editor.planx.uk/src/@planx/components/TextInput/Public.test.tsx#L119
TestingLibraryElementError: Unable to find a label with the text of: phone
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"
>
phone
</h1>
</div>
</div>
<div
class="MuiBox-root css-1cx2wey"
>
<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;"
>
phone
</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 css-1mm4pgd-MuiInputBase-root"
>
<input
aria-describedby=""
class="MuiInputBase-input css-1dj7bbi-MuiInputBase-input"
name="text"
type="tel"
value=""
/>
</div>
</div>
<p
class="MuiTypography-root MuiTypography-body1 css-zbyezo-MuiTypography-root"
id="character-hint"
>
You can enter up to 0 characters
</p>
<p
aria-hidden="true"
class="MuiTypography-root MuiTypography-body2 css-1iiyj8r-MuiTypography-root"
id="character-live-hint"
>
You have 0 characters too many
</p>
<p
aria-atomic="true"
aria-live="polite"
class="MuiTypography-root MuiTypography-body1 css-zbyezo-MuiTypography-root"
>
You have 0 characters remaining
</p>
</label>
</div>
<div
class="MuiBox-root css-7w6khc"
>
<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"
>
Continue
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
❯ Object.getElementError node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/config.js:37:19
❯ getAllByLabelText node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/queries/label-text.js:111:38
❯ node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/@planx/components/TextInput/Public.test.tsx:119:29
|
|
src/@planx/components/TextInput/Public.test.tsx > continues for valid phone number example (01234) 123456:
editor.planx.uk/src/@planx/components/TextInput/Public.test.tsx#L119
TestingLibraryElementError: Unable to find a label with the text of: phone
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"
>
phone
</h1>
</div>
</div>
<div
class="MuiBox-root css-1cx2wey"
>
<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;"
>
phone
</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 css-1mm4pgd-MuiInputBase-root"
>
<input
aria-describedby=""
class="MuiInputBase-input css-1dj7bbi-MuiInputBase-input"
name="text"
type="tel"
value=""
/>
</div>
</div>
<p
class="MuiTypography-root MuiTypography-body1 css-zbyezo-MuiTypography-root"
id="character-hint"
>
You can enter up to 0 characters
</p>
<p
aria-hidden="true"
class="MuiTypography-root MuiTypography-body2 css-1iiyj8r-MuiTypography-root"
id="character-live-hint"
>
You have 0 characters too many
</p>
<p
aria-atomic="true"
aria-live="polite"
class="MuiTypography-root MuiTypography-body1 css-zbyezo-MuiTypography-root"
>
You have 0 characters remaining
</p>
</label>
</div>
<div
class="MuiBox-root css-7w6khc"
>
<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"
>
Continue
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
❯ Object.getElementError node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/config.js:37:19
❯ getAllByLabelText node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/queries/label-text.js:111:38
❯ node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/@planx/components/TextInput/Public.test.tsx:119:29
|
|
src/@planx/components/TextInput/Public.test.tsx > continues for valid phone number example +1 630 394 8401:
editor.planx.uk/src/@planx/components/TextInput/Public.test.tsx#L119
TestingLibraryElementError: Unable to find a label with the text of: phone
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"
>
phone
</h1>
</div>
</div>
<div
class="MuiBox-root css-1cx2wey"
>
<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;"
>
phone
</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 css-1mm4pgd-MuiInputBase-root"
>
<input
aria-describedby=""
class="MuiInputBase-input css-1dj7bbi-MuiInputBase-input"
name="text"
type="tel"
value=""
/>
</div>
</div>
<p
class="MuiTypography-root MuiTypography-body1 css-zbyezo-MuiTypography-root"
id="character-hint"
>
You can enter up to 0 characters
</p>
<p
aria-hidden="true"
class="MuiTypography-root MuiTypography-body2 css-1iiyj8r-MuiTypography-root"
id="character-live-hint"
>
You have 0 characters too many
</p>
<p
aria-atomic="true"
aria-live="polite"
class="MuiTypography-root MuiTypography-body1 css-zbyezo-MuiTypography-root"
>
You have 0 characters remaining
</p>
</label>
</div>
<div
class="MuiBox-root css-7w6khc"
>
<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"
>
Continue
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</div>
</div>
</div>
</div>
</body>
❯ Object.getElementError node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/config.js:37:19
❯ getAllByLabelText node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/queries/label-text.js:111:38
❯ node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/@planx/components/TextInput/Public.test.tsx:119:29
|
|
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 24.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 18.6s
|
|
Slow Test:
e2e/tests/ui-driven/[chromium] › sections.spec.ts#L1
e2e/tests/ui-driven/[chromium] › sections.spec.ts took 15.4s
|
|
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.3s
|
|
🎭 Playwright Run Summary
21 passed (1.4m)
|