[EuiDataGrid] Add unit tests for all toolbar control files + minor co…

…de cleanup (#5256) * Add unit tests for style_selector.tsx * Add unit tests for column_selector.tsx + add `data-test-subj` hooks for various things I need to interact with * [enhancement] column_selector.tsx improvements - memoize filteredColumns to not re-iterate on every rerender - only when sortedColumns or columnSearchText changes - memoize on onDragEnd and also convert to arrow function * Add unit tests for column_sorting_draggable.tsx - simpler non-hook component - uses shallow() and .renderProp() because otherwise react-beautiful-dnd errors on a lot of context things * Add unit tests for column_sorting.tsx + add `data-test-subj`s for hooks I need to * [enhancement] Misc sorting fixes/tweaks, doc improvements data_grid_types.ts: - Improve `isSortable` and `defaultSortDirection` to make distinction between these props at the schema level vs. column level clearer column_sorting.tsx: - line 73: sorting should be a general `!= null` instead of a specific `!== undefined` to match the other checks on the page; otherwise it fails when null is passed (which should still be valid for testing or users not using typescript) - line 77: since the hook only returns a single columnSorting component at the end and not an array of vars, we should also opt to return just null and not an array for better type consistency (NB: this doesn't appear to affect JSX which renders as empty either way) - line 98: switch to arrow function for consistency - line 102: fix browser console error when dragging a sort field outside of the droppable area/popover - line 255: use optional chaining notation for cleaner code/fewer calls * [PR feedback] Remove existing incomplete data-test-subj
elastic · Oct 11, 2021 · 788c822 · 788c822
1 parent 9efb171
commit 788c822
Show file tree

Hide file tree

Showing 12 changed files with 3,733 additions and 39 deletions.
diff --git a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting_draggable.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting_draggable.test.tsx.snap
@@ -0,0 +1,156 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiDataGridColumnSortingDraggable button group schema renders default A-Z sort text if the schema is unknown 1`] = `
+<EuiButtonGroup
+  buttonSize="compressed"
+  className="euiDataGridColumnSorting__order"
+  idSelected="columnAAsc"
+  isFullWidth={true}
+  legend="Select sorting method for Column A"
+  name="columnA"
+  onChange={[Function]}
+  options={
+    Array [
+      Object {
+        "data-test-subj": "euiDataGridColumnSorting-sortColumn-columnA-asc",
+        "id": "columnAAsc",
+        "label": <EuiI18n
+          default="A-Z"
+          token="euiColumnSortingDraggable.defaultSortAsc"
+        />,
+        "value": "asc",
+      },
+      Object {
+        "data-test-subj": "euiDataGridColumnSorting-sortColumn-columnA-desc",
+        "id": "columnADesc",
+        "label": <EuiI18n
+          default="Z-A"
+          token="euiColumnSortingDraggable.defaultSortDesc"
+        />,
+        "value": "desc",
+      },
+    ]
+  }
+/>
+`;
+
+exports[`EuiDataGridColumnSortingDraggable button group schema renders different asc/desc text when a known schema is passed 1`] = `
+<EuiButtonGroup
+  buttonSize="compressed"
+  className="euiDataGridColumnSorting__order"
+  idSelected="columnADesc"
+  isFullWidth={true}
+  legend="Select sorting method for Column A"
+  name="columnA"
+  onChange={[Function]}
+  options={
+    Array [
+      Object {
+        "data-test-subj": "euiDataGridColumnSorting-sortColumn-columnA-asc",
+        "id": "columnAAsc",
+        "label": <EuiI18n
+          default="False-True"
+          token="euiDataGridSchema.booleanSortTextAsc"
+        />,
+        "value": "asc",
+      },
+      Object {
+        "data-test-subj": "euiDataGridColumnSorting-sortColumn-columnA-desc",
+        "id": "columnADesc",
+        "label": <EuiI18n
+          default="True-False"
+          token="euiDataGridSchema.booleanSortTextDesc"
+        />,
+        "value": "desc",
+      },
+    ]
+  }
+/>
+`;
+
+exports[`EuiDataGridColumnSortingDraggable renders an EuiDraggable component of a single column that is currently being sorted 1`] = `
+<div
+  className="euiDataGridColumnSorting__item euiDataGridColumnSorting__item-isDragging"
+>
+  <EuiScreenReaderOnly>
+    <p>
+      <EuiI18n
+        default="{display} is sorting this data grid"
+        token="euiColumnSortingDraggable.activeSortLabel"
+        values={
+          Object {
+            "display": "Column A",
+          }
+        }
+      >
+        <Component />
+      </EuiI18n>
+    </p>
+  </EuiScreenReaderOnly>
+  <EuiFlexGroup
+    alignItems="center"
+    data-test-subj="euiDataGridColumnSorting-sortColumn-columnA"
+    gutterSize="xs"
+    responsive={false}
+  >
+    <EuiFlexItem
+      grow={false}
+    >
+      <EuiI18n
+        default="Remove {display} from data grid sort"
+        token="euiColumnSortingDraggable.removeSortLabel"
+        values={
+          Object {
+            "display": "Column A",
+          }
+        }
+      >
+        <Component />
+      </EuiI18n>
+    </EuiFlexItem>
+    <EuiFlexItem
+      grow={false}
+    >
+      <EuiToken
+        iconType="tokenNumber"
+      />
+    </EuiFlexItem>
+    <EuiFlexItem
+      aria-hidden={true}
+    >
+      <EuiText
+        size="xs"
+      >
+        <p>
+          Column A
+        </p>
+      </EuiText>
+    </EuiFlexItem>
+    <EuiFlexItem
+      className="euiDataGridColumnSorting__orderButtons"
+    >
+      <EuiI18n
+        default="Select sorting method for {display}"
+        token="euiColumnSortingDraggable.toggleLegend"
+        values={
+          Object {
+            "display": "Column A",
+          }
+        }
+      >
+        <Component />
+      </EuiI18n>
+    </EuiFlexItem>
+    <EuiFlexItem
+      grow={false}
+    >
+      <div>
+        <EuiIcon
+          color="subdued"
+          type="grab"
+        />
+      </div>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+`;
diff --git a/src/components/datagrid/controls/__snapshots__/style_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/style_selector.test.tsx.snap
@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useDataGridStyleSelector styleSelector renders a toolbar button/popover allowing users to customize styles 1`] = `
+<Fragment>
+  <EuiPopover
+    anchorPosition="downCenter"
+    button={
+      <EuiButtonEmpty
+        className="euiDataGrid__controlBtn"
+        color="text"
+        data-test-subj="dataGridStyleSelectorButton"
+        iconType="tableDensityExpanded"
+        onClick={[Function]}
+        size="xs"
+      >
+        <EuiI18n
+          default="Density"
+          token="euiStyleSelector.buttonText"
+        />
+      </EuiButtonEmpty>
+    }
+    closePopover={[Function]}
+    data-test-subj="dataGridStyleSelectorPopover"
+    display="inlineBlock"
+    hasArrow={true}
+    isOpen={false}
+    ownFocus={true}
+    panelClassName="euiDataGridColumnSelectorPopover"
+    panelPaddingSize="s"
+  >
+    <EuiI18n
+      defaults={
+        Array [
+          "Select the display density for the data grid",
+          "Expanded density",
+          "Normal density",
+          "Compact density",
+        ]
+      }
+      tokens={
+        Array [
+          "euiStyleSelector.buttonLegend",
+          "euiStyleSelector.labelExpanded",
+          "euiStyleSelector.labelNormal",
+          "euiStyleSelector.labelCompact",
+        ]
+      }
+    >
+      <Component />
+    </EuiI18n>
+  </EuiPopover>
+</Fragment>
+`;