reorganize code, install prettier for tailwind and format files #28
Annotations
3 errors
src/routes/Item.test.ts > The Item component > increases quantity on right arrow key press:
node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js#L332
TestingLibraryElementError: Unable to find an accessible element with the role "tree"
Here are the accessible roles:
treeitem:
Name "Test Item now delete":
<div
aria-expanded="false"
aria-selected="false"
class="select-none rounded-sm px-2 pt-[0.5px] transition transition-margin focus:outline-none "
id="1"
role="treeitem"
tabindex="-1"
/>
--------------------------------------------------
spinbutton:
Name "":
<input
class="stealth max-w-12 text-center decoration-1 underline-offset-1 focus:underline focus:outline-none"
max="99"
min="0"
type="number"
/>
--------------------------------------------------
textbox:
Name "":
<span
class="rounded-sm decoration-1 underline-offset-2 focus:outline-none false"
contenteditable=""
role="textbox"
tabindex="-1"
/>
--------------------------------------------------
button:
Name "delete":
<button
class="items-end transition hover:text-red-600"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
aria-expanded="false"
aria-selected="false"
class="select-none rounded-sm px-2 pt-[0.5px] transition transition-margin focus:outline-none "
id="1"
role="treeitem"
tabindex="-1"
>
<div
class="flex justify-between"
>
<span>
<input
class="stealth max-w-12 text-center decoration-1 underline-offset-1 focus:underline focus:outline-none"
max="99"
min="0"
type="number"
/>
<span
class="rounded-sm decoration-1 underline-offset-2 focus:outline-none false"
contenteditable=""
role="textbox"
tabindex="-1"
>
Test Item
</span>
</span>
<span>
<span
class="italic mix-blend-multiply text-stone-400"
>
now
</span>
<button
class="items-end transition hover:text-red-600"
>
delete
</button>
</span>
</div>
<div
aria-hidden="true"
aria-selected="false"
class="overflow-y-hidden bg-[#f3f1fd] px-3 text-sm mix-blend-multiply "
role="treeitem"
style="transition: all 0.1s ease-in-out; height: 0px;"
>
<div>
Edit date added:
<input
class="border-1 my-1 rounded-sm border border-dashed border-stone-400 px-1"
type="date"
/>
</div>
<div>
Edit shelf life:
<input
class="always-display-spinner border-1 sm mb-1 ml-3 w-fit max-w-12 rounded border border-dashed border-stone-400 text-center"
type="number"
/>
days
</div>
</div>
</div>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:332:19
❯ node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1196:25
❯ node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1175:17
❯ node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1218:19
❯ src/routes/Item.test.ts:72:23
|
src/routes/Item.test.ts > The Item component > decreases quantity on left arrow key press:
node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js#L332
TestingLibraryElementError: Unable to find an accessible element with the role "tree"
Here are the accessible roles:
treeitem:
Name "Test Item now delete":
<div
aria-expanded="false"
aria-selected="false"
class="select-none rounded-sm px-2 pt-[0.5px] transition transition-margin focus:outline-none "
id="1"
role="treeitem"
tabindex="-1"
/>
--------------------------------------------------
spinbutton:
Name "":
<input
class="stealth max-w-12 text-center decoration-1 underline-offset-1 focus:underline focus:outline-none"
max="99"
min="0"
type="number"
/>
--------------------------------------------------
textbox:
Name "":
<span
class="rounded-sm decoration-1 underline-offset-2 focus:outline-none false"
contenteditable=""
role="textbox"
tabindex="-1"
/>
--------------------------------------------------
button:
Name "delete":
<button
class="items-end transition hover:text-red-600"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<div
aria-expanded="false"
aria-selected="false"
class="select-none rounded-sm px-2 pt-[0.5px] transition transition-margin focus:outline-none "
id="1"
role="treeitem"
tabindex="-1"
>
<div
class="flex justify-between"
>
<span>
<input
class="stealth max-w-12 text-center decoration-1 underline-offset-1 focus:underline focus:outline-none"
max="99"
min="0"
type="number"
/>
<span
class="rounded-sm decoration-1 underline-offset-2 focus:outline-none false"
contenteditable=""
role="textbox"
tabindex="-1"
>
Test Item
</span>
</span>
<span>
<span
class="italic mix-blend-multiply text-stone-400"
>
now
</span>
<button
class="items-end transition hover:text-red-600"
>
delete
</button>
</span>
</div>
<div
aria-hidden="true"
aria-selected="false"
class="overflow-y-hidden bg-[#f3f1fd] px-3 text-sm mix-blend-multiply "
role="treeitem"
style="transition: all 0.1s ease-in-out; height: 0px;"
>
<div>
Edit date added:
<input
class="border-1 my-1 rounded-sm border border-dashed border-stone-400 px-1"
type="date"
/>
</div>
<div>
Edit shelf life:
<input
class="always-display-spinner border-1 sm mb-1 ml-3 w-fit max-w-12 rounded border border-dashed border-stone-400 text-center"
type="number"
/>
days
</div>
</div>
</div>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:332:19
❯ node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1196:25
❯ node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1175:17
❯ node_modules/@testing-library/dom/dist/@testing-library/dom.esm.js:1218:19
❯ src/routes/Item.test.ts:80:23
|
run-tests
Process completed with exit code 1.
|