@linzjs/step-ag-grid 7.11.0 → 7.11.2

package/README.md

@@ -41,6 +41,8 @@ Storybook demo deployed at: https://linz.github.io/step-ag-grid/
 
 ## Usage
 
+Check `src\stories` for more usage examples
+
 ```tsx
 import "@linzjs/lui/dist/scss/base.scss";
 import "@linzjs/lui/dist/fonts";
@@ -133,4 +135,49 @@ const GridDemo = () => {
 };
 ```
 
-Check `src\stories` for more usage examples
+## Writing tests
+
+The following testing calls can be imported from step-ag-grid:
+
+- findRow
+- queryRow
+- selectRow
+- deselectRow
+- findCell
+- selectCell
+- editCell
+- findOpenMenu
+- queryMenuOption
+- findMenuOption
+- clickMenuOption
+- openAndClickMenuOption
+- getMultiSelectOptions
+- findMultiSelectOption
+- clickMultiSelectOption
+- typeOtherInput
+- typeOtherTextArea
+- closeMenu
+- findActionButton
+- clickActionButton
+
+```tsx
+import { render, screen } from "@testing-library/react";
+import { waitFor } from "@testing-library/react";
+import { findRow, GridUpdatingContextProvider, openAndClickMenuOption } from "@linzjs/step-ag-grid";
+
+const TestComponent = (): JSX.Element => {
+  return (
+    <GridUpdatingContextProvider>
+      <MyGrid />
+    </GridUpdatingContextProvider>
+  );
+};
+
+test("click Delete menu option removes row from the table", async () => {
+  await render(<TestComponent />);
+  await screen.findByText("My component header");
+  expect((await findRow(12345)).getAttribute("row-index")).toBe("1");
+  await openAndClickMenuOption(12345, "actions", "Delete");
+  await waitFor(async () => expect((await queryRow(12345)).not.toBeDefined());
+});
+```

package/dist/index.js

@@ -2906,7 +2906,7 @@ var Grid = function (params) {
             sizeColumnsToFit();
         }
     }, [columnDefs === null || columnDefs === void 0 ? void 0 : columnDefs.length, sizeColumnsToFit]);
