CardView: cardHeader.visible property does not update in runtime (#30167)

Author: Raushen

e2e/testcafe-devextreme/tests/cardView/common/behavior.functional.ts

@@ -0,0 +1,22 @@
+import CardView from 'devextreme-testcafe-models/cardView';
+import url from '../../../helpers/getPageUrl';
+import { createWidget } from '../../../helpers/createWidget';
+
+fixture.disablePageReloads`CardView - Common Behavior`
+  .page(url(__dirname, '../../container.html'));
+
+test('cardHeader.visibility property should change on contentReady', async (t) => {
+  const cardView = new CardView('#container');
+  await t
+    .expect(cardView.apiOption('cardHeader.visible'))
+    .eql(true)
+    .expect(cardView.getCard(0).getHeader().exists)
+    .ok();
+}).before(async () => {
+  await createWidget('dxCardView', {
+    dataSource: [{ ID: 1 }],
+    onContentReady(e) {
+      e.component.option('cardHeader.visible', true);
+    },
+  });
+});

packages/devextreme/js/__internal/grids/new/grid_core/utils/tree/tree.test.ts

@@ -120,7 +120,7 @@ describe('OptionsController', () => {
     });
 
     describe('mergeOptionTrees', () => {
-      it('should only shallow copy root if path contains error at first place', () => {
+      it('should create absent nodes if path contains error at first place', () => {
         const tree = { a: { b: { c: { extra: 'extra_node' } } }, d: { e: 2 } };
         const updatedTree = { a: { b: { c: { extra: 'update' } } }, d: { e: 2 } };
         const defaultTree = { a: { b: { c: { extra: 'default' } } } };
@@ -137,9 +137,10 @@ describe('OptionsController', () => {
         expect(result.a.b).toBe(tree.a.b);
         expect(result.a.b.c).toBe(tree.a.b.c);
         expect(result.a.b.c.extra).toBe(tree.a.b.c.extra);
+        expect(result.wrong_path).toStrictEqual({ c: undefined });
       });
 
-      it('should shallow copy subtree path until faced the wrong node path', () => {
+      it('should shallow copy subtree path and create absent nodes if faced the wrong node path', () => {
         const tree = { a: { b: { c: { extra: 'extra_node' } } }, d: { e: 2 } };
         const updatedTree = { a: { b: { c: { extra: 'update' } } }, d: { e: 2 } };
         const defaultTree = { a: { b: { c: { extra: 'default' } } } };
@@ -156,6 +157,41 @@ describe('OptionsController', () => {
         expect(result.a.b).not.toBe(tree.a.b);
         expect(result.a.b.c).toBe(tree.a.b.c);
         expect(result.a.b.c.extra).toBe(tree.a.b.c.extra);
+        expect(result.a.b.wrong_path).toStrictEqual({ extra: undefined });
+      });
+
+      it('should correctly create absent last nodes and sync their values', () => {
+        const tree = { a: { b: { c: { extra: 'extra_node' } } }, d: { e: 2 } };
+        const updatedTree = { a: { b: { c: { newProperty: 'test' } } }, d: { e: 2 } };
+        const defaultTree = { a: { b: { c: { extra: 'default' } } } };
+
+        const result = mergeOptionTrees(
+          tree,
+          updatedTree,
+          defaultTree,
+          ['a', 'b', 'c', 'newProperty'],
+        );
+
+        expect(result).not.toBe(tree);
+        expect(result.a).not.toBe(tree.a);
+        expect(result.a.b).not.toBe(tree.a.b);
+        expect(result.a.b.c).not.toBe(tree.a.b.c);
+        expect(result.a.b.c.newProperty).toBe(updatedTree.a.b.c.newProperty);
+      });
+
+      it('should correctly create absent middle nodes and sync their values', () => {
+        const tree = { a: { b: { c: { extra: 'extra_node' } } }, d: { e: 2 } };
+        const updatedTree = { a: { newB: { c: { newProperty: 'test' } } }, d: { e: 2 } };
+        const defaultTree = { a: { b: { c: { extra: 'default' } } } };
+
+        const result = mergeOptionTrees(
+          tree,
+          updatedTree,
+          defaultTree,
+          ['a', 'newB', 'c', 'newProperty'],
+        );
+
+        expect(result.a.newB.c.newProperty).toBe(updatedTree.a.newB.c.newProperty);
       });
 
       it('should deep copy applied value from updated tree', () => {

packages/devextreme/js/__internal/grids/new/grid_core/utils/tree/tree.ts

@@ -129,14 +129,9 @@ export const mergeOptionTrees = (
   pathToMerge: string[],
 ): TreeNodeType => {
   const [lastNodePath] = pathToMerge.slice(-1);
-  const result = shallowCopySubtreePath(internalTree, pathToMerge);
+  const result = createOrShallowCopySubtreePath(internalTree, pathToMerge);
   const targetNodeParent = getTreeNodeParentByPath(result, pathToMerge);
 
-  // NOTE: If we don't find parent of the tree node to update -> do nothing
-  if (!targetNodeParent) {
-    return result;
-  }
-
   const newNodeValue = getTreeNodeByPath(publicTree, pathToMerge);
   const defaultNodeValue = getTreeNodeByPath(defaultTree, pathToMerge);
 

packages/testcafe-models/cardView/card.ts

@@ -38,8 +38,12 @@ export default class Card {
         return this.getFieldCaptionCell(fieldCaption).nextSibling();
     }
 
+    getHeader(): Selector {
+        return this.element.find(`.${CLASS.header}`);
+    }
+
     getToolbarItem(index: number): Selector {
-        return this.element.find(`.${CLASS.header}`).find('.dx-toolbar-item').nth(index);
+        return this.getHeader().find('.dx-toolbar-item').nth(index);
     }
 
     getHighlightedTexts(): Selector {