@object-ui/react 3.3.0 → 3.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/README.md +21 -1
- package/dist/SchemaRenderer.js +19 -2
- package/dist/context/AppShellContext.d.ts +26 -0
- package/dist/context/AppShellContext.js +67 -0
- package/dist/context/index.d.ts +1 -7
- package/dist/context/index.js +1 -7
- package/package.json +32 -9
- package/.turbo/turbo-build.log +0 -4
- package/src/LazyPluginLoader.tsx +0 -174
- package/src/SchemaRenderer.tsx +0 -266
- package/src/__tests__/LazyPluginLoader.test.tsx +0 -176
- package/src/__tests__/SchemaRenderer.aria.test.tsx +0 -118
- package/src/__tests__/SchemaRenderer.debug.test.tsx +0 -69
- package/src/__tests__/SchemaRenderer.errorBoundary.test.tsx +0 -114
- package/src/__tests__/SchemaRenderer.expressions.test.tsx +0 -131
- package/src/__tests__/SchemaRendererProvider.smoke.test.tsx +0 -132
- package/src/__tests__/ThemeProvider.test.tsx +0 -451
- package/src/__tests__/useNavigationOverlay.test.ts +0 -578
- package/src/__tests__/useOffline.test.ts +0 -198
- package/src/__tests__/usePageTransition.test.ts +0 -214
- package/src/__tests__/usePageVariables.test.tsx +0 -334
- package/src/__tests__/usePerformance.test.ts +0 -137
- package/src/__tests__/useViewData.test.tsx +0 -422
- package/src/__tests__/view-switching.test.tsx +0 -456
- package/src/components/form/FieldFactory.tsx +0 -516
- package/src/components/form/FormRenderer.test.tsx +0 -744
- package/src/components/form/FormRenderer.tsx +0 -258
- package/src/components/form/README.md +0 -352
- package/src/components/form/index.ts +0 -12
- package/src/context/ActionContext.tsx +0 -213
- package/src/context/DndContext.tsx +0 -260
- package/src/context/NotificationContext.tsx +0 -280
- package/src/context/SchemaRendererContext.tsx +0 -48
- package/src/context/ThemeContext.tsx +0 -325
- package/src/context/__tests__/ActionContext.test.tsx +0 -174
- package/src/context/__tests__/DndContext.test.tsx +0 -150
- package/src/context/__tests__/NotificationContext.test.tsx +0 -176
- package/src/context/__tests__/useDataScope.test.tsx +0 -91
- package/src/context/index.ts +0 -13
- package/src/hooks/__tests__/useActionEngine.test.ts +0 -170
- package/src/hooks/__tests__/useActionRunner.test.ts +0 -153
- package/src/hooks/__tests__/useAnimation.test.ts +0 -82
- package/src/hooks/__tests__/useColumnSummary.test.ts +0 -93
- package/src/hooks/__tests__/useCrudShortcuts.test.ts +0 -85
- package/src/hooks/__tests__/useDataRefresh.test.ts +0 -115
- package/src/hooks/__tests__/useDebugMode.test.ts +0 -83
- package/src/hooks/__tests__/useDensityMode.test.ts +0 -81
- package/src/hooks/__tests__/useDiscovery.test.tsx +0 -247
- package/src/hooks/__tests__/useDynamicApp.test.ts +0 -161
- package/src/hooks/__tests__/useETagCache.test.ts +0 -153
- package/src/hooks/__tests__/useExpression.test.ts +0 -86
- package/src/hooks/__tests__/useFocusTrap.test.ts +0 -294
- package/src/hooks/__tests__/useKeyboardShortcuts.test.ts +0 -144
- package/src/hooks/__tests__/usePageTransition.test.ts +0 -158
- package/src/hooks/__tests__/usePerformanceBudget.test.ts +0 -157
- package/src/hooks/__tests__/useReducedMotion.test.ts +0 -104
- package/src/hooks/__tests__/useSchemaPersistence.test.ts +0 -220
- package/src/hooks/__tests__/useViewSharing.test.ts +0 -121
- package/src/hooks/__tests__/useViewTransition.test.ts +0 -61
- package/src/hooks/index.ts +0 -36
- package/src/hooks/useActionEngine.ts +0 -84
- package/src/hooks/useActionRunner.ts +0 -119
- package/src/hooks/useAnimation.ts +0 -117
- package/src/hooks/useClientNotifications.ts +0 -251
- package/src/hooks/useColumnSummary.ts +0 -87
- package/src/hooks/useCrudShortcuts.ts +0 -126
- package/src/hooks/useDataRefresh.ts +0 -58
- package/src/hooks/useDebugMode.ts +0 -95
- package/src/hooks/useDensityMode.ts +0 -102
- package/src/hooks/useDiscovery.ts +0 -168
- package/src/hooks/useDynamicApp.ts +0 -142
- package/src/hooks/useETagCache.ts +0 -404
- package/src/hooks/useExpression.ts +0 -56
- package/src/hooks/useFocusManagement.ts +0 -248
- package/src/hooks/useFocusTrap.ts +0 -138
- package/src/hooks/useGlobalUndo.ts +0 -98
- package/src/hooks/useKeyboardShortcuts.ts +0 -119
- package/src/hooks/useNavigationOverlay.ts +0 -190
- package/src/hooks/useOffline.ts +0 -301
- package/src/hooks/usePageTransition.ts +0 -187
- package/src/hooks/usePageVariables.tsx +0 -157
- package/src/hooks/usePerformance.ts +0 -246
- package/src/hooks/usePerformanceBudget.ts +0 -313
- package/src/hooks/useReducedMotion.ts +0 -53
- package/src/hooks/useSchemaPersistence.ts +0 -222
- package/src/hooks/useViewData.ts +0 -201
- package/src/hooks/useViewSharing.ts +0 -140
- package/src/hooks/useViewTransition.ts +0 -144
- package/src/index.ts +0 -41
- package/src/spec-bridge/SpecBridge.ts +0 -64
- package/src/spec-bridge/__tests__/P1SpecBridge.test.ts +0 -855
- package/src/spec-bridge/__tests__/SpecBridge.test.ts +0 -550
- package/src/spec-bridge/bridges/dashboard.ts +0 -180
- package/src/spec-bridge/bridges/form-view.ts +0 -109
- package/src/spec-bridge/bridges/list-view.ts +0 -187
- package/src/spec-bridge/bridges/page.ts +0 -136
- package/src/spec-bridge/index.ts +0 -14
- package/src/spec-bridge/types.ts +0 -38
- package/src/utils/i18n.ts +0 -10
- package/tsconfig.json +0 -17
- package/tsconfig.tsbuildinfo +0 -1
- package/vitest.config.ts +0 -2
|
@@ -1,153 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Tests for useETagCache hook
|
|
3
|
-
*/
|
|
4
|
-
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
|
|
5
|
-
import { renderHook, act } from '@testing-library/react';
|
|
6
|
-
import { useETagCache } from '../useETagCache';
|
|
7
|
-
|
|
8
|
-
describe('useETagCache', () => {
|
|
9
|
-
beforeEach(() => {
|
|
10
|
-
vi.restoreAllMocks();
|
|
11
|
-
// Clear the module-scoped memory cache between tests
|
|
12
|
-
const { result } = renderHook(() => useETagCache());
|
|
13
|
-
act(() => {
|
|
14
|
-
result.current.clearCache();
|
|
15
|
-
});
|
|
16
|
-
});
|
|
17
|
-
|
|
18
|
-
afterEach(() => {
|
|
19
|
-
vi.restoreAllMocks();
|
|
20
|
-
});
|
|
21
|
-
|
|
22
|
-
it('returns initial state with cacheSize: 0', () => {
|
|
23
|
-
const { result } = renderHook(() => useETagCache());
|
|
24
|
-
|
|
25
|
-
expect(result.current.cacheSize).toBe(0);
|
|
26
|
-
expect(result.current.serviceWorkerActive).toBe(false);
|
|
27
|
-
expect(result.current.fetchWithETag).toBeTypeOf('function');
|
|
28
|
-
expect(result.current.invalidate).toBeTypeOf('function');
|
|
29
|
-
expect(result.current.clearCache).toBeTypeOf('function');
|
|
30
|
-
});
|
|
31
|
-
|
|
32
|
-
it('fetchWithETag makes a network request and caches the response', async () => {
|
|
33
|
-
const mockData = { id: 1, name: 'Test' };
|
|
34
|
-
const mockHeaders = new Headers({ etag: '"abc123"' });
|
|
35
|
-
vi.spyOn(globalThis, 'fetch').mockResolvedValueOnce(
|
|
36
|
-
new Response(JSON.stringify(mockData), {
|
|
37
|
-
status: 200,
|
|
38
|
-
headers: mockHeaders,
|
|
39
|
-
}),
|
|
40
|
-
);
|
|
41
|
-
|
|
42
|
-
const { result } = renderHook(() => useETagCache());
|
|
43
|
-
|
|
44
|
-
let response: { data: unknown; fromCache: boolean; etag?: string } | undefined;
|
|
45
|
-
await act(async () => {
|
|
46
|
-
response = await result.current.fetchWithETag('/api/test');
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
expect(response!.data).toEqual(mockData);
|
|
50
|
-
expect(response!.fromCache).toBe(false);
|
|
51
|
-
expect(response!.etag).toBe('"abc123"');
|
|
52
|
-
expect(result.current.cacheSize).toBe(1);
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
it('fetchWithETag sends If-None-Match header on subsequent requests', async () => {
|
|
56
|
-
const mockData = { id: 1 };
|
|
57
|
-
const fetchSpy = vi.spyOn(globalThis, 'fetch');
|
|
58
|
-
|
|
59
|
-
// First request — returns data with ETag
|
|
60
|
-
fetchSpy.mockResolvedValueOnce(
|
|
61
|
-
new Response(JSON.stringify(mockData), {
|
|
62
|
-
status: 200,
|
|
63
|
-
headers: new Headers({ etag: '"etag-1"' }),
|
|
64
|
-
}),
|
|
65
|
-
);
|
|
66
|
-
|
|
67
|
-
const { result } = renderHook(() => useETagCache());
|
|
68
|
-
|
|
69
|
-
await act(async () => {
|
|
70
|
-
await result.current.fetchWithETag('/api/data');
|
|
71
|
-
});
|
|
72
|
-
|
|
73
|
-
// Second request — server returns 304
|
|
74
|
-
fetchSpy.mockResolvedValueOnce(
|
|
75
|
-
new Response(null, { status: 304 }),
|
|
76
|
-
);
|
|
77
|
-
|
|
78
|
-
let response: { data: unknown; fromCache: boolean; etag?: string } | undefined;
|
|
79
|
-
await act(async () => {
|
|
80
|
-
response = await result.current.fetchWithETag('/api/data');
|
|
81
|
-
});
|
|
82
|
-
|
|
83
|
-
// Verify If-None-Match was sent
|
|
84
|
-
const secondCallArgs = fetchSpy.mock.calls[1];
|
|
85
|
-
const headers = secondCallArgs[1]?.headers as Headers;
|
|
86
|
-
expect(headers.get('If-None-Match')).toBe('"etag-1"');
|
|
87
|
-
expect(response!.fromCache).toBe(true);
|
|
88
|
-
expect(response!.data).toEqual(mockData);
|
|
89
|
-
});
|
|
90
|
-
|
|
91
|
-
it('invalidate removes a specific cache entry', async () => {
|
|
92
|
-
const mockData = { id: 1 };
|
|
93
|
-
vi.spyOn(globalThis, 'fetch').mockResolvedValueOnce(
|
|
94
|
-
new Response(JSON.stringify(mockData), {
|
|
95
|
-
status: 200,
|
|
96
|
-
headers: new Headers({ etag: '"etag-x"' }),
|
|
97
|
-
}),
|
|
98
|
-
);
|
|
99
|
-
|
|
100
|
-
const { result } = renderHook(() => useETagCache());
|
|
101
|
-
|
|
102
|
-
await act(async () => {
|
|
103
|
-
await result.current.fetchWithETag('/api/item');
|
|
104
|
-
});
|
|
105
|
-
expect(result.current.cacheSize).toBe(1);
|
|
106
|
-
|
|
107
|
-
act(() => {
|
|
108
|
-
result.current.invalidate('/api/item');
|
|
109
|
-
});
|
|
110
|
-
|
|
111
|
-
expect(result.current.cacheSize).toBe(0);
|
|
112
|
-
});
|
|
113
|
-
|
|
114
|
-
it('clearCache removes all entries', async () => {
|
|
115
|
-
const fetchSpy = vi.spyOn(globalThis, 'fetch');
|
|
116
|
-
|
|
117
|
-
fetchSpy.mockResolvedValueOnce(
|
|
118
|
-
new Response(JSON.stringify({ a: 1 }), {
|
|
119
|
-
status: 200,
|
|
120
|
-
headers: new Headers({ etag: '"e1"' }),
|
|
121
|
-
}),
|
|
122
|
-
);
|
|
123
|
-
fetchSpy.mockResolvedValueOnce(
|
|
124
|
-
new Response(JSON.stringify({ b: 2 }), {
|
|
125
|
-
status: 200,
|
|
126
|
-
headers: new Headers({ etag: '"e2"' }),
|
|
127
|
-
}),
|
|
128
|
-
);
|
|
129
|
-
|
|
130
|
-
const { result } = renderHook(() => useETagCache());
|
|
131
|
-
|
|
132
|
-
await act(async () => {
|
|
133
|
-
await result.current.fetchWithETag('/api/a');
|
|
134
|
-
});
|
|
135
|
-
await act(async () => {
|
|
136
|
-
await result.current.fetchWithETag('/api/b');
|
|
137
|
-
});
|
|
138
|
-
|
|
139
|
-
expect(result.current.cacheSize).toBe(2);
|
|
140
|
-
|
|
141
|
-
act(() => {
|
|
142
|
-
result.current.clearCache();
|
|
143
|
-
});
|
|
144
|
-
|
|
145
|
-
expect(result.current.cacheSize).toBe(0);
|
|
146
|
-
});
|
|
147
|
-
|
|
148
|
-
it('serviceWorkerActive is false initially', () => {
|
|
149
|
-
const { result } = renderHook(() => useETagCache());
|
|
150
|
-
|
|
151
|
-
expect(result.current.serviceWorkerActive).toBe(false);
|
|
152
|
-
});
|
|
153
|
-
});
|
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Tests for useExpression and useCondition hooks
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
import { describe, it, expect } from 'vitest';
|
|
6
|
-
import { renderHook } from '@testing-library/react';
|
|
7
|
-
import { useExpression, useCondition } from '../useExpression';
|
|
8
|
-
|
|
9
|
-
describe('useExpression', () => {
|
|
10
|
-
it('returns string value directly for non-expression strings', () => {
|
|
11
|
-
const { result } = renderHook(() => useExpression('hello'));
|
|
12
|
-
|
|
13
|
-
expect(result.current).toBe('hello');
|
|
14
|
-
});
|
|
15
|
-
|
|
16
|
-
it('returns number value directly', () => {
|
|
17
|
-
const { result } = renderHook(() => useExpression(42));
|
|
18
|
-
|
|
19
|
-
expect(result.current).toBe(42);
|
|
20
|
-
});
|
|
21
|
-
|
|
22
|
-
it('returns boolean value directly', () => {
|
|
23
|
-
const { result } = renderHook(() => useExpression(true));
|
|
24
|
-
|
|
25
|
-
expect(result.current).toBe(true);
|
|
26
|
-
});
|
|
27
|
-
|
|
28
|
-
it('returns null for null expressions', () => {
|
|
29
|
-
const { result } = renderHook(() => useExpression(null));
|
|
30
|
-
|
|
31
|
-
expect(result.current).toBeNull();
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
it('returns undefined for undefined expressions', () => {
|
|
35
|
-
const { result } = renderHook(() => useExpression(undefined));
|
|
36
|
-
|
|
37
|
-
expect(result.current).toBeUndefined();
|
|
38
|
-
});
|
|
39
|
-
|
|
40
|
-
it('evaluates expressions with ${...} syntax', () => {
|
|
41
|
-
const context = { data: { name: 'John' } };
|
|
42
|
-
const { result } = renderHook(() =>
|
|
43
|
-
useExpression('${data.name}', context),
|
|
44
|
-
);
|
|
45
|
-
|
|
46
|
-
expect(result.current).toBe('John');
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
it('evaluates expressions with context data', () => {
|
|
50
|
-
const context = { data: { age: 25 } };
|
|
51
|
-
const { result } = renderHook(() =>
|
|
52
|
-
useExpression('${data.age > 18}', context),
|
|
53
|
-
);
|
|
54
|
-
|
|
55
|
-
expect(result.current).toBe(true);
|
|
56
|
-
});
|
|
57
|
-
});
|
|
58
|
-
|
|
59
|
-
describe('useCondition', () => {
|
|
60
|
-
it('returns true for boolean true', () => {
|
|
61
|
-
const { result } = renderHook(() => useCondition(true));
|
|
62
|
-
|
|
63
|
-
expect(result.current).toBe(true);
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
it('returns false for boolean false', () => {
|
|
67
|
-
const { result } = renderHook(() => useCondition(false));
|
|
68
|
-
|
|
69
|
-
expect(result.current).toBe(false);
|
|
70
|
-
});
|
|
71
|
-
|
|
72
|
-
it('returns true for undefined', () => {
|
|
73
|
-
const { result } = renderHook(() => useCondition(undefined));
|
|
74
|
-
|
|
75
|
-
expect(result.current).toBe(true);
|
|
76
|
-
});
|
|
77
|
-
|
|
78
|
-
it('evaluates string conditions with context', () => {
|
|
79
|
-
const context = { data: { status: 'active' } };
|
|
80
|
-
const { result } = renderHook(() =>
|
|
81
|
-
useCondition('${data.status === "active"}', context),
|
|
82
|
-
);
|
|
83
|
-
|
|
84
|
-
expect(result.current).toBe(true);
|
|
85
|
-
});
|
|
86
|
-
});
|
|
@@ -1,294 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Tests for useFocusTrap hook
|
|
3
|
-
*/
|
|
4
|
-
import { describe, it, expect, vi } from 'vitest';
|
|
5
|
-
import { renderHook, act } from '@testing-library/react';
|
|
6
|
-
import { useFocusTrap } from '../useFocusTrap';
|
|
7
|
-
|
|
8
|
-
describe('useFocusTrap', () => {
|
|
9
|
-
it('returns a ref object', () => {
|
|
10
|
-
const { result } = renderHook(() => useFocusTrap());
|
|
11
|
-
expect(result.current).toBeDefined();
|
|
12
|
-
expect(result.current).toHaveProperty('current');
|
|
13
|
-
});
|
|
14
|
-
|
|
15
|
-
it('returns a ref with null initial value', () => {
|
|
16
|
-
const { result } = renderHook(() => useFocusTrap());
|
|
17
|
-
expect(result.current.current).toBeNull();
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
it('accepts disabled option', () => {
|
|
21
|
-
const { result } = renderHook(() =>
|
|
22
|
-
useFocusTrap({ enabled: false })
|
|
23
|
-
);
|
|
24
|
-
expect(result.current).toBeDefined();
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
it('accepts all options without error', () => {
|
|
28
|
-
const onEscape = vi.fn();
|
|
29
|
-
const { result } = renderHook(() =>
|
|
30
|
-
useFocusTrap({
|
|
31
|
-
enabled: true,
|
|
32
|
-
autoFocus: true,
|
|
33
|
-
restoreFocus: true,
|
|
34
|
-
escapeDeactivates: true,
|
|
35
|
-
onEscape,
|
|
36
|
-
initialFocus: '.first-input',
|
|
37
|
-
})
|
|
38
|
-
);
|
|
39
|
-
expect(result.current).toBeDefined();
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
it('defaults to enabled when no options provided', () => {
|
|
43
|
-
const { result } = renderHook(() => useFocusTrap());
|
|
44
|
-
// Should not throw
|
|
45
|
-
expect(result.current.current).toBeNull();
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
it('auto-focuses the first focusable element when enabled', () => {
|
|
49
|
-
const container = document.createElement('div');
|
|
50
|
-
const button = document.createElement('button');
|
|
51
|
-
button.textContent = 'Click me';
|
|
52
|
-
container.appendChild(button);
|
|
53
|
-
document.body.appendChild(container);
|
|
54
|
-
|
|
55
|
-
const { result } = renderHook(() =>
|
|
56
|
-
useFocusTrap<HTMLDivElement>({ enabled: true, autoFocus: true })
|
|
57
|
-
);
|
|
58
|
-
|
|
59
|
-
act(() => {
|
|
60
|
-
(result.current as any).current = container;
|
|
61
|
-
});
|
|
62
|
-
|
|
63
|
-
// Re-render to trigger effect with the ref set
|
|
64
|
-
const { result: result2 } = renderHook(() =>
|
|
65
|
-
useFocusTrap<HTMLDivElement>({ enabled: true, autoFocus: true })
|
|
66
|
-
);
|
|
67
|
-
|
|
68
|
-
document.body.removeChild(container);
|
|
69
|
-
});
|
|
70
|
-
|
|
71
|
-
it('focuses initialFocus selector when provided', () => {
|
|
72
|
-
const container = document.createElement('div');
|
|
73
|
-
const input1 = document.createElement('input');
|
|
74
|
-
const input2 = document.createElement('input');
|
|
75
|
-
input2.className = 'target-input';
|
|
76
|
-
container.appendChild(input1);
|
|
77
|
-
container.appendChild(input2);
|
|
78
|
-
document.body.appendChild(container);
|
|
79
|
-
|
|
80
|
-
const focusSpy = vi.spyOn(input2, 'focus');
|
|
81
|
-
|
|
82
|
-
const { result, rerender } = renderHook(
|
|
83
|
-
({ enabled }) =>
|
|
84
|
-
useFocusTrap<HTMLDivElement>({
|
|
85
|
-
enabled,
|
|
86
|
-
autoFocus: true,
|
|
87
|
-
initialFocus: '.target-input',
|
|
88
|
-
}),
|
|
89
|
-
{ initialProps: { enabled: false } }
|
|
90
|
-
);
|
|
91
|
-
|
|
92
|
-
// Set the ref
|
|
93
|
-
(result.current as any).current = container;
|
|
94
|
-
|
|
95
|
-
// Enable the trap to trigger the effect
|
|
96
|
-
rerender({ enabled: true });
|
|
97
|
-
|
|
98
|
-
expect(focusSpy).toHaveBeenCalled();
|
|
99
|
-
|
|
100
|
-
document.body.removeChild(container);
|
|
101
|
-
});
|
|
102
|
-
|
|
103
|
-
it('handles Escape key when escapeDeactivates is true', () => {
|
|
104
|
-
const container = document.createElement('div');
|
|
105
|
-
const button = document.createElement('button');
|
|
106
|
-
container.appendChild(button);
|
|
107
|
-
document.body.appendChild(container);
|
|
108
|
-
|
|
109
|
-
const onEscape = vi.fn();
|
|
110
|
-
|
|
111
|
-
const { result, rerender } = renderHook(
|
|
112
|
-
({ enabled }) =>
|
|
113
|
-
useFocusTrap<HTMLDivElement>({
|
|
114
|
-
enabled,
|
|
115
|
-
escapeDeactivates: true,
|
|
116
|
-
onEscape,
|
|
117
|
-
}),
|
|
118
|
-
{ initialProps: { enabled: false } }
|
|
119
|
-
);
|
|
120
|
-
|
|
121
|
-
(result.current as any).current = container;
|
|
122
|
-
rerender({ enabled: true });
|
|
123
|
-
|
|
124
|
-
act(() => {
|
|
125
|
-
const event = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
|
|
126
|
-
container.dispatchEvent(event);
|
|
127
|
-
});
|
|
128
|
-
|
|
129
|
-
expect(onEscape).toHaveBeenCalled();
|
|
130
|
-
|
|
131
|
-
document.body.removeChild(container);
|
|
132
|
-
});
|
|
133
|
-
|
|
134
|
-
it('traps Tab focus at the end of focusable elements', () => {
|
|
135
|
-
const container = document.createElement('div');
|
|
136
|
-
const button1 = document.createElement('button');
|
|
137
|
-
button1.textContent = 'First';
|
|
138
|
-
const button2 = document.createElement('button');
|
|
139
|
-
button2.textContent = 'Last';
|
|
140
|
-
container.appendChild(button1);
|
|
141
|
-
container.appendChild(button2);
|
|
142
|
-
document.body.appendChild(container);
|
|
143
|
-
|
|
144
|
-
const { result, rerender } = renderHook(
|
|
145
|
-
({ enabled }) =>
|
|
146
|
-
useFocusTrap<HTMLDivElement>({
|
|
147
|
-
enabled,
|
|
148
|
-
autoFocus: false,
|
|
149
|
-
}),
|
|
150
|
-
{ initialProps: { enabled: false } }
|
|
151
|
-
);
|
|
152
|
-
|
|
153
|
-
(result.current as any).current = container;
|
|
154
|
-
rerender({ enabled: true });
|
|
155
|
-
|
|
156
|
-
// Focus the last element
|
|
157
|
-
button2.focus();
|
|
158
|
-
|
|
159
|
-
act(() => {
|
|
160
|
-
const event = new KeyboardEvent('keydown', {
|
|
161
|
-
key: 'Tab',
|
|
162
|
-
bubbles: true,
|
|
163
|
-
});
|
|
164
|
-
container.dispatchEvent(event);
|
|
165
|
-
});
|
|
166
|
-
|
|
167
|
-
document.body.removeChild(container);
|
|
168
|
-
});
|
|
169
|
-
|
|
170
|
-
it('traps Shift+Tab focus at the start of focusable elements', () => {
|
|
171
|
-
const container = document.createElement('div');
|
|
172
|
-
const button1 = document.createElement('button');
|
|
173
|
-
button1.textContent = 'First';
|
|
174
|
-
const button2 = document.createElement('button');
|
|
175
|
-
button2.textContent = 'Last';
|
|
176
|
-
container.appendChild(button1);
|
|
177
|
-
container.appendChild(button2);
|
|
178
|
-
document.body.appendChild(container);
|
|
179
|
-
|
|
180
|
-
const { result, rerender } = renderHook(
|
|
181
|
-
({ enabled }) =>
|
|
182
|
-
useFocusTrap<HTMLDivElement>({
|
|
183
|
-
enabled,
|
|
184
|
-
autoFocus: false,
|
|
185
|
-
}),
|
|
186
|
-
{ initialProps: { enabled: false } }
|
|
187
|
-
);
|
|
188
|
-
|
|
189
|
-
(result.current as any).current = container;
|
|
190
|
-
rerender({ enabled: true });
|
|
191
|
-
|
|
192
|
-
// Focus the first element
|
|
193
|
-
button1.focus();
|
|
194
|
-
|
|
195
|
-
act(() => {
|
|
196
|
-
const event = new KeyboardEvent('keydown', {
|
|
197
|
-
key: 'Tab',
|
|
198
|
-
shiftKey: true,
|
|
199
|
-
bubbles: true,
|
|
200
|
-
});
|
|
201
|
-
container.dispatchEvent(event);
|
|
202
|
-
});
|
|
203
|
-
|
|
204
|
-
document.body.removeChild(container);
|
|
205
|
-
});
|
|
206
|
-
|
|
207
|
-
it('restores focus on unmount when restoreFocus is true', () => {
|
|
208
|
-
const outsideButton = document.createElement('button');
|
|
209
|
-
outsideButton.textContent = 'Outside';
|
|
210
|
-
document.body.appendChild(outsideButton);
|
|
211
|
-
outsideButton.focus();
|
|
212
|
-
|
|
213
|
-
const container = document.createElement('div');
|
|
214
|
-
const innerButton = document.createElement('button');
|
|
215
|
-
innerButton.textContent = 'Inside';
|
|
216
|
-
container.appendChild(innerButton);
|
|
217
|
-
document.body.appendChild(container);
|
|
218
|
-
|
|
219
|
-
const { result, rerender, unmount } = renderHook(
|
|
220
|
-
({ enabled }) =>
|
|
221
|
-
useFocusTrap<HTMLDivElement>({
|
|
222
|
-
enabled,
|
|
223
|
-
autoFocus: true,
|
|
224
|
-
restoreFocus: true,
|
|
225
|
-
}),
|
|
226
|
-
{ initialProps: { enabled: false } }
|
|
227
|
-
);
|
|
228
|
-
|
|
229
|
-
(result.current as any).current = container;
|
|
230
|
-
rerender({ enabled: true });
|
|
231
|
-
|
|
232
|
-
unmount();
|
|
233
|
-
|
|
234
|
-
document.body.removeChild(container);
|
|
235
|
-
document.body.removeChild(outsideButton);
|
|
236
|
-
});
|
|
237
|
-
|
|
238
|
-
it('ignores non-Tab and non-Escape keys', () => {
|
|
239
|
-
const container = document.createElement('div');
|
|
240
|
-
const button = document.createElement('button');
|
|
241
|
-
container.appendChild(button);
|
|
242
|
-
document.body.appendChild(container);
|
|
243
|
-
|
|
244
|
-
const { result, rerender } = renderHook(
|
|
245
|
-
({ enabled }) =>
|
|
246
|
-
useFocusTrap<HTMLDivElement>({
|
|
247
|
-
enabled,
|
|
248
|
-
autoFocus: false,
|
|
249
|
-
}),
|
|
250
|
-
{ initialProps: { enabled: false } }
|
|
251
|
-
);
|
|
252
|
-
|
|
253
|
-
(result.current as any).current = container;
|
|
254
|
-
rerender({ enabled: true });
|
|
255
|
-
|
|
256
|
-
act(() => {
|
|
257
|
-
const event = new KeyboardEvent('keydown', {
|
|
258
|
-
key: 'a',
|
|
259
|
-
bubbles: true,
|
|
260
|
-
});
|
|
261
|
-
container.dispatchEvent(event);
|
|
262
|
-
});
|
|
263
|
-
|
|
264
|
-
document.body.removeChild(container);
|
|
265
|
-
});
|
|
266
|
-
|
|
267
|
-
it('handles container with no focusable elements', () => {
|
|
268
|
-
const container = document.createElement('div');
|
|
269
|
-
container.innerHTML = '<span>No focusable elements</span>';
|
|
270
|
-
document.body.appendChild(container);
|
|
271
|
-
|
|
272
|
-
const { result, rerender } = renderHook(
|
|
273
|
-
({ enabled }) =>
|
|
274
|
-
useFocusTrap<HTMLDivElement>({
|
|
275
|
-
enabled,
|
|
276
|
-
autoFocus: true,
|
|
277
|
-
}),
|
|
278
|
-
{ initialProps: { enabled: false } }
|
|
279
|
-
);
|
|
280
|
-
|
|
281
|
-
(result.current as any).current = container;
|
|
282
|
-
rerender({ enabled: true });
|
|
283
|
-
|
|
284
|
-
act(() => {
|
|
285
|
-
const event = new KeyboardEvent('keydown', {
|
|
286
|
-
key: 'Tab',
|
|
287
|
-
bubbles: true,
|
|
288
|
-
});
|
|
289
|
-
container.dispatchEvent(event);
|
|
290
|
-
});
|
|
291
|
-
|
|
292
|
-
document.body.removeChild(container);
|
|
293
|
-
});
|
|
294
|
-
});
|
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Tests for useKeyboardShortcuts hook
|
|
3
|
-
*/
|
|
4
|
-
import { describe, it, expect, vi } from 'vitest';
|
|
5
|
-
import { renderHook } from '@testing-library/react';
|
|
6
|
-
import { useKeyboardShortcuts, getShortcutDescriptions } from '../useKeyboardShortcuts';
|
|
7
|
-
import type { KeyboardShortcutDefinition } from '../useKeyboardShortcuts';
|
|
8
|
-
|
|
9
|
-
describe('useKeyboardShortcuts', () => {
|
|
10
|
-
it('registers shortcuts without error', () => {
|
|
11
|
-
const handler = vi.fn();
|
|
12
|
-
const shortcuts: KeyboardShortcutDefinition[] = [
|
|
13
|
-
{ key: 'k', ctrlOrMeta: true, handler, description: 'Search' },
|
|
14
|
-
];
|
|
15
|
-
|
|
16
|
-
expect(() => {
|
|
17
|
-
renderHook(() => useKeyboardShortcuts(shortcuts));
|
|
18
|
-
}).not.toThrow();
|
|
19
|
-
});
|
|
20
|
-
|
|
21
|
-
it('handles empty shortcuts array', () => {
|
|
22
|
-
expect(() => {
|
|
23
|
-
renderHook(() => useKeyboardShortcuts([]));
|
|
24
|
-
}).not.toThrow();
|
|
25
|
-
});
|
|
26
|
-
|
|
27
|
-
it('respects enabled option', () => {
|
|
28
|
-
const handler = vi.fn();
|
|
29
|
-
const shortcuts: KeyboardShortcutDefinition[] = [
|
|
30
|
-
{ key: 'k', handler },
|
|
31
|
-
];
|
|
32
|
-
|
|
33
|
-
expect(() => {
|
|
34
|
-
renderHook(() => useKeyboardShortcuts(shortcuts, { enabled: false }));
|
|
35
|
-
}).not.toThrow();
|
|
36
|
-
});
|
|
37
|
-
|
|
38
|
-
it('fires handler on matching keyboard event', () => {
|
|
39
|
-
const handler = vi.fn();
|
|
40
|
-
const shortcuts: KeyboardShortcutDefinition[] = [
|
|
41
|
-
{ key: 'Escape', handler },
|
|
42
|
-
];
|
|
43
|
-
|
|
44
|
-
renderHook(() => useKeyboardShortcuts(shortcuts));
|
|
45
|
-
|
|
46
|
-
// Simulate keydown
|
|
47
|
-
const event = new KeyboardEvent('keydown', {
|
|
48
|
-
key: 'Escape',
|
|
49
|
-
bubbles: true,
|
|
50
|
-
});
|
|
51
|
-
document.dispatchEvent(event);
|
|
52
|
-
|
|
53
|
-
expect(handler).toHaveBeenCalledTimes(1);
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
it('does not fire handler for non-matching key', () => {
|
|
57
|
-
const handler = vi.fn();
|
|
58
|
-
const shortcuts: KeyboardShortcutDefinition[] = [
|
|
59
|
-
{ key: 'k', ctrlOrMeta: true, handler },
|
|
60
|
-
];
|
|
61
|
-
|
|
62
|
-
renderHook(() => useKeyboardShortcuts(shortcuts));
|
|
63
|
-
|
|
64
|
-
const event = new KeyboardEvent('keydown', {
|
|
65
|
-
key: 'k',
|
|
66
|
-
bubbles: true,
|
|
67
|
-
// No ctrl or meta
|
|
68
|
-
});
|
|
69
|
-
document.dispatchEvent(event);
|
|
70
|
-
|
|
71
|
-
expect(handler).not.toHaveBeenCalled();
|
|
72
|
-
});
|
|
73
|
-
|
|
74
|
-
it('fires handler when modifier keys match', () => {
|
|
75
|
-
const handler = vi.fn();
|
|
76
|
-
const shortcuts: KeyboardShortcutDefinition[] = [
|
|
77
|
-
{ key: 'k', ctrlOrMeta: true, handler },
|
|
78
|
-
];
|
|
79
|
-
|
|
80
|
-
renderHook(() => useKeyboardShortcuts(shortcuts));
|
|
81
|
-
|
|
82
|
-
const event = new KeyboardEvent('keydown', {
|
|
83
|
-
key: 'k',
|
|
84
|
-
ctrlKey: true,
|
|
85
|
-
bubbles: true,
|
|
86
|
-
});
|
|
87
|
-
document.dispatchEvent(event);
|
|
88
|
-
|
|
89
|
-
expect(handler).toHaveBeenCalledTimes(1);
|
|
90
|
-
});
|
|
91
|
-
|
|
92
|
-
it('skips disabled shortcuts', () => {
|
|
93
|
-
const handler = vi.fn();
|
|
94
|
-
const shortcuts: KeyboardShortcutDefinition[] = [
|
|
95
|
-
{ key: 'k', handler, enabled: false },
|
|
96
|
-
];
|
|
97
|
-
|
|
98
|
-
renderHook(() => useKeyboardShortcuts(shortcuts));
|
|
99
|
-
|
|
100
|
-
const event = new KeyboardEvent('keydown', {
|
|
101
|
-
key: 'k',
|
|
102
|
-
bubbles: true,
|
|
103
|
-
});
|
|
104
|
-
document.dispatchEvent(event);
|
|
105
|
-
|
|
106
|
-
expect(handler).not.toHaveBeenCalled();
|
|
107
|
-
});
|
|
108
|
-
});
|
|
109
|
-
|
|
110
|
-
describe('getShortcutDescriptions', () => {
|
|
111
|
-
it('returns formatted descriptions', () => {
|
|
112
|
-
const shortcuts: KeyboardShortcutDefinition[] = [
|
|
113
|
-
{ key: 'k', ctrlOrMeta: true, handler: vi.fn(), description: 'Search' },
|
|
114
|
-
{ key: 'n', ctrlOrMeta: true, shift: true, handler: vi.fn(), description: 'New' },
|
|
115
|
-
{ key: 'Escape', handler: vi.fn(), description: 'Close' },
|
|
116
|
-
];
|
|
117
|
-
|
|
118
|
-
const descriptions = getShortcutDescriptions(shortcuts);
|
|
119
|
-
|
|
120
|
-
expect(descriptions).toHaveLength(3);
|
|
121
|
-
expect(descriptions[0]).toEqual({ keys: '⌘/Ctrl + K', description: 'Search' });
|
|
122
|
-
expect(descriptions[1]).toEqual({ keys: '⌘/Ctrl + Shift + N', description: 'New' });
|
|
123
|
-
expect(descriptions[2]).toEqual({ keys: 'Escape', description: 'Close' });
|
|
124
|
-
});
|
|
125
|
-
|
|
126
|
-
it('excludes shortcuts without descriptions', () => {
|
|
127
|
-
const shortcuts: KeyboardShortcutDefinition[] = [
|
|
128
|
-
{ key: 'k', handler: vi.fn() },
|
|
129
|
-
{ key: 'n', handler: vi.fn(), description: 'New' },
|
|
130
|
-
];
|
|
131
|
-
|
|
132
|
-
const descriptions = getShortcutDescriptions(shortcuts);
|
|
133
|
-
expect(descriptions).toHaveLength(1);
|
|
134
|
-
});
|
|
135
|
-
|
|
136
|
-
it('excludes disabled shortcuts', () => {
|
|
137
|
-
const shortcuts: KeyboardShortcutDefinition[] = [
|
|
138
|
-
{ key: 'k', handler: vi.fn(), description: 'Search', enabled: false },
|
|
139
|
-
];
|
|
140
|
-
|
|
141
|
-
const descriptions = getShortcutDescriptions(shortcuts);
|
|
142
|
-
expect(descriptions).toHaveLength(0);
|
|
143
|
-
});
|
|
144
|
-
});
|