Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Display issue with rows in Tabulator during testing #4492

Open
TPAYRAUD opened this issue May 8, 2024 · 0 comments
Open

Display issue with rows in Tabulator during testing #4492

TPAYRAUD opened this issue May 8, 2024 · 0 comments
Labels
Possible Bug A possible bug that needs investigation

Comments

@TPAYRAUD
Copy link

TPAYRAUD commented May 8, 2024 •
edited

Describe the bug
I want to use Tabulator in a test run via Vitest.
I would like to verify that the table indeed contains 5 rows in my test.
The issue is that only the table headers appear in the DOM, but not the rows.

Tabulator Info
I'm using Tabulator version 6.2.1.

Working Example
This is the link to the projet : https://github.com/TPAYRAUD/vue-tabulator-vitest
You can reproduct to launch tests in MyTabulator.spec.js file.
WARNING : ONLY RUN THE TEST, THE DEV VERSION DOESN'T WORK !

To Reproduce
Clone Github project : https://github.com/TPAYRAUD/vue-tabulator-vitest

  1. Follow README instructions
  2. Go to MyTabulator.spec.js
  3. Click on MyTabulator -> renders properly
  4. Check result should be :
AssertionError: expected [] to have a length of 5 but got +0
Expected :5
Actual   :0


The DOM should be equals to :