-    return (jsxRuntime.jsxs("div", __assign({ "data-testid": params["data-testid"], className: clsx("Grid-container", "ag-theme-alpine", staleGrid && "Grid-sortIsStale") }, { children: [params.quickFilter && (jsxRuntime.jsx("div", __assign({ className: "Grid-quickFilter" }, { children: jsxRuntime.jsx("input", { "aria-label": "Search", className: "lui-margin-top-xxs lui-margin-bottom-xxs Grid-quickFilterBox", type: "text", placeholder: (_a = params.quickFilterPlaceholder) !== null && _a !== void 0 ? _a : "Search...", value: internalQuickFilter, onChange: function (event) {
+    return (jsxRuntime.jsxs("div", __assign({ "data-testid": params["data-testid"], className: clsx("Grid-container", "ag-theme-alpine", staleGrid && "Grid-sortIsStale", gridReady && params.rowData && "Grid-ready") }, { children: [params.quickFilter && (jsxRuntime.jsx("div", __assign({ className: "Grid-quickFilter" }, { children: jsxRuntime.jsx("input", { "aria-label": "Search", className: "lui-margin-top-xxs lui-margin-bottom-xxs Grid-quickFilterBox", type: "text", placeholder: (_a = params.quickFilterPlaceholder) !== null && _a !== void 0 ? _a : "Search...", value: internalQuickFilter, onChange: function (event) {
                         setInternalQuickFilter(event.target.value);
                     } }) }))), jsxRuntime.jsx(agGridReact.AgGridReact, { animateRows: params.animateRows, rowClassRules: params.rowClassRules, defaultColDef: params.defaultColDef, getRowId: function (params) { return "".concat(params.data.id); }, suppressRowClickSelection: true, rowSelection: (_b = params.rowSelection) !== null && _b !== void 0 ? _b : "multiple", suppressBrowserResizeObserver: true, colResizeDefault: "shift", onFirstDataRendered: sizeColumnsToFit, onGridSizeChanged: sizeColumnsToFit, suppressClickEdit: true, onCellKeyPress: onCellKeyPress, onCellClicked: onCellClicked, onCellDoubleClicked: onCellDoubleClick, onCellEditingStarted: refreshSelectedRows, onCellEditingStopped: onCellEditingStopped, domLayout: params.domLayout, columnDefs: columnDefs, rowData: params.rowData, noRowsOverlayComponent: noRowsOverlayComponent, onGridReady: onGridReady, onSortChanged: ensureSelectedRowIsVisible, postSortRows: (_c = params.postSortRows) !== null && _c !== void 0 ? _c : postSortRows, onSelectionChanged: synchroniseExternalStateToGridSelection })] })));
 };
@@ -24501,17 +24501,36 @@ var _selectRow = function (select, rowId, within) { return __awaiter(void 0, voi
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0: return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                    var row, isSelected;
+                    var row, isSelected, cell;
                     return __generator(this, function (_a) {
                         switch (_a.label) {
                             case 0: return [4 /*yield*/, findRow(rowId, within)];
                             case 1:
                                 row = _a.sent();
-                                isSelected = !row.className.includes("ag-row-selected");
-                                if (select === "toggle" || (select === "select" && !isSelected) || (select === "deselect" && isSelected)) {
-                                    userEvent.click(row);
-                                }
-                                return [2 /*return*/];
+                                isSelected = row.className.includes("ag-row-selected");
+                                if (!(select === "toggle" || (select === "select" && !isSelected) || (select === "deselect" && isSelected))) return [3 /*break*/, 4];
+                                return [4 /*yield*/, findCell(rowId, "selection", within)];
+                            case 2:
+                                cell = _a.sent();
+                                userEvent.click(cell);
+                                return [4 /*yield*/, waitForWrapper(function () { return __awaiter(void 0, void 0, void 0, function () {
+                                        var row, nowSelected;
+                                        return __generator(this, function (_a) {
+                                            switch (_a.label) {
+                                                case 0: return [4 /*yield*/, findRow(rowId, within)];
+                                                case 1:
+                                                    row = _a.sent();
+                                                    nowSelected = row.className.includes("ag-row-selected");
+                                                    if (nowSelected == isSelected)
+                                                        throw "Row ".concat(rowId, " won't select");
+                                                    return [2 /*return*/];
+                                            }
+                                        });
+                                    }); })];
+                            case 3:
+                                _a.sent();
+                                _a.label = 4;
+                            case 4: return [2 /*return*/];
                         }
                     });
                 }); })];
@@ -24596,7 +24615,7 @@ var editCell = function (rowId, colId, within) { return __awaiter(void 0, void 0
                 }); })];
             case 1:
                 _a.sent();
-                return [4 /*yield*/, findOpenMenu()];
+                return [4 /*yield*/, waitForWrapper(findOpenMenu)];
             case 2:
                 _a.sent();
                 return [2 /*return*/];
@@ -24638,27 +24657,25 @@ var findMenuOption = function (menuOptionText) { return __awaiter(void 0, void 0
                                 return [2 /*return*/, menuOption];
                         }
                     });
-                }); }, { timeout: 10000 })];
+                }); }, { timeout: 5000 })];
             case 1: return [2 /*return*/, _a.sent()];
         }
     });
 }); };
 var clickMenuOption = function (menuOptionText) { return __awaiter(void 0, void 0, void 0, function () {
+    var menuOption;
     return __generator(this, function (_a) {
         switch (_a.label) {
-            case 0: return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
-                    var menuOption;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0: return [4 /*yield*/, findMenuOption(menuOptionText)];
-                            case 1:
-                                menuOption = _a.sent();
-                                menuOption && userEvent.click(menuOption);
-                                return [2 /*return*/];
-                        }
-                    });
-                }); })];
+            case 0: return [4 /*yield*/, findMenuOption(menuOptionText)];
             case 1:
+                menuOption = _a.sent();
+                return [4 /*yield*/, act(function () { return __awaiter(void 0, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            userEvent.click(menuOption);
+                            return [2 /*return*/];
+                        });
+                    }); })];
+            case 2:
                 _a.sent();
                 return [2 /*return*/];
         }
@@ -24669,12 +24686,9 @@ var openAndClickMenuOption = function (rowId, colId, menuOptionText, within) { r
         switch (_a.label) {
             case 0: return [4 /*yield*/, editCell(rowId, colId, within)];
             case 1:
-                _a.sent();
-                return [4 /*yield*/, wait$2(100)];
-            case 2:
                 _a.sent();
                 return [4 /*yield*/, clickMenuOption(menuOptionText)];
-            case 3:
+            case 2:
                 _a.sent();
                 return [2 /*return*/];
         }