Repository navigation
Expand file tree
/
Copy pathoverflowManager.test.ts
More file actions
155 lines (126 loc) · 5.6 KB
/
Copy pathoverflowManager.test.ts
File metadata and controls
155 lines (126 loc) · 5.6 KB
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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
import { createOverflowManager } from './overflowManager';
import type { ObserveOptions, OverflowEventPayload } from './types';
describe('overflowManager', () => {
beforeAll(() => {
global.ResizeObserver = class ResizeObserver {
public observe() {
// do nothing
}
public unobserve() {
// do nothing
}
public disconnect() {
// do nothing
}
} as unknown as typeof ResizeObserver;
});
const createElementWithSize = (tagName: string, width: number) => {
const element = document.createElement(tagName);
Object.defineProperty(element, 'offsetWidth', { configurable: true, value: width });
Object.defineProperty(element, 'offsetHeight', { configurable: true, value: width });
return element;
};
const createContainer = (width: number) => {
const container = document.createElement('div');
Object.defineProperty(container, 'clientWidth', { configurable: true, value: width });
Object.defineProperty(container, 'clientHeight', { configurable: true, value: width });
return container;
};
const createObserveOptions = (options: Partial<ObserveOptions> = {}): ObserveOptions => ({
overflowAxis: 'horizontal',
overflowDirection: 'end',
padding: 10,
minimumVisible: 0,
hasHiddenItems: false,
onUpdateItemVisibility: jest.fn(),
onUpdateOverflow: jest.fn(),
...options,
});
const lastDispatch = (onUpdateOverflow: jest.Mock): OverflowEventPayload =>
onUpdateOverflow.mock.calls[onUpdateOverflow.mock.calls.length - 1][0];
it('should dispatch overflow update after forceUpdate', () => {
const onUpdateOverflow = jest.fn();
const options = createObserveOptions({ onUpdateOverflow });
const manager = createOverflowManager(options);
const container = createContainer(100);
const itemA = createElementWithSize('button', 40);
const itemB = createElementWithSize('button', 40);
const menu = createElementWithSize('button', 20);
manager.addItem({ element: itemA, id: 'a', priority: 1 });
manager.addItem({ element: itemB, id: 'b', priority: 0 });
manager.addOverflowMenu(menu);
manager.observe(container);
manager.forceUpdate();
const dispatch = lastDispatch(onUpdateOverflow);
expect(dispatch.visibleItems.map(item => item.id).sort()).toEqual(['a', 'b']);
expect(dispatch.invisibleItems).toEqual([]);
expect(dispatch.groupVisibility).toEqual({});
});
it('should re-dispatch when setOptions changes a relevant option', () => {
const onUpdateOverflow = jest.fn();
const options = createObserveOptions({ onUpdateOverflow });
const manager = createOverflowManager(options);
const container = createContainer(100);
const itemA = createElementWithSize('button', 40);
const itemB = createElementWithSize('button', 40);
const menu = createElementWithSize('button', 20);
manager.addItem({ element: itemA, id: 'a', priority: 1 });
manager.addItem({ element: itemB, id: 'b', priority: 0 });
manager.addOverflowMenu(menu);
manager.observe(container);
manager.forceUpdate();
onUpdateOverflow.mockClear();
manager.setOptions({ padding: 30 });
expect(onUpdateOverflow).toHaveBeenCalled();
const dispatch = lastDispatch(onUpdateOverflow);
expect(dispatch.visibleItems.map(item => item.id)).toEqual(['a']);
expect(dispatch.invisibleItems.map(item => item.id)).toEqual(['b']);
});
it('should not re-dispatch when setOptions is called with a partial that does not change anything', () => {
const onUpdateOverflow = jest.fn();
const options = createObserveOptions({ onUpdateOverflow });
const manager = createOverflowManager(options);
const container = createContainer(100);
const itemA = createElementWithSize('button', 40);
manager.addItem({ element: itemA, id: 'a', priority: 1 });
manager.observe(container, options);
manager.forceUpdate();
onUpdateOverflow.mockClear();
manager.setOptions({ padding: 10 }); // padding is already 10; no real change
expect(onUpdateOverflow).not.toHaveBeenCalled();
});
it('disconnect stops observation and re-observe restarts dispatching', () => {
const onUpdateOverflow = jest.fn();
const options = createObserveOptions({ onUpdateOverflow });
const manager = createOverflowManager(options);
const container = createContainer(100);
const item = createElementWithSize('button', 40);
manager.addItem({ element: item, id: 'a', priority: 1 });
manager.observe(container);
manager.forceUpdate();
expect(lastDispatch(onUpdateOverflow).visibleItems.map(i => i.id)).toEqual(['a']);
manager.disconnect();
onUpdateOverflow.mockClear();
manager.addItem({ element: item, id: 'a', priority: 1 });
manager.observe(container);
manager.forceUpdate();
expect(onUpdateOverflow).toHaveBeenCalled();
expect(lastDispatch(onUpdateOverflow).visibleItems.map(i => i.id)).toEqual(['a']);
});
it('should remove items through removeItem', () => {
const onUpdateOverflow = jest.fn();
const options = createObserveOptions({ onUpdateOverflow });
const manager = createOverflowManager(options);
const container = createContainer(100);
const item = createElementWithSize('button', 40);
manager.addItem({ element: item, id: 'a', priority: 1 });
manager.observe(container);
manager.forceUpdate();
expect(lastDispatch(onUpdateOverflow).visibleItems.map(i => i.id)).toEqual(['a']);
manager.removeItem('a');
manager.forceUpdate();
const dispatch = lastDispatch(onUpdateOverflow);
expect(dispatch.visibleItems).toEqual([]);
expect(dispatch.invisibleItems).toEqual([]);
});
});