@frontify/guideline-blocks-settings 0.27.0 → 0.28.0

package/src/helpers/addHttps.ts

@@ -0,0 +1,15 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { relativeUrlRegex } from '../components/RichTextEditor/plugins/LinkPlugin/utils';
+
+export const addHttps = (url: string) => {
+    if (relativeUrlRegex.test(url)) {
+        return url;
+    }
+    try {
+        new URL(url);
+        return url;
+    } catch {
+        return `https://${url}`;
+    }
+};

package/src/helpers/convertToRichTextValue.spec.ts

@@ -0,0 +1,32 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import type { TextStyles } from '@frontify/fondue';
+import { describe, expect, it } from 'vitest';
+import { convertToRteValue } from './convertToRichTextValue';
+
+describe('String converted to Richtext value', () => {
+    it('should return rich text value with correct textStyle', () => {
+        const text = 'with text';
+        const result = convertToRteValue('p' as TextStyles, text);
+        expect(result).toBe('[{"type":"p","children":[{"text":"with text","textStyle":"p"}]}]');
+    });
+
+    it('should return rich text value with correct textStyle', () => {
+        const text = 'Heading 1';
+        const result = convertToRteValue('heading1' as TextStyles, text);
+        expect(result).toBe('[{"type":"heading1","children":[{"text":"Heading 1","textStyle":"heading1"}]}]');
+    });
+
+    it('should return rich text value with correct alignment', () => {
+        const text = 'text';
+        const result = convertToRteValue('p' as TextStyles, text, 'center');
+        expect(result).toBe('[{"type":"p","children":[{"text":"text","textStyle":"p"}],"align":"center"}]');
+    });
+
+    it('should test if value is rich text value, it returns the rich text Value', () => {
+        const text =
+            '[{"type":"heading1","children":[{"text":"Hoi","bold":true,"underline":true}]},{"type":"heading1","children":[{"bold":true,"underline":true,"text":" "}]},{"type":"heading1","children":[{"text":"With Text"}]},{"type":"custom2","children":[{"text":""}]}]';
+        const result = convertToRteValue('p' as TextStyles, text);
+        expect(result).toBe(text);
+    });
+});

package/src/helpers/convertToRichTextValue.ts

@@ -0,0 +1,6 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { hasRichTextValue } from './hasRichTextValue';
+
+export const convertToRteValue = (textStyle = 'p', text = '', align?: 'center' | 'right' | 'left' | 'justify') =>
+    hasRichTextValue(text) ? text : JSON.stringify([{ type: textStyle, children: [{ text, textStyle }], align }]);

package/src/helpers/customCoordinatesGetterFactory.spec.ts

@@ -0,0 +1,69 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { beforeEach, describe, expect, it } from 'vitest';
+import { KeyboardCode, KeyboardCoordinateGetter, SensorContext } from '@dnd-kit/core';
+import { customCoordinatesGetterFactory } from './customCoordinatesGetterFactory';
+
+/**
+ * @vitest-environment happy-dom
+ */
+describe('customCoordinatesGetterFactory', () => {
+    const initialCoordinates = { x: 0, y: 0 };
+    const context = {
+        activeNode: {
+            offsetWidth: 100,
+            offsetHeight: 200,
+        },
+    } as SensorContext;
+
+    const active = 'mock-active-id';
+    let customCoordinatesGetter: KeyboardCoordinateGetter;
+    beforeEach(() => {
+        customCoordinatesGetter = customCoordinatesGetterFactory(10, 20);
+    });
+
+    it('should respond to ArrowRight', () => {
+        const result = customCoordinatesGetter(new KeyboardEvent(KeyboardCode.Right, { code: KeyboardCode.Right }), {
+            active,
+            currentCoordinates: initialCoordinates,
+            context,
+        });
+        expect(result).toEqual({ x: 110, y: 0 });
+    });
+
+    it('should respond to ArrowLeft', () => {
+        const result = customCoordinatesGetter(new KeyboardEvent(KeyboardCode.Left, { code: KeyboardCode.Left }), {
+            active,
+            currentCoordinates: initialCoordinates,
+            context,
+        });
+        expect(result).toEqual({ x: -110, y: 0 });
+    });
+
+    it('should respond to ArrowDown', () => {
+        const result = customCoordinatesGetter(new KeyboardEvent(KeyboardCode.Down, { code: KeyboardCode.Down }), {
+            active,
+            currentCoordinates: initialCoordinates,
+            context,
+        });
+        expect(result).toEqual({ x: 0, y: 220 });
+    });
+
+    it('should respond to ArrowUp', () => {
+        const result = customCoordinatesGetter(new KeyboardEvent(KeyboardCode.Up, { code: KeyboardCode.Up }), {
+            active,
+            currentCoordinates: initialCoordinates,
+            context,
+        });
+        expect(result).toEqual({ x: 0, y: -220 });
+    });
+
+    it('should return undefined for other keys', () => {
+        const result = customCoordinatesGetter(new KeyboardEvent(KeyboardCode.Enter, { code: KeyboardCode.Enter }), {
+            active,
+            currentCoordinates: initialCoordinates,
+            context,
+        });
+        expect(result).toBeUndefined();
+    });
+});

