From 36e61b6825c9c9911ce3ef5eb2ff962b091fd831 Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Wed, 11 Oct 2023 14:41:48 -0700 Subject: [PATCH 1/2] Converts ResizeMirror test to typescript --- .changeset/sour-ravens-pull.md | 5 ++ ...izeMirror.test.js => ResizeMirror.test.ts} | 48 ++++++++++++------- .../SwapAnimation/{index.js => index.ts} | 0 test/helpers/module.ts | 2 +- 4 files changed, 38 insertions(+), 17 deletions(-) create mode 100644 .changeset/sour-ravens-pull.md rename src/Plugins/ResizeMirror/tests/{ResizeMirror.test.js => ResizeMirror.test.ts} (75%) rename src/Plugins/SwapAnimation/{index.js => index.ts} (100%) 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 75% rename from src/Plugins/ResizeMirror/tests/ResizeMirror.test.js rename to src/Plugins/ResizeMirror/tests/ResizeMirror.test.ts index 0073c1b9..a98c29f7 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,19 +149,28 @@ 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`, }); - element.getBoundingClientRect = () => ({ + const properties = { width, height, top: 0, left: 0, right: width, bottom: height, + x: 0, + y: 0, + }; + + element.getBoundingClientRect = () => ({ + ...properties, + toJSON() { + return {...properties}; + }, }); return element; @@ -168,13 +181,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) { From f05efb3850eb44d83a4de5c03f1ee526ea5e318b Mon Sep 17 00:00:00 2001 From: Max Hoffmann Date: Wed, 11 Oct 2023 17:30:48 -0700 Subject: [PATCH 2/2] Fix VSCode search exclusion --- .changeset/smooth-coins-brush.md | 5 +++++ .vscode/settings.json | 10 +++++----- 2 files changed, 10 insertions(+), 5 deletions(-) create mode 100644 .changeset/smooth-coins-brush.md diff --git a/.changeset/smooth-coins-brush.md b/.changeset/smooth-coins-brush.md new file mode 100644 index 00000000..ec818787 --- /dev/null +++ b/.changeset/smooth-coins-brush.md @@ -0,0 +1,5 @@ +--- +'@shopify/draggable': patch +--- + +Fixes VSCode search to exclude generated files/folders diff --git a/.vscode/settings.json b/.vscode/settings.json index f959b09b..12c45664 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,11 +7,11 @@ "coverage": true }, "search.exclude": { - "**/node_modules": true, - ".rollup.cache": true, - "coverage": true, - "build": true, - "docs": true + "node_modules/**/*": true, + ".rollup.cache/**/*": true, + "coverage/**/*": true, + "build/**/*": true, + "docs/**/*": true }, "[typescript]": { "editor.formatOnSave": false,