feat(component): add phone input #27068
philibeaAnnotations
9 errors
|
typecheck
Process completed with exit code 2.
|
|
typecheck
@ultraviolet/ui#typecheck: command (/home/runner/work/ultraviolet/ultraviolet/packages/ui) /home/runner/setup-pnpm/node_modules/.bin/pnpm run typecheck exited (2)
|
|
typecheck
Cannot find module '@ultraviolet/form' or its corresponding type declarations.
|
|
test (24)
Process completed with exit code 1.
|
|
test (24)
@ultraviolet/form#test:unit:coverage: command (/home/runner/work/ultraviolet/ultraviolet/packages/form) /home/runner/setup-pnpm/node_modules/.bin/pnpm run test:unit:coverage exited (1)
|
|
[form] src/components/PhoneInputField/__tests__/index.test.tsx > form - PhoneField > should be disabled when disabled prop is true:
packages/form/src/components/PhoneInputField/__tests__/index.test.tsx#L127
Error: Snapshot `form - PhoneField > should be disabled when disabled prop is true 1` mismatched
❯ src/components/PhoneInputField/__tests__/index.test.tsx:127:26
|
|
[form] src/components/PhoneInputField/__tests__/index.test.tsx > form - PhoneField > should show error for invalid phone number:
packages/form/src/components/PhoneInputField/__tests__/index.test.tsx#L114
TestingLibraryElementError: Unable to find an element with the text: This doesn't appear to be a valid phone number.. 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 />
<div>
<div
data-testid="testing"
>
<form
novalidate=""
style="display: contents;"
>
<form
novalidate=""
style="display: contents;"
>
<div>
<label
aria-disabled="false"
class="uv_f9zn1x3"
data-disabled="false"
data-error="false"
for="phone-phone"
>
<span
class="uv_f9zn1x2"
>
Phone Number
</span>
<div
class="uv_f9zn1x0"
>
🇫🇷
</div>
<input
class="uv_f9zn1x5"
id="phone-phone"
maxlength="20"
name="phone"
placeholder="+33 6 12 34 56 78"
type="tel"
value="invalid"
/>
<span
class="uv_f9zn1x1 uv_m4c9ow0 uv_m4c9ow4 uv_m4c9ow9 uv_m4c9own uv_m4c9ow1a uv_m4c9ow2m"
>
*
</span>
</label>
<div
class="uv_mlltm91"
data-is-animated="true"
style="--uv_mlltm90: 300ms; max-height: 0px; overflow: hidden;"
>
<p
class="uv_f9zn1x4 uv_m4c9ow0 uv_m4c9ow4 uv_m4c9ow9 uv_m4c9owp uv_m4c9ow1a uv_m4c9ow2m"
/>
</div>
</div>
<button
class="uv_e1wcoe0 uv_e1wcoe2 uv_e1wcoe3 uv_e1wcoe9 uv_e1wcoee uv_e1wcoei uv_e1wcoel"
disabled=""
type="submit"
>
Submit
</button>
</form>
</form>
</div>
</div>
</body>
❯ Object.getElementError ../../node_modules/.pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/dist/config.js:37:19
❯ ../../node_modules/.pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ ../../node_modules/.pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ ../../node_modules/.pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ src/components/PhoneInputField/__tests__/index.test.tsx:114:14
|
|
[form] src/components/PhoneInputField/__tests__/index.test.tsx > form - PhoneField > should work with default country:
packages/form/src/components/PhoneInputField/__tests__/index.test.tsx#L80
AssertionError: expected { phone: '+1 202-555-1234' } to deeply equal { phone: '+12025551234' }
Ignored nodes: comments, script, style
<html>
<head />
<body>
<div />
<div />
<div>
<div
data-testid="testing"
>
<form
novalidate=""
style="display: contents;"
>
<form
novalidate=""
style="display: contents;"
>
<div>
<label
aria-disabled="false"
class="uv_f9zn1x3"
data-disabled="false"
data-error="false"
for="phone-phone"
>
<span
class="uv_f9zn1x2"
>
Phone Number
</span>
<div
class="uv_f9zn1x0"
>
🇺🇸
</div>
<input
class="uv_f9zn1x5"
id="phone-phone"
maxlength="20"
name="phone"
placeholder="+1 201-555-0123"
type="tel"
value="+1 202-555-1234"
/>
</label>
<div
class="uv_mlltm91"
data-is-animated="true"
style="--uv_mlltm90: 300ms; max-height: 0px; overflow: hidden;"
>
<p
class="uv_f9zn1x4 uv_m4c9ow0 uv_m4c9ow4 uv_m4c9ow9 uv_m4c9owp uv_m4c9ow1a uv_m4c9ow2m"
/>
</div>
</div>
<button
class="uv_e1wcoe0 uv_e1wcoe1 uv_e1wcoe3 uv_e1wcoe9 uv_e1wcoee uv_e1wcoei uv_e1wcoel"
type="submit"
>
Submit
</button>
</form>
</form>
</div>
</div>
</body>
</html>...
- Expected
+ Received
{
- "phone": "+12025551234",
+ "phone": "+1 202-555-1234",
}
❯ src/components/PhoneInputField/__tests__/index.test.tsx:80:41
❯ runWithExpensiveErrorDiagnosticsDisabled ../../node_modules/.pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/dist/config.js:47:12
❯ checkCallback ../../node_modules/.pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/dist/wait-for.js:124:77
❯ Timeout.checkRealTimersCallback ../../node_modules/.pnpm/@testing-library+dom@10.4.1/node_modules/@testing-library/dom/dist/wait-for.js:118:16
|
|
[form] src/components/PhoneInputField/__tests__/index.test.tsx > form - PhoneField > should render correctly:
packages/form/src/components/PhoneInputField/__tests__/index.test.tsx#L20
Error: Snapshot `form - PhoneField > should render correctly 1` mismatched
❯ src/components/PhoneInputField/__tests__/index.test.tsx:20:26
|