@jobber/hooks 2.0.3-pre.50 → 2.0.3-pre1.52
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/dist/index.d.ts +10 -10
- package/dist/index.js +11 -26
- package/dist/useAssert/index.d.ts +1 -1
- package/dist/useAssert/index.js +1 -5
- package/dist/useAssert/useAssert.js +3 -10
- package/dist/useCollectionQuery/index.d.ts +1 -1
- package/dist/useCollectionQuery/index.js +1 -5
- package/dist/useCollectionQuery/mdxUtils.d.ts +2 -3
- package/dist/useCollectionQuery/mdxUtils.js +8 -12
- package/dist/useCollectionQuery/test-utilities/index.d.ts +3 -3
- package/dist/useCollectionQuery/test-utilities/index.js +3 -19
- package/dist/useCollectionQuery/test-utilities/mocks.d.ts +1 -1
- package/dist/useCollectionQuery/test-utilities/mocks.js +19 -30
- package/dist/useCollectionQuery/test-utilities/queries.d.ts +3 -3
- package/dist/useCollectionQuery/test-utilities/queries.js +4 -7
- package/dist/useCollectionQuery/test-utilities/utils.js +1 -5
- package/dist/useCollectionQuery/uniqueEdges.d.ts +1 -1
- package/dist/useCollectionQuery/uniqueEdges.js +2 -7
- package/dist/useCollectionQuery/uniqueNodes.js +1 -5
- package/dist/useCollectionQuery/useCollectionQuery.d.ts +2 -2
- package/dist/useCollectionQuery/useCollectionQuery.js +26 -31
- package/dist/useCollectionQuery/useCollectionQuery.test.js +119 -119
- package/dist/useFocusTrap/index.d.ts +1 -1
- package/dist/useFocusTrap/index.js +1 -5
- package/dist/useFocusTrap/useFocusTrap.js +4 -8
- package/dist/useFocusTrap/useFocusTrap.test.js +26 -31
- package/dist/useFormState/index.d.ts +1 -1
- package/dist/useFormState/index.js +1 -5
- package/dist/useFormState/useFormState.js +3 -7
- package/dist/useIsMounted/index.d.ts +1 -1
- package/dist/useIsMounted/index.js +1 -5
- package/dist/useIsMounted/useIsMounted.js +4 -8
- package/dist/useIsMounted/useIsMounted.test.js +4 -6
- package/dist/useLiveAnnounce/index.d.ts +1 -1
- package/dist/useLiveAnnounce/index.js +1 -5
- package/dist/useLiveAnnounce/useLiveAnnounce.js +4 -8
- package/dist/useLiveAnnounce/useLiveAnnounce.test.js +19 -24
- package/dist/useOnKeyDown/index.d.ts +1 -1
- package/dist/useOnKeyDown/index.js +1 -5
- package/dist/useOnKeyDown/useOnKeyDown.js +3 -10
- package/dist/useOnKeyDown/useOnKeyDown.test.js +7 -12
- package/dist/usePasswordStrength/index.d.ts +1 -1
- package/dist/usePasswordStrength/index.js +1 -5
- package/dist/usePasswordStrength/usePasswordStrength.js +4 -11
- package/dist/useRefocusOnActivator/index.d.ts +1 -1
- package/dist/useRefocusOnActivator/index.js +1 -5
- package/dist/useRefocusOnActivator/useRefocusOnActivator.js +3 -7
- package/dist/useResizeObserver/index.d.ts +1 -1
- package/dist/useResizeObserver/index.js +1 -17
- package/dist/useResizeObserver/useResizeObserver.d.ts +1 -2
- package/dist/useResizeObserver/useResizeObserver.js +8 -15
- package/package.json +3 -13
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use strict";
|
|
2
1
|
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
3
2
|
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
4
3
|
return new (P || (P = Promise))(function (resolve, reject) {
|
|
@@ -8,18 +7,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
8
7
|
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
9
8
|
});
|
|
10
9
|
};
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
10
|
+
import { act, renderHook } from "@testing-library/react-hooks";
|
|
11
|
+
import { waitFor } from "@testing-library/react";
|
|
12
|
+
import { useCollectionQuery } from "./useCollectionQuery.js";
|
|
13
|
+
import { LIST_QUERY, LIST_QUERY_WITH_TOTAL_COUNT, SUBSCRIPTION_QUERY, buildListRequestMock, buildListRequestMockForNextPage, buildSubscriptionRequestMock, listQueryResponseMock, listQueryWithTotalCountResponseMock, setListQueryMockHasNextPage, subscriptionQueryMock, wait, wrapper,
|
|
14
|
+
// eslint-disable-next-line import/no-internal-modules
|
|
15
|
+
} from "./test-utilities/index.js";
|
|
16
16
|
beforeEach(() => {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
setListQueryMockHasNextPage(true);
|
|
18
|
+
listQueryResponseMock.mockClear();
|
|
19
|
+
subscriptionQueryMock.mockClear();
|
|
20
20
|
});
|
|
21
21
|
function useCollectionQueryHook(query) {
|
|
22
|
-
return
|
|
22
|
+
return useCollectionQuery({
|
|
23
23
|
query: query,
|
|
24
24
|
getCollectionByPath(data) {
|
|
25
25
|
var _a;
|
|
@@ -28,14 +28,14 @@ function useCollectionQueryHook(query) {
|
|
|
28
28
|
});
|
|
29
29
|
}
|
|
30
30
|
function useCollectionQueryHookWithSubscription(query) {
|
|
31
|
-
return
|
|
31
|
+
return useCollectionQuery({
|
|
32
32
|
query: query,
|
|
33
33
|
getCollectionByPath(data) {
|
|
34
34
|
var _a;
|
|
35
35
|
return (_a = data === null || data === void 0 ? void 0 : data.conversation) === null || _a === void 0 ? void 0 : _a.smsMessages;
|
|
36
36
|
},
|
|
37
37
|
subscription: {
|
|
38
|
-
document:
|
|
38
|
+
document: SUBSCRIPTION_QUERY,
|
|
39
39
|
getNodeByPath(conversationData) {
|
|
40
40
|
var _a;
|
|
41
41
|
return (_a = conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationMessage) === null || _a === void 0 ? void 0 : _a.smsMessage;
|
|
@@ -44,7 +44,7 @@ function useCollectionQueryHookWithSubscription(query) {
|
|
|
44
44
|
});
|
|
45
45
|
}
|
|
46
46
|
function useCollectionQueryHookWithSubscriptionAndSearch(query, searchTerm) {
|
|
47
|
-
return
|
|
47
|
+
return useCollectionQuery({
|
|
48
48
|
query: query,
|
|
49
49
|
queryOptions: {
|
|
50
50
|
variables: {
|
|
@@ -56,7 +56,7 @@ function useCollectionQueryHookWithSubscriptionAndSearch(query, searchTerm) {
|
|
|
56
56
|
return (_a = data === null || data === void 0 ? void 0 : data.conversation) === null || _a === void 0 ? void 0 : _a.smsMessages;
|
|
57
57
|
},
|
|
58
58
|
subscription: {
|
|
59
|
-
document:
|
|
59
|
+
document: SUBSCRIPTION_QUERY,
|
|
60
60
|
getNodeByPath(conversationData) {
|
|
61
61
|
var _a;
|
|
62
62
|
return (_a = conversationData === null || conversationData === void 0 ? void 0 : conversationData.conversationMessage) === null || _a === void 0 ? void 0 : _a.smsMessage;
|
|
@@ -67,77 +67,77 @@ function useCollectionQueryHookWithSubscriptionAndSearch(query, searchTerm) {
|
|
|
67
67
|
describe("useCollectionQuery", () => {
|
|
68
68
|
describe.each `
|
|
69
69
|
testCase | query | responseMock
|
|
70
|
-
${"excludes totalCount"} | ${
|
|
71
|
-
${"includes totalCount"} | ${
|
|
70
|
+
${"excludes totalCount"} | ${LIST_QUERY} | ${listQueryResponseMock}
|
|
71
|
+
${"includes totalCount"} | ${LIST_QUERY_WITH_TOTAL_COUNT} | ${listQueryWithTotalCountResponseMock}
|
|
72
72
|
`("when the query run $testCase", ({ query, responseMock }) => {
|
|
73
73
|
describe("when useCollectionQuery is first called", () => {
|
|
74
74
|
describe("when nextPage is called while it's still loading initial content", () => {
|
|
75
75
|
it("should not trigger a the next page to be fetched", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
76
|
-
const { result } =
|
|
77
|
-
wrapper:
|
|
78
|
-
|
|
79
|
-
|
|
76
|
+
const { result } = renderHook(() => useCollectionQueryHook(query), {
|
|
77
|
+
wrapper: wrapper([
|
|
78
|
+
buildListRequestMock(query, responseMock),
|
|
79
|
+
buildListRequestMockForNextPage(query, responseMock),
|
|
80
80
|
]),
|
|
81
81
|
});
|
|
82
|
-
|
|
82
|
+
act(() => {
|
|
83
83
|
result.current.nextPage();
|
|
84
84
|
});
|
|
85
|
-
yield
|
|
85
|
+
yield act(wait);
|
|
86
86
|
expect(responseMock).toHaveBeenCalledTimes(1);
|
|
87
87
|
}));
|
|
88
88
|
});
|
|
89
89
|
describe("when refresh is called while it's still loading initial content", () => {
|
|
90
90
|
it("should not trigger a refresh", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
91
|
-
const { result } =
|
|
92
|
-
wrapper:
|
|
93
|
-
|
|
94
|
-
|
|
91
|
+
const { result } = renderHook(() => useCollectionQueryHook(query), {
|
|
92
|
+
wrapper: wrapper([
|
|
93
|
+
buildListRequestMock(query, responseMock),
|
|
94
|
+
buildListRequestMock(query, responseMock),
|
|
95
95
|
]),
|
|
96
96
|
});
|
|
97
|
-
|
|
97
|
+
act(() => {
|
|
98
98
|
result.current.refresh();
|
|
99
99
|
});
|
|
100
|
-
yield
|
|
100
|
+
yield act(wait);
|
|
101
101
|
expect(responseMock).toHaveBeenCalledTimes(1);
|
|
102
102
|
}));
|
|
103
103
|
});
|
|
104
104
|
describe("when there is no error", () => {
|
|
105
105
|
it("should update data", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
106
106
|
var _a, _b, _c, _d;
|
|
107
|
-
const { result } =
|
|
108
|
-
wrapper:
|
|
107
|
+
const { result } = renderHook(() => useCollectionQueryHook(query), {
|
|
108
|
+
wrapper: wrapper([buildListRequestMock(query, responseMock)]),
|
|
109
109
|
});
|
|
110
|
-
yield
|
|
110
|
+
yield act(wait);
|
|
111
111
|
expect((_d = (_c = (_b = (_a = result.current.data) === null || _a === void 0 ? void 0 : _a.conversation) === null || _b === void 0 ? void 0 : _b.smsMessages) === null || _c === void 0 ? void 0 : _c.edges) === null || _d === void 0 ? void 0 : _d.length).toBe(1);
|
|
112
112
|
}));
|
|
113
113
|
it("should set initialLoading while loading data", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
114
|
-
const { result } =
|
|
115
|
-
wrapper:
|
|
114
|
+
const { result } = renderHook(() => useCollectionQueryHook(query), {
|
|
115
|
+
wrapper: wrapper([buildListRequestMock(query, responseMock)]),
|
|
116
116
|
});
|
|
117
117
|
expect(result.current.loadingInitialContent).toBe(true);
|
|
118
|
-
yield
|
|
118
|
+
yield act(wait);
|
|
119
119
|
}));
|
|
120
120
|
});
|
|
121
121
|
});
|
|
122
122
|
describe("#nextPage", () => {
|
|
123
123
|
describe("when nextPage is called while it's still loadingNextPage", () => {
|
|
124
124
|
it("should not trigger a nextPage", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
125
|
-
const { result } =
|
|
126
|
-
wrapper:
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
125
|
+
const { result } = renderHook(() => useCollectionQueryHook(query), {
|
|
126
|
+
wrapper: wrapper([
|
|
127
|
+
buildListRequestMock(query, responseMock),
|
|
128
|
+
buildListRequestMockForNextPage(query, responseMock),
|
|
129
|
+
buildListRequestMockForNextPage(query, responseMock),
|
|
130
130
|
]),
|
|
131
131
|
});
|
|
132
|
-
yield
|
|
133
|
-
|
|
132
|
+
yield act(wait);
|
|
133
|
+
act(() => {
|
|
134
134
|
result.current.nextPage();
|
|
135
135
|
});
|
|
136
|
-
|
|
136
|
+
act(() => {
|
|
137
137
|
result.current.nextPage();
|
|
138
138
|
});
|
|
139
|
-
yield
|
|
140
|
-
yield
|
|
139
|
+
yield act(wait);
|
|
140
|
+
yield waitFor(() => {
|
|
141
141
|
var _a, _b, _c;
|
|
142
142
|
expect((_c = (_b = (_a = result.current.data) === null || _a === void 0 ? void 0 : _a.conversation) === null || _b === void 0 ? void 0 : _b.smsMessages) === null || _c === void 0 ? void 0 : _c.edges).toHaveLength(2);
|
|
143
143
|
});
|
|
@@ -145,130 +145,130 @@ describe("useCollectionQuery", () => {
|
|
|
145
145
|
});
|
|
146
146
|
describe("when refresh is called while it's still loadingNextPage", () => {
|
|
147
147
|
it("should trigger a refresh", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
148
|
-
const { result } =
|
|
149
|
-
wrapper:
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
148
|
+
const { result } = renderHook(() => useCollectionQueryHook(query), {
|
|
149
|
+
wrapper: wrapper([
|
|
150
|
+
buildListRequestMock(query, responseMock),
|
|
151
|
+
buildListRequestMock(query, responseMock),
|
|
152
|
+
buildListRequestMockForNextPage(query, responseMock),
|
|
153
153
|
]),
|
|
154
154
|
});
|
|
155
|
-
yield
|
|
156
|
-
|
|
155
|
+
yield act(wait);
|
|
156
|
+
act(() => {
|
|
157
157
|
result.current.nextPage();
|
|
158
158
|
});
|
|
159
|
-
|
|
159
|
+
act(() => {
|
|
160
160
|
result.current.refresh();
|
|
161
161
|
});
|
|
162
162
|
expect(result.current.loadingRefresh).toBe(true);
|
|
163
|
-
yield
|
|
163
|
+
yield act(wait);
|
|
164
164
|
}));
|
|
165
165
|
});
|
|
166
166
|
describe("when there is no more data to fetch", () => {
|
|
167
167
|
it("should not fetch more data", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
168
|
-
|
|
169
|
-
const { result } =
|
|
170
|
-
wrapper:
|
|
171
|
-
|
|
172
|
-
|
|
168
|
+
setListQueryMockHasNextPage(false);
|
|
169
|
+
const { result } = renderHook(() => useCollectionQueryHook(query), {
|
|
170
|
+
wrapper: wrapper([
|
|
171
|
+
buildListRequestMock(query, responseMock),
|
|
172
|
+
buildListRequestMockForNextPage(query, responseMock),
|
|
173
173
|
]),
|
|
174
174
|
});
|
|
175
|
-
yield
|
|
176
|
-
|
|
175
|
+
yield act(wait);
|
|
176
|
+
act(() => {
|
|
177
177
|
result.current.nextPage();
|
|
178
178
|
});
|
|
179
|
-
yield
|
|
179
|
+
yield act(wait);
|
|
180
180
|
expect(responseMock).toHaveBeenCalledTimes(1);
|
|
181
181
|
}));
|
|
182
182
|
});
|
|
183
183
|
describe("when there is no error", () => {
|
|
184
184
|
it("should update data", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
185
|
-
const { result } =
|
|
186
|
-
wrapper:
|
|
187
|
-
|
|
188
|
-
|
|
185
|
+
const { result } = renderHook(() => useCollectionQueryHook(query), {
|
|
186
|
+
wrapper: wrapper([
|
|
187
|
+
buildListRequestMock(query, responseMock),
|
|
188
|
+
buildListRequestMockForNextPage(query, responseMock),
|
|
189
189
|
]),
|
|
190
190
|
});
|
|
191
|
-
yield
|
|
192
|
-
|
|
191
|
+
yield act(wait);
|
|
192
|
+
act(() => {
|
|
193
193
|
result.current.nextPage();
|
|
194
194
|
});
|
|
195
|
-
yield
|
|
196
|
-
yield
|
|
195
|
+
yield act(wait);
|
|
196
|
+
yield waitFor(() => {
|
|
197
197
|
var _a, _b, _c;
|
|
198
198
|
expect((_c = (_b = (_a = result.current.data) === null || _a === void 0 ? void 0 : _a.conversation) === null || _b === void 0 ? void 0 : _b.smsMessages) === null || _c === void 0 ? void 0 : _c.edges).toHaveLength(2);
|
|
199
199
|
});
|
|
200
200
|
}));
|
|
201
201
|
it("should set loadingNextPage while loading data", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
202
|
-
const { result } =
|
|
203
|
-
wrapper:
|
|
204
|
-
|
|
205
|
-
|
|
202
|
+
const { result } = renderHook(() => useCollectionQueryHook(query), {
|
|
203
|
+
wrapper: wrapper([
|
|
204
|
+
buildListRequestMock(query, responseMock),
|
|
205
|
+
buildListRequestMockForNextPage(query, responseMock),
|
|
206
206
|
]),
|
|
207
207
|
});
|
|
208
|
-
yield
|
|
209
|
-
|
|
208
|
+
yield act(wait);
|
|
209
|
+
act(() => {
|
|
210
210
|
result.current.nextPage();
|
|
211
211
|
});
|
|
212
212
|
expect(result.current.loadingNextPage).toBe(true);
|
|
213
|
-
yield
|
|
213
|
+
yield act(wait);
|
|
214
214
|
}));
|
|
215
215
|
});
|
|
216
216
|
});
|
|
217
217
|
describe("#refresh", () => {
|
|
218
218
|
describe("when refresh is called while it's still loadingRefresh", () => {
|
|
219
219
|
it("should not trigger a refresh", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
220
|
-
const { result } =
|
|
221
|
-
wrapper:
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
220
|
+
const { result } = renderHook(() => useCollectionQueryHook(query), {
|
|
221
|
+
wrapper: wrapper([
|
|
222
|
+
buildListRequestMock(query, responseMock),
|
|
223
|
+
buildListRequestMock(query, responseMock),
|
|
224
|
+
buildListRequestMock(query, responseMock),
|
|
225
225
|
]),
|
|
226
226
|
});
|
|
227
|
-
yield
|
|
228
|
-
|
|
227
|
+
yield act(wait);
|
|
228
|
+
act(() => {
|
|
229
229
|
result.current.refresh();
|
|
230
230
|
});
|
|
231
|
-
|
|
231
|
+
act(() => {
|
|
232
232
|
result.current.refresh();
|
|
233
233
|
});
|
|
234
|
-
yield
|
|
234
|
+
yield act(wait);
|
|
235
235
|
expect(responseMock).toHaveBeenCalledTimes(2);
|
|
236
236
|
}));
|
|
237
237
|
});
|
|
238
238
|
describe("when nextPage is called while it's still loadingRefresh", () => {
|
|
239
239
|
it("should not trigger a nextPage", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
240
|
-
const { result } =
|
|
241
|
-
wrapper:
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
240
|
+
const { result } = renderHook(() => useCollectionQueryHook(query), {
|
|
241
|
+
wrapper: wrapper([
|
|
242
|
+
buildListRequestMock(query, responseMock),
|
|
243
|
+
buildListRequestMock(query, responseMock),
|
|
244
|
+
buildListRequestMockForNextPage(query, responseMock),
|
|
245
245
|
]),
|
|
246
246
|
});
|
|
247
|
-
yield
|
|
248
|
-
|
|
247
|
+
yield act(wait);
|
|
248
|
+
act(() => {
|
|
249
249
|
result.current.refresh();
|
|
250
250
|
});
|
|
251
|
-
|
|
251
|
+
act(() => {
|
|
252
252
|
result.current.nextPage();
|
|
253
253
|
});
|
|
254
254
|
expect(result.current.loadingNextPage).toBe(false);
|
|
255
|
-
yield
|
|
255
|
+
yield act(wait);
|
|
256
256
|
}));
|
|
257
257
|
});
|
|
258
258
|
describe("when there is no error", () => {
|
|
259
259
|
it("should set loadingRefresh while loading data", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
260
|
-
const { result } =
|
|
261
|
-
wrapper:
|
|
262
|
-
|
|
263
|
-
|
|
260
|
+
const { result } = renderHook(() => useCollectionQueryHook(query), {
|
|
261
|
+
wrapper: wrapper([
|
|
262
|
+
buildListRequestMock(query, responseMock),
|
|
263
|
+
buildListRequestMock(query, responseMock),
|
|
264
264
|
]),
|
|
265
265
|
});
|
|
266
|
-
yield
|
|
267
|
-
|
|
266
|
+
yield act(wait);
|
|
267
|
+
act(() => {
|
|
268
268
|
result.current.refresh();
|
|
269
269
|
});
|
|
270
270
|
expect(result.current.loadingRefresh).toBe(true);
|
|
271
|
-
yield
|
|
271
|
+
yield act(wait);
|
|
272
272
|
}));
|
|
273
273
|
});
|
|
274
274
|
});
|
|
@@ -276,32 +276,32 @@ describe("useCollectionQuery", () => {
|
|
|
276
276
|
describe("when hook receives update from item not in collection", () => {
|
|
277
277
|
it("should add new item to collection", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
278
278
|
var _a, _b, _c, _d, _e;
|
|
279
|
-
const { result, waitForNextUpdate } =
|
|
280
|
-
wrapper:
|
|
281
|
-
|
|
282
|
-
|
|
279
|
+
const { result, waitForNextUpdate } = renderHook(() => useCollectionQueryHookWithSubscription(query), {
|
|
280
|
+
wrapper: wrapper([
|
|
281
|
+
buildListRequestMock(query, responseMock, "1"),
|
|
282
|
+
buildSubscriptionRequestMock("2"),
|
|
283
283
|
]),
|
|
284
284
|
});
|
|
285
285
|
// Wait for initial load
|
|
286
|
-
yield
|
|
286
|
+
yield act(waitForNextUpdate);
|
|
287
287
|
// Wait for subscription
|
|
288
|
-
yield
|
|
288
|
+
yield act(waitForNextUpdate);
|
|
289
289
|
expect((_e = (_d = (_c = (_b = (_a = result === null || result === void 0 ? void 0 : result.current) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.conversation) === null || _c === void 0 ? void 0 : _c.smsMessages) === null || _d === void 0 ? void 0 : _d.edges) === null || _e === void 0 ? void 0 : _e.length).toBe(2);
|
|
290
290
|
}));
|
|
291
291
|
});
|
|
292
292
|
describe("when hook receives update from item already in collection", () => {
|
|
293
293
|
it("should return the existing collection", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
294
294
|
var _a, _b, _c, _d, _e;
|
|
295
|
-
const { result, waitForNextUpdate } =
|
|
296
|
-
wrapper:
|
|
297
|
-
|
|
298
|
-
|
|
295
|
+
const { result, waitForNextUpdate } = renderHook(() => useCollectionQueryHookWithSubscription(query), {
|
|
296
|
+
wrapper: wrapper([
|
|
297
|
+
buildListRequestMock(query, responseMock, "1"),
|
|
298
|
+
buildSubscriptionRequestMock("1"),
|
|
299
299
|
]),
|
|
300
300
|
});
|
|
301
301
|
// Wait for initial load
|
|
302
|
-
yield
|
|
302
|
+
yield act(waitForNextUpdate);
|
|
303
303
|
// Wait for subscription
|
|
304
|
-
yield
|
|
304
|
+
yield act(() => wait(200));
|
|
305
305
|
expect((_e = (_d = (_c = (_b = (_a = result === null || result === void 0 ? void 0 : result.current) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.conversation) === null || _c === void 0 ? void 0 : _c.smsMessages) === null || _d === void 0 ? void 0 : _d.edges) === null || _e === void 0 ? void 0 : _e.length).toBe(1);
|
|
306
306
|
}));
|
|
307
307
|
});
|
|
@@ -309,16 +309,16 @@ describe("useCollectionQuery", () => {
|
|
|
309
309
|
it("should return the existing collection without adding the subscribed content", () => __awaiter(void 0, void 0, void 0, function* () {
|
|
310
310
|
var _a, _b, _c, _d, _e;
|
|
311
311
|
const searchTerm = "FooBar";
|
|
312
|
-
const { result, waitForNextUpdate } =
|
|
313
|
-
wrapper:
|
|
314
|
-
|
|
315
|
-
|
|
312
|
+
const { result, waitForNextUpdate } = renderHook(() => useCollectionQueryHookWithSubscriptionAndSearch(query, searchTerm), {
|
|
313
|
+
wrapper: wrapper([
|
|
314
|
+
buildListRequestMock(query, responseMock, "1", searchTerm),
|
|
315
|
+
buildSubscriptionRequestMock("1"),
|
|
316
316
|
]),
|
|
317
317
|
});
|
|
318
318
|
// Wait for initial load
|
|
319
|
-
yield
|
|
319
|
+
yield act(waitForNextUpdate);
|
|
320
320
|
// Wait for subscription
|
|
321
|
-
yield
|
|
321
|
+
yield act(() => wait(200));
|
|
322
322
|
expect((_e = (_d = (_c = (_b = (_a = result === null || result === void 0 ? void 0 : result.current) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.conversation) === null || _c === void 0 ? void 0 : _c.smsMessages) === null || _d === void 0 ? void 0 : _d.edges) === null || _e === void 0 ? void 0 : _e.length).toBe(1);
|
|
323
323
|
}));
|
|
324
324
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { useFocusTrap } from "./useFocusTrap";
|
|
1
|
+
export { useFocusTrap } from "./useFocusTrap.js";
|
|
@@ -1,5 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useFocusTrap = void 0;
|
|
4
|
-
var useFocusTrap_1 = require("./useFocusTrap");
|
|
5
|
-
Object.defineProperty(exports, "useFocusTrap", { enumerable: true, get: function () { return useFocusTrap_1.useFocusTrap; } });
|
|
1
|
+
export { useFocusTrap } from "./useFocusTrap.js";
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useFocusTrap = void 0;
|
|
4
|
-
const react_1 = require("react");
|
|
1
|
+
import { useEffect, useRef } from "react";
|
|
5
2
|
/**
|
|
6
3
|
* Traps the focus within the children of the ref element.
|
|
7
4
|
*
|
|
@@ -10,11 +7,11 @@ const react_1 = require("react");
|
|
|
10
7
|
*
|
|
11
8
|
* @returns ref
|
|
12
9
|
*/
|
|
13
|
-
function useFocusTrap(active) {
|
|
10
|
+
export function useFocusTrap(active) {
|
|
14
11
|
// There's an ongoing issue with useRef return type clashing with an element's
|
|
15
12
|
// ref prop type. TLDR: Use null because useRef doesn't expect undefined.
|
|
16
13
|
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/35572
|
|
17
|
-
const ref =
|
|
14
|
+
const ref = useRef(null);
|
|
18
15
|
function handleKeyDown(event) {
|
|
19
16
|
if (!(active && ref.current) || event.key !== "Tab") {
|
|
20
17
|
return;
|
|
@@ -33,7 +30,7 @@ function useFocusTrap(active) {
|
|
|
33
30
|
}
|
|
34
31
|
}
|
|
35
32
|
}
|
|
36
|
-
|
|
33
|
+
useEffect(() => {
|
|
37
34
|
var _a, _b;
|
|
38
35
|
if (active) {
|
|
39
36
|
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
@@ -46,7 +43,6 @@ function useFocusTrap(active) {
|
|
|
46
43
|
}, [active]);
|
|
47
44
|
return ref;
|
|
48
45
|
}
|
|
49
|
-
exports.useFocusTrap = useFocusTrap;
|
|
50
46
|
function getElements(ref) {
|
|
51
47
|
const focusables = [
|
|
52
48
|
"button",
|
|
@@ -1,52 +1,47 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const react_1 = __importDefault(require("react"));
|
|
7
|
-
const react_2 = require("@testing-library/react");
|
|
8
|
-
const user_event_1 = __importDefault(require("@testing-library/user-event"));
|
|
9
|
-
const useFocusTrap_1 = require("./useFocusTrap");
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { render } from "@testing-library/react";
|
|
3
|
+
import userEvent from "@testing-library/user-event";
|
|
4
|
+
import { useFocusTrap } from "./useFocusTrap.js";
|
|
10
5
|
const targetId = "target";
|
|
11
6
|
const firstFocusableChild = "first-element";
|
|
12
7
|
const lastFocusableChild = "last-element";
|
|
13
8
|
it("should focus on the ref target on mount", () => {
|
|
14
|
-
const { getByTestId } =
|
|
9
|
+
const { getByTestId } = render(React.createElement(TestComponent, null));
|
|
15
10
|
expect(getByTestId(targetId)).toHaveFocus();
|
|
16
11
|
});
|
|
17
12
|
it("should focus on the ref target when tabbing out of the last focusable element and ignore the tabindex'=-1'", () => {
|
|
18
|
-
const { getByTestId } =
|
|
13
|
+
const { getByTestId } = render(React.createElement(TestComponent, null));
|
|
19
14
|
getByTestId(lastFocusableChild).focus();
|
|
20
|
-
|
|
15
|
+
userEvent.tab();
|
|
21
16
|
expect(getByTestId(targetId)).toHaveFocus();
|
|
22
17
|
});
|
|
23
18
|
it("should focus on the first focusable element", () => {
|
|
24
|
-
const { getByTestId } =
|
|
25
|
-
|
|
19
|
+
const { getByTestId } = render(React.createElement(TestComponent, null));
|
|
20
|
+
userEvent.tab();
|
|
26
21
|
expect(getByTestId(firstFocusableChild)).toHaveFocus();
|
|
27
22
|
});
|
|
28
23
|
it("should focus on the last focusable element", () => {
|
|
29
|
-
const { getByTestId } =
|
|
30
|
-
|
|
24
|
+
const { getByTestId } = render(React.createElement(TestComponent, null));
|
|
25
|
+
userEvent.tab({ shift: true });
|
|
31
26
|
expect(getByTestId(lastFocusableChild)).toHaveFocus();
|
|
32
27
|
});
|
|
33
28
|
it("should not trap the tabbing and focus on the first child node", () => {
|
|
34
|
-
const { getByTestId } =
|
|
35
|
-
|
|
29
|
+
const { getByTestId } = render(React.createElement(TestComponent, { trap: false }));
|
|
30
|
+
userEvent.tab();
|
|
36
31
|
expect(getByTestId(targetId).previousElementSibling).toHaveFocus();
|
|
37
32
|
});
|
|
38
33
|
function TestComponent({ trap = true }) {
|
|
39
|
-
const testRef =
|
|
40
|
-
return (
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
34
|
+
const testRef = useFocusTrap(trap);
|
|
35
|
+
return (React.createElement(React.Fragment, null,
|
|
36
|
+
React.createElement("input", { type: "number" }),
|
|
37
|
+
React.createElement("div", { ref: testRef, "data-testid": targetId, tabIndex: 0 },
|
|
38
|
+
React.createElement("button", { "data-testid": firstFocusableChild }, "Click me"),
|
|
39
|
+
React.createElement("a", { href: "#" }),
|
|
40
|
+
React.createElement("input", { type: "text" }),
|
|
41
|
+
React.createElement("select", null,
|
|
42
|
+
React.createElement("option", { value: "A" })),
|
|
43
|
+
React.createElement("textarea", null),
|
|
44
|
+
React.createElement("span", { tabIndex: 0, "data-testId": lastFocusableChild }),
|
|
45
|
+
React.createElement("span", { tabIndex: -1 })),
|
|
46
|
+
React.createElement("input", { type: "calendar" })));
|
|
52
47
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { useFormState } from "./useFormState";
|
|
1
|
+
export { useFormState } from "./useFormState.js";
|
|
@@ -1,5 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useFormState = void 0;
|
|
4
|
-
var useFormState_1 = require("./useFormState");
|
|
5
|
-
Object.defineProperty(exports, "useFormState", { enumerable: true, get: function () { return useFormState_1.useFormState; } });
|
|
1
|
+
export { useFormState } from "./useFormState.js";
|
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const react_1 = require("react");
|
|
5
|
-
function useFormState() {
|
|
6
|
-
const [formState, setFormState] = (0, react_1.useState)({
|
|
1
|
+
import { useState } from "react";
|
|
2
|
+
export function useFormState() {
|
|
3
|
+
const [formState, setFormState] = useState({
|
|
7
4
|
isDirty: false,
|
|
8
5
|
isValid: true,
|
|
9
6
|
});
|
|
10
7
|
return [formState, setFormState];
|
|
11
8
|
}
|
|
12
|
-
exports.useFormState = useFormState;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { useIsMounted } from "./useIsMounted";
|
|
1
|
+
export { useIsMounted } from "./useIsMounted.js";
|
|
@@ -1,5 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useIsMounted = void 0;
|
|
4
|
-
var useIsMounted_1 = require("./useIsMounted");
|
|
5
|
-
Object.defineProperty(exports, "useIsMounted", { enumerable: true, get: function () { return useIsMounted_1.useIsMounted; } });
|
|
1
|
+
export { useIsMounted } from "./useIsMounted.js";
|