vue.js - 在 Cypress 测试 Vue.js 应用程序期间禁用 Ag Grid 虚拟化

Question

如何在 Vue.js 应用程序的 Cypress 测试期间禁用 Ag Grid 的虚拟化？

由于 Ag 网格不会一次绘制所有内容，因此我必须模拟滚动来验证网格中的数据、网格行为等。这使得我的 Cypress/Mocha 测试变得很麻烦。

如果我能够设置 the suppressColumnVirtualisation and the suppressRowVirtualisation在运行测试之前，将所有 Ag Grid 实例设置为 true，我将在测试中获得更简单、更精简的代码。我在网上做了一些研究，但一无所获，希望有人知道如何实现这一目标。

Answer 1

当 Cypress 运行浏览器(即窗口)时，应该可以关闭虚拟化。

<template>
  <div style="height: 100%">
    <div style="height: 100%; box-sizing: border-box;">
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        class="ag-theme-alpine"
        :columnDefs="columnDefs"
        @grid-ready="onGridReady"
        :defaultColDef="defaultColDef"
        :suppressColumnVirtualisation="suppressVirtualisation"
        :suppressRowVirtualisation="suppressVirtualisation"
        :rowData="rowData">
      </ag-grid-vue>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
    'ag-grid-vue': AgGridVue,
  },
  data: function () {
    return {
      columnDefs: [..],
      ...
      suppressVirtualisation: false   // want virtualization on in the real world
    };
  },
  created() {                      
    if (window.Cypress) {                  // check if Cypress has control
      this.suppressVirtualisation = true   // turn off virtualization
    }
  },
}
</script>