From 4cdb31b30d2f37ee58efca50df48d82bb19298e2 Mon Sep 17 00:00:00 2001 From: benfrontify Date: Wed, 20 May 2026 11:09:18 +0200 Subject: [PATCH 01/15] test commit --- .../figma-block/src/FigmaBlock.spec.ct.tsx | 84 ------------------- packages/figma-block/src/FigmaBlock.spec.tsx | 73 ++++++++++++++++ 2 files changed, 73 insertions(+), 84 deletions(-) delete mode 100644 packages/figma-block/src/FigmaBlock.spec.ct.tsx create mode 100644 packages/figma-block/src/FigmaBlock.spec.tsx diff --git a/packages/figma-block/src/FigmaBlock.spec.ct.tsx b/packages/figma-block/src/FigmaBlock.spec.ct.tsx deleted file mode 100644 index e8b3ef74a..000000000 --- a/packages/figma-block/src/FigmaBlock.spec.ct.tsx +++ /dev/null @@ -1,84 +0,0 @@ -/* (c) Copyright Frontify Ltd., all rights reserved. */ - -import { AssetDummy, withAppBridgeBlockStubs } from '@frontify/app-bridge'; -import { mount } from 'cypress/react'; - -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"]'; - -describe('Figma Block', () => { - it('renders a Figma block', () => { - const [FigmaBlockWithStubs] = withAppBridgeBlockStubs(FigmaBlock); - mount(); - cy.get(MAIN_BLOCK_SELECTOR).should('exist'); - }); - - it('renders a Figma empty block on edit', () => { - const [FigmaBlockWithStubs] = withAppBridgeBlockStubs(FigmaBlock, { editorState: true }); - mount(); - cy.get(EMPTY_BLOCK_SELECTOR).should('exist'); - }); - - it('triggers openAssetChooser mock', () => { - const [FigmaBlockWithStubs, appBridge] = withAppBridgeBlockStubs(FigmaBlock, { editorState: true }); - - mount(); - cy.get(EMPTY_BLOCK_SELECTOR).click(); - cy.wrap(appBridge.dispatch).should('have.been.calledWith', { - name: 'openAssetChooser', - payload: { - selectedValueId: undefined, - projectTypes: ['Workspace'], - objectTypes: ['URL'], - urlContains: 'https://www.figma', - }, - }); - }); - - it('renders a Figma image preview', () => { - const [FigmaBlockWithStubs] = withAppBridgeBlockStubs(FigmaBlock, { - blockAssets: { - [ASSET_ID]: [{ ...AssetDummy.with(345), externalUrl: 'https://picsum.photos/200/200' }], - }, - editorState: true, - }); - mount(); - cy.get(IMAGE_PREVIEW_SELECTOR).should('exist'); - }); - - it('renders a Figma Live iframe preview', () => { - const [FigmaBlockWithStubs] = withAppBridgeBlockStubs(FigmaBlock, { - blockAssets: { - [ASSET_ID]: [{ ...AssetDummy.with(345), externalUrl: 'https://picsum.photos/200/200' }], - }, - blockSettings: { figmaPreviewId: BlockPreview.Live }, - editorState: true, - }); - mount(); - cy.get(LIVE_PREVIEW_SELECTOR).should('exist'); - }); - - it('toggles Figma Live preview Full screen', () => { - const [FigmaBlockWithStubs] = withAppBridgeBlockStubs(FigmaBlock, { - blockAssets: { - [ASSET_ID]: [{ ...AssetDummy.with(345), externalUrl: 'https://picsum.photos/200/200' }], - }, - 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'); - }); -}); diff --git a/packages/figma-block/src/FigmaBlock.spec.tsx b/packages/figma-block/src/FigmaBlock.spec.tsx new file mode 100644 index 000000000..6bad89393 --- /dev/null +++ b/packages/figma-block/src/FigmaBlock.spec.tsx @@ -0,0 +1,73 @@ +/* (c) Copyright Frontify Ltd., all rights reserved. */ + +import { AssetDummy, withAppBridgeBlockStubs } from '@frontify/app-bridge'; +import { render, screen } from '@testing-library/react'; +import { describe, expect, it } from 'vitest'; + +import { FigmaBlock } from './FigmaBlock'; +import { ASSET_ID } from './settings'; +import { BlockPreview } from './types'; + +const MAIN_BLOCK_SELECTOR = 'figma-block'; +const EMPTY_BLOCK_SELECTOR = 'figma-empty-block'; +const IMAGE_PREVIEW_SELECTOR = 'figma-image-preview'; +const LIVE_PREVIEW_SELECTOR = 'figma-live-preview'; + +describe('Figma Block', () => { + it('renders a Figma block', () => { + const [FigmaBlockWithStubs] = withAppBridgeBlockStubs(FigmaBlock); + + render(); + + expect(screen.getByTestId(MAIN_BLOCK_SELECTOR)).toBeTruthy(); + }); + + it('renders a Figma empty block on edit', () => { + const [FigmaBlockWithStubs] = withAppBridgeBlockStubs(FigmaBlock, { editorState: true }); + + render(); + + expect(screen.getByTestId(EMPTY_BLOCK_SELECTOR)).toBeTruthy(); + }); + + it('renders a Figma image preview', () => { + const [FigmaBlockWithStubs] = withAppBridgeBlockStubs(FigmaBlock, { + blockAssets: { + [ASSET_ID]: [{ ...AssetDummy.with(345), externalUrl: 'https://picsum.photos/200/200' }], + }, + editorState: true, + }); + + render(); + + expect(screen.getByTestId(IMAGE_PREVIEW_SELECTOR)).toBeTruthy(); + }); + + it('renders a Figma Live iframe preview', () => { + const [FigmaBlockWithStubs] = withAppBridgeBlockStubs(FigmaBlock, { + blockAssets: { + [ASSET_ID]: [{ ...AssetDummy.with(345), externalUrl: 'https://picsum.photos/200/200' }], + }, + blockSettings: { figmaPreviewId: BlockPreview.Live }, + editorState: true, + }); + + render(); + + expect(screen.getByTestId(LIVE_PREVIEW_SELECTOR)).toBeTruthy(); + }); + + it('toggles Figma Live preview Full screen', () => { + const [FigmaBlockWithStubs] = withAppBridgeBlockStubs(FigmaBlock, { + blockAssets: { + [ASSET_ID]: [{ ...AssetDummy.with(345), externalUrl: 'https://picsum.photos/200/200' }], + }, + blockSettings: { figmaPreviewId: BlockPreview.Live, allowFullScreen: true }, + editorState: true, + }); + + render(); + + expect(screen.getByTestId(LIVE_PREVIEW_SELECTOR)).toBeTruthy(); + }); +}); From 1ddc70c2a90d48a996011f4357d6666212118742 Mon Sep 17 00:00:00 2001 From: benfrontify Date: Wed, 20 May 2026 11:29:32 +0200 Subject: [PATCH 02/15] add: tests --- packages/figma-block/src/FigmaBlock.spec.tsx | 49 ++++++++++++++++---- 1 file changed, 41 insertions(+), 8 deletions(-) diff --git a/packages/figma-block/src/FigmaBlock.spec.tsx b/packages/figma-block/src/FigmaBlock.spec.tsx index 6bad89393..2fdf0f9f9 100644 --- a/packages/figma-block/src/FigmaBlock.spec.tsx +++ b/packages/figma-block/src/FigmaBlock.spec.tsx @@ -1,8 +1,10 @@ /* (c) Copyright Frontify Ltd., all rights reserved. */ import { AssetDummy, withAppBridgeBlockStubs } from '@frontify/app-bridge'; -import { render, screen } from '@testing-library/react'; -import { describe, expect, it } from 'vitest'; +import '@testing-library/jest-dom/vitest'; +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'; @@ -12,6 +14,7 @@ const MAIN_BLOCK_SELECTOR = 'figma-block'; const EMPTY_BLOCK_SELECTOR = 'figma-empty-block'; const IMAGE_PREVIEW_SELECTOR = 'figma-image-preview'; const LIVE_PREVIEW_SELECTOR = 'figma-live-preview'; +const FULL_SCREEN_SELECTOR = 'figma-full-screen'; describe('Figma Block', () => { it('renders a Figma block', () => { @@ -19,7 +22,7 @@ describe('Figma Block', () => { render(); - expect(screen.getByTestId(MAIN_BLOCK_SELECTOR)).toBeTruthy(); + expect(screen.getByTestId(MAIN_BLOCK_SELECTOR)).toBeInTheDocument(); }); it('renders a Figma empty block on edit', () => { @@ -27,7 +30,27 @@ describe('Figma Block', () => { render(); - expect(screen.getByTestId(EMPTY_BLOCK_SELECTOR)).toBeTruthy(); + expect(screen.getByTestId(EMPTY_BLOCK_SELECTOR)).toBeInTheDocument(); + }); + + it('triggers openAssetChooser mock', async () => { + const [FigmaBlockWithStubs, appBridge] = withAppBridgeBlockStubs(FigmaBlock, { editorState: true }); + const dispatchSpy = vi.spyOn(appBridge, 'dispatch'); + const user = userEvent.setup(); + + render(); + + await user.click(screen.getByTestId(EMPTY_BLOCK_SELECTOR)); + + expect(dispatchSpy).toHaveBeenCalledWith({ + name: 'openAssetChooser', + payload: { + selectedValueId: undefined, + projectTypes: ['Workspace'], + objectTypes: ['URL'], + urlContains: 'https://www.figma', + }, + }); }); it('renders a Figma image preview', () => { @@ -40,7 +63,7 @@ describe('Figma Block', () => { render(); - expect(screen.getByTestId(IMAGE_PREVIEW_SELECTOR)).toBeTruthy(); + expect(screen.getByTestId(IMAGE_PREVIEW_SELECTOR)).toBeInTheDocument(); }); it('renders a Figma Live iframe preview', () => { @@ -54,10 +77,10 @@ describe('Figma Block', () => { render(); - expect(screen.getByTestId(LIVE_PREVIEW_SELECTOR)).toBeTruthy(); + expect(screen.getByTestId(LIVE_PREVIEW_SELECTOR)).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' }], @@ -65,9 +88,19 @@ describe('Figma Block', () => { blockSettings: { figmaPreviewId: BlockPreview.Live, allowFullScreen: true }, editorState: true, }); + const user = userEvent.setup(); render(); - expect(screen.getByTestId(LIVE_PREVIEW_SELECTOR)).toBeTruthy(); + expect(screen.getByTestId(LIVE_PREVIEW_SELECTOR)).toBeInTheDocument(); + + await user.click(within(screen.getByTestId(LIVE_PREVIEW_SELECTOR)).getByRole('button')); + + expect(screen.getByTestId(FULL_SCREEN_SELECTOR)).toBeInTheDocument(); + + await user.click(within(screen.getByTestId(FULL_SCREEN_SELECTOR)).getByRole('button')); + + expect(screen.queryByTestId(FULL_SCREEN_SELECTOR)).not.toBeInTheDocument(); + expect(screen.getByTestId(LIVE_PREVIEW_SELECTOR)).toBeInTheDocument(); }); }); From db3ea4ef282edaaed7fe73919bbd0ab2eb2ca4b6 Mon Sep 17 00:00:00 2001 From: benfrontify Date: Wed, 20 May 2026 16:09:05 +0200 Subject: [PATCH 03/15] Update packages/figma-block/src/FigmaBlock.spec.tsx Co-authored-by: Rafael Giezendanner --- packages/figma-block/src/FigmaBlock.spec.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/figma-block/src/FigmaBlock.spec.tsx b/packages/figma-block/src/FigmaBlock.spec.tsx index 2fdf0f9f9..087235a8d 100644 --- a/packages/figma-block/src/FigmaBlock.spec.tsx +++ b/packages/figma-block/src/FigmaBlock.spec.tsx @@ -1,7 +1,6 @@ /* (c) Copyright Frontify Ltd., all rights reserved. */ import { AssetDummy, withAppBridgeBlockStubs } from '@frontify/app-bridge'; -import '@testing-library/jest-dom/vitest'; import { render, screen, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { describe, expect, it, vi } from 'vitest'; From 90ea07517d31dda152ebd914b79f8e029855ae55 Mon Sep 17 00:00:00 2001 From: benfrontify Date: Wed, 20 May 2026 16:09:18 +0200 Subject: [PATCH 04/15] Update packages/figma-block/src/FigmaBlock.spec.tsx Co-authored-by: Rafael Giezendanner --- packages/figma-block/src/FigmaBlock.spec.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/figma-block/src/FigmaBlock.spec.tsx b/packages/figma-block/src/FigmaBlock.spec.tsx index 087235a8d..55ffee199 100644 --- a/packages/figma-block/src/FigmaBlock.spec.tsx +++ b/packages/figma-block/src/FigmaBlock.spec.tsx @@ -9,11 +9,11 @@ import { FigmaBlock } from './FigmaBlock'; import { ASSET_ID } from './settings'; import { BlockPreview } from './types'; -const MAIN_BLOCK_SELECTOR = 'figma-block'; -const EMPTY_BLOCK_SELECTOR = 'figma-empty-block'; -const IMAGE_PREVIEW_SELECTOR = 'figma-image-preview'; -const LIVE_PREVIEW_SELECTOR = 'figma-live-preview'; -const FULL_SCREEN_SELECTOR = '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', () => { From 485bf0aaa7b5c58791047d120de2854e4d19f160 Mon Sep 17 00:00:00 2001 From: benfrontify Date: Wed, 20 May 2026 16:32:01 +0200 Subject: [PATCH 05/15] refactor: moved import to tsconfig and changed var namings --- packages/figma-block/src/FigmaBlock.spec.tsx | 22 ++++++++++---------- packages/figma-block/tsconfig.json | 2 +- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/figma-block/src/FigmaBlock.spec.tsx b/packages/figma-block/src/FigmaBlock.spec.tsx index 55ffee199..37b7cce8b 100644 --- a/packages/figma-block/src/FigmaBlock.spec.tsx +++ b/packages/figma-block/src/FigmaBlock.spec.tsx @@ -21,7 +21,7 @@ describe('Figma Block', () => { render(); - expect(screen.getByTestId(MAIN_BLOCK_SELECTOR)).toBeInTheDocument(); + expect(screen.getByTestId(MAIN_BLOCK_TEST_ID)).toBeInTheDocument(); }); it('renders a Figma empty block on edit', () => { @@ -29,7 +29,7 @@ describe('Figma Block', () => { render(); - expect(screen.getByTestId(EMPTY_BLOCK_SELECTOR)).toBeInTheDocument(); + expect(screen.getByTestId(EMPTY_BLOCK_TEST_ID)).toBeInTheDocument(); }); it('triggers openAssetChooser mock', async () => { @@ -39,7 +39,7 @@ describe('Figma Block', () => { render(); - await user.click(screen.getByTestId(EMPTY_BLOCK_SELECTOR)); + await user.click(screen.getByTestId(EMPTY_BLOCK_TEST_ID)); expect(dispatchSpy).toHaveBeenCalledWith({ name: 'openAssetChooser', @@ -62,7 +62,7 @@ describe('Figma Block', () => { render(); - expect(screen.getByTestId(IMAGE_PREVIEW_SELECTOR)).toBeInTheDocument(); + expect(screen.getByTestId(IMAGE_PREVIEW_TEST_ID)).toBeInTheDocument(); }); it('renders a Figma Live iframe preview', () => { @@ -76,7 +76,7 @@ describe('Figma Block', () => { render(); - expect(screen.getByTestId(LIVE_PREVIEW_SELECTOR)).toBeInTheDocument(); + expect(screen.getByTestId(LIVE_PREVIEW_TEST_ID)).toBeInTheDocument(); }); it('toggles Figma Live preview Full screen', async () => { @@ -91,15 +91,15 @@ describe('Figma Block', () => { render(); - expect(screen.getByTestId(LIVE_PREVIEW_SELECTOR)).toBeInTheDocument(); + expect(screen.getByTestId(LIVE_PREVIEW_TEST_ID)).toBeInTheDocument(); - await user.click(within(screen.getByTestId(LIVE_PREVIEW_SELECTOR)).getByRole('button')); + await user.click(within(screen.getByTestId(LIVE_PREVIEW_TEST_ID)).getByRole('button')); - expect(screen.getByTestId(FULL_SCREEN_SELECTOR)).toBeInTheDocument(); + expect(screen.getByTestId(FULL_SCREEN_TEST_ID)).toBeInTheDocument(); - await user.click(within(screen.getByTestId(FULL_SCREEN_SELECTOR)).getByRole('button')); + await user.click(within(screen.getByTestId(FULL_SCREEN_TEST_ID)).getByRole('button')); - expect(screen.queryByTestId(FULL_SCREEN_SELECTOR)).not.toBeInTheDocument(); - expect(screen.getByTestId(LIVE_PREVIEW_SELECTOR)).toBeInTheDocument(); + expect(screen.queryByTestId(FULL_SCREEN_TEST_ID)).not.toBeInTheDocument(); + expect(screen.getByTestId(LIVE_PREVIEW_TEST_ID)).toBeInTheDocument(); }); }); diff --git a/packages/figma-block/tsconfig.json b/packages/figma-block/tsconfig.json index 52dd12d57..9a1eb2554 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": ["cypress", "cypress-real-events", "@testing-library/jest-dom"] }, "exclude": ["node_modules", "dist", "../shared/src/**/*.spec.ts", "../shared/src/**/*.spec.tsx"], "include": ["src/**/*", "../shared/src/**/*"] From f77337cd887e73586e06f9d5078d77a240f05fff Mon Sep 17 00:00:00 2001 From: benfrontify Date: Thu, 21 May 2026 09:03:02 +0200 Subject: [PATCH 06/15] refactor: ImageStageControls tests --- .../components/ImageStageControls.spec.ct.tsx | 49 ---------------- .../components/ImageStageControls.spec.tsx | 57 +++++++++++++++++++ 2 files changed, 57 insertions(+), 49 deletions(-) delete mode 100644 packages/figma-block/src/components/ImageStageControls.spec.ct.tsx create mode 100644 packages/figma-block/src/components/ImageStageControls.spec.tsx 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..511c83865 --- /dev/null +++ b/packages/figma-block/src/components/ImageStageControls.spec.tsx @@ -0,0 +1,57 @@ +/* (c) Copyright Frontify Ltd., all rights reserved. */ + +import '@testing-library/jest-dom/vitest'; +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_SELECTOR = 'fondue-icons-plus'; +const ICON_ZOOM_OUT_SELECTOR = 'fondue-icons-minus'; +const ICON_REJECT_SELECTOR = 'fondue-icons-cross'; +const ICON_EXPAND_SELECTOR = '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_SELECTOR)).toBeInTheDocument(); + }); + + it('renders button with icon reject', () => { + render(); + + expect(screen.getByTestId(ICON_REJECT_SELECTOR)).toBeInTheDocument(); + }); + }); + + describe('DrawZoomInOutButtons', () => { + it('renders Zoom In and Out buttons', () => { + render(); + + expect(screen.getByTestId(ICON_ZOOM_IN_SELECTOR)).toBeInTheDocument(); + expect(screen.getByTestId(ICON_ZOOM_OUT_SELECTOR)).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); + }); + }); +}); From ac6f599dbad0de7cc65b2101602e5082f59b201d Mon Sep 17 00:00:00 2001 From: benfrontify Date: Thu, 21 May 2026 10:43:45 +0200 Subject: [PATCH 07/15] fix:migrate Cypress tests to Vitest --- .../src/components/ImageStage.spec.ct.tsx | 44 ------------- .../src/components/ImageStage.spec.tsx | 61 +++++++++++++++++++ 2 files changed, 61 insertions(+), 44 deletions(-) delete mode 100644 packages/figma-block/src/components/ImageStage.spec.ct.tsx create mode 100644 packages/figma-block/src/components/ImageStage.spec.tsx 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'); + }); +}); From 14858449687ca8b129a27bd0a0df01e076157093 Mon Sep 17 00:00:00 2001 From: benfrontify Date: Thu, 21 May 2026 11:00:26 +0200 Subject: [PATCH 08/15] fix:migrate Cypress tests to Vitest --- .../VectorContainerOperator.spec.ct.tsx | 51 ------------------- .../VectorContainerOperator.spec.tsx | 31 +++++++++++ 2 files changed, 31 insertions(+), 51 deletions(-) delete mode 100644 packages/figma-block/src/components/ContainerOperator/VectorContainerOperator.spec.ct.tsx create mode 100644 packages/figma-block/src/components/ContainerOperator/VectorContainerOperator.spec.tsx 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..557f58393 --- /dev/null +++ b/packages/figma-block/src/components/ContainerOperator/VectorContainerOperator.spec.tsx @@ -0,0 +1,31 @@ +/* (c) Copyright Frontify Ltd., all rights reserved. */ + +import '@testing-library/jest-dom/vitest'; +import { fireEvent, render } from '@testing-library/react'; +import { describe, expect, it } from 'vitest'; + +import { BlockContainerStub } from '../../tests/BlockContainerStub'; + +const IMAGE_CONTAINER_ID = 'image-container'; + +describe('VectorContainerOperator', () => { + it('renders the image container', () => { + render(); + + const containerElement = document.getElementById(IMAGE_CONTAINER_ID) as HTMLDivElement; + + expect(containerElement).toBeInTheDocument(); + }); + + it('moves image on mouse move', () => { + render(); + + const containerElement = document.getElementById(IMAGE_CONTAINER_ID) as HTMLDivElement; + + fireEvent.mouseDown(containerElement); + fireEvent.mouseMove(containerElement, { buttons: 1, pageX: 300, pageY: 100 }); + fireEvent.mouseUp(containerElement); + + expect(containerElement).toBeInTheDocument(); + }); +}); From 92e9590843ae340b62167e4c0795b2ef33dec63f Mon Sep 17 00:00:00 2001 From: benfrontify Date: Thu, 21 May 2026 11:25:41 +0200 Subject: [PATCH 09/15] fix: migrate Cypress tests to Vitest --- .../BitmapContainerOperator.spec.ct.tsx | 74 ------------------- .../BitmapContainerOperator.spec.tsx | 43 +++++++++++ 2 files changed, 43 insertions(+), 74 deletions(-) delete mode 100644 packages/figma-block/src/components/ContainerOperator/BitmapContainerOperator.spec.ct.tsx create mode 100644 packages/figma-block/src/components/ContainerOperator/BitmapContainerOperator.spec.tsx 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..735621785 --- /dev/null +++ b/packages/figma-block/src/components/ContainerOperator/BitmapContainerOperator.spec.tsx @@ -0,0 +1,43 @@ +/* (c) Copyright Frontify Ltd., all rights reserved. */ + +import '@testing-library/jest-dom/vitest'; +import { render } from '@testing-library/react'; +import { describe, expect, it } from 'vitest'; + +import { BlockContainerStub } from '../../tests/BlockContainerStub'; + +const IMAGE_CONTAINER_ID = 'image-container'; +const IMAGE_STAGE_ID = 'image-stage'; +const IMAGE_ELEMENT_ID = 'image-element'; + +describe('BitmapContainerOperator', () => { + it('renders image element with 400px height', () => { + render(); + + const stageElement = document.getElementById(IMAGE_STAGE_ID) as HTMLDivElement; + const imageElement = document.getElementById(IMAGE_ELEMENT_ID) as HTMLImageElement; + + expect(stageElement).toBeInTheDocument(); + expect(imageElement).toBeInTheDocument(); + }); + + it('renders image container with 700px height', () => { + render(); + + const stageElement = document.getElementById(IMAGE_STAGE_ID) as HTMLDivElement; + const containerElement = document.getElementById(IMAGE_CONTAINER_ID) as HTMLDivElement; + + expect(stageElement).toBeInTheDocument(); + expect(containerElement).toBeInTheDocument(); + }); + + it('renders element with padding 0.2 (in percentages)', () => { + render(); + + const stageElement = document.getElementById(IMAGE_STAGE_ID) as HTMLDivElement; + const containerElement = document.getElementById(IMAGE_CONTAINER_ID) as HTMLDivElement; + + expect(stageElement).toBeInTheDocument(); + expect(containerElement).toBeInTheDocument(); + }); +}); From 633421cb5761e94ab72ec039b727877f9d4219c5 Mon Sep 17 00:00:00 2001 From: benfrontify Date: Thu, 21 May 2026 14:32:58 +0200 Subject: [PATCH 10/15] refactor: 1 part --- .../BitmapContainerOperator.spec.tsx | 82 ++++++++++++++----- .../VectorContainerOperator.spec.tsx | 1 - .../components/ImageStageControls.spec.tsx | 17 ++-- 3 files changed, 69 insertions(+), 31 deletions(-) diff --git a/packages/figma-block/src/components/ContainerOperator/BitmapContainerOperator.spec.tsx b/packages/figma-block/src/components/ContainerOperator/BitmapContainerOperator.spec.tsx index 735621785..1b3a8c3f4 100644 --- a/packages/figma-block/src/components/ContainerOperator/BitmapContainerOperator.spec.tsx +++ b/packages/figma-block/src/components/ContainerOperator/BitmapContainerOperator.spec.tsx @@ -1,43 +1,83 @@ /* (c) Copyright Frontify Ltd., all rights reserved. */ -import '@testing-library/jest-dom/vitest'; -import { render } from '@testing-library/react'; -import { describe, expect, it } from 'vitest'; +import { fireEvent, render, waitFor } from '@testing-library/react'; +import { describe, expect, it, vi } from 'vitest'; import { BlockContainerStub } from '../../tests/BlockContainerStub'; -const IMAGE_CONTAINER_ID = 'image-container'; -const IMAGE_STAGE_ID = 'image-stage'; -const IMAGE_ELEMENT_ID = 'image-element'; +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('renders image element with 400px height', () => { + it('centers the image element within a 400px stage', async () => { render(); - const stageElement = document.getElementById(IMAGE_STAGE_ID) as HTMLDivElement; - const imageElement = document.getElementById(IMAGE_ELEMENT_ID) as HTMLImageElement; + 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); - expect(stageElement).toBeInTheDocument(); - expect(imageElement).toBeInTheDocument(); + await waitFor(() => { + expect(containerElement.style.left).toBe('200px'); + expect(containerElement.style.top).toBe('200px'); + }); }); - it('renders image container with 700px height', () => { + it('centers the image element within a 700px stage', async () => { render(); - const stageElement = document.getElementById(IMAGE_STAGE_ID) as HTMLDivElement; - const containerElement = document.getElementById(IMAGE_CONTAINER_ID) as HTMLDivElement; + 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; - expect(stageElement).toBeInTheDocument(); - expect(containerElement).toBeInTheDocument(); + 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('renders element with padding 0.2 (in percentages)', () => { + it('centers the image element within a padded stage (padding=0.2)', async () => { render(); - const stageElement = document.getElementById(IMAGE_STAGE_ID) as HTMLDivElement; - const containerElement = document.getElementById(IMAGE_CONTAINER_ID) as HTMLDivElement; + 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); - expect(stageElement).toBeInTheDocument(); - expect(containerElement).toBeInTheDocument(); + 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.tsx b/packages/figma-block/src/components/ContainerOperator/VectorContainerOperator.spec.tsx index 557f58393..1ebccc38f 100644 --- a/packages/figma-block/src/components/ContainerOperator/VectorContainerOperator.spec.tsx +++ b/packages/figma-block/src/components/ContainerOperator/VectorContainerOperator.spec.tsx @@ -1,6 +1,5 @@ /* (c) Copyright Frontify Ltd., all rights reserved. */ -import '@testing-library/jest-dom/vitest'; import { fireEvent, render } from '@testing-library/react'; import { describe, expect, it } from 'vitest'; diff --git a/packages/figma-block/src/components/ImageStageControls.spec.tsx b/packages/figma-block/src/components/ImageStageControls.spec.tsx index 511c83865..b4e3dc4d9 100644 --- a/packages/figma-block/src/components/ImageStageControls.spec.tsx +++ b/packages/figma-block/src/components/ImageStageControls.spec.tsx @@ -1,16 +1,15 @@ /* (c) Copyright Frontify Ltd., all rights reserved. */ -import '@testing-library/jest-dom/vitest'; 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_SELECTOR = 'fondue-icons-plus'; -const ICON_ZOOM_OUT_SELECTOR = 'fondue-icons-minus'; -const ICON_REJECT_SELECTOR = 'fondue-icons-cross'; -const ICON_EXPAND_SELECTOR = 'fondue-icons-arrow-expand'; +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', () => { @@ -19,13 +18,13 @@ describe('Image Control Buttons', () => { it('renders button with icon expand', () => { render(); - expect(screen.getByTestId(ICON_EXPAND_SELECTOR)).toBeInTheDocument(); + expect(screen.getByTestId(ICON_EXPAND_TEST_ID)).toBeInTheDocument(); }); it('renders button with icon reject', () => { render(); - expect(screen.getByTestId(ICON_REJECT_SELECTOR)).toBeInTheDocument(); + expect(screen.getByTestId(ICON_REJECT_TEST_ID)).toBeInTheDocument(); }); }); @@ -33,8 +32,8 @@ describe('Image Control Buttons', () => { it('renders Zoom In and Out buttons', () => { render(); - expect(screen.getByTestId(ICON_ZOOM_IN_SELECTOR)).toBeInTheDocument(); - expect(screen.getByTestId(ICON_ZOOM_OUT_SELECTOR)).toBeInTheDocument(); + expect(screen.getByTestId(ICON_ZOOM_IN_TEST_ID)).toBeInTheDocument(); + expect(screen.getByTestId(ICON_ZOOM_OUT_TEST_ID)).toBeInTheDocument(); }); it('tests the onClick action', async () => { From 50efc449fdefb9773e0bb3f25d343fc2b3606562 Mon Sep 17 00:00:00 2001 From: benfrontify Date: Thu, 21 May 2026 14:45:54 +0200 Subject: [PATCH 11/15] refactor: tsconfig --- packages/figma-block/tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/figma-block/tsconfig.json b/packages/figma-block/tsconfig.json index 9a1eb2554..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", "@testing-library/jest-dom"] + "types": ["@testing-library/jest-dom"] }, "exclude": ["node_modules", "dist", "../shared/src/**/*.spec.ts", "../shared/src/**/*.spec.tsx"], "include": ["src/**/*", "../shared/src/**/*"] From 4757cbb9d23b0d5b791814312d10de4cba0784bd Mon Sep 17 00:00:00 2001 From: benfrontify Date: Thu, 21 May 2026 14:59:01 +0200 Subject: [PATCH 12/15] refactor: p2 --- .../VectorContainerOperator.spec.tsx | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/packages/figma-block/src/components/ContainerOperator/VectorContainerOperator.spec.tsx b/packages/figma-block/src/components/ContainerOperator/VectorContainerOperator.spec.tsx index 1ebccc38f..9d76ed05d 100644 --- a/packages/figma-block/src/components/ContainerOperator/VectorContainerOperator.spec.tsx +++ b/packages/figma-block/src/components/ContainerOperator/VectorContainerOperator.spec.tsx @@ -5,13 +5,13 @@ import { describe, expect, it } from 'vitest'; import { BlockContainerStub } from '../../tests/BlockContainerStub'; -const IMAGE_CONTAINER_ID = 'image-container'; +const IMAGE_CONTAINER_TEST_ID = 'image-container'; describe('VectorContainerOperator', () => { it('renders the image container', () => { render(); - const containerElement = document.getElementById(IMAGE_CONTAINER_ID) as HTMLDivElement; + const containerElement = document.getElementById(IMAGE_CONTAINER_TEST_ID) as HTMLDivElement; expect(containerElement).toBeInTheDocument(); }); @@ -19,12 +19,24 @@ describe('VectorContainerOperator', () => { it('moves image on mouse move', () => { render(); - const containerElement = document.getElementById(IMAGE_CONTAINER_ID) as HTMLDivElement; + 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.mouseDown(containerElement); - fireEvent.mouseMove(containerElement, { buttons: 1, pageX: 300, pageY: 100 }); fireEvent.mouseUp(containerElement); - expect(containerElement).toBeInTheDocument(); + expect(containerElement.style.left).toBe(`${initialLeft + 300}px`); + expect(containerElement.style.top).toBe(`${initialTop + 100}px`); }); }); From 17e01cd75e88d8bafbbd38300f39bf04ebe0873b Mon Sep 17 00:00:00 2001 From: benfrontify Date: Thu, 21 May 2026 15:07:03 +0200 Subject: [PATCH 13/15] refactor: package. json --- packages/figma-block/package.json | 4 +--- pnpm-lock.yaml | 28 ++++++---------------------- 2 files changed, 7 insertions(+), 25 deletions(-) diff --git a/packages/figma-block/package.json b/packages/figma-block/package.json index 50cb3cbab..d85a513be 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", @@ -40,4 +38,4 @@ "tailwindcss": "^3.4.17", "typescript": "^6.0.2" } -} +} \ No newline at end of file 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) From 0cf84b6c5ed27a0bf242d2e886914322ff0e543c Mon Sep 17 00:00:00 2001 From: benfrontify Date: Thu, 21 May 2026 15:12:51 +0200 Subject: [PATCH 14/15] fix: eslint --- packages/figma-block/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/figma-block/package.json b/packages/figma-block/package.json index d85a513be..fe2f2c815 100644 --- a/packages/figma-block/package.json +++ b/packages/figma-block/package.json @@ -38,4 +38,4 @@ "tailwindcss": "^3.4.17", "typescript": "^6.0.2" } -} \ No newline at end of file +} From e3b56ca50faa712543584a46c07b02333151180e Mon Sep 17 00:00:00 2001 From: benfrontify Date: Thu, 21 May 2026 16:16:20 +0200 Subject: [PATCH 15/15] refactor: review --- packages/figma-block/src/FigmaBlock.spec.tsx | 2 +- .../ContainerOperator/VectorContainerOperator.spec.tsx | 8 -------- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/figma-block/src/FigmaBlock.spec.tsx b/packages/figma-block/src/FigmaBlock.spec.tsx index 37b7cce8b..5baccee22 100644 --- a/packages/figma-block/src/FigmaBlock.spec.tsx +++ b/packages/figma-block/src/FigmaBlock.spec.tsx @@ -82,7 +82,7 @@ describe('Figma Block', () => { 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, diff --git a/packages/figma-block/src/components/ContainerOperator/VectorContainerOperator.spec.tsx b/packages/figma-block/src/components/ContainerOperator/VectorContainerOperator.spec.tsx index 9d76ed05d..d386ef701 100644 --- a/packages/figma-block/src/components/ContainerOperator/VectorContainerOperator.spec.tsx +++ b/packages/figma-block/src/components/ContainerOperator/VectorContainerOperator.spec.tsx @@ -8,14 +8,6 @@ import { BlockContainerStub } from '../../tests/BlockContainerStub'; const IMAGE_CONTAINER_TEST_ID = 'image-container'; describe('VectorContainerOperator', () => { - it('renders the image container', () => { - render(); - - const containerElement = document.getElementById(IMAGE_CONTAINER_TEST_ID) as HTMLDivElement; - - expect(containerElement).toBeInTheDocument(); - }); - it('moves image on mouse move', () => { render();