feat: switch component #38
ionutaninAnnotations
8 errors
|
Switch › renders without crashing:
src/components/__tests__/switch.test.tsx#L11
TestingLibraryElementError: Unable to find an accessible element with the role "checkbox"
Here are the accessible roles:
switch:
Name "":
<input
class="peer absolute opacity-0 -translate-x-[100%] pointer-events-non"
role="switch"
type="checkbox"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<label>
<input
class="peer absolute opacity-0 -translate-x-[100%] pointer-events-non"
role="switch"
type="checkbox"
/>
<div
class="rounded-full bg-disabled-strong relative cursor-pointer transition-colors duration-300 ease-in-out before:content-[\"\"] before:absolute before:bg-white before:rounded-full before:top-1/2 before:transform before:-translate-y-1/2 before:left-[4px] before:transition-all before:duration-300 before:ease-in-out peer-checked:before:left-[18px] peer-checked:bg-switch-base peer-focus:outline peer-focus:outline-2 peer-focus:outline-blue-500 w-[42px] h-[26px] before:h-5 before:w-5"
/>
</label>
</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__/switch.test.tsx:11:19)
|
|
Switch › applies default classes:
src/components/__tests__/switch.test.tsx#L16
TestingLibraryElementError: Unable to find an accessible element with the role "checkbox"
Here are the accessible roles:
switch:
Name "":
<input
class="peer absolute opacity-0 -translate-x-[100%] pointer-events-non"
role="switch"
type="checkbox"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<label>
<input
class="peer absolute opacity-0 -translate-x-[100%] pointer-events-non"
role="switch"
type="checkbox"
/>
<div
class="rounded-full bg-disabled-strong relative cursor-pointer transition-colors duration-300 ease-in-out before:content-[\"\"] before:absolute before:bg-white before:rounded-full before:top-1/2 before:transform before:-translate-y-1/2 before:left-[4px] before:transition-all before:duration-300 before:ease-in-out peer-checked:before:left-[18px] peer-checked:bg-switch-base peer-focus:outline peer-focus:outline-2 peer-focus:outline-blue-500 w-[42px] h-[26px] before:h-5 before:w-5"
/>
</label>
</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__/switch.test.tsx:16:34)
|
|
Switch › applies small size classes when size prop is small:
src/components/__tests__/switch.test.tsx#L22
TestingLibraryElementError: Unable to find an accessible element with the role "checkbox"
Here are the accessible roles:
switch:
Name "":
<input
class="peer absolute opacity-0 -translate-x-[100%] pointer-events-non"
role="switch"
type="checkbox"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<label>
<input
class="peer absolute opacity-0 -translate-x-[100%] pointer-events-non"
role="switch"
type="checkbox"
/>
<div
class="rounded-full bg-disabled-strong relative cursor-pointer transition-colors duration-300 ease-in-out before:content-[\"\"] before:absolute before:bg-white before:rounded-full before:top-1/2 before:transform before:-translate-y-1/2 before:transition-all before:duration-300 before:ease-in-out peer-checked:bg-switch-base peer-focus:outline peer-focus:outline-2 peer-focus:outline-blue-500 w-9 h-[22px] before:h-4 before:w-4 before:left-[3px] peer-checked:before:left-4"
/>
</label>
</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__/switch.test.tsx:22:34)
|
|
Switch › forwards checked prop to input element:
src/components/__tests__/switch.test.tsx#L34
TestingLibraryElementError: Unable to find an accessible element with the role "checkbox"
Here are the accessible roles:
switch:
Name "":
<input
checked=""
class="peer absolute opacity-0 -translate-x-[100%] pointer-events-non"
role="switch"
type="checkbox"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<label>
<input
checked=""
class="peer absolute opacity-0 -translate-x-[100%] pointer-events-non"
role="switch"
type="checkbox"
/>
<div
class="rounded-full bg-disabled-strong relative cursor-pointer transition-colors duration-300 ease-in-out before:content-[\"\"] before:absolute before:bg-white before:rounded-full before:top-1/2 before:transform before:-translate-y-1/2 before:left-[4px] before:transition-all before:duration-300 before:ease-in-out peer-checked:before:left-[18px] peer-checked:bg-switch-base peer-focus:outline peer-focus:outline-2 peer-focus:outline-blue-500 w-[42px] h-[26px] before:h-5 before:w-5"
/>
</label>
</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__/switch.test.tsx:34:33)
|
|
Switch › handles additional props:
src/components/__tests__/switch.test.tsx#L40
TestingLibraryElementError: Unable to find an accessible element with the role "checkbox"
Here are the accessible roles:
switch:
Name "Custom Switch":
<input
aria-label="Custom Switch"
class="peer absolute opacity-0 -translate-x-[100%] pointer-events-non"
role="switch"
type="checkbox"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<label>
<input
aria-label="Custom Switch"
class="peer absolute opacity-0 -translate-x-[100%] pointer-events-non"
role="switch"
type="checkbox"
/>
<div
class="rounded-full bg-disabled-strong relative cursor-pointer transition-colors duration-300 ease-in-out before:content-[\"\"] before:absolute before:bg-white before:rounded-full before:top-1/2 before:transform before:-translate-y-1/2 before:left-[4px] before:transition-all before:duration-300 before:ease-in-out peer-checked:before:left-[18px] peer-checked:bg-switch-base peer-focus:outline peer-focus:outline-2 peer-focus:outline-blue-500 w-[42px] h-[26px] before:h-5 before:w-5"
/>
</label>
</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__/switch.test.tsx:40:33)
|
|
Switch › applies custom class names:
src/components/__tests__/switch.test.tsx#L47
TestingLibraryElementError: Unable to find an accessible element with the role "checkbox"
Here are the accessible roles:
switch:
Name "":
<input
class="peer absolute opacity-0 -translate-x-[100%] pointer-events-non"
role="switch"
type="checkbox"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<label>
<input
class="peer absolute opacity-0 -translate-x-[100%] pointer-events-non"
role="switch"
type="checkbox"
/>
<div
class="rounded-full bg-disabled-strong relative cursor-pointer transition-colors duration-300 ease-in-out before:content-[\"\"] before:absolute before:bg-white before:rounded-full before:top-1/2 before:transform before:-translate-y-1/2 before:left-[4px] before:transition-all before:duration-300 before:ease-in-out peer-checked:before:left-[18px] peer-checked:bg-switch-base peer-focus:outline peer-focus:outline-2 peer-focus:outline-blue-500 w-[42px] h-[26px] before:h-5 before:w-5 custom-class"
/>
</label>
</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__/switch.test.tsx:47:34)
|
|
Switch › toggles switch state when clicked:
src/components/__tests__/switch.test.tsx#L53
TestingLibraryElementError: Unable to find an accessible element with the role "checkbox"
Here are the accessible roles:
switch:
Name "":
<input
class="peer absolute opacity-0 -translate-x-[100%] pointer-events-non"
role="switch"
type="checkbox"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<label>
<input
class="peer absolute opacity-0 -translate-x-[100%] pointer-events-non"
role="switch"
type="checkbox"
/>
<div
class="rounded-full bg-disabled-strong relative cursor-pointer transition-colors duration-300 ease-in-out before:content-[\"\"] before:absolute before:bg-white before:rounded-full before:top-1/2 before:transform before:-translate-y-1/2 before:left-[4px] before:transition-all before:duration-300 before:ease-in-out peer-checked:before:left-[18px] peer-checked:bg-switch-base peer-focus:outline peer-focus:outline-2 peer-focus:outline-blue-500 w-[42px] h-[26px] before:h-5 before:w-5"
/>
</label>
</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__/switch.test.tsx:53:33)
|
|
Test
Process completed with exit code 1.
|