-
Notifications
You must be signed in to change notification settings - Fork 84
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(designer): Render copied tooltip properly (#6463)
* Update component to render properly * Add unit tests * Update unit tests * Update e2e tests * update unit tests
- Loading branch information
1 parent
b304e4f
commit d32e904
Showing
7 changed files
with
176 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
86 changes: 86 additions & 0 deletions
86
libs/designer/src/lib/ui/common/DesignerContextualMenu/__test__/CopyTooltip.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import { render, screen } from '@testing-library/react'; | ||
| import { CopyTooltip, CopyTooltipProps } from '../CopyTooltip'; | ||
| import { describe, it, expect, vi, afterEach, beforeAll } from 'vitest'; | ||
| import React from 'react'; | ||
|
|
||
| const hideTooltipMock = vi.fn(); | ||
|
|
||
| vi.mock('@xyflow/react', async () => { | ||
| const actualIntl = await vi.importActual('@xyflow/react'); | ||
| return { | ||
| ...actualIntl, | ||
| useOnViewportChange: vi.fn(() => ({ onStart: hideTooltipMock })), | ||
| }; | ||
| }); | ||
|
|
||
| vi.mock('react-intl', async () => { | ||
| const actualIntl = await vi.importActual('react-intl'); | ||
| return { | ||
| ...actualIntl, | ||
| useIntl: () => ({ | ||
| formatMessage: vi.fn(() => 'Copied!'), | ||
| }), | ||
| }; | ||
| }); | ||
|
|
||
| describe('CopyTooltip', () => { | ||
| beforeAll(() => { | ||
| const portalRoot = document.createElement('div'); | ||
| portalRoot.setAttribute('id', 'root'); | ||
| document.body.appendChild(portalRoot); | ||
| }); | ||
|
|
||
| afterEach(() => { | ||
| vi.clearAllMocks(); | ||
| }); | ||
|
|
||
| const renderComponent = (props: Partial<CopyTooltipProps> = {}) => { | ||
| const defaultProps: CopyTooltipProps = { | ||
| hideTooltip: hideTooltipMock, | ||
| id: 'test-id', | ||
| ...props, | ||
| }; | ||
|
|
||
| return render(<CopyTooltip {...defaultProps} />); | ||
| }; | ||
|
|
||
| it('should render the tooltip with the correct content', () => { | ||
| const copiedText = 'Copied!'; | ||
| const location = { x: 100, y: 100 }; | ||
|
|
||
| // Render the Tooltip component | ||
| const { baseElement } = renderComponent({ location }); | ||
|
|
||
| // Get the tooltip div and the location div | ||
| const tooltipDiv = screen.getByRole('tooltip'); | ||
| const tooltipLocationDiv = screen.getByTestId('msla-tooltip-location-test_id'); | ||
|
|
||
| // Assert that the tooltip and location div are rendered correctly | ||
| expect(tooltipDiv).toBeInTheDocument(); | ||
| expect(screen.getByText(copiedText)).toBeVisible(); | ||
| expect(tooltipLocationDiv).toBeInTheDocument(); | ||
| expect(baseElement).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('should position the tooltip based on the provided location', () => { | ||
| const location = { x: 100, y: 100 }; | ||
|
|
||
| // Render the Tooltip component | ||
| const { baseElement } = renderComponent({ location }); | ||
|
|
||
| // Get the tooltip location div | ||
| const tooltipLocationDiv = screen.getByTestId('msla-tooltip-location-test_id'); | ||
|
|
||
| // Assert that the location div are rendered correctly | ||
| expect(tooltipLocationDiv).toBeInTheDocument(); | ||
| expect(tooltipLocationDiv).toHaveStyle({ position: 'absolute', top: '100px', left: '100px' }); | ||
| expect(baseElement).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('should default to locationRef if targetRef is not provided', () => { | ||
| renderComponent(); | ||
|
|
||
| const tooltipDiv = screen.getByRole('tooltip').parentElement; | ||
| expect(tooltipDiv).toHaveStyle({ position: 'absolute', top: '0px', left: '0px' }); | ||
| }); | ||
| }); |
67 changes: 67 additions & 0 deletions
67
...src/lib/ui/common/DesignerContextualMenu/__test__/__snapshots__/CopyTooltip.spec.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html | ||
|
|
||
| exports[`CopyTooltip > should position the tooltip based on the provided location 1`] = ` | ||
| <body> | ||
| <div | ||
| id="root" | ||
| /> | ||
| <div> | ||
| <div | ||
| aria-describedby="tooltip-r1" | ||
| data-automation-id="msla-tooltip-location-test_id" | ||
| data-testid="msla-tooltip-location-test_id" | ||
| style="width: 1px; height: 1px; position: absolute; top: 100px; left: 100px;" | ||
| /> | ||
| <span | ||
| hidden="" | ||
| /> | ||
| </div> | ||
| <div | ||
| class="___1uxlrft_djprso0 f1euv43f f15twtuk f1vgc2s3 f1e31b4d f494woh" | ||
| data-portal-node="true" | ||
| dir="ltr" | ||
| > | ||
| <div | ||
| class="fui-Tooltip__content ___1iilip3_omhya70 ftgm304 f1ewtqcl f132xexn f158kwzp fk6fouc fy9rknc fwrc4pm fokg9q4 ft85np5 f9ggezi f1bzqsji fxugw4r f19n0e5 fxeb0a7" | ||
| id="tooltip-r1" | ||
| role="tooltip" | ||
| style="position: fixed; left: 0px; top: 0px; margin: 0px;" | ||
| > | ||
| Copied! | ||
| </div> | ||
| </div> | ||
| </body> | ||
| `; | ||
|
|
||
| exports[`CopyTooltip > should render the tooltip with the correct content 1`] = ` | ||
| <body> | ||
| <div | ||
| id="root" | ||
| /> | ||
| <div> | ||
| <div | ||
| aria-describedby="tooltip-r0" | ||
| data-automation-id="msla-tooltip-location-test_id" | ||
| data-testid="msla-tooltip-location-test_id" | ||
| style="width: 1px; height: 1px; position: absolute; top: 100px; left: 100px;" | ||
| /> | ||
| <span | ||
| hidden="" | ||
| /> | ||
| </div> | ||
| <div | ||
| class="___1uxlrft_djprso0 f1euv43f f15twtuk f1vgc2s3 f1e31b4d f494woh" | ||
| data-portal-node="true" | ||
| dir="ltr" | ||
| > | ||
| <div | ||
| class="fui-Tooltip__content ___1iilip3_omhya70 ftgm304 f1ewtqcl f132xexn f158kwzp fk6fouc fy9rknc fwrc4pm fokg9q4 ft85np5 f9ggezi f1bzqsji fxugw4r f19n0e5 fxeb0a7" | ||
| id="tooltip-r0" | ||
| role="tooltip" | ||
| style="position: fixed; left: 0px; top: 0px; margin: 0px;" | ||
| > | ||
| Copied! | ||
| </div> | ||
| </div> | ||
| </body> | ||
| `; |