package/src/helpers/customCoordinatesGetterFactory.ts

@@ -0,0 +1,39 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { KeyboardCode, KeyboardCoordinateGetter } from '@dnd-kit/core';
+
+const directions: string[] = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
+
+export const customCoordinatesGetterFactory =
+    (columnGap: number, rowGap: number): KeyboardCoordinateGetter =>
+    (event, { currentCoordinates, context: { activeNode } }) => {
+        event.preventDefault();
+        if (directions.includes(event.code)) {
+            const width = activeNode?.offsetWidth ?? 0;
+            const height = activeNode?.offsetHeight ?? 0;
+
+            switch (event.code) {
+                case KeyboardCode.Right:
+                    return {
+                        ...currentCoordinates,
+                        x: currentCoordinates.x + width + columnGap,
+                    };
+                case KeyboardCode.Left:
+                    return {
+                        ...currentCoordinates,
+                        x: currentCoordinates.x - width - columnGap,
+                    };
+                case KeyboardCode.Down:
+                    return {
+                        ...currentCoordinates,
+                        y: currentCoordinates.y + height + rowGap,
+                    };
+                case KeyboardCode.Up:
+                    return {
+                        ...currentCoordinates,
+                        y: currentCoordinates.y - height - rowGap,
+                    };
+            }
+        }
+        return undefined;
+    };

package/src/helpers/hasRichTextValue.spec.ts

@@ -0,0 +1,63 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { describe, expect, it } from 'vitest';
+import { hasRichTextValue } from './hasRichTextValue';
+
+describe('Richtext has value', () => {
+    // Check if richtext has value
+    it('should return true if Richtext has value', () => {
+        const text = '[{"type":"p","children":[{"text":"with text"}]}]';
+        const result = hasRichTextValue(text);
+        expect(result).toBeTruthy();
+    });
+
+    it('should return true if Richtext has value', () => {
+        const text =
+            '[{"type":"heading1","children":[{"text":"Hoi","bold":true,"underline":true}]},{"type":"heading1","children":[{"bold":true,"underline":true,"text":" "}]},{"type":"heading1","children":[{"text":"With Text"}]},{"type":"custom2","children":[{"text":""}]}]';
+        const result = hasRichTextValue(text);
+        expect(result).toBeTruthy();
+    });
+
+    it('should return true if value has a space it', () => {
+        const text = '[{"type":"p","children":[{"text":" "}]}]';
+        const result = hasRichTextValue(text);
+        expect(result).toBeTruthy();
+    });
+
+    // Check if richtext has no value
+    it('should return false if RTE is empty', () => {
+        const text = '[{"type":"p","children":[{"text":""}]}]';
+        const result = hasRichTextValue(text);
+        expect(result).toBeFalsy();
+    });
+
+    it('should return false if RTE is empty 2.0', () => {
+        const text = '[{"type":"heading1","children":[{"text":"","bold":true,"underline":true}]}]';
+        const result = hasRichTextValue(text);
+        expect(result).toBeFalsy();
+    });
+
+    it('should return false if value is an invalid json', () => {
+        const text = 'abcd';
+        const result = hasRichTextValue(text);
+        expect(result).toBeFalsy();
+    });
+
+    it('should return false if RTE has only new lines', () => {
+        const text =
+            '[{"type":"quote","children":[{"text":""}]},{"type":"quote","children":[{"text":""}]},{"type":"quote","children":[{"text":""}]},{"type":"quote","children":[{"text":""}]},{"type":"quote","children":[{"text":""}]}]';
+        const result = hasRichTextValue(text);
+        expect(result).toBeFalsy();
+    });
+
+    it('should return false on empty value', () => {
+        const text = '';
+        const result = hasRichTextValue(text);
+        expect(result).toBeFalsy();
+    });
+
+    it('should return false on undefined text value', () => {
+        const result = hasRichTextValue(undefined);
+        expect(result).toBeFalsy();
+    });
+});

