diff --git a/packages/frontend/editor-ui/src/components/AssignmentCollection/Assignment.test.ts b/packages/frontend/editor-ui/src/components/AssignmentCollection/Assignment.test.ts index 6290aaad37..31cd888ff2 100644 --- a/packages/frontend/editor-ui/src/components/AssignmentCollection/Assignment.test.ts +++ b/packages/frontend/editor-ui/src/components/AssignmentCollection/Assignment.test.ts @@ -1,11 +1,14 @@ +import { computed, nextTick, ref } from 'vue'; import { createComponentRenderer } from '@/__tests__/render'; import { createTestingPinia } from '@pinia/testing'; import userEvent from '@testing-library/user-event'; +import { fireEvent } from '@testing-library/vue'; import Assignment from './Assignment.vue'; import { defaultSettings } from '@/__tests__/defaults'; import { STORES } from '@n8n/stores'; import merge from 'lodash/merge'; import { cleanupAppModals, createAppModals } from '@/__tests__/utils'; +import * as useResolvedExpression from '@/composables/useResolvedExpression'; const DEFAULT_SETUP = { pinia: createTestingPinia({ @@ -69,4 +72,22 @@ describe('Assignment.vue', () => { // Check if the parameter input hint is not displayed expect(() => getByTestId('parameter-input-hint')).toThrow(); }); + + it('should shorten the expression preview hint if options are on the bottom', async () => { + vi.spyOn(useResolvedExpression, 'useResolvedExpression').mockReturnValueOnce({ + resolvedExpressionString: ref('foo'), + resolvedExpression: ref(null), + isExpression: computed(() => true), + }); + const { getByTestId } = renderComponent(); + + const previewValue = getByTestId('parameter-expression-preview-value'); + + expect(previewValue).not.toHaveClass('optionsPadding'); + + await fireEvent.mouseEnter(getByTestId('assignment-value')); + await nextTick(); + + expect(previewValue).toHaveClass('optionsPadding'); + }); }); diff --git a/packages/frontend/editor-ui/src/components/AssignmentCollection/Assignment.vue b/packages/frontend/editor-ui/src/components/AssignmentCollection/Assignment.vue index 0ebb2275ed..bfe89c1d1a 100644 --- a/packages/frontend/editor-ui/src/components/AssignmentCollection/Assignment.vue +++ b/packages/frontend/editor-ui/src/components/AssignmentCollection/Assignment.vue @@ -25,6 +25,7 @@ interface Props { const props = defineProps(); const assignment = ref(props.modelValue); +const valueInputHovered = ref(false); const emit = defineEmits<{ 'update:model-value': [value: AssignmentValue]; @@ -113,6 +114,10 @@ const onRemove = (): void => { const onBlur = (): void => { emit('update:model-value', assignment.value); }; + +const onValueInputHoverChange = (hovered: boolean): void => { + valueInputHovered.value = hovered; +};