feat: Add filter, search and added few style updates #10
anitta-keyvalueAnnotations
10 errors
|
tests/components/TableHeader.test.tsx > TableHeader > applies filter theme styles correctly:
tests/components/TableHeader.test.tsx#L187
TestingLibraryElementError: Unable to find an element with the placeholder text of: Filter Name...
Ignored nodes: comments, script, style
<body>
<div>
<thead>
<tr>
<th
class="fixed-width-col"
style="background-color: rgb(240, 240, 240); color: rgb(0, 0, 0); border-color: rgb(224, 224, 224);"
>
<div
class="table-header-cell"
>
<span
style="width: 12px;"
/>
<span
style="display: inline-flex; align-items: center; cursor: default; user-select: none;"
>
Name
<span
class="sort-icon"
style="margin-left: 4px;"
>
</span>
</span>
</div>
</th>
</tr>
</thead>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/components/TableHeader.test.tsx:187:32
|
|
tests/components/TableHeader.test.tsx > TableHeader > renders filter input when column has Filter component:
tests/components/TableHeader.test.tsx#L177
TestingLibraryElementError: Unable to find an element with the placeholder text of: Filter Name...
Ignored nodes: comments, script, style
<body>
<div>
<thead>
<tr>
<th
class="fixed-width-col"
style="background-color: rgb(240, 240, 240); color: rgb(0, 0, 0); border-color: rgb(224, 224, 224);"
>
<div
class="table-header-cell"
>
<span
style="width: 12px;"
/>
<span
style="display: inline-flex; align-items: center; cursor: default; user-select: none;"
>
Name
<span
class="sort-icon"
style="margin-left: 4px;"
>
</span>
</span>
</div>
</th>
</tr>
</thead>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/components/TableHeader.test.tsx:177:32
|
|
tests/components/TableCell.test.tsx > TableCell > calls onToggle when expand button is clicked:
tests/components/TableCell.test.tsx#L88
TestingLibraryElementError: Unable to find an accessible element with the role "button"
Here are the accessible roles:
cell:
Name "Test Cell Content":
<td
class="table-cell fixed-width-col"
role="cell"
style="padding-left: 0px; color: rgb(0, 0, 0); border-color: rgb(204, 204, 204);"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<td
class="table-cell fixed-width-col"
role="cell"
style="padding-left: 0px; color: rgb(0, 0, 0); border-color: rgb(204, 204, 204);"
>
<div
class="table-cell-content"
>
<div
class="expand-button"
>
<span
class="expand-icon"
style="display: inline-flex; align-items: center; transition: transform 0.2s; transform: rotate(0deg);"
>
<svg
fill="none"
height="24"
style="display: block;"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 18L15 12L9 6"
stroke="#7E7E7E"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</span>
</div>
Test Cell Content
</div>
</td>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/components/TableCell.test.tsx:88:33
|
|
tests/components/TableCell.test.tsx > TableCell > renders expand button when hasChildren is true:
tests/components/TableCell.test.tsx#L57
TestingLibraryElementError: Unable to find an accessible element with the role "button"
Here are the accessible roles:
cell:
Name "Test Cell Content":
<td
class="table-cell fixed-width-col"
role="cell"
style="padding-left: 0px; color: rgb(0, 0, 0); border-color: rgb(204, 204, 204);"
/>
--------------------------------------------------
Ignored nodes: comments, script, style
<body>
<div>
<td
class="table-cell fixed-width-col"
role="cell"
style="padding-left: 0px; color: rgb(0, 0, 0); border-color: rgb(204, 204, 204);"
>
<div
class="table-cell-content"
>
<div
class="expand-button"
>
<span
class="expand-icon"
style="display: inline-flex; align-items: center; transition: transform 0.2s; transform: rotate(0deg);"
>
<svg
fill="none"
height="24"
style="display: block;"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 18L15 12L9 6"
stroke="#7E7E7E"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</span>
</div>
Test Cell Content
</div>
</td>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/components/TableCell.test.tsx:57:33
|
|
tests/components/MultiLevelTable.test.tsx > MultiLevelTable > handles filtering:
tests/components/MultiLevelTable.test.tsx#L226
TestingLibraryElementError: Unable to find an element with the placeholder text of: Filter name...
Ignored nodes: comments, script, style
<body>
<div>
<div
style="background-color: rgb(255, 255, 255);"
>
<div
class="table-wrapper"
>
<div
style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; gap: 1rem;"
>
<div
style="min-width: 0; max-width: 400px; position: relative;"
>
<span
style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; display: flex; align-items: center;"
>
<svg
fill="none"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
stroke="#595959"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
</svg>
</span>
<input
class="mlt-search-input"
placeholder="Search"
style="width: 100%; padding: 0.5rem 0.5rem 0.5rem 2.5rem; border-radius: 8px; border: 1px solid rgb(224, 224, 224); background-color: rgb(255, 255, 255); color: rgb(44, 62, 80); font-size: 0.875rem; outline: none; transition: border 0.2s;"
type="text"
value=""
/>
</div>
<div
style="display: flex; gap: 0.5rem; flex-shrink: 0;"
>
<button
style="padding: 0.5rem 1rem; border-radius: 4px; border: 1px solid rgb(224, 224, 224); background-color: rgb(255, 255, 255); color: rgb(44, 62, 80); cursor: pointer; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem;"
>
<span>
Export
</span>
</button>
</div>
</div>
<table
class="main-table-container"
role="table"
style="border-color: rgb(224, 224, 224);"
>
<thead>
<tr
role="row"
>
<th
class="fixed-width-col"
style="background-color: rgb(44, 62, 80); color: rgb(255, 255, 255); border-color: rgb(224, 224, 224);"
>
<div
class="table-header-cell"
>
<span
style="width: 12px;"
/>
<span
style="display: inline-flex; align-items: center; cursor: default; user-select: none;"
>
Name
<span
class="sort-icon"
style="margin-left: 4px;"
>
</span>
</span>
</div>
</th>
<th
class="fixed-width-col"
style="background-color: rgb(44, 62, 80); color: rgb(255, 255, 255); border-color: rgb(224, 224, 224);"
>
<div
class="table-header-cell"
>
<span
style="width: 12px;"
/>
<span
style="display: inline-flex; align-items: center; cursor: default; user-select: none;"
>
Value
<span
class="sort-icon"
style="margin-left: 4px;"
>
</span>
</span>
</div>
</th>
<th
class="fixed-width-col"
style="bac
|
|
tests/components/MultiLevelTable.test.tsx > MultiLevelTable > handles row expansion and collapse:
tests/components/MultiLevelTable.test.tsx#L106
TestingLibraryElementError: Unable to find an element with the text: Child 1.1. 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
style="background-color: rgb(255, 255, 255);"
>
<div
class="table-wrapper"
>
<div
style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; gap: 1rem;"
>
<div
style="min-width: 0; max-width: 400px; position: relative;"
>
<span
style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; display: flex; align-items: center;"
>
<svg
fill="none"
height="24"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21 21L16.65 16.65M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
stroke="#595959"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="1.5"
/>
</svg>
</span>
<input
class="mlt-search-input"
placeholder="Search"
style="width: 100%; padding: 0.5rem 0.5rem 0.5rem 2.5rem; border-radius: 8px; border: 1px solid rgb(224, 224, 224); background-color: rgb(255, 255, 255); color: rgb(44, 62, 80); font-size: 0.875rem; outline: none; transition: border 0.2s;"
type="text"
value=""
/>
</div>
<div
style="display: flex; gap: 0.5rem; flex-shrink: 0;"
>
<button
style="padding: 0.5rem 1rem; border-radius: 4px; border: 1px solid rgb(224, 224, 224); background-color: rgb(255, 255, 255); color: rgb(44, 62, 80); cursor: pointer; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem;"
>
<span>
Export
</span>
</button>
</div>
</div>
<table
class="main-table-container"
role="table"
style="border-color: rgb(224, 224, 224);"
>
<thead>
<tr
role="row"
>
<th
class="fixed-width-col"
style="background-color: rgb(44, 62, 80); color: rgb(255, 255, 255); border-color: rgb(224, 224, 224);"
>
<div
class="table-header-cell"
>
<span
style="width: 12px;"
/>
<span
style="display: inline-flex; align-items: center; cursor: default; user-select: none;"
>
Name
<span
class="sort-icon"
style="margin-left: 4px;"
>
</span>
</span>
</div>
</th>
<th
class="fixed-width-col"
style="background-color: rgb(44, 62, 80); color: rgb(255, 255, 255); border-color: rgb(224, 224, 224);"
>
<div
class="table-header-cell"
>
<span
style="width: 12px;"
/>
<span
style="display: inline-flex; align-items: center; cursor: default; user-select: none;"
>
Value
<span
class="sort-icon"
style="margin-left: 4px;"
>
</span>
|
|
tests/components/ExpandIcon.test.tsx > ExpandIcon > renders without theme color when not provided:
tests/components/ExpandIcon.test.tsx#L51
TestingLibraryElementError: Unable to find an element with the text: ▼. 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>
<span
class="expand-icon"
style="display: inline-flex; align-items: center; transition: transform 0.2s; transform: rotate(90deg);"
>
<svg
fill="none"
height="24"
style="display: block;"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 18L15 12L9 6"
stroke="#7E7E7E"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</span>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/components/ExpandIcon.test.tsx:51:25
|
|
tests/components/ExpandIcon.test.tsx > ExpandIcon > applies custom theme color when provided:
tests/components/ExpandIcon.test.tsx#L42
TestingLibraryElementError: Unable to find an element with the text: ▼. 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>
<span
class="expand-icon"
style="color: rgb(255, 0, 0); display: inline-flex; align-items: center; transition: transform 0.2s; transform: rotate(90deg);"
>
<svg
fill="none"
height="24"
style="display: block;"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 18L15 12L9 6"
stroke="#FF0000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</span>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/components/ExpandIcon.test.tsx:42:25
|
|
tests/components/ExpandIcon.test.tsx > ExpandIcon > renders collapsed icon (▶) when isExpanded is false:
tests/components/ExpandIcon.test.tsx#L27
TestingLibraryElementError: Unable to find an element with the text: ▶. 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>
<span
class="expand-icon"
style="color: rgb(0, 0, 0); display: inline-flex; align-items: center; transition: transform 0.2s; transform: rotate(0deg);"
>
<svg
fill="none"
height="24"
style="display: block;"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 18L15 12L9 6"
stroke="#000000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</span>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/components/ExpandIcon.test.tsx:27:25
|
|
tests/components/ExpandIcon.test.tsx > ExpandIcon > renders expanded icon (▼) when isExpanded is true:
tests/components/ExpandIcon.test.tsx#L18
TestingLibraryElementError: Unable to find an element with the text: ▼. 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>
<span
class="expand-icon"
style="color: rgb(0, 0, 0); display: inline-flex; align-items: center; transition: transform 0.2s; transform: rotate(90deg);"
>
<svg
fill="none"
height="24"
style="display: block;"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9 18L15 12L9 6"
stroke="#000000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
/>
</svg>
</span>
</div>
</body>
❯ Object.getElementError node_modules/@testing-library/dom/dist/config.js:37:19
❯ node_modules/@testing-library/dom/dist/query-helpers.js:76:38
❯ node_modules/@testing-library/dom/dist/query-helpers.js:52:17
❯ node_modules/@testing-library/dom/dist/query-helpers.js:95:19
❯ tests/components/ExpandIcon.test.tsx:18:25
|