feat: Radio group implementation #49
dianafulgaAnnotations
4 errors
|
RadioGroup › should have the `flex-row` class when the `inline` variant is passed:
src/components/__tests__/radio-group-test.tsx#L17
expect(received).toBeInTheDocument()
received value must be an HTMLElement or an SVGElement.
Received has value: null
at __EXTERNAL_MATCHER_TRAP__ (node_modules/.pnpm/[email protected]/node_modules/expect/build/index.js:325:30)
at Object.throwingMatcher [as toBeInTheDocument] (node_modules/.pnpm/[email protected]/node_modules/expect/build/index.js:326:15)
at Object.<anonymous> (src/components/__tests__/radio-group-test.tsx:17:37)
|
|
RadioGroup › renders radio group correctly with items:
src/components/__tests__/radio-group-test.tsx#L24
TestingLibraryElementError: Unable to find an accessible element with the role "tabpanel"
Here are the accessible roles:
radiogroup:
Name "":
<div
class="flex gap-3 flex-col outline-none"
role="radiogroup"
tabindex="-1"
/>
--------------------------------------------------
radio:
Name "Option 1":
<div
aria-checked="true"
class="flex items-center"
id="div-id-radioGroup-option1"
role="radio"
tabindex="0"
/>
Name "Option 1":
<input
checked=""
class="hidden"
id="id-radioGroup-option1"
name="radioGroup"
type="radio"
value="option1"
/>
Name "Option 2":
<div
aria-checked="false"
class="flex items-center"
id="div-id-radioGroup-option2"
role="radio"
tabindex="-1"
/>
Name "Option 2":
<input
class="hidden"
id="id-radioGroup-option2"
name="radioGroup"
type="radio"
value="option2"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
class="flex gap-3 flex-col outline-none"
role="radiogroup"
tabindex="-1"
>
<div
aria-checked="true"
class="flex items-center"
id="div-id-radioGroup-option1"
role="radio"
tabindex="0"
>
<input
checked=""
class="hidden"
id="id-radioGroup-option1"
name="radioGroup"
type="radio"
value="option1"
/>
<label
class="flex items-center"
for="id-radioGroup-option1"
>
<span
class="w-6 h-6 inline-block rounded-full border-2 border-base"
/>
<p
class="text-base text-medium leading-6 ms-2"
>
Option 1
</p>
</label>
</div>
<div
aria-checked="false"
class="flex items-center"
id="div-id-radioGroup-option2"
role="radio"
tabindex="-1"
>
<input
class="hidden"
id="id-radioGroup-option2"
name="radioGroup"
type="radio"
value="option2"
/>
<label
class="flex items-center"
for="id-radioGroup-option2"
>
<span
class="w-6 h-6 inline-block rounded-full border-2 border-base"
/>
<p
class="text-base text-medium leading-6 ms-2"
>
Option 2
</p>
</label>
</div>
</div>
</div>
</body>
at Object.getElementError (node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/config.js:37:19)
at node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:76:38
at node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:52:17
at node_modules/.pnpm/@testing-library[email protected]/node_modules/@testing-library/dom/dist/query-helpers.js:95:19
at Object.<anonymous> (src/components/__tests__/radio-group-test.tsx:24:24)
|
|
RadioGroup › handles keyboard navigation:
src/components/__tests__/radio-group-test.tsx#L61
expect(element).toBeChecked()
Received element is not checked:
<input checked="" class="hidden" id="id-radioGroup-option1" name="radioGroup" type="radio" value="option1" />
at Object.<anonymous> (src/components/__tests__/radio-group-test.tsx:61:30)
|
|
Test
Process completed with exit code 1.
|