package/src/helpers/hasRichTextValue.ts

@@ -0,0 +1,29 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+type TextElement = {
+    text: string;
+    children?: TextElement[];
+};
+
+export const hasRichTextValue = (string?: string): boolean => {
+    if (!string) {
+        return false;
+    }
+    const hasText = (children: TextElement[]): boolean =>
+        children.some((child: TextElement) => {
+            if (child.text) {
+                return child.text !== '';
+            }
+            if (child.children) {
+                return hasText(child.children);
+            }
+            return false;
+        });
+
+    try {
+        const json = JSON.parse(string);
+        return hasText(json);
+    } catch (error) {
+        return false;
+    }
+};

package/src/helpers/index.ts

@@ -0,0 +1,8 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './convertToRichTextValue';
+export * from './customCoordinatesGetterFactory';
+export * from './hasRichTextValue';
+export * from './isDownloadable';
+export * from './mapColorPalettes';
+export * from './addHttps';

package/src/helpers/isDownloadable.spec.ts

@@ -0,0 +1,47 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { describe, expect, it } from 'vitest';
+import { isDownloadable } from './isDownloadable';
+import { Security } from '../settings/types';
+
+describe('isDownloadable', () => {
+    it('should return false if global is false and downloadable is false', () => {
+        const result = isDownloadable(Security.Global, false, false);
+        expect(result).toBeFalsy();
+    });
+
+    it('should return true if global is true and downloadable is true', () => {
+        const result = isDownloadable(Security.Global, true, true);
+        expect(result).toBeTruthy();
+    });
+
+    it('should return true if global is true and downloadable is false', () => {
+        const result = isDownloadable(Security.Global, false, true);
+        expect(result).toBeTruthy();
+    });
+
+    it('should return false if global is false and downloadable is true', () => {
+        const result = isDownloadable(Security.Global, true, false);
+        expect(result).toBeFalsy();
+    });
+
+    it('should return true if global is false but its security is custom and downloadable is true ', () => {
+        const result = isDownloadable(Security.Custom, true, false);
+        expect(result).toBeTruthy();
+    });
+
+    it('should return false if global is true but its security is custom and downloadable is false ', () => {
+        const result = isDownloadable(Security.Custom, false, true);
+        expect(result).toBeFalsy();
+    });
+
+    it('should return false if global is true but its security is custom and downloadable is false ', () => {
+        const result = isDownloadable(Security.Custom, false, false);
+        expect(result).toBeFalsy();
+    });
+
+    it('should return true if global is true but its security is custom and downloadable is false ', () => {
+        const result = isDownloadable(Security.Custom, true, true);
+        expect(result).toBeTruthy();
+    });
+});

package/src/helpers/isDownloadable.ts

@@ -0,0 +1,7 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { Security } from '../settings/types';
+
+export const isDownloadable = (security: Security, downloadable: boolean, globalAssetDownloadEnabled: boolean) => {
+    return security === Security.Custom ? downloadable : globalAssetDownloadEnabled;
+};

package/src/helpers/mapColorPalettes.spec.ts

