@jobber/hooks 2.9.0 → 2.9.2-CJS-to-ESM.14
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.js +15 -31
- package/dist/useAssert/index.js +1 -5
- package/dist/useAssert/useAssert.js +3 -10
- package/dist/useBool/index.js +1 -5
- package/dist/useBool/useBool.js +6 -10
- package/dist/useBool/useBool.test.js +9 -11
- package/dist/useBreakpoints/index.js +2 -20
- package/dist/useBreakpoints/mockViewportWidth/index.js +1 -17
- package/dist/useBreakpoints/mockViewportWidth/mockViewportWidth.js +2 -7
- package/dist/useBreakpoints/mockViewportWidth/mockViewportWidth.test.js +4 -6
- package/dist/useBreakpoints/useBreakpoints.js +9 -13
- package/dist/useBreakpoints/useBreakpoints.test.js +28 -30
- package/dist/useBreakpoints/useMediaQuery.js +4 -8
- package/dist/useCollectionQuery/index.js +1 -5
- package/dist/useCollectionQuery/mdxUtils.js +8 -12
- package/dist/useCollectionQuery/test-utilities/index.js +3 -19
- package/dist/useCollectionQuery/test-utilities/mocks.js +19 -30
- package/dist/useCollectionQuery/test-utilities/queries.js +4 -7
- package/dist/useCollectionQuery/test-utilities/utils.js +1 -5
- package/dist/useCollectionQuery/uniqueEdges.js +2 -7
- package/dist/useCollectionQuery/uniqueNodes.js +1 -5
- package/dist/useCollectionQuery/useCollectionQuery.js +27 -35
- package/dist/useCollectionQuery/useCollectionQuery.test.js +126 -128
- 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.js +1 -5
- package/dist/useFormState/useFormState.js +3 -7
- package/dist/useInView/index.js +1 -17
- package/dist/useInView/useInView.js +6 -10
- package/dist/useInView/useInView.test.js +12 -17
- package/dist/useIsMounted/index.js +1 -5
- package/dist/useIsMounted/useIsMounted.js +5 -9
- package/dist/useIsMounted/useIsMounted.test.js +4 -6
- 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.js +1 -5
- package/dist/useOnKeyDown/useOnKeyDown.js +3 -7
- package/dist/useOnKeyDown/useOnKeyDown.test.js +7 -12
- package/dist/usePasswordStrength/index.js +1 -5
- package/dist/usePasswordStrength/usePasswordStrength.js +4 -11
- package/dist/useRefocusOnActivator/index.js +1 -5
- package/dist/useRefocusOnActivator/useRefocusOnActivator.js +3 -7
- package/dist/useResizeObserver/index.js +1 -17
- package/dist/useResizeObserver/useResizeObserver.js +8 -15
- package/dist/useSafeLayoutEffect/index.js +1 -5
- package/dist/useSafeLayoutEffect/useSafeLayoutEffect.js +4 -7
- package/dist/useShowClear/index.js +1 -5
- package/dist/useShowClear/useShowClear.js +1 -5
- package/dist/useShowClear/useShowClear.test.js +5 -7
- package/package.json +4 -3
package/dist/index.js
CHANGED
|
@@ -1,31 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./useAssert"), exports);
|
|
18
|
-
__exportStar(require("./useBool"), exports);
|
|
19
|
-
__exportStar(require("./useBreakpoints"), exports);
|
|
20
|
-
__exportStar(require("./useCollectionQuery"), exports);
|
|
21
|
-
__exportStar(require("./useFocusTrap"), exports);
|
|
22
|
-
__exportStar(require("./useFormState"), exports);
|
|
23
|
-
__exportStar(require("./useInView"), exports);
|
|
24
|
-
__exportStar(require("./useIsMounted"), exports);
|
|
25
|
-
__exportStar(require("./useLiveAnnounce"), exports);
|
|
26
|
-
__exportStar(require("./useOnKeyDown"), exports);
|
|
27
|
-
__exportStar(require("./usePasswordStrength"), exports);
|
|
28
|
-
__exportStar(require("./useRefocusOnActivator"), exports);
|
|
29
|
-
__exportStar(require("./useResizeObserver"), exports);
|
|
30
|
-
__exportStar(require("./useSafeLayoutEffect"), exports);
|
|
31
|
-
__exportStar(require("./useShowClear"), exports);
|
|
1
|
+
export * from "./useAssert";
|
|
2
|
+
export * from "./useBool";
|
|
3
|
+
export * from "./useBreakpoints";
|
|
4
|
+
export * from "./useCollectionQuery";
|
|
5
|
+
export * from "./useFocusTrap";
|
|
6
|
+
export * from "./useFormState";
|
|
7
|
+
export * from "./useInView";
|
|
8
|
+
export * from "./useIsMounted";
|
|
9
|
+
export * from "./useLiveAnnounce";
|
|
10
|
+
export * from "./useOnKeyDown";
|
|
11
|
+
export * from "./usePasswordStrength";
|
|
12
|
+
export * from "./useRefocusOnActivator";
|
|
13
|
+
export * from "./useResizeObserver";
|
|
14
|
+
export * from "./useSafeLayoutEffect";
|
|
15
|
+
export * from "./useShowClear";
|
package/dist/useAssert/index.js
CHANGED
|
@@ -1,5 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useAssert = void 0;
|
|
4
|
-
var useAssert_1 = require("./useAssert");
|
|
5
|
-
Object.defineProperty(exports, "useAssert", { enumerable: true, get: function () { return useAssert_1.useAssert; } });
|
|
1
|
+
export { useAssert } from "./useAssert";
|
|
@@ -1,13 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.useAssert = void 0;
|
|
7
|
-
const process_1 = __importDefault(require("process"));
|
|
8
|
-
function useAssert(shouldShow, message, options) {
|
|
1
|
+
import process from "process";
|
|
2
|
+
export function useAssert(shouldShow, message, options) {
|
|
9
3
|
var _a;
|
|
10
|
-
if (((_a =
|
|
4
|
+
if (((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) !== "production" && shouldShow) {
|
|
11
5
|
if (options === null || options === void 0 ? void 0 : options.warn) {
|
|
12
6
|
console.warn(message);
|
|
13
7
|
}
|
|
@@ -16,4 +10,3 @@ function useAssert(shouldShow, message, options) {
|
|
|
16
10
|
}
|
|
17
11
|
}
|
|
18
12
|
}
|
|
19
|
-
exports.useAssert = useAssert;
|
package/dist/useBool/index.js
CHANGED
|
@@ -1,5 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useBool = void 0;
|
|
4
|
-
var useBool_1 = require("./useBool");
|
|
5
|
-
Object.defineProperty(exports, "useBool", { enumerable: true, get: function () { return useBool_1.useBool; } });
|
|
1
|
+
export { useBool } from "./useBool";
|
package/dist/useBool/useBool.js
CHANGED
|
@@ -1,12 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
const
|
|
7
|
-
const setTrue = (0, react_1.useCallback)(() => setState(true), []);
|
|
8
|
-
const setFalse = (0, react_1.useCallback)(() => setState(false), []);
|
|
9
|
-
const toggle = (0, react_1.useCallback)(() => setState(current => !current), []);
|
|
1
|
+
import { useCallback, useState } from "react";
|
|
2
|
+
export function useBool(initialState = false) {
|
|
3
|
+
const [state, setState] = useState(initialState);
|
|
4
|
+
const setTrue = useCallback(() => setState(true), []);
|
|
5
|
+
const setFalse = useCallback(() => setState(false), []);
|
|
6
|
+
const toggle = useCallback(() => setState(current => !current), []);
|
|
10
7
|
return [state, setTrue, setFalse, toggle];
|
|
11
8
|
}
|
|
12
|
-
exports.useBool = useBool;
|
|
@@ -1,28 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
const react_1 = require("@testing-library/react");
|
|
4
|
-
const useBool_1 = require("./useBool");
|
|
1
|
+
import { act, renderHook } from "@testing-library/react";
|
|
2
|
+
import { useBool } from "./useBool";
|
|
5
3
|
describe("useBool, a hook for managing boolean state", () => {
|
|
6
4
|
it("by default has an initial state that is `false`", () => {
|
|
7
|
-
const [value] =
|
|
5
|
+
const [value] = renderHook(() => useBool()).result.current;
|
|
8
6
|
expect(value).toBe(false);
|
|
9
7
|
});
|
|
10
8
|
it("can be provided an initial state", () => {
|
|
11
|
-
const [value] =
|
|
9
|
+
const [value] = renderHook(() => useBool(true)).result.current;
|
|
12
10
|
expect(value).toBe(true);
|
|
13
11
|
});
|
|
14
12
|
it("provides helpful setters and a toggle method", () => {
|
|
15
|
-
const { result } =
|
|
13
|
+
const { result } = renderHook(() => useBool());
|
|
16
14
|
const value = () => result.current[0];
|
|
17
15
|
const [, setTrue, setFalse, toggle] = result.current;
|
|
18
16
|
expect(value()).toBe(false);
|
|
19
|
-
|
|
17
|
+
act(setTrue);
|
|
20
18
|
expect(value()).toBe(true);
|
|
21
|
-
|
|
19
|
+
act(setFalse);
|
|
22
20
|
expect(value()).toBe(false);
|
|
23
|
-
|
|
21
|
+
act(toggle);
|
|
24
22
|
expect(value()).toBe(true);
|
|
25
|
-
|
|
23
|
+
act(toggle);
|
|
26
24
|
expect(value()).toBe(false);
|
|
27
25
|
});
|
|
28
26
|
});
|
|
@@ -1,20 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
exports.mockViewportWidth = void 0;
|
|
18
|
-
__exportStar(require("./useBreakpoints"), exports);
|
|
19
|
-
var mockViewportWidth_1 = require("./mockViewportWidth");
|
|
20
|
-
Object.defineProperty(exports, "mockViewportWidth", { enumerable: true, get: function () { return mockViewportWidth_1.mockViewportWidth; } });
|
|
1
|
+
export * from "./useBreakpoints";
|
|
2
|
+
export { mockViewportWidth } from "./mockViewportWidth";
|
|
@@ -1,17 +1 @@
|
|
|
1
|
-
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./mockViewportWidth"), exports);
|
|
1
|
+
export * from "./mockViewportWidth";
|
|
@@ -1,13 +1,9 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.isQueryMatching = exports.mockViewportWidth = void 0;
|
|
4
1
|
const defaultMatchMedia = window.matchMedia;
|
|
5
2
|
const defaultResizeTo = window.resizeTo;
|
|
6
3
|
const defaultInnerWidth = window.innerWidth;
|
|
7
|
-
function mockViewportWidth() {
|
|
4
|
+
export function mockViewportWidth() {
|
|
8
5
|
return { cleanup, setViewportWidth };
|
|
9
6
|
}
|
|
10
|
-
exports.mockViewportWidth = mockViewportWidth;
|
|
11
7
|
function setViewportWidth(newWidth) {
|
|
12
8
|
Object.defineProperty(window, "matchMedia", {
|
|
13
9
|
writable: true,
|
|
@@ -49,7 +45,7 @@ function cleanup() {
|
|
|
49
45
|
window.resizeTo = defaultResizeTo;
|
|
50
46
|
window.innerWidth = defaultInnerWidth;
|
|
51
47
|
}
|
|
52
|
-
function isQueryMatching(query) {
|
|
48
|
+
export function isQueryMatching(query) {
|
|
53
49
|
const match = query.match(/(min-width|max-width):\s*(\d+)/);
|
|
54
50
|
if (!match)
|
|
55
51
|
return false;
|
|
@@ -63,4 +59,3 @@ function isQueryMatching(query) {
|
|
|
63
59
|
return innerWidth >= breakpoint;
|
|
64
60
|
}
|
|
65
61
|
}
|
|
66
|
-
exports.isQueryMatching = isQueryMatching;
|
|
@@ -1,17 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const mockViewportWidth_1 = require("./mockViewportWidth");
|
|
1
|
+
import { isQueryMatching } from "./mockViewportWidth";
|
|
4
2
|
describe("isQueryMatching", () => {
|
|
5
3
|
it("should return false on max-width", () => {
|
|
6
|
-
const result =
|
|
4
|
+
const result = isQueryMatching(`max-width: ${window.innerWidth - 1}`);
|
|
7
5
|
expect(result).toBe(false);
|
|
8
6
|
});
|
|
9
7
|
it("should return true on min-width", () => {
|
|
10
|
-
const result =
|
|
8
|
+
const result = isQueryMatching(`min-width: ${window.innerWidth}`);
|
|
11
9
|
expect(result).toBe(true);
|
|
12
10
|
});
|
|
13
11
|
it("should return false when the width is not a number", () => {
|
|
14
|
-
const result =
|
|
12
|
+
const result = isQueryMatching(`width = not-a-number`);
|
|
15
13
|
expect(result).toBe(false);
|
|
16
14
|
});
|
|
17
15
|
});
|
|
@@ -1,19 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.useBreakpoints = exports.BREAKPOINT_SIZES = void 0;
|
|
4
|
-
const useMediaQuery_1 = require("./useMediaQuery");
|
|
5
|
-
exports.BREAKPOINT_SIZES = { sm: 490, md: 768, lg: 1080, xl: 1440 };
|
|
1
|
+
import { useMediaQuery } from "./useMediaQuery";
|
|
2
|
+
export const BREAKPOINT_SIZES = { sm: 490, md: 768, lg: 1080, xl: 1440 };
|
|
6
3
|
/**
|
|
7
4
|
* Hook equivalent of CSS media queries with our
|
|
8
5
|
* [supported breakpoints](https://atlantis.getjobber.com/?path=/docs/design-breakpoints--page).
|
|
9
6
|
*/
|
|
10
|
-
function useBreakpoints() {
|
|
11
|
-
const { sm, md, lg, xl } =
|
|
12
|
-
const extraSmallOnly =
|
|
13
|
-
const smallAndUp =
|
|
14
|
-
const mediumAndUp =
|
|
15
|
-
const largeAndUp =
|
|
16
|
-
const extraLargeAndUp =
|
|
7
|
+
export function useBreakpoints() {
|
|
8
|
+
const { sm, md, lg, xl } = BREAKPOINT_SIZES;
|
|
9
|
+
const extraSmallOnly = useMediaQuery(`(max-width: ${sm - 1}px)`);
|
|
10
|
+
const smallAndUp = useMediaQuery(`(min-width: ${sm}px)`);
|
|
11
|
+
const mediumAndUp = useMediaQuery(`(min-width: ${md}px)`);
|
|
12
|
+
const largeAndUp = useMediaQuery(`(min-width: ${lg}px)`);
|
|
13
|
+
const extraLargeAndUp = useMediaQuery(`(min-width: ${xl}px)`);
|
|
17
14
|
return {
|
|
18
15
|
smallAndUp,
|
|
19
16
|
mediumAndUp,
|
|
@@ -25,4 +22,3 @@ function useBreakpoints() {
|
|
|
25
22
|
largeOnly: largeAndUp && !extraLargeAndUp,
|
|
26
23
|
};
|
|
27
24
|
}
|
|
28
|
-
exports.useBreakpoints = useBreakpoints;
|
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const
|
|
5
|
-
const useBreakpoints_1 = require("./useBreakpoints");
|
|
6
|
-
const { cleanup, setViewportWidth } = (0, mockViewportWidth_1.mockViewportWidth)();
|
|
1
|
+
import { renderHook } from "@testing-library/react";
|
|
2
|
+
import { mockViewportWidth } from "./mockViewportWidth";
|
|
3
|
+
import { BREAKPOINT_SIZES, useBreakpoints } from "./useBreakpoints";
|
|
4
|
+
const { cleanup, setViewportWidth } = mockViewportWidth();
|
|
7
5
|
afterEach(cleanup);
|
|
8
6
|
describe("useBreakpoints", () => {
|
|
9
7
|
describe("and up", () => {
|
|
10
8
|
it("should have the correct breakpoint values on xl size screens", () => {
|
|
11
|
-
setViewportWidth(
|
|
12
|
-
const { result } =
|
|
9
|
+
setViewportWidth(BREAKPOINT_SIZES.xl);
|
|
10
|
+
const { result } = renderHook(useBreakpoints);
|
|
13
11
|
expect(result.current).toMatchObject({
|
|
14
12
|
smallAndUp: true,
|
|
15
13
|
mediumAndUp: true,
|
|
@@ -18,8 +16,8 @@ describe("useBreakpoints", () => {
|
|
|
18
16
|
});
|
|
19
17
|
});
|
|
20
18
|
it("should have the correct breakpoint values on lg size screens", () => {
|
|
21
|
-
setViewportWidth(
|
|
22
|
-
const { result } =
|
|
19
|
+
setViewportWidth(BREAKPOINT_SIZES.lg);
|
|
20
|
+
const { result } = renderHook(useBreakpoints);
|
|
23
21
|
expect(result.current).toMatchObject({
|
|
24
22
|
smallAndUp: true,
|
|
25
23
|
mediumAndUp: true,
|
|
@@ -28,8 +26,8 @@ describe("useBreakpoints", () => {
|
|
|
28
26
|
});
|
|
29
27
|
});
|
|
30
28
|
it("should have the correct breakpoint values on md size screens", () => {
|
|
31
|
-
setViewportWidth(
|
|
32
|
-
const { result } =
|
|
29
|
+
setViewportWidth(BREAKPOINT_SIZES.md);
|
|
30
|
+
const { result } = renderHook(useBreakpoints);
|
|
33
31
|
expect(result.current).toMatchObject({
|
|
34
32
|
smallAndUp: true,
|
|
35
33
|
mediumAndUp: true,
|
|
@@ -38,8 +36,8 @@ describe("useBreakpoints", () => {
|
|
|
38
36
|
});
|
|
39
37
|
});
|
|
40
38
|
it("should have the correct breakpoint values on sm size screens", () => {
|
|
41
|
-
setViewportWidth(
|
|
42
|
-
const { result } =
|
|
39
|
+
setViewportWidth(BREAKPOINT_SIZES.sm);
|
|
40
|
+
const { result } = renderHook(useBreakpoints);
|
|
43
41
|
expect(result.current).toMatchObject({
|
|
44
42
|
smallAndUp: true,
|
|
45
43
|
mediumAndUp: false,
|
|
@@ -50,8 +48,8 @@ describe("useBreakpoints", () => {
|
|
|
50
48
|
});
|
|
51
49
|
describe("only", () => {
|
|
52
50
|
it("should only set the extraSmallOnly to true on smaller than sm", () => {
|
|
53
|
-
setViewportWidth(
|
|
54
|
-
const { result } =
|
|
51
|
+
setViewportWidth(BREAKPOINT_SIZES.sm - 1);
|
|
52
|
+
const { result } = renderHook(useBreakpoints);
|
|
55
53
|
expect(result.current).toMatchObject({
|
|
56
54
|
extraSmallOnly: true,
|
|
57
55
|
smallOnly: false,
|
|
@@ -60,8 +58,8 @@ describe("useBreakpoints", () => {
|
|
|
60
58
|
});
|
|
61
59
|
});
|
|
62
60
|
it("should only set the smallOnly to true on sm", () => {
|
|
63
|
-
setViewportWidth(
|
|
64
|
-
const { result } =
|
|
61
|
+
setViewportWidth(BREAKPOINT_SIZES.sm);
|
|
62
|
+
const { result } = renderHook(useBreakpoints);
|
|
65
63
|
expect(result.current).toMatchObject({
|
|
66
64
|
extraSmallOnly: false,
|
|
67
65
|
smallOnly: true,
|
|
@@ -70,8 +68,8 @@ describe("useBreakpoints", () => {
|
|
|
70
68
|
});
|
|
71
69
|
});
|
|
72
70
|
it("should only set the mediumOnly to true on md", () => {
|
|
73
|
-
setViewportWidth(
|
|
74
|
-
const { result } =
|
|
71
|
+
setViewportWidth(BREAKPOINT_SIZES.md);
|
|
72
|
+
const { result } = renderHook(useBreakpoints);
|
|
75
73
|
expect(result.current).toMatchObject({
|
|
76
74
|
extraSmallOnly: false,
|
|
77
75
|
smallOnly: false,
|
|
@@ -80,8 +78,8 @@ describe("useBreakpoints", () => {
|
|
|
80
78
|
});
|
|
81
79
|
});
|
|
82
80
|
it("should only set the largeOnly to true on lg", () => {
|
|
83
|
-
setViewportWidth(
|
|
84
|
-
const { result } =
|
|
81
|
+
setViewportWidth(BREAKPOINT_SIZES.lg);
|
|
82
|
+
const { result } = renderHook(useBreakpoints);
|
|
85
83
|
expect(result.current).toMatchObject({
|
|
86
84
|
extraSmallOnly: false,
|
|
87
85
|
smallOnly: false,
|
|
@@ -95,8 +93,8 @@ describe("useBreakpoints", () => {
|
|
|
95
93
|
return Math.floor(min + Math.random() * (max - min + 1));
|
|
96
94
|
}
|
|
97
95
|
it("should have the correct breakpoint values on higher than xl size screens", () => {
|
|
98
|
-
setViewportWidth(randomBreakpoint(
|
|
99
|
-
const { result } =
|
|
96
|
+
setViewportWidth(randomBreakpoint(BREAKPOINT_SIZES.xl, 10000));
|
|
97
|
+
const { result } = renderHook(useBreakpoints);
|
|
100
98
|
expect(result.current).toMatchObject({
|
|
101
99
|
smallAndUp: true,
|
|
102
100
|
mediumAndUp: true,
|
|
@@ -105,8 +103,8 @@ describe("useBreakpoints", () => {
|
|
|
105
103
|
});
|
|
106
104
|
});
|
|
107
105
|
it("should have the correct breakpoint values on lg size screens", () => {
|
|
108
|
-
setViewportWidth(randomBreakpoint(
|
|
109
|
-
const { result } =
|
|
106
|
+
setViewportWidth(randomBreakpoint(BREAKPOINT_SIZES.lg, BREAKPOINT_SIZES.xl));
|
|
107
|
+
const { result } = renderHook(useBreakpoints);
|
|
110
108
|
expect(result.current).toMatchObject({
|
|
111
109
|
smallAndUp: true,
|
|
112
110
|
mediumAndUp: true,
|
|
@@ -115,8 +113,8 @@ describe("useBreakpoints", () => {
|
|
|
115
113
|
});
|
|
116
114
|
});
|
|
117
115
|
it("should have the correct breakpoint values on md size screens", () => {
|
|
118
|
-
setViewportWidth(randomBreakpoint(
|
|
119
|
-
const { result } =
|
|
116
|
+
setViewportWidth(randomBreakpoint(BREAKPOINT_SIZES.md, BREAKPOINT_SIZES.lg));
|
|
117
|
+
const { result } = renderHook(useBreakpoints);
|
|
120
118
|
expect(result.current).toMatchObject({
|
|
121
119
|
smallAndUp: true,
|
|
122
120
|
mediumAndUp: true,
|
|
@@ -125,8 +123,8 @@ describe("useBreakpoints", () => {
|
|
|
125
123
|
});
|
|
126
124
|
});
|
|
127
125
|
it("should have the correct breakpoint values on sm size screens", () => {
|
|
128
|
-
setViewportWidth(randomBreakpoint(
|
|
129
|
-
const { result } =
|
|
126
|
+
setViewportWidth(randomBreakpoint(BREAKPOINT_SIZES.sm, BREAKPOINT_SIZES.md));
|
|
127
|
+
const { result } = renderHook(useBreakpoints);
|
|
130
128
|
expect(result.current).toMatchObject({
|
|
131
129
|
smallAndUp: true,
|
|
132
130
|
mediumAndUp: false,
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useMediaQuery = void 0;
|
|
4
|
-
const react_1 = require("react");
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
5
2
|
/**
|
|
6
3
|
* Sets the JS media query listener. Internal use only.
|
|
7
4
|
*/
|
|
8
|
-
function useMediaQuery(CSSMediaQuery) {
|
|
9
|
-
const [matches, setMatches] =
|
|
10
|
-
|
|
5
|
+
export function useMediaQuery(CSSMediaQuery) {
|
|
6
|
+
const [matches, setMatches] = useState(window.matchMedia(CSSMediaQuery).matches);
|
|
7
|
+
useEffect(() => {
|
|
11
8
|
const media = window.matchMedia(CSSMediaQuery);
|
|
12
9
|
if (media.matches !== matches) {
|
|
13
10
|
setMatches(media.matches);
|
|
@@ -18,4 +15,3 @@ function useMediaQuery(CSSMediaQuery) {
|
|
|
18
15
|
}, [CSSMediaQuery]);
|
|
19
16
|
return matches;
|
|
20
17
|
}
|
|
21
|
-
exports.useMediaQuery = useMediaQuery;
|
|
@@ -1,5 +1 @@
|
|
|
1
|
-
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useCollectionQuery = void 0;
|
|
4
|
-
var useCollectionQuery_1 = require("./useCollectionQuery");
|
|
5
|
-
Object.defineProperty(exports, "useCollectionQuery", { enumerable: true, get: function () { return useCollectionQuery_1.useCollectionQuery; } });
|
|
1
|
+
export { useCollectionQuery } from "./useCollectionQuery";
|
|
@@ -1,8 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
exports.returnValues = exports.subscriptionPropsList = exports.propsList = exports.getLoadingState = exports.apolloClient = exports.LIST_QUERY = void 0;
|
|
4
|
-
const client_1 = require("@apollo/client");
|
|
5
|
-
exports.LIST_QUERY = (0, client_1.gql) `
|
|
1
|
+
import { ApolloClient, InMemoryCache, gql } from "@apollo/client";
|
|
2
|
+
export const LIST_QUERY = gql `
|
|
6
3
|
query ListQuery($cursor: String) {
|
|
7
4
|
allPlanets(first: 4, after: $cursor) {
|
|
8
5
|
pageInfo {
|
|
@@ -19,11 +16,11 @@ exports.LIST_QUERY = (0, client_1.gql) `
|
|
|
19
16
|
}
|
|
20
17
|
}
|
|
21
18
|
`;
|
|
22
|
-
|
|
19
|
+
export const apolloClient = new ApolloClient({
|
|
23
20
|
uri: "https://swapi-graphql.netlify.app/.netlify/functions/index",
|
|
24
|
-
cache: new
|
|
21
|
+
cache: new InMemoryCache(),
|
|
25
22
|
});
|
|
26
|
-
function getLoadingState(loadingInitialContent, loadingRefresh, loadingNextPage) {
|
|
23
|
+
export function getLoadingState(loadingInitialContent, loadingRefresh, loadingNextPage) {
|
|
27
24
|
if (loadingInitialContent) {
|
|
28
25
|
return {
|
|
29
26
|
loading: true,
|
|
@@ -47,8 +44,7 @@ function getLoadingState(loadingInitialContent, loadingRefresh, loadingNextPage)
|
|
|
47
44
|
loadingStatus: "Loaded",
|
|
48
45
|
};
|
|
49
46
|
}
|
|
50
|
-
|
|
51
|
-
exports.propsList = [
|
|
47
|
+
export const propsList = [
|
|
52
48
|
{
|
|
53
49
|
id: 0,
|
|
54
50
|
title: "query",
|
|
@@ -79,7 +75,7 @@ exports.propsList = [
|
|
|
79
75
|
value: "SubscriptionProps",
|
|
80
76
|
},
|
|
81
77
|
];
|
|
82
|
-
|
|
78
|
+
export const subscriptionPropsList = [
|
|
83
79
|
{
|
|
84
80
|
id: 0,
|
|
85
81
|
title: "document",
|
|
@@ -106,7 +102,7 @@ exports.subscriptionPropsList = [
|
|
|
106
102
|
value: "GetNodeByPath<TSubscription>",
|
|
107
103
|
},
|
|
108
104
|
];
|
|
109
|
-
|
|
105
|
+
export const returnValues = [
|
|
110
106
|
{
|
|
111
107
|
id: 0,
|
|
112
108
|
title: "data",
|
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
-
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
-
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
-
}
|
|
8
|
-
Object.defineProperty(o, k2, desc);
|
|
9
|
-
}) : (function(o, m, k, k2) {
|
|
10
|
-
if (k2 === undefined) k2 = k;
|
|
11
|
-
o[k2] = m[k];
|
|
12
|
-
}));
|
|
13
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
-
};
|
|
16
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
-
__exportStar(require("./queries"), exports);
|
|
18
|
-
__exportStar(require("./utils"), exports);
|
|
19
|
-
__exportStar(require("./mocks"), exports);
|
|
1
|
+
export * from "./queries";
|
|
2
|
+
export * from "./utils";
|
|
3
|
+
export * from "./mocks";
|
|
@@ -1,22 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
};
|
|
5
|
-
|
|
6
|
-
exports.setListQueryMockHasNextPage = exports.buildListRequestMockForNextPage = exports.buildSubscriptionRequestMock = exports.buildListRequestMock = exports.subscriptionQueryMock = exports.listQueryWithTotalCountResponseMock = exports.listQueryResponseMock = exports.wrapper = void 0;
|
|
7
|
-
const react_testing_1 = require("@apollo/react-testing");
|
|
8
|
-
const react_1 = __importDefault(require("react"));
|
|
9
|
-
const uuid_1 = require("uuid");
|
|
10
|
-
const queries_1 = require("./queries");
|
|
11
|
-
function wrapper(mocks) {
|
|
1
|
+
import { MockedProvider } from "@apollo/react-testing";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { v1 as uuidv1 } from "uuid";
|
|
4
|
+
import { SUBSCRIPTION_QUERY } from "./queries";
|
|
5
|
+
export function wrapper(mocks) {
|
|
12
6
|
function ApolloMockedProvider({ children, }) {
|
|
13
|
-
return (
|
|
7
|
+
return (React.createElement(MockedProvider, { addTypename: true, mocks: mocks }, children));
|
|
14
8
|
}
|
|
15
9
|
return ApolloMockedProvider;
|
|
16
10
|
}
|
|
17
|
-
exports.wrapper = wrapper;
|
|
18
11
|
let listQueryHasNextPage = true;
|
|
19
|
-
|
|
12
|
+
export const listQueryResponseMock = jest.fn(id => {
|
|
20
13
|
return {
|
|
21
14
|
data: {
|
|
22
15
|
conversation: {
|
|
@@ -28,14 +21,14 @@ exports.listQueryResponseMock = jest.fn(id => {
|
|
|
28
21
|
__typename: "SMSMessageEdge",
|
|
29
22
|
node: {
|
|
30
23
|
__typename: "SMSMessage",
|
|
31
|
-
id: id || (
|
|
24
|
+
id: id || uuidv1(),
|
|
32
25
|
},
|
|
33
26
|
},
|
|
34
27
|
],
|
|
35
28
|
nodes: [
|
|
36
29
|
{
|
|
37
30
|
__typename: "SMSMessage",
|
|
38
|
-
id: id || (
|
|
31
|
+
id: id || uuidv1(),
|
|
39
32
|
},
|
|
40
33
|
],
|
|
41
34
|
pageInfo: {
|
|
@@ -48,7 +41,7 @@ exports.listQueryResponseMock = jest.fn(id => {
|
|
|
48
41
|
},
|
|
49
42
|
};
|
|
50
43
|
});
|
|
51
|
-
|
|
44
|
+
export const listQueryWithTotalCountResponseMock = jest.fn(id => {
|
|
52
45
|
return {
|
|
53
46
|
data: {
|
|
54
47
|
conversation: {
|
|
@@ -60,14 +53,14 @@ exports.listQueryWithTotalCountResponseMock = jest.fn(id => {
|
|
|
60
53
|
__typename: "SMSMessageEdge",
|
|
61
54
|
node: {
|
|
62
55
|
__typename: "SMSMessage",
|
|
63
|
-
id: id || (
|
|
56
|
+
id: id || uuidv1(),
|
|
64
57
|
},
|
|
65
58
|
},
|
|
66
59
|
],
|
|
67
60
|
nodes: [
|
|
68
61
|
{
|
|
69
62
|
__typename: "SMSMessage",
|
|
70
|
-
id: id || (
|
|
63
|
+
id: id || uuidv1(),
|
|
71
64
|
},
|
|
72
65
|
],
|
|
73
66
|
pageInfo: {
|
|
@@ -81,7 +74,7 @@ exports.listQueryWithTotalCountResponseMock = jest.fn(id => {
|
|
|
81
74
|
},
|
|
82
75
|
};
|
|
83
76
|
});
|
|
84
|
-
|
|
77
|
+
export const subscriptionQueryMock = jest.fn(id => {
|
|
85
78
|
return {
|
|
86
79
|
data: {
|
|
87
80
|
conversationMessage: {
|
|
@@ -95,7 +88,7 @@ exports.subscriptionQueryMock = jest.fn(id => {
|
|
|
95
88
|
},
|
|
96
89
|
};
|
|
97
90
|
});
|
|
98
|
-
function buildListRequestMock(query, responseMock, id, searchTerm) {
|
|
91
|
+
export function buildListRequestMock(query, responseMock, id, searchTerm) {
|
|
99
92
|
return {
|
|
100
93
|
request: {
|
|
101
94
|
query: query,
|
|
@@ -104,18 +97,16 @@ function buildListRequestMock(query, responseMock, id, searchTerm) {
|
|
|
104
97
|
result: () => responseMock(id),
|
|
105
98
|
};
|
|
106
99
|
}
|
|
107
|
-
|
|
108
|
-
function buildSubscriptionRequestMock(id) {
|
|
100
|
+
export function buildSubscriptionRequestMock(id) {
|
|
109
101
|
return {
|
|
110
102
|
request: {
|
|
111
|
-
query:
|
|
103
|
+
query: SUBSCRIPTION_QUERY,
|
|
112
104
|
},
|
|
113
|
-
result: () =>
|
|
105
|
+
result: () => subscriptionQueryMock(id),
|
|
114
106
|
delay: 100,
|
|
115
107
|
};
|
|
116
108
|
}
|
|
117
|
-
|
|
118
|
-
function buildListRequestMockForNextPage(query, responseMock, id) {
|
|
109
|
+
export function buildListRequestMockForNextPage(query, responseMock, id) {
|
|
119
110
|
return {
|
|
120
111
|
request: {
|
|
121
112
|
query: query,
|
|
@@ -124,8 +115,6 @@ function buildListRequestMockForNextPage(query, responseMock, id) {
|
|
|
124
115
|
result: () => responseMock(id),
|
|
125
116
|
};
|
|
126
117
|
}
|
|
127
|
-
|
|
128
|
-
function setListQueryMockHasNextPage(hasNextPage) {
|
|
118
|
+
export function setListQueryMockHasNextPage(hasNextPage) {
|
|
129
119
|
listQueryHasNextPage = hasNextPage;
|
|
130
120
|
}
|
|
131
|
-
exports.setListQueryMockHasNextPage = setListQueryMockHasNextPage;
|