CardView: editing operations, add/edit/delete (throw error if needed) (Gv6qwVwI) (DevExpress#29879)

Author: haksur

packages/devextreme/js/__internal/grids/new/grid_core/editing/controller.integration.test.ts

@@ -0,0 +1,85 @@
+/* eslint-disable spellcheck/spell-checker */
+import {
+  afterEach, beforeEach, describe, expect, it, jest,
+} from '@jest/globals';
+import $ from '@js/core/renderer';
+import CardView from '@ts/grids/new/card_view/widget';
+import type { Options as GridCoreOptions } from '@ts/grids/new/grid_core/options';
+import { throwError } from '@ts/grids/new/grid_core/options_validation/utils';
+import { rerender } from 'inferno';
+
+const SELECTORS = {
+  cardView: '.dx-cardview',
+  addButton: '[aria-label="add"]',
+  editButton: '[aria-label="edit"]',
+  deleteButton: '[aria-label="remove"]',
+};
+
+const setup = (options: GridCoreOptions = {}): CardView => {
+  const container = document.createElement('div');
+  const { body } = document;
+  body.append(container);
+
+  const cardView = new CardView(container, options);
+  rerender();
+  return cardView;
+};
+
+const getAddButton = (): Element | null => document.querySelector(SELECTORS.addButton);
+
+const getEditButton = (): Element | null => document.querySelector(SELECTORS.editButton);
+
+const getDeleteButton = (): Element | null => document.querySelector(SELECTORS.deleteButton);
+
+const checkError = (): void => expect(throwError).toHaveBeenCalledWith('E1042', 'CardView');
+
+jest.mock('@ts/grids/new/grid_core/options_validation/utils', () => ({
+  throwError: jest.fn().mockImplementation(() => ({})),
+}));
+
+describe('editing validation', () => {
+  afterEach(() => {
+    const cardView = document.querySelector(SELECTORS.cardView);
+    // @ts-expect-error bad typed renderer
+    $(cardView ?? undefined as any)?.dxCardView('dispose');
+    document.body.innerHTML = '';
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should throw error when no keyExpr and clicking on add', () => {
+    setup({
+      dataSource: [{ value: 'test1' }],
+      editing: { allowAdding: true },
+    });
+
+    const addButton = getAddButton();
+    addButton?.dispatchEvent(new MouseEvent('click'));
+
+    checkError();
+  });
+
+  it('should throw error when no keyExpr and clicking on edit', () => {
+    setup({
+      dataSource: [{ value: 'test1' }],
+      editing: { allowUpdating: true },
+    });
+    const editButton = getEditButton();
+    editButton?.dispatchEvent(new MouseEvent('click'));
+
+    checkError();
+  });
+
+  it('should throw error when no keyExpr and clicking on delete', () => {
+    setup({
+      dataSource: [{ value: 'test1' }],
+      editing: { allowDeleting: true },
+    });
+    const deleteButton = getDeleteButton();
+    deleteButton?.dispatchEvent(new MouseEvent('click'));
+
+    checkError();
+  });
+});

packages/devextreme/js/__internal/grids/new/grid_core/editing/controller.ts

@@ -5,6 +5,7 @@ import { isDefined } from '@js/core/utils/type';
 import { confirm } from '@js/ui/dialog';
 import { computed, type Signal } from '@preact/signals-core';
 import { generateNewRowTempKey } from '@ts/grids/grid_core/editing/m_editing_utils';
+import { OptionsValidationController } from '@ts/grids/new/grid_core/options_validation/index';
 
 import { ColumnsController } from '../columns_controller/columns_controller';
 import { DataController } from '../data_controller/data_controller';
@@ -64,6 +65,11 @@ export class EditingController {
     }
 
     const oldItem = this.itemsController.findItemByKey(items, editCardKey)!;
+
+    if (!oldItem) {
+      return null;
+    }
+
     const newData = applyChanges(
       [oldItem.data],
       changes,
@@ -85,6 +91,7 @@ export class EditingController {
     OptionsController, ItemsController,
     ColumnsController, DataController,
     KeyboardNavigationController,
+    OptionsValidationController,
   ] as const;
 
   constructor(
@@ -93,9 +100,12 @@ export class EditingController {
     private readonly columnController: ColumnsController,
     private readonly dataController: DataController,
     private readonly kbn: KeyboardNavigationController,
+    private readonly optionsValidationController: OptionsValidationController,
   ) {}
 
   public editCard(key: Key): void {
+    this.optionsValidationController.validateKeyExpr();
+
     const eventArgs = {
       cancel: false,
       key,
@@ -110,6 +120,8 @@ export class EditingController {
   }
 
   public async addCard(): Promise<void> {
+    this.optionsValidationController.validateKeyExpr();
+
     const eventArgs = {
       promise: undefined,
       data: {},
@@ -155,6 +167,8 @@ export class EditingController {
   }
 
   public async deleteCard(key: Key): Promise<void> {
+    this.optionsValidationController.validateKeyExpr();
+
     const confirmStatus = await this.confirmDelete();
 
     if (!confirmStatus) {