@@ -0,0 +1,146 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { describe, expect, it } from 'vitest';
+import { mapAppBridgeColorPalettesToFonduePalettes } from './mapColorPalettes';
+
+describe('mapAppBridgeColorPalettesToFonduePalettes', () => {
+    it('should map app bridge color palette to fondue palette', () => {
+        const result = mapAppBridgeColorPalettesToFonduePalettes([
+            {
+                id: 19,
+                name: 'Awesome color palette',
+                description: 'This is an awesome color palette',
+                colors: [
+                    {
+                        id: 6,
+                        name: 'Tarawera',
+                        sort: 1,
+                        nameCss: 'tarawera',
+                        hex: '0b486b',
+                        red: 11,
+                        green: 72,
+                        blue: 107,
+                        alpha: 255,
+                        hue: 202,
+                        saturation: 81,
+                        lightness: 23,
+                        c: 90,
+                        m: 33,
+                        y: 0,
+                        k: 58,
+                        pantone: null,
+                        ral: null,
+                        oracal: null,
+                        pantoneCoated: null,
+                        pantoneUncoated: null,
+                        cmykCoated: null,
+                        cmykUncoated: null,
+                        cmykNewspaper: null,
+                        ncs: null,
+                        pantoneCp: null,
+                        pantonePlastics: null,
+                        pantoneTextile: null,
+                        hks: null,
+                        threeM: null,
+                        lab: null,
+                    },
+                    {
+                        id: 7,
+                        name: 'Oracle',
+                        sort: 2,
+                        nameCss: 'oracle',
+                        hex: '3b8686',
+                        red: 59,
+                        green: 134,
+                        blue: 134,
+                        alpha: 255,
+                        hue: 180,
+                        saturation: 39,
+                        lightness: 38,
+                        c: 56,
+                        m: 0,
+                        y: 0,
+                        k: 47,
+                        pantone: null,
+                        ral: null,
+                        oracal: null,
+                        pantoneCoated: null,
+                        pantoneUncoated: null,
+                        cmykCoated: null,
+                        cmykUncoated: null,
+                        cmykNewspaper: null,
+                        ncs: null,
+                        pantoneCp: null,
+                        pantonePlastics: null,
+                        pantoneTextile: null,
+                        hks: null,
+                        threeM: null,
+                        lab: null,
+                    },
+                    {
+                        id: 8,
+                        name: 'Silver Tree',
+                        sort: 3,
+                        nameCss: 'silver-tree',
+                        hex: '79bd9a',
+                        red: 121,
+                        green: 189,
+                        blue: 154,
+                        alpha: 255,
+                        hue: 149,
+                        saturation: 34,
+                        lightness: 61,
+                        c: 36,
+                        m: 0,
+                        y: 19,
+                        k: 26,
+                        pantone: null,
+                        ral: null,
+                        oracal: null,
+                        pantoneCoated: null,
+                        pantoneUncoated: null,
+                        cmykCoated: null,
+                        cmykUncoated: null,
+                        cmykNewspaper: null,
+                        ncs: null,
+                        pantoneCp: null,
+                        pantonePlastics: null,
+                        pantoneTextile: null,
+                        hks: null,
+                        threeM: null,
+                        lab: null,
+                    },
+                ],
+            },
+        ]);
+        expect(result).toEqual([
+            {
+                id: 19,
+                title: 'Awesome color palette',
+                colors: [
+                    {
+                        alpha: 1,
+                        red: 11,
+                        green: 72,
+                        blue: 107,
+                        name: 'Tarawera',
+                    },
+                    {
+                        alpha: 1,
+                        red: 59,
+                        green: 134,
+                        blue: 134,
+                        name: 'Oracle',
+                    },
+                    {
+                        alpha: 1,
+                        red: 121,
+                        green: 189,
+                        blue: 154,
+                        name: 'Silver Tree',
+                    },
+                ],
+            },
+        ]);
+    });
+});

package/src/helpers/mapColorPalettes.ts

