How to Test @salt-ds/data-grid

[efriandika]

Hello,

Currently we are using @salt-ds/data-grid for your new UI app and we use @testing-library/react for testing.

However, It looks like @salt-ds/data-grid is not testable using react-testing-library. Is there a way how to test it?
or am I missing something?

This is what get when we render it in react testing library (it is not displaying data what we expect):

<div
        aria-colcount="3"
        aria-multiselectable="false"
        aria-rowcount="2"
        class="saltGrid saltGrid-pinnedSeparators saltGrid-primaryBackground grid-auto-height"
        data-name="grid-root"
        role="grid"
        style="--grid-total-width: 750px; --grid-total-height: 1px; --grid-topPart-height: 0px; --grid-leftPart-width: 0px; --grid-rightPart-width: 0px; --grid-bodyVisibleColumns-width: 0px; --grid-bodyVisibleArea-top: 0px; --grid-bodyVisibleArea-left: 0px; --grid-bottomHeight: 0px; --grid-headerVisibleColumns-width: 0px; --grid-headerVisibleArea-left: 0px; --grid-scrollBar-height: 0px; --grid-scrollBar-width: 0px;"
      >
        <div
          class="saltGridCellMeasure"
        >
          <table
            aria-hidden="true"
          >
            <thead>
              <tr>
                <th>
                  Invisible Cell
                </th>
              </tr>
            </thead>
          </table>
        </div>
        <div
          class="saltGridScrollable"
          data-testid="grid-scrollable"
        >
          <div
            class="saltGridScrollable-space"
          />
        </div>
        <div
          class="saltGridTopPart"
          data-testid="grid-top-part"
        >
          <div
            class="saltGridTopPart-space"
          >
            <table
              role="presentation"
            >
              <colgroup />
              <thead>
                <tr
                  class="saltGridHeaderRow"
                  role="row"
                />
              </thead>
            </table>
          </div>
        </div>
        <div
          class="saltGridMiddlePart"
          data-testid="grid-middle-part"
        >
          <div
            class="saltGridMiddlePart-space"
          >
            <table
              role="presentation"
            >
              <colgroup />
              <tbody />
            </table>
          </div>
        </div>

[mark-tate]

we have parked @salt-ds/data-grid for now and have switched our priorties to providing an AG-Grid theme that matches the design language.

@salt-ds/ag-grid-theme