diff --git a/.changeset/sour-ravens-pull.md b/.changeset/sour-ravens-pull.md new file mode 100644 index 00000000..239d0f57 --- /dev/null +++ b/.changeset/sour-ravens-pull.md @@ -0,0 +1,5 @@ +--- +'@shopify/draggable': patch +--- + +Converts ResizeMirror test to typescript diff --git a/src/Plugins/ResizeMirror/tests/ResizeMirror.test.js b/src/Plugins/ResizeMirror/tests/ResizeMirror.test.ts similarity index 76% rename from src/Plugins/ResizeMirror/tests/ResizeMirror.test.js rename to src/Plugins/ResizeMirror/tests/ResizeMirror.test.ts index 0073c1b9..141d2282 100644 --- a/src/Plugins/ResizeMirror/tests/ResizeMirror.test.js +++ b/src/Plugins/ResizeMirror/tests/ResizeMirror.test.ts @@ -9,8 +9,12 @@ import { DRAG_DELAY, drag, } from 'helper'; +import {FixMeAny} from 'shared/types'; -import {Draggable} from '../../..'; +/* eslint-disable @typescript-eslint/ban-ts-comment */ +// @ts-ignore +import Draggable from '../../../Draggable'; +/* eslint-enable @typescript-eslint/ban-ts-comment */ import ResizeMirror from '..'; const sampleMarkup = ` @@ -36,17 +40,17 @@ describe('ResizeMirror', () => { height: smallerDraggableDimensions.height * 2, }; - let sandbox; - let containers; - let draggable; - let draggables; - let smallerDraggable; - let largerDraggable; + let sandbox: HTMLDivElement; + let containers: HTMLElement[]; + let draggable: FixMeAny; + let draggables: HTMLElement[]; + let smallerDraggable: HTMLElement; + let largerDraggable: HTMLElement; beforeEach(() => { sandbox = createSandbox(sampleMarkup); - containers = sandbox.querySelectorAll('.Container'); - draggables = sandbox.querySelectorAll('li'); + containers = [...sandbox.querySelectorAll('.Container')]; + draggables = [...sandbox.querySelectorAll('li')]; smallerDraggable = draggables[0]; largerDraggable = draggables[1]; @@ -71,7 +75,7 @@ describe('ResizeMirror', () => { waitForDragDelay(); await waitForPromisesToResolve(); - const mirror = document.querySelector('.draggable-mirror'); + const mirror = document.querySelector('.draggable-mirror')!; expect(mirror.style).toMatchObject({ width: `${smallerDraggableDimensions.width}px`, @@ -104,7 +108,7 @@ describe('ResizeMirror', () => { waitForDragDelay(); await waitForPromisesToResolve(); - const mirror = document.querySelector('.draggable-mirror'); + const mirror = document.querySelector('.draggable-mirror')!; moveMouse(largerDraggable); waitForRequestAnimationFrame(); @@ -119,7 +123,7 @@ describe('ResizeMirror', () => { waitForDragDelay(); await waitForPromisesToResolve(); - const mirror = document.querySelector('.draggable-mirror'); + const mirror = document.querySelector('.draggable-mirror')!; const mockedAppendChild = withMockedAppendChild(() => { moveMouse(smallerDraggable); @@ -145,7 +149,7 @@ describe('ResizeMirror', () => { }); }); -function mockDimensions(element, {width = 0, height = 0}) { +function mockDimensions(element: HTMLElement, {width = 0, height = 0}) { Object.assign(element.style, { width: `${width}px`, height: `${height}px`, @@ -158,6 +162,11 @@ function mockDimensions(element, {width = 0, height = 0}) { left: 0, right: width, bottom: height, + x: 0, + y: 0, + toJSON() { + return {}; + }, }); return element; @@ -168,13 +177,16 @@ function waitForNextRequestAnimationFrame() { waitForRequestAnimationFrame(); } -function withMockedAppendChild(callback) { +function withMockedAppendChild(callback: () => void) { const mock = jest.fn(); const appendChild = Node.prototype.appendChild; - Node.prototype.appendChild = function (...args) { + /* eslint-disable @typescript-eslint/ban-ts-comment */ + // @ts-ignore + Node.prototype.appendChild = function (this: Node, ...args) { mock(...args); return appendChild.call(this, ...args); }; + /* eslint-enable @typescript-eslint/ban-ts-comment */ callback(); Node.prototype.appendChild = appendChild; return mock; diff --git a/src/Plugins/SwapAnimation/index.js b/src/Plugins/SwapAnimation/index.ts similarity index 100% rename from src/Plugins/SwapAnimation/index.js rename to src/Plugins/SwapAnimation/index.ts diff --git a/test/helpers/module.ts b/test/helpers/module.ts index a03ebd81..6cc7aa38 100644 --- a/test/helpers/module.ts +++ b/test/helpers/module.ts @@ -15,7 +15,7 @@ import { interface Options { from: HTMLElement; to: HTMLElement; - sensor: 'mouse' | 'touch' | 'drag'; + sensor?: 'mouse' | 'touch' | 'drag'; } export function drag({from, to, sensor = 'mouse'}: Options) {