@@ -0,0 +1,22 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { ColorPalette } from '@frontify/app-bridge';
+import { Palette } from '@frontify/fondue';
+
+export const mapAppBridgeColorPalettesToFonduePalettes = (colorPalettes: ColorPalette[]): Palette[] => {
+    return colorPalettes.map(mapAppBridgeColorPaletteToFonduePalette);
+};
+
+export const mapAppBridgeColorPaletteToFonduePalette = (colorPalette: ColorPalette): Palette => {
+    return {
+        id: colorPalette.id,
+        title: colorPalette.name,
+        colors: colorPalette.colors.map((color) => ({
+            alpha: color.alpha ? color.alpha / 255 : 1,
+            red: color.red ?? 0,
+            green: color.green ?? 0,
+            blue: color.blue ?? 0,
+            name: color.name ?? '',
+        })),
+    };
+};

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+export * from './useAttachments';
+export * from './useDndSensors';

package/src/hooks/useAttachments.spec.ts

@@ -0,0 +1,79 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { AssetDummy, getAppBridgeBlockStub } from '@frontify/app-bridge';
+import { renderHook, waitFor } from '@testing-library/react';
+
+import { describe, expect, it } from 'vitest';
+import { useAttachments } from './useAttachments';
+
+const MOCK_SETTINGS_ID = 'attachments';
+
+/**
+ * @vitest-environment happy-dom
+ */
+
+describe('useAttachments', () => {
+    it('should have 1 attachment if attachment is added', async () => {
+        const STUB_WITH_NO_ASSETS = getAppBridgeBlockStub({
+            blockId: 1,
+            blockAssets: { [MOCK_SETTINGS_ID]: [] },
+        });
+        const { result } = renderHook(() => useAttachments(STUB_WITH_NO_ASSETS, MOCK_SETTINGS_ID));
+
+        await result.current.onAddAttachments([AssetDummy.with(1)]);
+        await waitFor(() => {
+            expect(result.current.attachments).toHaveLength(1);
+        });
+    });
+
+    it('should decrease the attachment count from 3 to 2', async () => {
+        const STUB_WITH_THREE_ASSETS = getAppBridgeBlockStub({
+            blockId: 2,
+            blockAssets: { [MOCK_SETTINGS_ID]: [AssetDummy.with(1), AssetDummy.with(2), AssetDummy.with(3)] },
+        });
+        const { result } = renderHook(() => useAttachments(STUB_WITH_THREE_ASSETS, MOCK_SETTINGS_ID));
+
+        const initialValue = result.current;
+        await waitFor(() => {
+            expect(result.current).not.toBe(initialValue);
+        });
+        await result.current.onAttachmentDelete(AssetDummy.with(1));
+        await waitFor(() => {
+            expect(result.current.attachments).toHaveLength(2);
+        });
+    });
+
+    it('should replace the attachment in the same position', async () => {
+        const STUB_WITH_THREE_ASSETS = getAppBridgeBlockStub({
+            blockId: 2,
+            blockAssets: { [MOCK_SETTINGS_ID]: [AssetDummy.with(1), AssetDummy.with(2), AssetDummy.with(3)] },
+        });
+        const { result } = renderHook(() => useAttachments(STUB_WITH_THREE_ASSETS, MOCK_SETTINGS_ID));
+        const initialValue = result.current;
+        await waitFor(() => {
+            expect(result.current).not.toBe(initialValue);
+        });
+        await result.current.onAttachmentReplace(AssetDummy.with(2), AssetDummy.with(10));
+        await waitFor(() => {
+            expect(result.current.attachments[1].id).toBe(10);
+        });
+    });
+
+    it('should reorder the attachments', async () => {
+        const STUB_WITH_THREE_ASSETS = getAppBridgeBlockStub({
+            blockId: 2,
+            blockAssets: { [MOCK_SETTINGS_ID]: [AssetDummy.with(1), AssetDummy.with(2), AssetDummy.with(3)] },
+        });
+        const { result } = renderHook(() => useAttachments(STUB_WITH_THREE_ASSETS, MOCK_SETTINGS_ID));
+        const initialValue = result.current;
+        await waitFor(() => {
+            expect(result.current).not.toBe(initialValue);
+        });
+        await result.current.onAttachmentsSorted([AssetDummy.with(3), AssetDummy.with(2), AssetDummy.with(1)]);
+        await waitFor(() => {
+            expect(result.current.attachments[0].id).toBe(3);
+            expect(result.current.attachments[1].id).toBe(2);
+            expect(result.current.attachments[2].id).toBe(1);
+        });
+    });
+});

