gridstack.js/react/lib/grid-stack-render-provider.test.tsx at ed81728d0085db9e972234847718ee5b3aad7652 · tearf001/gridstack.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
import { describe, it, expect, beforeEach, vi } from 'vitest';
import { gridWidgetContainersMap } from './grid-stack-render-provider';

// Mock GridStack type
class MockGridStack {
  el: HTMLElement;
  constructor() {
    this.el = document.createElement('div');
  }
}

describe('GridStackRenderProvider', () => {
  beforeEach(() => {
    // Clear the WeakMap before each test
    gridWidgetContainersMap.constructor.prototype.clear?.call(gridWidgetContainersMap);
  });

  it('should store widget containers in WeakMap for each grid instance', () => {
    // Mock grid instances
    const grid1 = new MockGridStack() as any;
    const grid2 = new MockGridStack() as any;
    const widget1 = { id: '1', grid: grid1 };
    const widget2 = { id: '2', grid: grid2 };
    const element1 = document.createElement('div');
    const element2 = document.createElement('div');

    // Simulate renderCB
    const renderCB = (element, widget) => {
      if (widget.id && widget.grid) {
        // Get or create the widget container map for this grid instance
        let containers = gridWidgetContainersMap.get(widget.grid);
        if (!containers) {
          containers = new Map();
          gridWidgetContainersMap.set(widget.grid, containers);
        }
        containers.set(widget.id, element);
      }
    };

    renderCB(element1, widget1);
    renderCB(element2, widget2);

    const containers1 = gridWidgetContainersMap.get(grid1);
    const containers2 = gridWidgetContainersMap.get(grid2);

    expect(containers1?.get('1')).toBe(element1);
    expect(containers2?.get('2')).toBe(element2);
  });

  it('should not have containers for different grid instances mixed up', () => {
    const grid1 = new MockGridStack() as any;
    const grid2 = new MockGridStack() as any;
    const widget1 = { id: '1', grid: grid1 };
    const widget2 = { id: '2', grid: grid1 };
    const widget3 = { id: '3', grid: grid2 };
    const element1 = document.createElement('div');
    const element2 = document.createElement('div');
    const element3 = document.createElement('div');

    // Simulate renderCB
    const renderCB = (element: HTMLElement, widget: any) => {
      if (widget.id && widget.grid) {
        let containers = gridWidgetContainersMap.get(widget.grid);
        if (!containers) {
          containers = new Map();
          gridWidgetContainersMap.set(widget.grid, containers);
        }
        containers.set(widget.id, element);
      }
    };

    renderCB(element1, widget1);
    renderCB(element2, widget2);
    renderCB(element3, widget3);

    const containers1 = gridWidgetContainersMap.get(grid1);
    const containers2 = gridWidgetContainersMap.get(grid2);

    // Grid1 should have widgets 1 and 2
    expect(containers1?.size).toBe(2);
    expect(containers1?.get('1')).toBe(element1);
    expect(containers1?.get('2')).toBe(element2);
    expect(containers1?.get('3')).toBeUndefined();

    // Grid2 should only have widget 3
    expect(containers2?.size).toBe(1);
    expect(containers2?.get('3')).toBe(element3);
    expect(containers2?.get('1')).toBeUndefined();
    expect(containers2?.get('2')).toBeUndefined();
  });

  it('should clean up when grid instance is deleted from WeakMap', () => {
    const grid = new MockGridStack() as any;
    const widget = { id: '1', grid };
    const element = document.createElement('div');

    // Add to WeakMap
    const containers = new Map<string, HTMLElement>();
    containers.set(widget.id, element);
    gridWidgetContainersMap.set(grid, containers);

    // Verify it exists
    expect(gridWidgetContainersMap.has(grid)).toBe(true);

    // Delete from WeakMap
    gridWidgetContainersMap.delete(grid);

    // Verify it's gone
    expect(gridWidgetContainersMap.has(grid)).toBe(false);
  });

  it('should handle multiple widgets in the same grid', () => {
    const grid = new MockGridStack() as any;
    const widgets = [
      { id: '1', grid },
      { id: '2', grid },
      { id: '3', grid },
    ];
    const elements = widgets.map(() => document.createElement('div'));

    // Simulate renderCB for all widgets
    widgets.forEach((widget, index) => {
      const element = elements[index];
      if (widget.id && widget.grid) {
        let containers = gridWidgetContainersMap.get(widget.grid);
        if (!containers) {
          containers = new Map();
          gridWidgetContainersMap.set(widget.grid, containers);
        }
        containers.set(widget.id, element);
      }
    });

    const containers = gridWidgetContainersMap.get(grid);
    expect(containers?.size).toBe(3);
    expect(containers?.get('1')).toBe(elements[0]);
    expect(containers?.get('2')).toBe(elements[1]);
    expect(containers?.get('3')).toBe(elements[2]);
  });
});