CardView - implement ContentView

packages/devextreme/js/__internal/grids/new/card_view/__snapshots__/widget.test.ts.snap

@@ -38,6 +38,62 @@ exports[`common initial render should be successfull 1`] = `
       </div>
     </div>
   </div>
+  <div
+    class="dx-gridcore-contentview"
+  >
+    <div
+      class="dx-overlay dx-widget dx-state-invisible dx-visibility-change-handler dx-loadpanel"
+    >
+      <div
+        class="dx-overlay-content"
+        style="width: 222px; height: 90px;"
+      />
+    </div>
+    <div
+      class="dx-scrollable dx-visibility-change-handler dx-scrollable-both dx-scrollable-simulated"
+    >
+      <div
+        class="dx-scrollable-wrapper"
+      >
+        <div
+          class="dx-scrollable-container"
+          tabindex="0"
+        >
+          <div
+            class="dx-scrollable-content"
+            style="left: 0px; top: 0px; transform: none;"
+          />
+          <div
+            class="dx-scrollable-scrollbar dx-widget dx-scrollbar-horizontal"
+          >
+            <div
+              class="dx-scrollable-scroll dx-state-invisible"
+              style="width: 15px; transform: translate(0px, 0px);"
+            >
+              <div
+                class="dx-scrollable-scroll-content"
+              />
+            </div>
+          </div>
+          <div
+            class="dx-scrollable-scrollbar dx-widget dx-scrollbar-vertical"
+          >
+            <div
+              class="dx-scrollable-scroll dx-state-invisible"
+              style="height: 15px; transform: translate(0px, 0px);"
+            >
+              <div
+                class="dx-scrollable-scroll-content"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="dx-gridcore-error-row"
+    />
+  </div>
   <div>
 
   </div>

packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/__snapshots__/card.test.tsx.snap

@@ -0,0 +1,153 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Rendering should be rendered correctly 1`] = `
+<div>
+  <div
+    class="dx-cardview-card"
+    style="min-width: undefinedpx; max-width: undefinedpx;"
+    tabindex="0"
+  >
+    <div
+      class="dx-cardview-card-header"
+    >
+      <div
+        class="dx-toolbar dx-widget dx-visibility-change-handler dx-collection"
+        role="toolbar"
+      >
+        <div
+          class="dx-toolbar-items-container"
+        >
+          <div
+            class="dx-toolbar-before"
+            role="presentation"
+          >
+            <div
+              class="dx-item dx-toolbar-item dx-toolbar-button"
+            >
+              <div
+                class="dx-item-content dx-toolbar-item-content"
+              >
+                <div
+                  aria-checked="false"
+                  aria-invalid="false"
+                  aria-readonly="false"
+                  class="dx-widget dx-checkbox"
+                  role="checkbox"
+                  tabindex="0"
+                >
+                  <input
+                    type="hidden"
+                    value="false"
+                  />
+                  <div
+                    class="dx-checkbox-container"
+                  >
+                    <span
+                      class="dx-checkbox-icon"
+                    />
+
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="dx-item dx-toolbar-item dx-toolbar-label"
+            >
+              <div
+                class="dx-item-content dx-toolbar-item-content"
+              >
+                <div>
+                  Card Header
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="dx-toolbar-center"
+            role="presentation"
+          />
+          <div
+            class="dx-toolbar-after"
+            role="presentation"
+          >
+            <div
+              class="dx-item dx-toolbar-item dx-toolbar-button"
+            >
+              <div
+                class="dx-item-content dx-toolbar-item-content"
+              >
+                <div
+                  aria-label="edit"
+                  class="dx-widget dx-button dx-button-mode-text dx-button-normal dx-button-has-icon"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="dx-button-content"
+                  >
+                    <i
+                      class="dx-icon dx-icon-edit"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="dx-item dx-toolbar-item dx-toolbar-button"
+            >
+              <div
+                class="dx-item-content dx-toolbar-item-content"
+              >
+                <div
+                  aria-label="trash"
+                  class="dx-widget dx-button dx-button-mode-text dx-button-normal dx-button-has-icon"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="dx-button-content"
+                  >
+                    <i
+                      class="dx-icon dx-icon-trash"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="dx-card-cover"
+    >
+      <img
+        alt="Card Cover"
+        class="dx-card-cover-image"
+        src="https://www.devexpress.com/support/demos/i/demo-thumbs/aspnetcore-grid.png"
+        style="width: 100%; height: auto;"
+      />
+    </div>
+    <div
+      class="dx-cardview-card-content"
+    >
+      <div
+        class="dx-cardview-field"
+        tabindex="0"
+      >
+        <span
+          class="dx-cardview-field-name"
+        >
+          Field
+          :
+        </span>
+        <span
+          class="dx-cardview-field-value"
+        >
+          devextreme
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;

packages/devextreme/js/__internal/grids/new/card_view/content_view/content/card/card.events.test.tsx

@@ -0,0 +1,172 @@
+/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
+/* eslint-disable no-return-assign */
+/* eslint-disable @typescript-eslint/init-declarations */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { describe, expect, it } from '@jest/globals';
+import { render } from 'inferno';
+
+import { Card } from './card';
+
+const mockOnDblClick = {
+  called: false,
+  call() {
+    this.called = true;
+  },
+};
+
+const mockOnClick = {
+  called: false,
+  call() {
+    this.called = true;
+  },
+};
+
+const props = {
+  row: {
+    cells: [
+      {
+        column: {
+          dataField: 'Name',
+          name: 'Field',
+        },
+        value: 'devextreme',
+        text: 'devextreme',
+      },
+    ],
+    key: 0,
+  },
+  toolbar: [
+    {
+      location: 'before',
+      widget: 'dxCheckBox',
+    },
+    {
+      location: 'before',
+      text: 'Card Header',
+    },
+    {
+      location: 'after',
+      widget: 'dxButton',
+      options: {
+        icon: 'edit',
+        stylingMode: 'text',
+      },
+    },
+    {
+      location: 'after',
+      widget: 'dxButton',
+      options: {
+        icon: 'trash',
+        stylingMode: 'text',
+      },
+    },
+  ],
+  cover: {
+    src: 'https://www.devexpress.com/support/demos/i/demo-thumbs/aspnetcore-grid.png',
+    alt: 'Card Cover',
+    className: 'card-cover',
+  },
+  hoverStateEnabled: true,
+  maxWidth: 300,
+  width: 300,
+  minWidth: 300,
+  onDblClick: mockOnDblClick.call(),
+  onClick: mockOnClick.call(),
+};
+
+const CLASSES = {
+  card: 'dx-cardview-card',
+};
+
+describe('Events', () => {
+  let container: HTMLDivElement;
+  // @ts-expect-error
+  beforeEach(() => {
+    container = document.createElement('div');
+    // @ts-expect-error
+    render(<Card {...props} />, container);
+  });
+
+  it('should trigger onClick event', () => {
+    // @ts-expect-error
+    render(<Card {...props} />, container);
+
+    const cardElement = container.querySelector(`.${CLASSES.card}`);
+    cardElement?.dispatchEvent(new MouseEvent('click'));
+
+    expect(mockOnClick.called).toBe(true);
+  });
+
+  it('should trigger onDblClick event', () => {
+    // @ts-expect-error
+    render(<Card {...props} />, container);
+
+    const cardElement = container.querySelector(`.${CLASSES.card}`);
+    cardElement?.dispatchEvent(new MouseEvent('dblclick'));
+
+    expect(mockOnDblClick.called).toBe(true);
+  });
+
+  it('should trigger onHoverChanged event on mouse enter', () => {
+    const mockHover: { called: boolean; fn: ({ isHovered }: { isHovered: boolean }) => void } = {
+      called: false,
+      fn: ({ isHovered }: { isHovered: boolean }) => {
+        mockHover.called = true;
+        expect(isHovered).toBe(true);
+      },
+    };
+
+    const newProps = { ...props, hoverStateEnabled: true, onHoverChanged: mockHover.fn };
+    // @ts-expect-error
+    render(<Card {...newProps} />, container);
+
+    const cardElement = container.querySelector(`.${CLASSES.card}`);
+    cardElement?.dispatchEvent(new MouseEvent('mouseenter'));
+
+    expect(mockHover.called).toBe(true);
+  });
+
+  it('should trigger onHoverChanged event on mouse leave', () => {
+    const mockHover: { called: boolean; fn: ({ isHovered }: { isHovered: boolean }) => void } = {
+      called: false,
+      fn: ({ isHovered }: { isHovered: boolean }) => {
+        mockHover.called = true;
+        expect(isHovered).toBe(false);
+      },
+    };
+
+    const newProps = { ...props, hoverStateEnabled: true, onHoverChanged: mockHover.fn };
+    // @ts-expect-error
+    render(<Card {...newProps} />, container);
+
+    const cardElement = container.querySelector(`.${CLASSES.card}`);
+    cardElement?.dispatchEvent(new MouseEvent('mouseleave'));
+
+    expect(mockHover.called).toBe(true);
+  });
+
+  it('should apply correct minWidth, maxWidth, and width styles', () => {
+    const cardElement = container.querySelector('.dx-cardview-card');
+    const style = cardElement?.getAttribute('style');
+
+    expect(style).toContain('min-width: 300px');
+    expect(style).toContain('max-width: 300px');
+    expect(style).toContain('width: 300px');
+  });
+
+  it('should handle hoverStateEnabled prop correctly', () => {
+    const cardElement = container.querySelector('.dx-cardview-card');
+    cardElement?.dispatchEvent(new MouseEvent('mouseenter'));
+
+    const classList = cardElement?.getAttribute('class') || '';
+    expect(classList).toContain('dx-cardview-card-hover');
+  });
+
+  it('should render field template correctly', () => {
+    const fieldName = container.querySelector('.dx-cardview-field-name');
+    const fieldValue = container.querySelector('.dx-cardview-field-value');
+
+    expect(fieldName?.textContent).toBe('Field:');
+    expect(fieldValue?.textContent).toBe('devextreme');
+  });
+});