package/src/hooks/useAttachments.ts

@@ -0,0 +1,46 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { AppBridgeBlock, Asset, useBlockAssets } from '@frontify/app-bridge';
+
+export const useAttachments = (appBridge: AppBridgeBlock, assetId: string) => {
+    const { blockAssets, updateAssetIdsFromKey } = useBlockAssets(appBridge);
+    const attachments = blockAssets?.[assetId] || [];
+
+    const onAddAttachments = async (newAssets: Asset[]) => {
+        const newAssetIds = attachments.map((attachment) => attachment.id);
+        for (const asset of newAssets) {
+            newAssetIds.push(asset.id);
+        }
+        await updateAssetIdsFromKey(assetId, newAssetIds);
+    };
+
+    const onAttachmentDelete = async (assetToDelete: Asset) => {
+        const newAssetIds = attachments
+            .filter((attachment) => attachment.id !== assetToDelete.id)
+            .map((attachment) => attachment.id);
+
+        await updateAssetIdsFromKey(assetId, newAssetIds);
+    };
+
+    const onAttachmentReplace = async (attachmentToReplace: Asset, newAsset: Asset) => {
+        const newAssetIds = attachments.map((attachment) =>
+            attachment.id === attachmentToReplace.id ? newAsset.id : attachment.id
+        );
+
+        await updateAssetIdsFromKey(assetId, newAssetIds);
+    };
+
+    const onAttachmentsSorted = async (assets: Asset[]) => {
+        const newAssetIds = assets.map((asset) => asset.id);
+
+        await updateAssetIdsFromKey(assetId, newAssetIds);
+    };
+
+    return {
+        onAddAttachments,
+        onAttachmentDelete,
+        onAttachmentReplace,
+        onAttachmentsSorted,
+        attachments,
+    };
+};

package/src/hooks/useDndSensors.spec.ts

@@ -0,0 +1,40 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { renderHook } from '@testing-library/react';
+import { useDndSensors } from './useDndSensors';
+import { describe, expect, it } from 'vitest';
+import { KeyboardSensorOptions } from '@dnd-kit/core';
+
+/**
+ * @vitest-environment happy-dom
+ */
+describe('useDndSensors', () => {
+    it('should create a PointerSensor and a KeyboardSensor with a coordinate getter function and custom keyboardCodes', () => {
+        const { result } = renderHook(() => useDndSensors());
+        expect(result.current.length).toBe(2);
+        expect(result.current[0].sensor.name).toBe('PointerSensor');
+        expect(result.current[1].sensor.name).toBe('KeyboardSensor');
+        expect(typeof (result.current[1].options as KeyboardSensorOptions).coordinateGetter).toBe('function');
+        expect((result.current[1].options as KeyboardSensorOptions).keyboardCodes).toEqual({
+            start: ['Space', 'Enter'],
+            cancel: [],
+            end: ['Space', 'Enter', 'Escape'],
+        });
+    });
+
+    it('should create a PointerSensor and a KeyboardSensor with a coordinate getter with columnGap', () => {
+        const { result } = renderHook(() => useDndSensors(100));
+        expect(result.current.length).toBe(2);
+        expect(result.current[0].sensor.name).toBe('PointerSensor');
+        expect(result.current[1].sensor.name).toBe('KeyboardSensor');
+        expect(typeof (result.current[1].options as KeyboardSensorOptions).coordinateGetter).toBe('function');
+    });
+
+    it('should create a PointerSensor and a KeyboardSensor with a coordinate getter with columnGap and rowGap', () => {
+        const { result } = renderHook(() => useDndSensors(100, 150));
+        expect(result.current.length).toBe(2);
+        expect(result.current[0].sensor.name).toBe('PointerSensor');
+        expect(result.current[1].sensor.name).toBe('KeyboardSensor');
+        expect(typeof (result.current[1].options as KeyboardSensorOptions).coordinateGetter).toBe('function');
+    });
+});