Migrate components default props usage #15342
CarlosCortizasCTmain.yml
on: pull_request
build_lint_and_test
3m 33s
Annotations
10 errors and 1 warning
|
in single mode › when a value is specified › should render a select input with preselected value:
packages/components/inputs/search-select-input/src/search-select-input.spec.js#L116
TestingLibraryElementError: Unable to find an element with the text: Banana. 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>
<label
for="some-id"
>
Fruit
</label>
<div
class="css-7nex9u-SearchSelectInputWrapper e6cl9390"
>
<div
class="css-z178qm-Horizontal-getConstraintStyles-Horizontal"
>
<div>
<div
class=" css-1xxxik6-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-7-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
role="log"
/>
<div
class=" css-1l3k0xn-control"
>
<div
class=" css-1bltetp"
>
<div
class=" css-gtnfmv-placeholder"
id="react-select-7-placeholder"
>
Search by…
</div>
<div
class=" css-19bb58m"
data-value=""
>
<input
aria-activedescendant=""
aria-autocomplete="list"
aria-describedby="react-select-7-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class=""
id="some-id"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class=" css-c0onoj"
>
<span
class=" css-354gdm-indicatorSeparator"
/>
<div
aria-hidden="true"
class=" css-1qw63tw-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-4nyv12-getIconStyles"
color="neutral60"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m19.285 20.718-5.736-5.735a6.242 6.242 0 0 1-3.892 1.331q-2.79 0-4.723-1.932Q3 12.448 3 9.657t1.934-4.724Q6.867 3 9.657 3t4.725 1.933q1.932 1.934 1.932 4.724a6.24 6.24 0 0 1-1.331 3.892l5.761 5.761a.94.94 0 0 1 .282.691.98.98 0 0 1-.308.717.97.97 0 0 1-.717.282.97.97 0 0 1-.716-.282m-9.628-6.452q1.92 0 3.265-1.344 1.344-1.344 1.344-3.265 0-1.92-1.344-3.265-1.344-1.344-3.265-1.344-1.92 0-3.265 1.344-1.344 1.345-1.344 3.265t1.344 3.265q1.345 1.344 3.265 1.344"
/>
</svg>
</div>
</div>
</div>
<input
name="some-name"
type="hidden"
value=""
/>
</div>
</div>
</div>
</div>
</div>
</body>
at Object.getElementError (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/config.js:37:19)
at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-hel
|
|
in single mode › interacting › should be able to select an option:
packages/components/inputs/search-select-input/src/search-select-input.spec.js#L159
TestingLibraryElementError: Unable to find an element with the text: Mango. 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>
<label
for="some-id"
>
Fruit
</label>
<div
class="css-7nex9u-SearchSelectInputWrapper e6cl9390"
>
<div
class="css-z178qm-Horizontal-getConstraintStyles-Horizontal"
>
<div>
<div
class=" css-1xxxik6-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-10-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
role="log"
/>
<div
class=" css-1l3k0xn-control"
>
<div
class=" css-1bltetp"
>
<div
class=" css-gtnfmv-placeholder"
id="react-select-10-placeholder"
>
Search by…
</div>
<div
class=" css-19bb58m"
data-value=""
>
<input
aria-activedescendant=""
aria-autocomplete="list"
aria-describedby="react-select-10-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class=""
id="some-id"
role="combobox"
spellcheck="false"
style="opacity: 0; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class=" css-c0onoj"
>
<span
class=" css-354gdm-indicatorSeparator"
/>
<div
aria-hidden="true"
class=" css-1qw63tw-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-4nyv12-getIconStyles"
color="neutral60"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m19.285 20.718-5.736-5.735a6.242 6.242 0 0 1-3.892 1.331q-2.79 0-4.723-1.932Q3 12.448 3 9.657t1.934-4.724Q6.867 3 9.657 3t4.725 1.933q1.932 1.934 1.932 4.724a6.24 6.24 0 0 1-1.331 3.892l5.761 5.761a.94.94 0 0 1 .282.691.98.98 0 0 1-.308.717.97.97 0 0 1-.717.282.97.97 0 0 1-.716-.282m-9.628-6.452q1.92 0 3.265-1.344 1.344-1.344 1.344-3.265 0-1.92-1.344-3.265-1.344-1.344-3.265-1.344-1.92 0-3.265 1.344-1.344 1.345-1.344 3.265t1.344 3.265q1.345 1.344 3.265 1.344"
/>
</svg>
</div>
</div>
</div>
<input
name="some-name"
type="hidden"
value=""
/>
</div>
</div>
</div>
</div>
</div>
</body>
at Object.getElementError (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/config.js:37:19)
at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-h
|
|
in multi mode › when no value is specified › when values are specified › should render a select input with preselected values:
packages/components/inputs/search-select-input/src/search-select-input.spec.js#L207
TestingLibraryElementError: Unable to find an element with the text: Mango. 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>
<label
for="some-id"
>
Fruit
</label>
<div
class="css-7nex9u-SearchSelectInputWrapper e6cl9390"
>
<div
class="css-z178qm-Horizontal-getConstraintStyles-Horizontal"
>
<div>
<div
class=" css-1xxxik6-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-13-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
role="log"
/>
<div
class=" css-1l3k0xn-control"
>
<div
class=" css-fnzp7d"
>
<div
class=" css-gtnfmv-placeholder"
id="react-select-13-placeholder"
>
Search by…
</div>
<div
class=" css-19bb58m"
data-value=""
>
<input
aria-activedescendant=""
aria-autocomplete="list"
aria-describedby="react-select-13-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class=""
id="some-id"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class=" css-c0onoj"
>
<span
class=" css-354gdm-indicatorSeparator"
/>
<div
aria-hidden="true"
class=" css-1qw63tw-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-4nyv12-getIconStyles"
color="neutral60"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m19.285 20.718-5.736-5.735a6.242 6.242 0 0 1-3.892 1.331q-2.79 0-4.723-1.932Q3 12.448 3 9.657t1.934-4.724Q6.867 3 9.657 3t4.725 1.933q1.932 1.934 1.932 4.724a6.24 6.24 0 0 1-1.331 3.892l5.761 5.761a.94.94 0 0 1 .282.691.98.98 0 0 1-.308.717.97.97 0 0 1-.717.282.97.97 0 0 1-.716-.282m-9.628-6.452q1.92 0 3.265-1.344 1.344-1.344 1.344-3.265 0-1.92-1.344-3.265-1.344-1.344-3.265-1.344-1.92 0-3.265 1.344-1.344 1.345-1.344 3.265t1.344 3.265q1.345 1.344 3.265 1.344"
/>
</svg>
</div>
</div>
</div>
<div>
<input
name="some-name"
type="hidden"
value=""
/>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
at Object.getElementError (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/config.js:37:19)
at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
at node_modules/@testing-library/react/
|
|
in multi mode › interacting › should be able to select two option:
packages/components/inputs/search-select-input/src/search-select-input.spec.js#L225
TestingLibraryElementError: Unable to find an element with the text: Mango. 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>
<label
for="some-id"
>
Fruit
</label>
<div
class="css-7nex9u-SearchSelectInputWrapper e6cl9390"
>
<div
class="css-z178qm-Horizontal-getConstraintStyles-Horizontal"
>
<div>
<div
class=" css-1xxxik6-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-14-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
role="log"
/>
<div
class=" css-1l3k0xn-control"
>
<div
class=" css-fnzp7d"
>
<div
class=" css-gtnfmv-placeholder"
id="react-select-14-placeholder"
>
Search by…
</div>
<div
class=" css-19bb58m"
data-value=""
>
<input
aria-activedescendant=""
aria-autocomplete="list"
aria-describedby="react-select-14-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class=""
id="some-id"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class=" css-c0onoj"
>
<span
class=" css-354gdm-indicatorSeparator"
/>
<div
aria-hidden="true"
class=" css-1qw63tw-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-4nyv12-getIconStyles"
color="neutral60"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m19.285 20.718-5.736-5.735a6.242 6.242 0 0 1-3.892 1.331q-2.79 0-4.723-1.932Q3 12.448 3 9.657t1.934-4.724Q6.867 3 9.657 3t4.725 1.933q1.932 1.934 1.932 4.724a6.24 6.24 0 0 1-1.331 3.892l5.761 5.761a.94.94 0 0 1 .282.691.98.98 0 0 1-.308.717.97.97 0 0 1-.717.282.97.97 0 0 1-.716-.282m-9.628-6.452q1.92 0 3.265-1.344 1.344-1.344 1.344-3.265 0-1.92-1.344-3.265-1.344-1.344-3.265-1.344-1.92 0-3.265 1.344-1.344 1.345-1.344 3.265t1.344 3.265q1.345 1.344 3.265 1.344"
/>
</svg>
</div>
</div>
</div>
<div>
<input
name="some-name"
type="hidden"
value=""
/>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
at Object.getElementError (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/config.js:37:19)
at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
at node_modules/@testing-library/react/
|
|
in multi mode › interacting › should call onChange when two values selected:
packages/components/inputs/search-select-input/src/search-select-input.spec.js#L264
expect(jest.fn()).toHaveBeenCalledWith(...expected)
Expected: {"persist": Any<Function>, "target": {"id": "some-id", "name": "some-name", "value": [{"label": "Mango", "value": "mango"}, {"label": "Raspberry", "value": "raspberry"}]}}
Received
1
Object {
- "persist": Any<Function>,
+ "persist": [Function persist],
"target": Object {
"id": "some-id",
"name": "some-name",
"value": Array [
Object {
"label": "Mango",
"value": "mango",
- },
- Object {
- "label": "Raspberry",
- "value": "raspberry",
},
],
},
},
2
@@ -1,15 +1,11 @@
Object {
- "persist": Any<Function>,
+ "persist": [Function persist],
"target": Object {
"id": "some-id",
"name": "some-name",
"value": Array [
- Object {
- "label": "Mango",
- "value": "mango",
- },
Object {
"label": "Raspberry",
"value": "raspberry",
},
],,
Number of calls: 2
at Object.toHaveBeenCalledWith (packages/components/inputs/search-select-input/src/search-select-input.spec.js:264:24)
|
|
in multi mode › interacting › should call onChange when value is cleared:
packages/components/inputs/search-select-input/src/search-select-input.spec.js#L286
expect(jest.fn()).toHaveBeenCalledWith(...expected)
Expected: {"persist": Any<Function>, "target": {"id": "some-id", "name": "some-name", "value": []}}
Number of calls: 0
at Object.toHaveBeenCalledWith (packages/components/inputs/search-select-input/src/search-select-input.spec.js:286:24)
|
|
when used with option groups › should render a select input with preselected values:
packages/components/inputs/search-select-input/src/search-select-input.spec.js#L324
TestingLibraryElementError: Unable to find an element with the text: Yellow. 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>
<label
for="some-id"
>
Fruit
</label>
<div
class="css-7nex9u-SearchSelectInputWrapper e6cl9390"
>
<div
class="css-z178qm-Horizontal-getConstraintStyles-Horizontal"
>
<div>
<div
class=" css-1xxxik6-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-17-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
role="log"
/>
<div
class=" css-1l3k0xn-control"
>
<div
class=" css-1bltetp"
>
<div
class=" css-gtnfmv-placeholder"
id="react-select-17-placeholder"
>
Search by…
</div>
<div
class=" css-19bb58m"
data-value=""
>
<input
aria-activedescendant=""
aria-autocomplete="list"
aria-describedby="react-select-17-placeholder"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class=""
id="some-id"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class=" css-c0onoj"
>
<span
class=" css-354gdm-indicatorSeparator"
/>
<div
aria-hidden="true"
class=" css-1qw63tw-indicatorContainer"
>
<svg
aria-hidden="true"
class="css-4nyv12-getIconStyles"
color="neutral60"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m19.285 20.718-5.736-5.735a6.242 6.242 0 0 1-3.892 1.331q-2.79 0-4.723-1.932Q3 12.448 3 9.657t1.934-4.724Q6.867 3 9.657 3t4.725 1.933q1.932 1.934 1.932 4.724a6.24 6.24 0 0 1-1.331 3.892l5.761 5.761a.94.94 0 0 1 .282.691.98.98 0 0 1-.308.717.97.97 0 0 1-.717.282.97.97 0 0 1-.716-.282m-9.628-6.452q1.92 0 3.265-1.344 1.344-1.344 1.344-3.265 0-1.92-1.344-3.265-1.344-1.344-3.265-1.344-1.92 0-3.265 1.344-1.344 1.345-1.344 3.265t1.344 3.265q1.345 1.344 3.265 1.344"
/>
</svg>
</div>
</div>
</div>
<input
name="some-name"
type="hidden"
value=""
/>
</div>
</div>
</div>
</div>
</div>
</body>
at Object.getElementError (node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/config.js:37:19)
at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
at node_modules/@testing-library/react/node_modules/@testing-library/dom/dist/query-
|
|
SelectableSearchInput › should forward data-attributes:
packages/components/inputs/selectable-search-input/src/selectable-search-input.spec.tsx#L124
TestingLibraryElementError: Found a label with the text of: test-label, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.
Ignored nodes: comments, script, style
<body>
<div>
<div>
<label
for="test-id.textInput"
>
test-label
</label>
<div
class="css-z178qm-Horizontal-getConstraintStyles-Horizontal"
>
<div
class="css-oaang6-Container encv1cf0"
data-testid="selectable-search-input-container"
>
<div
class="css-1de0v14-Horizontal-getConstraintStyles-Horizontal"
>
<div
class=" css-1xxxik6-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-2-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
role="log"
/>
<div
class=" css-15x0u52-control"
>
<div
class=" css-1bltetp"
>
<div
class=" css-1h1jzv2-singleValue"
>
<label
for="selectable-search-input-1.dropdown"
>
Foo
</label>
</div>
<div
class=" css-19bb58m"
data-value=""
>
<input
aria-activedescendant=""
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class=""
id="selectable-search-input-1.dropdown"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class=" css-c0onoj"
>
<span
class=" css-354gdm-indicatorSeparator"
/>
<div
aria-hidden="true"
class=" css-1pc6xv4"
>
<svg
aria-hidden="true"
class="css-1hy5pea-getIconStyles"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.666 7.405a1.05 1.05 0 0 0-.791-.353H4.125q-.457 0-.791.353A1.18 1.18 0 0 0 3 8.243q0 .484.334.838l7.875 8.34q.334.354.791.354t.791-.354l7.875-8.34A1.18 1.18 0 0 0 21 8.243q0-.483-.334-.838"
fill-rule="evenodd"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div
class="css-k3p1sn-getSelectableSearchInputContainerStyles-getSelectableSearchInputContainerStyles-SelectableSearchInput"
>
<input
class="css-15khiu1-getInputStyles-getSelectableSearchInputStyles"
contenteditable="true"
data-foo="bar"
data-testid="selectable-input"
id="selectable-search-input-1.textInput"
type="text"
value="test-value"
/>
<b
|
|
SelectableSearchInput › should have an HTML name based on the passed name:
packages/components/inputs/selectable-search-input/src/selectable-search-input.spec.tsx#L132
TestingLibraryElementError: Found a label with the text of: test-label, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.
Ignored nodes: comments, script, style
<body>
<div>
<div>
<label
for="test-id.textInput"
>
test-label
</label>
<div
class="css-z178qm-Horizontal-getConstraintStyles-Horizontal"
>
<div
class="css-oaang6-Container encv1cf0"
data-testid="selectable-search-input-container"
>
<div
class="css-1de0v14-Horizontal-getConstraintStyles-Horizontal"
>
<div
class=" css-1xxxik6-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-3-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
role="log"
/>
<div
class=" css-15x0u52-control"
>
<div
class=" css-1bltetp"
>
<div
class=" css-1h1jzv2-singleValue"
>
<label
for="selectable-search-input-2.dropdown"
>
Foo
</label>
</div>
<div
class=" css-19bb58m"
data-value=""
>
<input
aria-activedescendant=""
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class=""
id="selectable-search-input-2.dropdown"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class=" css-c0onoj"
>
<span
class=" css-354gdm-indicatorSeparator"
/>
<div
aria-hidden="true"
class=" css-1pc6xv4"
>
<svg
aria-hidden="true"
class="css-1hy5pea-getIconStyles"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.666 7.405a1.05 1.05 0 0 0-.791-.353H4.125q-.457 0-.791.353A1.18 1.18 0 0 0 3 8.243q0 .484.334.838l7.875 8.34q.334.354.791.354t.791-.354l7.875-8.34A1.18 1.18 0 0 0 21 8.243q0-.483-.334-.838"
fill-rule="evenodd"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div
class="css-k3p1sn-getSelectableSearchInputContainerStyles-getSelectableSearchInputContainerStyles-SelectableSearchInput"
>
<input
class="css-15khiu1-getInputStyles-getSelectableSearchInputStyles"
contenteditable="true"
data-testid="selectable-input"
id="selectable-search-input-2.textInput"
type="text"
value="test-value"
/>
<button
aria-disa
|
|
SelectableSearchInput › should pass autoComplete:
packages/components/inputs/selectable-search-input/src/selectable-search-input.spec.tsx#L140
TestingLibraryElementError: Found a label with the text of: test-label, however no form control was found associated to that label. Make sure you're using the "for" attribute or "aria-labelledby" attribute correctly.
Ignored nodes: comments, script, style
<body>
<div>
<div>
<label
for="test-id.textInput"
>
test-label
</label>
<div
class="css-z178qm-Horizontal-getConstraintStyles-Horizontal"
>
<div
class="css-oaang6-Container encv1cf0"
data-testid="selectable-search-input-container"
>
<div
class="css-1de0v14-Horizontal-getConstraintStyles-Horizontal"
>
<div
class=" css-1xxxik6-container"
>
<span
class="css-1f43avz-a11yText-A11yText"
id="react-select-4-live-region"
/>
<span
aria-atomic="false"
aria-live="polite"
aria-relevant="additions text"
class="css-1f43avz-a11yText-A11yText"
role="log"
/>
<div
class=" css-15x0u52-control"
>
<div
class=" css-1bltetp"
>
<div
class=" css-1h1jzv2-singleValue"
>
<label
for="selectable-search-input-3.dropdown"
>
Foo
</label>
</div>
<div
class=" css-19bb58m"
data-value=""
>
<input
aria-activedescendant=""
aria-autocomplete="list"
aria-expanded="false"
aria-haspopup="true"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
class=""
id="selectable-search-input-3.dropdown"
role="combobox"
spellcheck="false"
style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
tabindex="0"
type="text"
value=""
/>
</div>
</div>
<div
class=" css-c0onoj"
>
<span
class=" css-354gdm-indicatorSeparator"
/>
<div
aria-hidden="true"
class=" css-1pc6xv4"
>
<svg
aria-hidden="true"
class="css-1hy5pea-getIconStyles"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.666 7.405a1.05 1.05 0 0 0-.791-.353H4.125q-.457 0-.791.353A1.18 1.18 0 0 0 3 8.243q0 .484.334.838l7.875 8.34q.334.354.791.354t.791-.354l7.875-8.34A1.18 1.18 0 0 0 21 8.243q0-.483-.334-.838"
fill-rule="evenodd"
/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div
class="css-k3p1sn-getSelectableSearchInputContainerStyles-getSelectableSearchInputContainerStyles-SelectableSearchInput"
>
<input
autocomplete="off"
class="css-15khiu1-getInputStyles-getSelectableSearchInputStyles"
contenteditable="true"
data-testid="selectable-input"
id="selectable-search-input-3.textInput"
type="text"
value="test-value"
/>
|
|
build_lint_and_test
The `set-output` command is deprecated and will be disabled soon. Please upgrade to using Environment Files. For more information see: https://github.blog/changelog/2022-10-11-github-actions-deprecating-save-state-and-set-output-commands/
|