<div class="tabulator" role="grid" tabulator-layout="fitColumns" style="height: 205px;">
    <div class="tabulator-header" role="rowgroup">
        <div class="tabulator-header-contents" role="rowgroup">
            <div class="tabulator-headers" role="row" style="height: 24px;">
                <div class="tabulator-col tabulator-sortable tabulator-col-sorter-element" role="columnheader"
                     aria-sort="none" tabulator-field="name" style="min-width: 40px; width: 150px; height: 24px;">
                    <div class="tabulator-col-content">
                        <div class="tabulator-col-title-holder">
                            <div class="tabulator-col-title">Name</div>
                            <div class="tabulator-col-sorter">
                                <div class="tabulator-arrow"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span>
                <div class="tabulator-col tabulator-sortable tabulator-col-sorter-element" role="columnheader"
                     aria-sort="none" tabulator-field="age" style="min-width: 40px; width: 578px; height: 24px;">
                    <div class="tabulator-col-content">
                        <div class="tabulator-col-title-holder">
                            <div class="tabulator-col-title">Age</div>
                            <div class="tabulator-col-sorter">
                                <div class="tabulator-arrow"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span>
                <div class="tabulator-col tabulator-sortable tabulator-col-sorter-element" role="columnheader"
                     aria-sort="none" tabulator-field="col" style="min-width: 40px; width: 578px; height: 24px;">
                    <div class="tabulator-col-content">
                        <div class="tabulator-col-title-holder">
                            <div class="tabulator-col-title">Favourite Color</div>
                            <div class="tabulator-col-sorter">
                                <div class="tabulator-arrow"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span>
                <div class="tabulator-col tabulator-sortable tabulator-col-sorter-element" role="columnheader"
                     aria-sort="none" tabulator-field="dob" style="min-width: 40px; width: 580px; height: 24px;">
                    <div class="tabulator-col-content">
                        <div class="tabulator-col-title-holder">
                            <div class="tabulator-col-title">Date Of Birth</div>
                            <div class="tabulator-col-sorter">
                                <div class="tabulator-arrow"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span></div>
            <br>
            <div class="tabulator-frozen-rows-holder" style="min-width: 0px;"></div>
        </div>
    </div>
    <div class="tabulator-tableholder" tabindex="0"
         style="height: calc(100% - 25px); max-height: calc(100% - 25px);">
        <div class="tabulator-table" role="rowgroup" style="padding-top: 0px; padding-bottom: 0px;">
            <div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row">
                <div class="tabulator-cell" role="gridcell" tabulator-field="name"
                     style="width: 150px; height: 24px;">Oli Bob
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span>
                <div class="tabulator-cell" role="gridcell" tabulator-field="age" aria-label="12"
                     style="width: 578px; text-align: left; min-width: 30px; position: relative; height: 24px;">
                    <div style="position: relative; width: 100%; height: 100%;">
                        <div data-max="100" data-min="0"
                             style="display: inline-block; width: 12%; background-color: rgb(45, 194, 20); height: 100%;"></div>
                    </div>
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span>
                <div class="tabulator-cell" role="gridcell" tabulator-field="col"
                     style="width: 578px; height: 24px;">red
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span>
                <div class="tabulator-cell" role="gridcell" tabulator-field="dob"
                     style="width: 580px; text-align: center; height: 24px;">&nbsp;
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span></div>
            <div class="tabulator-row tabulator-selectable tabulator-row-even" role="row">
                <div class="tabulator-cell" role="gridcell" tabulator-field="name"
                     style="width: 150px; height: 24px;">Mary May
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span>
                <div class="tabulator-cell" role="gridcell" tabulator-field="age" aria-label="1"
                     style="width: 578px; text-align: left; min-width: 30px; position: relative; height: 24px;">
                    <div style="position: relative; width: 100%; height: 100%;">
                        <div data-max="100" data-min="0"
                             style="display: inline-block; width: 1%; background-color: rgb(45, 194, 20); height: 100%;"></div>
                    </div>
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span>
                <div class="tabulator-cell" role="gridcell" tabulator-field="col"
                     style="width: 578px; height: 24px;">blue
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span>
                <div class="tabulator-cell" role="gridcell" tabulator-field="dob"
                     style="width: 580px; text-align: center; height: 24px;">14/05/1982
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span></div>
            <div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row">
                <div class="tabulator-cell" role="gridcell" tabulator-field="name"
                     style="width: 150px; height: 24px;">Christine Lobowski
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span>
                <div class="tabulator-cell" role="gridcell" tabulator-field="age" aria-label="42"
                     style="width: 578px; text-align: left; min-width: 30px; position: relative; height: 24px;">
                    <div style="position: relative; width: 100%; height: 100%;">
                        <div data-max="100" data-min="0"
                             style="display: inline-block; width: 42%; background-color: rgb(45, 194, 20); height: 100%;"></div>
                    </div>
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span>
                <div class="tabulator-cell" role="gridcell" tabulator-field="col"
                     style="width: 578px; height: 24px;">green
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span>
                <div class="tabulator-cell" role="gridcell" tabulator-field="dob"
                     style="width: 580px; text-align: center; height: 24px;">22/05/1982
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span></div>
            <div class="tabulator-row tabulator-selectable tabulator-row-even" role="row">
                <div class="tabulator-cell" role="gridcell" tabulator-field="name"
                     style="width: 150px; height: 24px;">Brendon Philips
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span>
                <div class="tabulator-cell" role="gridcell" tabulator-field="age" aria-label="100"
                     style="width: 578px; text-align: left; min-width: 30px; position: relative; height: 24px;">
                    <div style="position: relative; width: 100%; height: 100%;">
                        <div data-max="100" data-min="0"
                             style="display: inline-block; width: 100%; background-color: rgb(45, 194, 20); height: 100%;"></div>
                    </div>
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span>
                <div class="tabulator-cell" role="gridcell" tabulator-field="col"
                     style="width: 578px; height: 24px;">orange
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span>
                <div class="tabulator-cell" role="gridcell" tabulator-field="dob"
                     style="width: 580px; text-align: center; height: 24px;">01/08/1980
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span></div>
            <div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row">
                <div class="tabulator-cell" role="gridcell" tabulator-field="name"
                     style="width: 150px; height: 24px;">Margret Marmajuke
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span>
                <div class="tabulator-cell" role="gridcell" tabulator-field="age" aria-label="16"
                     style="width: 578px; text-align: left; min-width: 30px; position: relative; height: 24px;">
                    <div style="position: relative; width: 100%; height: 100%;">
                        <div data-max="100" data-min="0"
                             style="display: inline-block; width: 16%; background-color: rgb(45, 194, 20); height: 100%;"></div>
                    </div>
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span>
                <div class="tabulator-cell" role="gridcell" tabulator-field="col"
                     style="width: 578px; height: 24px;">yellow
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span>
                <div class="tabulator-cell" role="gridcell" tabulator-field="dob"
                     style="width: 580px; text-align: center; height: 24px;">31/01/1999
                </div>
                <span class="tabulator-col-resize-handle" style="height: 24px;"></span></div>
        </div>
    </div>
