diff --git a/packages/figma-block/package.json b/packages/figma-block/package.json index 50cb3cbab..fe2f2c815 100644 --- a/packages/figma-block/package.json +++ b/packages/figma-block/package.json @@ -29,9 +29,7 @@ "@tony.ganchev/eslint-plugin-header": "^3.4.4", "@types/react": "^18.3.27", "@types/react-dom": "^18.3.7", - "@types/sinon": "^21.0.0", "autoprefixer": "^10.4.27", - "cypress": "^15.13.0", "eslint": "^10.3.0", "eslint-plugin-jsx-a11y": "^6.10.2", "eslint-plugin-tailwindcss": "^3.18.3", diff --git a/packages/figma-block/src/FigmaBlock.spec.ct.tsx b/packages/figma-block/src/FigmaBlock.spec.tsx similarity index 51% rename from packages/figma-block/src/FigmaBlock.spec.ct.tsx rename to packages/figma-block/src/FigmaBlock.spec.tsx index e8b3ef74a..5baccee22 100644 --- a/packages/figma-block/src/FigmaBlock.spec.ct.tsx +++ b/packages/figma-block/src/FigmaBlock.spec.tsx @@ -1,37 +1,47 @@ /* (c) Copyright Frontify Ltd., all rights reserved. */ import { AssetDummy, withAppBridgeBlockStubs } from '@frontify/app-bridge'; -import { mount } from 'cypress/react'; +import { render, screen, within } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { describe, expect, it, vi } from 'vitest'; import { FigmaBlock } from './FigmaBlock'; import { ASSET_ID } from './settings'; import { BlockPreview } from './types'; -const MAIN_BLOCK_SELECTOR = '[data-test-id="figma-block"]'; -const EMPTY_BLOCK_SELECTOR = '[data-test-id="figma-empty-block"]'; -const IMAGE_PREVIEW_SELECTOR = '[data-test-id="figma-image-preview"]'; -const LIVE_PREVIEW_SELECTOR = '[data-test-id="figma-live-preview"]'; -const FULL_SCREEN_SELECTOR = '[data-test-id="figma-full-screen"]'; +const MAIN_BLOCK_TEST_ID = 'figma-block'; +const EMPTY_BLOCK_TEST_ID = 'figma-empty-block'; +const IMAGE_PREVIEW_TEST_ID = 'figma-image-preview'; +const LIVE_PREVIEW_TEST_ID = 'figma-live-preview'; +const FULL_SCREEN_TEST_ID = 'figma-full-screen'; describe('Figma Block', () => { it('renders a Figma block', () => { const [FigmaBlockWithStubs] = withAppBridgeBlockStubs(FigmaBlock); - mount(); - cy.get(MAIN_BLOCK_SELECTOR).should('exist'); + + render(); + + expect(screen.getByTestId(MAIN_BLOCK_TEST_ID)).toBeInTheDocument(); }); it('renders a Figma empty block on edit', () => { const [FigmaBlockWithStubs] = withAppBridgeBlockStubs(FigmaBlock, { editorState: true }); - mount(); - cy.get(EMPTY_BLOCK_SELECTOR).should('exist'); + + render(); + + expect(screen.getByTestId(EMPTY_BLOCK_TEST_ID)).toBeInTheDocument(); }); - it('triggers openAssetChooser mock', () => { + it('triggers openAssetChooser mock', async () => { const [FigmaBlockWithStubs, appBridge] = withAppBridgeBlockStubs(FigmaBlock, { editorState: true }); + const dispatchSpy = vi.spyOn(appBridge, 'dispatch'); + const user = userEvent.setup(); + + render(); - mount(); - cy.get(EMPTY_BLOCK_SELECTOR).click(); - cy.wrap(appBridge.dispatch).should('have.been.calledWith', { + await user.click(screen.getByTestId(EMPTY_BLOCK_TEST_ID)); + + expect(dispatchSpy).toHaveBeenCalledWith({ name: 'openAssetChooser', payload: { selectedValueId: undefined, @@ -49,8 +59,10 @@ describe('Figma Block', () => { }, editorState: true, }); - mount(); - cy.get(IMAGE_PREVIEW_SELECTOR).should('exist'); + + render(); + + expect(screen.getByTestId(IMAGE_PREVIEW_TEST_ID)).toBeInTheDocument(); }); it('renders a Figma Live iframe preview', () => { @@ -61,24 +73,33 @@ describe('Figma Block', () => { blockSettings: { figmaPreviewId: BlockPreview.Live }, editorState: true, }); - mount(); - cy.get(LIVE_PREVIEW_SELECTOR).should('exist'); + + render(); + + expect(screen.getByTestId(LIVE_PREVIEW_TEST_ID)).toBeInTheDocument(); }); - it('toggles Figma Live preview Full screen', () => { + it('toggles Figma Live preview Full screen', async () => { const [FigmaBlockWithStubs] = withAppBridgeBlockStubs(FigmaBlock, { blockAssets: { - [ASSET_ID]: [{ ...AssetDummy.with(345), externalUrl: 'https://picsum.photos/200/200' }], + [ASSET_ID]: [{ ...AssetDummy.with(345), externalUrl: 'https://example.invalid' }], }, blockSettings: { figmaPreviewId: BlockPreview.Live, allowFullScreen: true }, editorState: true, }); - mount(); - cy.get(LIVE_PREVIEW_SELECTOR).should('exist'); - cy.get(LIVE_PREVIEW_SELECTOR).find('button').click(); - cy.get(FULL_SCREEN_SELECTOR).should('exist'); - cy.get(FULL_SCREEN_SELECTOR).find('button').click({ force: true }); - cy.get(FULL_SCREEN_SELECTOR).should('not.exist'); - cy.get(LIVE_PREVIEW_SELECTOR).should('exist'); + const user = userEvent.setup(); + + render(); + + expect(screen.getByTestId(LIVE_PREVIEW_TEST_ID)).toBeInTheDocument(); + + await user.click(within(screen.getByTestId(LIVE_PREVIEW_TEST_ID)).getByRole('button')); + + expect(screen.getByTestId(FULL_SCREEN_TEST_ID)).toBeInTheDocument(); + + await user.click(within(screen.getByTestId(FULL_SCREEN_TEST_ID)).getByRole('button')); + + expect(screen.queryByTestId(FULL_SCREEN_TEST_ID)).not.toBeInTheDocument(); + expect(screen.getByTestId(LIVE_PREVIEW_TEST_ID)).toBeInTheDocument(); }); }); diff --git a/packages/figma-block/src/components/ContainerOperator/BitmapContainerOperator.spec.ct.tsx b/packages/figma-block/src/components/ContainerOperator/BitmapContainerOperator.spec.ct.tsx deleted file mode 100644 index 1e2b6606c..000000000 --- a/packages/figma-block/src/components/ContainerOperator/BitmapContainerOperator.spec.ct.tsx +++ /dev/null @@ -1,74 +0,0 @@ -/* (c) Copyright Frontify Ltd., all rights reserved. */ - -import { mount } from 'cypress/react'; - -import { BlockContainerStub } from '../../tests/BlockContainerStub'; - -const IMAGE_CONTAINER_SELECTOR = '[id="image-container"]'; -const IMAGE_STAGE_SELECTOR = '[id="image-stage"]'; -const IMAGE_ELEMENT = '[id="image-element"]'; - -describe('BitmapContainerOperator', () => { - it('fits element / image with 400px height in the center', () => { - mount(); - - cy.get(IMAGE_STAGE_SELECTOR).then((stageElement) => { - cy.get(IMAGE_ELEMENT) - .wait(10) - .then((imageElement) => { - const stageClientRect = stageElement[0].getBoundingClientRect(); - const imageClientRect = imageElement[0].getBoundingClientRect(); - - const isInTheMiddle = - (stageClientRect.width - imageClientRect.width) / 2 === imageElement?.offset()?.left; - - // eslint-disable-next-line @typescript-eslint/no-unused-expressions - expect(isInTheMiddle).to.be.true; - return null; - }); - return null; - }); - }); - - it('fits element with 700px height in the center', () => { - mount(); - - cy.get(IMAGE_STAGE_SELECTOR).then((stageElement) => { - cy.get(IMAGE_CONTAINER_SELECTOR) - .wait(10) - .then((containerElement) => { - const stageClientRect = stageElement[0].getBoundingClientRect(); - const containerClientRect = containerElement[0].getBoundingClientRect(); - - const isInTheMiddle = - `${(stageClientRect.width - containerClientRect.width) / 2}px` === - containerElement[0].style.left; - // eslint-disable-next-line @typescript-eslint/no-unused-expressions - expect(isInTheMiddle).to.be.true; - return null; - }); - return null; - }); - }); - - it('render element with Padding 0.2 (in percentages)', () => { - mount(); - - cy.get(IMAGE_STAGE_SELECTOR).then((stageElement) => { - cy.get(IMAGE_CONTAINER_SELECTOR) - .wait(10) - .then((containerElement) => { - const stageClientRect = stageElement[0].getBoundingClientRect(); - const containerClientRect = containerElement[0].getBoundingClientRect(); - - const isInTheMiddle = - `${(stageClientRect.width - containerClientRect.width) / 2}px` === - containerElement[0].style.left; - // eslint-disable-next-line @typescript-eslint/no-unused-expressions - expect(isInTheMiddle).to.be.true; - return null; - }); - return null; - }); - }); -}); diff --git a/packages/figma-block/src/components/ContainerOperator/BitmapContainerOperator.spec.tsx b/packages/figma-block/src/components/ContainerOperator/BitmapContainerOperator.spec.tsx new file mode 100644 index 000000000..1b3a8c3f4 --- /dev/null +++ b/packages/figma-block/src/components/ContainerOperator/BitmapContainerOperator.spec.tsx @@ -0,0 +1,83 @@ +/* (c) Copyright Frontify Ltd., all rights reserved. */ + +import { fireEvent, render, waitFor } from '@testing-library/react'; +import { describe, expect, it, vi } from 'vitest'; + +import { BlockContainerStub } from '../../tests/BlockContainerStub'; + +const IMAGE_CONTAINER_TEST_ID = 'image-container'; +const IMAGE_STAGE_TEST_ID = 'image-stage'; +const IMAGE_ELEMENT_TEST_ID = 'image-element'; + +const mockBoundingClientRect = (element: HTMLElement, width: number, height: number) => { + vi.spyOn(element, 'getBoundingClientRect').mockReturnValue({ + width, + height, + x: 0, + y: 0, + top: 0, + left: 0, + right: width, + bottom: height, + toJSON: vi.fn(), + }); +}; + +describe('BitmapContainerOperator', () => { + it('centers the image element within a 400px stage', async () => { + render(); + + const stageElement = document.getElementById(IMAGE_STAGE_TEST_ID) as HTMLDivElement; + const containerElement = document.getElementById(IMAGE_CONTAINER_TEST_ID) as HTMLDivElement; + const imageElement = document.getElementById(IMAGE_ELEMENT_TEST_ID) as HTMLImageElement; + + mockBoundingClientRect(stageElement, 400, 400); + mockBoundingClientRect(containerElement, 200, 200); + mockBoundingClientRect(imageElement, 200, 200); + + fireEvent.load(imageElement); + + await waitFor(() => { + expect(containerElement.style.left).toBe('200px'); + expect(containerElement.style.top).toBe('200px'); + }); + }); + + it('centers the image element within a 700px stage', async () => { + render(); + + const stageElement = document.getElementById(IMAGE_STAGE_TEST_ID) as HTMLDivElement; + const containerElement = document.getElementById(IMAGE_CONTAINER_TEST_ID) as HTMLDivElement; + const imageElement = document.getElementById(IMAGE_ELEMENT_TEST_ID) as HTMLImageElement; + + mockBoundingClientRect(stageElement, 700, 700); + mockBoundingClientRect(containerElement, 300, 300); + mockBoundingClientRect(imageElement, 300, 300); + + fireEvent.load(imageElement); + + await waitFor(() => { + expect(containerElement.style.left).toBe('350px'); + expect(containerElement.style.top).toBe('350px'); + }); + }); + + it('centers the image element within a padded stage (padding=0.2)', async () => { + render(); + + const stageElement = document.getElementById(IMAGE_STAGE_TEST_ID) as HTMLDivElement; + const containerElement = document.getElementById(IMAGE_CONTAINER_TEST_ID) as HTMLDivElement; + const imageElement = document.getElementById(IMAGE_ELEMENT_TEST_ID) as HTMLImageElement; + + mockBoundingClientRect(stageElement, 500, 500); + mockBoundingClientRect(containerElement, 200, 200); + mockBoundingClientRect(imageElement, 200, 200); + + fireEvent.load(imageElement); + + await waitFor(() => { + expect(containerElement.style.left).toBe('250px'); + expect(containerElement.style.top).toBe('250px'); + }); + }); +}); diff --git a/packages/figma-block/src/components/ContainerOperator/VectorContainerOperator.spec.ct.tsx b/packages/figma-block/src/components/ContainerOperator/VectorContainerOperator.spec.ct.tsx deleted file mode 100644 index cb44358d0..000000000 --- a/packages/figma-block/src/components/ContainerOperator/VectorContainerOperator.spec.ct.tsx +++ /dev/null @@ -1,51 +0,0 @@ -/* (c) Copyright Frontify Ltd., all rights reserved. */ - -import { mount } from 'cypress/react'; - -import { BlockContainerStub } from '../../tests/BlockContainerStub'; - -const IMAGE_CONTAINER_SELECTOR = '[id="image-container"]'; -const IMAGE_STAGE_SELECTOR = '[id="image-stage"]'; - -describe('VectorContainerOperator', () => { - it('fits element with 400px height in the center', () => { - mount(); - - cy.get(IMAGE_STAGE_SELECTOR).then((stageElement) => { - cy.get(IMAGE_CONTAINER_SELECTOR) - .wait(10) - .then((containerElement) => { - const stageClientRect = stageElement[0].getBoundingClientRect(); - const containerClientRect = containerElement[0].getBoundingClientRect(); - - const isInTheMiddle = - `${(stageClientRect.width - containerClientRect.width) / 2}px` === - containerElement[0].style.left; - // eslint-disable-next-line @typescript-eslint/no-unused-expressions - expect(isInTheMiddle).to.be.true; - return null; - }); - return null; - }); - }); - - it('moves image 100px left', () => { - mount(); - - const mousePositionOnScreen = { pageX: 300, pageY: 100 }; - cy.get(IMAGE_CONTAINER_SELECTOR) - .trigger('mousedown') - .trigger('mousemove', { which: 1, ...mousePositionOnScreen }) - .trigger('mouseup') - .then((containerElement) => { - const containerClientRect = containerElement[0].getBoundingClientRect(); - const elementPositionAfterMove = { - left: `${mousePositionOnScreen.pageX - containerClientRect.width / 2}px`, - top: `${mousePositionOnScreen.pageY - containerClientRect.height / 2}px`, - }; - expect(containerElement[0].style.left).to.equal(elementPositionAfterMove.left); - expect(containerElement[0].style.top).to.equal(elementPositionAfterMove.top); - return null; - }); - }); -}); diff --git a/packages/figma-block/src/components/ContainerOperator/VectorContainerOperator.spec.tsx b/packages/figma-block/src/components/ContainerOperator/VectorContainerOperator.spec.tsx new file mode 100644 index 000000000..d386ef701 --- /dev/null +++ b/packages/figma-block/src/components/ContainerOperator/VectorContainerOperator.spec.tsx @@ -0,0 +1,34 @@ +/* (c) Copyright Frontify Ltd., all rights reserved. */ + +import { fireEvent, render } from '@testing-library/react'; +import { describe, expect, it } from 'vitest'; + +import { BlockContainerStub } from '../../tests/BlockContainerStub'; + +const IMAGE_CONTAINER_TEST_ID = 'image-container'; + +describe('VectorContainerOperator', () => { + it('moves image on mouse move', () => { + render(); + + const containerElement = document.getElementById(IMAGE_CONTAINER_TEST_ID) as HTMLDivElement; + const imageElement = document.getElementById('image-element') as HTMLImageElement; + + fireEvent.load(imageElement); + + const initialLeft = parseInt(containerElement.style.left, 10) || 0; + const initialTop = parseInt(containerElement.style.top, 10) || 0; + + fireEvent.mouseDown(containerElement, { pageX: 0, pageY: 0 }); + + const mouseMoveEvent = new MouseEvent('mousemove', { bubbles: true, buttons: 1 }); + Object.defineProperty(mouseMoveEvent, 'pageX', { value: 300 }); + Object.defineProperty(mouseMoveEvent, 'pageY', { value: 100 }); + document.dispatchEvent(mouseMoveEvent); + + fireEvent.mouseUp(containerElement); + + expect(containerElement.style.left).toBe(`${initialLeft + 300}px`); + expect(containerElement.style.top).toBe(`${initialTop + 100}px`); + }); +}); diff --git a/packages/figma-block/src/components/ImageStage.spec.ct.tsx b/packages/figma-block/src/components/ImageStage.spec.ct.tsx deleted file mode 100644 index 8891fbab0..000000000 --- a/packages/figma-block/src/components/ImageStage.spec.ct.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/* (c) Copyright Frontify Ltd., all rights reserved. */ - -import { mount } from 'cypress/react'; - -import { ImageStage } from './ImageStage'; - -const IMAGE_STAGE_SELECTOR = '[id="image-stage"]'; - -const ImageStageDivBlock = () =>
; - -describe('ImageStage', () => { - it('return the correct width and height', () => { - mount(); - - cy.get(IMAGE_STAGE_SELECTOR).then((element) => { - const imageStage = new ImageStage(element.get(0) as HTMLDivElement); - - expect(imageStage.height).to.equal(100); - expect(imageStage.width).to.equal(200); - return null; - }); - }); - - it('return the correct aspectRatio', () => { - mount(); - - cy.get(IMAGE_STAGE_SELECTOR).then((element) => { - const imageStage = new ImageStage(element.get(0) as HTMLDivElement); - expect(imageStage.aspectRatio()).to.equal(2); - return null; - }); - }); - - it('correct alters the height', () => { - mount(); - - cy.get(IMAGE_STAGE_SELECTOR).then((element) => { - const imageStage = new ImageStage(element.get(0) as HTMLDivElement); - imageStage.alterHeight('300px'); - expect(imageStage.height).to.equal(300); - return null; - }); - }); -}); diff --git a/packages/figma-block/src/components/ImageStage.spec.tsx b/packages/figma-block/src/components/ImageStage.spec.tsx new file mode 100644 index 000000000..e69ebe0c4 --- /dev/null +++ b/packages/figma-block/src/components/ImageStage.spec.tsx @@ -0,0 +1,61 @@ +/* (c) Copyright Frontify Ltd., all rights reserved. */ + +import { render } from '@testing-library/react'; +import { describe, expect, it, vi } from 'vitest'; + +import { ImageStage } from './ImageStage'; + +const IMAGE_STAGE_ID = 'image-stage'; + +const ImageStageDivBlock = () =>
; + +const mockBoundingClientRect = (element: HTMLElement, width: number, height: number) => { + vi.spyOn(element, 'getBoundingClientRect').mockReturnValue({ + width, + height, + x: 0, + y: 0, + top: 0, + left: 0, + right: width, + bottom: height, + toJSON: vi.fn(), + }); +}; + +describe('ImageStage', () => { + it('returns the correct width and height', () => { + render(); + + const element = document.getElementById(IMAGE_STAGE_ID) as HTMLDivElement; + mockBoundingClientRect(element, 200, 100); + + const imageStage = new ImageStage(element); + + expect(imageStage.height).toBe(100); + expect(imageStage.width).toBe(200); + }); + + it('returns the correct aspect ratio', () => { + render(); + + const element = document.getElementById(IMAGE_STAGE_ID) as HTMLDivElement; + mockBoundingClientRect(element, 200, 100); + + const imageStage = new ImageStage(element); + + expect(imageStage.aspectRatio()).toBe(2); + }); + + it('correctly alters the height', () => { + render(); + + const element = document.getElementById(IMAGE_STAGE_ID) as HTMLDivElement; + + const imageStage = new ImageStage(element); + + imageStage.alterHeight('300px'); + + expect(element.style.height).toBe('300px'); + }); +}); diff --git a/packages/figma-block/src/components/ImageStageControls.spec.ct.tsx b/packages/figma-block/src/components/ImageStageControls.spec.ct.tsx deleted file mode 100644 index bc1830b9e..000000000 --- a/packages/figma-block/src/components/ImageStageControls.spec.ct.tsx +++ /dev/null @@ -1,49 +0,0 @@ -/* (c) Copyright Frontify Ltd., all rights reserved. */ - -import { mount } from 'cypress/react'; - -import { DrawFullScreenActionButton, DrawZoomInOutButtons } from './ImageStageControls'; - -const ICON_ZOOM_IN_SELECTOR = '[data-test-id="fondue-icons-plus"]'; -const ICON_ZOOM_OUT_SELECTOR = '[data-test-id="fondue-icons-minus"]'; -const ICON_REJECT_SELECTOR = '[data-test-id="fondue-icons-cross"]'; -const ICON_EXPAND_SELECTOR = '[data-test-id="fondue-icons-arrow-expand"]'; - -describe('Image Control Buttons', () => { - describe('DrawFullScreenActionButton', () => { - const onClick = () => true; - - it('renders button with icon expand', () => { - mount(); - cy.get(ICON_EXPAND_SELECTOR).should('exist'); - }); - - it('renders button with icon reject', () => { - mount(); - cy.get(ICON_REJECT_SELECTOR).should('exist'); - }); - }); - - describe('DrawZoomInOutButtons', () => { - it('renders Zoom In and Out buttons', () => { - const onClickZoomIn = cy.stub().as('onClickZoomIn'); - const onClickZoomOut = cy.stub().as('onClickZoomOut'); - - mount(); - cy.get(ICON_ZOOM_IN_SELECTOR).should('exist'); - cy.get(ICON_ZOOM_OUT_SELECTOR).should('exist'); - }); - - it('test the onClick action', () => { - const onClickZoomIn = cy.stub().as('onClickZoomIn'); - const onClickZoomOut = cy.stub().as('onClickZoomOut'); - - mount(); - cy.get('button').eq(0).should('exist').click({ force: true }); - cy.get('button').eq(1).should('exist').click({ force: true }); - - cy.get('@onClickZoomIn').should('have.been.calledOnce'); - cy.get('@onClickZoomOut').should('have.been.calledOnce'); - }); - }); -}); diff --git a/packages/figma-block/src/components/ImageStageControls.spec.tsx b/packages/figma-block/src/components/ImageStageControls.spec.tsx new file mode 100644 index 000000000..b4e3dc4d9 --- /dev/null +++ b/packages/figma-block/src/components/ImageStageControls.spec.tsx @@ -0,0 +1,56 @@ +/* (c) Copyright Frontify Ltd., all rights reserved. */ + +import { render, screen } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { describe, expect, it, vi } from 'vitest'; + +import { DrawFullScreenActionButton, DrawZoomInOutButtons } from './ImageStageControls'; + +const ICON_ZOOM_IN_TEST_ID = 'fondue-icons-plus'; +const ICON_ZOOM_OUT_TEST_ID = 'fondue-icons-minus'; +const ICON_REJECT_TEST_ID = 'fondue-icons-cross'; +const ICON_EXPAND_TEST_ID = 'fondue-icons-arrow-expand'; + +describe('Image Control Buttons', () => { + describe('DrawFullScreenActionButton', () => { + const onClick = vi.fn(); + + it('renders button with icon expand', () => { + render(); + + expect(screen.getByTestId(ICON_EXPAND_TEST_ID)).toBeInTheDocument(); + }); + + it('renders button with icon reject', () => { + render(); + + expect(screen.getByTestId(ICON_REJECT_TEST_ID)).toBeInTheDocument(); + }); + }); + + describe('DrawZoomInOutButtons', () => { + it('renders Zoom In and Out buttons', () => { + render(); + + expect(screen.getByTestId(ICON_ZOOM_IN_TEST_ID)).toBeInTheDocument(); + expect(screen.getByTestId(ICON_ZOOM_OUT_TEST_ID)).toBeInTheDocument(); + }); + + it('tests the onClick action', async () => { + const onClickZoomIn = vi.fn(); + const onClickZoomOut = vi.fn(); + + const user = userEvent.setup(); + + render(); + + const buttons = screen.getAllByRole('button'); + + await user.click(buttons[0]); + await user.click(buttons[1]); + + expect(onClickZoomIn).toHaveBeenCalledTimes(1); + expect(onClickZoomOut).toHaveBeenCalledTimes(1); + }); + }); +}); diff --git a/packages/figma-block/tsconfig.json b/packages/figma-block/tsconfig.json index 52dd12d57..922d88631 100644 --- a/packages/figma-block/tsconfig.json +++ b/packages/figma-block/tsconfig.json @@ -15,7 +15,7 @@ "sourceMap": true, "strict": true, "target": "ES2020", - "types": ["cypress", "cypress-real-events"] + "types": ["@testing-library/jest-dom"] }, "exclude": ["node_modules", "dist", "../shared/src/**/*.spec.ts", "../shared/src/**/*.spec.tsx"], "include": ["src/**/*", "../shared/src/**/*"] diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cbf2e7f8b..215796b45 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -807,15 +807,9 @@ importers: '@types/react-dom': specifier: ^18.3.7 version: 18.3.7(@types/react@18.3.28) - '@types/sinon': - specifier: ^21.0.0 - version: 21.0.1 autoprefixer: specifier: ^10.4.27 version: 10.4.27(postcss@8.5.14) - cypress: - specifier: ^15.13.0 - version: 15.13.1 eslint: specifier: ^10.3.0 version: 10.3.0(jiti@2.7.0) @@ -1149,7 +1143,7 @@ importers: version: 2.1.11(@babel/preset-env@7.29.0(@babel/core@7.29.0))(@emotion/is-prop-valid@0.8.8)(@frontify/app-bridge@4.0.0-alpha.64(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sinon@21.0.3))(@react-spring/web@9.7.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@types/node@25.6.0)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(@udecode/plate-common@36.5.9(@types/react@18.3.28)(immer@10.2.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.113.1(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(slate-react@0.102.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(slate@0.102.0))(slate@0.102.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2)(slate-history@0.113.1(slate@0.102.0))(slate-hyperscript@0.100.0(slate@0.102.0))(tailwindcss@3.4.19(yaml@2.8.3))(zustand@4.5.7(@types/react@18.3.28)(immer@10.2.0)(react@18.3.1)) '@uiw/react-codemirror': specifier: 4.24.2 - version: 4.24.2(@babel/runtime@7.29.2)(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.12.3)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.11)(@codemirror/state@6.6.0)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.42.1)(codemirror@6.0.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + version: 4.24.2(@babel/runtime@7.29.2)(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.12.3)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.11)(@codemirror/state@6.6.0)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.43.0)(codemirror@6.0.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) lodash-es: specifier: ^4.18.1 version: 4.18.1 @@ -2390,9 +2384,6 @@ packages: '@codemirror/view@6.40.0': resolution: {integrity: sha512-WA0zdU7xfF10+5I3HhUUq3kqOx3KjqmtQ9lqZjfK7jtYk4G72YW9rezcSywpaUMCWOMlq+6E0pO1IWg1TNIhtg==} - '@codemirror/view@6.42.1': - resolution: {integrity: sha512-ToN3oFc0nsxNUYVF5P0ztLgbC4UPPjPtA9aKYhkOKQaZASpOUo6ISXyQLP66ctVwlDc+j6Jv0uK5IFALkiXztg==} - '@codemirror/view@6.43.0': resolution: {integrity: sha512-V7ZCLQO3Jus9hzh2jVCCPW3mO4IBMr43O37PqSUYautJSnnJF41YlgLw21x0fLJTYvJ+Vkm6Gp+qKGH9pltgXA==} @@ -11014,13 +11005,6 @@ snapshots: style-mod: 4.1.3 w3c-keyname: 2.2.8 - '@codemirror/view@6.42.1': - dependencies: - '@codemirror/state': 6.6.0 - crelt: 1.0.6 - style-mod: 4.1.3 - w3c-keyname: 2.2.8 - '@codemirror/view@6.43.0': dependencies: '@codemirror/state': 6.6.0 @@ -14635,7 +14619,7 @@ snapshots: '@codemirror/state': 6.6.0 '@codemirror/view': 6.40.0 - '@uiw/codemirror-extensions-basic-setup@4.24.2(@codemirror/autocomplete@6.18.6)(@codemirror/commands@6.8.1)(@codemirror/language@6.12.3)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.11)(@codemirror/state@6.6.0)(@codemirror/view@6.42.1)': + '@uiw/codemirror-extensions-basic-setup@4.24.2(@codemirror/autocomplete@6.18.6)(@codemirror/commands@6.8.1)(@codemirror/language@6.12.3)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.11)(@codemirror/state@6.6.0)(@codemirror/view@6.43.0)': dependencies: '@codemirror/autocomplete': 6.18.6 '@codemirror/commands': 6.8.1 @@ -14643,7 +14627,7 @@ snapshots: '@codemirror/lint': 6.8.5 '@codemirror/search': 6.5.11 '@codemirror/state': 6.6.0 - '@codemirror/view': 6.42.1 + '@codemirror/view': 6.43.0 '@uiw/codemirror-extensions-langs@4.24.2(@codemirror/autocomplete@6.18.6)(@codemirror/language-data@6.5.1)(@codemirror/language@6.12.3)(@codemirror/legacy-modes@6.5.1)(@codemirror/state@6.6.0)(@codemirror/view@6.40.0)(@lezer/common@1.5.1)(@lezer/highlight@1.2.3)(@lezer/javascript@1.5.1)(@lezer/lr@1.4.8)': dependencies: @@ -15030,14 +15014,14 @@ snapshots: - '@codemirror/lint' - '@codemirror/search' - '@uiw/react-codemirror@4.24.2(@babel/runtime@7.29.2)(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.12.3)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.11)(@codemirror/state@6.6.0)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.42.1)(codemirror@6.0.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@uiw/react-codemirror@4.24.2(@babel/runtime@7.29.2)(@codemirror/autocomplete@6.18.6)(@codemirror/language@6.12.3)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.11)(@codemirror/state@6.6.0)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.43.0)(codemirror@6.0.2)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/runtime': 7.29.2 '@codemirror/commands': 6.8.1 '@codemirror/state': 6.6.0 '@codemirror/theme-one-dark': 6.1.3 - '@codemirror/view': 6.42.1 - '@uiw/codemirror-extensions-basic-setup': 4.24.2(@codemirror/autocomplete@6.18.6)(@codemirror/commands@6.8.1)(@codemirror/language@6.12.3)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.11)(@codemirror/state@6.6.0)(@codemirror/view@6.42.1) + '@codemirror/view': 6.43.0 + '@uiw/codemirror-extensions-basic-setup': 4.24.2(@codemirror/autocomplete@6.18.6)(@codemirror/commands@6.8.1)(@codemirror/language@6.12.3)(@codemirror/lint@6.8.5)(@codemirror/search@6.5.11)(@codemirror/state@6.6.0)(@codemirror/view@6.43.0) codemirror: 6.0.2 react: 18.3.1 react-dom: 18.3.1(react@18.3.1)