archive-gh-me/draggable
1
0
Fork 0
mirror of https://github.com/Shopify/draggable.git synced 2025-12-08 20:15:56 +00:00
Code Issues Projects Releases Wiki Activity

Converts ResizeMirror test to typescript

Browse Source
This commit is contained in:
Max Hoffmann 2023-10-11 14:41:48 -07:00
parent ef4245590d
commit 36e61b6825
No known key found for this signature in database
GPG Key ID: 3015B3271A63BCAE
4 changed files with 38 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/sour-ravens-pull.md Normal file
View File

@ -0,0 +1,5 @@
---
'@shopify/draggable': patch
---
Converts ResizeMirror test to typescript

48
src/Plugins/ResizeMirror/tests/ResizeMirror.test.js → src/Plugins/ResizeMirror/tests/ResizeMirror.test.ts
View File

@ -9,8 +9,12 @@ import {
DRAG_DELAY, DRAG_DELAY,
drag, drag,
} from 'helper'; } 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 '..'; import ResizeMirror from '..';
const sampleMarkup = ` const sampleMarkup = `
@ -36,17 +40,17 @@ describe('ResizeMirror', () => {
height: smallerDraggableDimensions.height * 2, height: smallerDraggableDimensions.height * 2,
}; };
let sandbox; let sandbox: HTMLDivElement;
let containers; let containers: HTMLElement[];
let draggable; let draggable: FixMeAny;
let draggables; let draggables: HTMLElement[];
let smallerDraggable; let smallerDraggable: HTMLElement;
let largerDraggable; let largerDraggable: HTMLElement;
beforeEach(() => { beforeEach(() => {
sandbox = createSandbox(sampleMarkup); sandbox = createSandbox(sampleMarkup);
containers = sandbox.querySelectorAll('.Container'); containers = [...sandbox.querySelectorAll<HTMLElement>('.Container')];
draggables = sandbox.querySelectorAll('li'); draggables = [...sandbox.querySelectorAll<HTMLElement>('li')];
smallerDraggable = draggables[0]; smallerDraggable = draggables[0];
largerDraggable = draggables[1]; largerDraggable = draggables[1];
@ -71,7 +75,7 @@ describe('ResizeMirror', () => {
waitForDragDelay(); waitForDragDelay();
await waitForPromisesToResolve(); await waitForPromisesToResolve();
const mirror = document.querySelector('.draggable-mirror'); const mirror = document.querySelector<HTMLElement>('.draggable-mirror')!;
expect(mirror.style).toMatchObject({ expect(mirror.style).toMatchObject({
width: `${smallerDraggableDimensions.width}px`, width: `${smallerDraggableDimensions.width}px`,
@ -104,7 +108,7 @@ describe('ResizeMirror', () => {
waitForDragDelay(); waitForDragDelay();
await waitForPromisesToResolve(); await waitForPromisesToResolve();
const mirror = document.querySelector('.draggable-mirror'); const mirror = document.querySelector<HTMLElement>('.draggable-mirror')!;
moveMouse(largerDraggable); moveMouse(largerDraggable);
waitForRequestAnimationFrame(); waitForRequestAnimationFrame();
@ -119,7 +123,7 @@ describe('ResizeMirror', () => {
waitForDragDelay(); waitForDragDelay();
await waitForPromisesToResolve(); await waitForPromisesToResolve();
const mirror = document.querySelector('.draggable-mirror'); const mirror = document.querySelector<HTMLElement>('.draggable-mirror')!;
const mockedAppendChild = withMockedAppendChild(() => { const mockedAppendChild = withMockedAppendChild(() => {
moveMouse(smallerDraggable); moveMouse(smallerDraggable);
@ -145,19 +149,28 @@ describe('ResizeMirror', () => {
}); });
}); });
function mockDimensions(element, {width = 0, height = 0}) { function mockDimensions(element: HTMLElement, {width = 0, height = 0}) {
Object.assign(element.style, { Object.assign(element.style, {
width: `${width}px`, width: `${width}px`,
height: `${height}px`, height: `${height}px`,
}); });
element.getBoundingClientRect = () => ({ const properties = {
width, width,
height, height,
top: 0, top: 0,
left: 0, left: 0,
right: width, right: width,
bottom: height, bottom: height,
x: 0,
y: 0,
};
element.getBoundingClientRect = () => ({
...properties,
toJSON() {
return {...properties};
},
}); });
return element; return element;
@ -168,13 +181,16 @@ function waitForNextRequestAnimationFrame() {
waitForRequestAnimationFrame(); waitForRequestAnimationFrame();
} }
function withMockedAppendChild(callback) { function withMockedAppendChild(callback: () => void) {
const mock = jest.fn(); const mock = jest.fn();
const appendChild = Node.prototype.appendChild; 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); mock(...args);
return appendChild.call(this, ...args); return appendChild.call(this, ...args);
}; };
/* eslint-enable @typescript-eslint/ban-ts-comment */
callback(); callback();
Node.prototype.appendChild = appendChild; Node.prototype.appendChild = appendChild;
return mock; return mock;

0
src/Plugins/SwapAnimation/index.js → src/Plugins/SwapAnimation/index.ts
View File

2
test/helpers/module.ts
View File

@ -15,7 +15,7 @@ import {
interface Options { interface Options {
from: HTMLElement; from: HTMLElement;
to: HTMLElement; to: HTMLElement;
sensor: 'mouse' | 'touch' | 'drag'; sensor?: 'mouse' | 'touch' | 'drag';
} }
export function drag({from, to, sensor = 'mouse'}: Options) { export function drag({from, to, sensor = 'mouse'}: Options) {