</div>

But is :

<div class="tabulator" role="grid" style="height: 205px;" tabulator-layout="fitColumns">
  <div class="tabulator-header" role="rowgroup">
    <div class="tabulator-header-contents" role="rowgroup">
      <div class="tabulator-headers" role="row" style="height: 0px;">
        <div class="tabulator-col tabulator-sortable tabulator-col-sorter-element" role="columnheader" aria-sort="none" tabulator-field="name" style="min-width: 40px; width: 150px; height: 0px;">
          <div class="tabulator-col-content">
            <div class="tabulator-col-title-holder">
              <div class="tabulator-col-title">Name</div>
              <div class="tabulator-col-sorter">
                <div class="tabulator-arrow"></div>
              </div>
            </div>
          </div>
        </div><span class="tabulator-col-resize-handle" style="height: 0px;"></span>
        <div class="tabulator-col tabulator-sortable tabulator-col-sorter-element" role="columnheader" aria-sort="none" tabulator-field="age" style="min-width: 40px; width: 40px; height: 0px;">
          <div class="tabulator-col-content">
            <div class="tabulator-col-title-holder">
              <div class="tabulator-col-title">Age</div>
              <div class="tabulator-col-sorter">
                <div class="tabulator-arrow"></div>
              </div>
            </div>
          </div>
        </div><span class="tabulator-col-resize-handle" style="height: 0px;"></span>
        <div class="tabulator-col tabulator-sortable tabulator-col-sorter-element" role="columnheader" aria-sort="none" tabulator-field="col" style="min-width: 40px; width: 40px; height: 0px;">
          <div class="tabulator-col-content">
            <div class="tabulator-col-title-holder">
              <div class="tabulator-col-title">Favourite Color</div>
              <div class="tabulator-col-sorter">
                <div class="tabulator-arrow"></div>
              </div>
            </div>
          </div>
        </div><span class="tabulator-col-resize-handle" style="height: 0px;"></span>
        <div class="tabulator-col tabulator-sortable tabulator-col-sorter-element" role="columnheader" aria-sort="none" tabulator-field="dob" style="min-width: 40px; width: 40px; height: 0px;">
          <div class="tabulator-col-content">
            <div class="tabulator-col-title-holder">
              <div class="tabulator-col-title">Date Of Birth</div>
              <div class="tabulator-col-sorter">
                <div class="tabulator-arrow"></div>
              </div>
            </div>
          </div>
        </div><span class="tabulator-col-resize-handle" style="height: 0px;"></span>
      </div><br>
      <div class="tabulator-frozen-rows-holder" style="min-width: 0px;"></div>
    </div>
  </div>
  <div class="tabulator-tableholder" tabindex="0" style="min-height: falsepx; height: calc(100% - 0px); max-height: calc(100% - 0px);">
    <div class="tabulator-table" role="rowgroup"></div>
  </div>
</div>

As you can see, the table rows are not present in the HTML.

<div class="tabulator-table" role="rowgroup"></div>

Expected behavior
The expected behavior is to have the second DOM identical to the first one, meaning that the table rows are correctly generated in my test

Additional context
I want to run unit tests in my application, but I'm stuck because of Tabulator.
@TPAYRAUD TPAYRAUD added the Possible Bug A possible bug that needs investigation label May 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Possible Bug A possible bug that needs investigation
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@TPAYRAUD