chore: Fix NodeTitle.test.ts for Node 22 (no-changelog) (#16763)

This commit is contained in:
Charlie Kolb
2025-06-27 11:57:07 +02:00
committed by GitHub
parent 3ba8a84d2b
commit 3fb8bbb59f
3 changed files with 9 additions and 4 deletions

View File

@@ -104,7 +104,11 @@ const computedInlineStyles = computed(() => {
@update:model-value="onInput" @update:model-value="onInput"
@update:state="onStateChange" @update:state="onStateChange"
> >
<EditableArea :style="computedInlineStyles" :class="$style.inlineRenameArea"> <EditableArea
:style="computedInlineStyles"
:class="$style.inlineRenameArea"
data-test-id="inline-editable-area"
>
<span ref="measureSpan" :class="$style.measureSpan"> <span ref="measureSpan" :class="$style.measureSpan">
{{ temp }} {{ temp }}
</span> </span>

View File

@@ -2,7 +2,7 @@
exports[`N8nInlineTextEdit > should render correctly 1`] = ` exports[`N8nInlineTextEdit > should render correctly 1`] = `
"<div class="inlineRenameRoot" title="Test Value" dir="ltr" data-dismissable-layer=""> "<div class="inlineRenameRoot" title="Test Value" dir="ltr" data-dismissable-layer="">
<div data-placeholder-shown="" style="display: inline-grid; width: 64px; max-width: 200px; z-index: 1;" class="inlineRenameArea"><span class="measureSpan">Test Value</span><span tabindex="0" data-placeholder-shown="" style="white-space: pre; user-select: none; grid-area: 1 / 1 / auto / auto; overflow: hidden; text-overflow: ellipsis; width: 64px; max-width: 200px; z-index: 1;" data-test-id="inline-edit-preview" class="inlineRenamePreview">Test Value</span><input placeholder="Enter text..." maxlength="100" aria-label="editable input" style="all: unset; grid-area: 1 / 1 / auto / auto; visibility: hidden; width: 64px; max-width: 200px; z-index: 1;" class="inlineRenameInput" data-test-id="inline-edit-input" value="Test Value"></div> <div data-placeholder-shown="" style="display: inline-grid; width: 64px; max-width: 200px; z-index: 1;" class="inlineRenameArea" data-test-id="inline-editable-area"><span class="measureSpan">Test Value</span><span tabindex="0" data-placeholder-shown="" style="white-space: pre; user-select: none; grid-area: 1 / 1 / auto / auto; overflow: hidden; text-overflow: ellipsis; width: 64px; max-width: 200px; z-index: 1;" data-test-id="inline-edit-preview" class="inlineRenamePreview">Test Value</span><input placeholder="Enter text..." maxlength="100" aria-label="editable input" style="all: unset; grid-area: 1 / 1 / auto / auto; visibility: hidden; width: 64px; max-width: 200px; z-index: 1;" class="inlineRenameInput" data-test-id="inline-edit-input" value="Test Value"></div>
<!----> <!---->
</div>" </div>"
`; `;

View File

@@ -70,9 +70,10 @@ describe('NodeTitle', () => {
}, },
}); });
const renameInput = getByTestId('inline-edit-input'); const renameInput = getByTestId('inline-edit-input');
await userEvent.type(renameInput, 'New Node Name'); const area = getByTestId('inline-editable-area');
await userEvent.type(area, 'New Node Name');
await userEvent.keyboard('{Escape}'); await userEvent.keyboard('{Escape}');
await userEvent.click(renameInput);
expect(renameInput).toHaveValue('Test Node'); expect(renameInput).toHaveValue('Test Node');
expect(emitted('update:model-value')).toBeUndefined(); expect(emitted('update:model-value')).toBeUndefined();
}); });