test: add tests for readonly sticky

n8n-io · Sep 5, 2024 · 0ae67a2 · 0ae67a2
1 parent ea6090f
commit 0ae67a2
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 37 deletions.
diff --git a/packages/editor-ui/src/__tests__/data/canvas.ts b/packages/editor-ui/src/__tests__/data/canvas.ts
@@ -91,21 +91,24 @@ export function createCanvasNodeProvide({
 	id = 'node',
 	label = 'Test Node',
 	selected = false,
+	readOnly = false,
 	data = {},
 	eventBus = createEventBus<CanvasNodeEventBusEvents>(),
 }: {
 	id?: string;
 	label?: string;
 	selected?: boolean;
+	readOnly?: boolean;
 	data?: Partial<CanvasNodeData>;
 	eventBus?: EventBus<CanvasNodeEventBusEvents>;
 } = {}) {
-	const props = createCanvasNodeProps({ id, label, selected, data });
+	const props = createCanvasNodeProps({ id, label, selected, readOnly, data });
 	return {
 		[`${CanvasNodeKey}`]: {
 			id: ref(props.id),
 			label: ref(props.label),
 			selected: ref(props.selected),
+			readOnly: ref(props.readOnly),
 			data: ref(props.data),
 			eventBus: ref(eventBus),
 		} satisfies CanvasNodeInjectionData,

diff --git a/.../editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.spec.ts b/.../editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeStickyNote.spec.ts
@@ -13,7 +13,7 @@ beforeEach(() => {
 
 describe('CanvasNodeStickyNote', () => {
 	it('should render node correctly', () => {
-		const { getByTestId } = renderComponent({
+		const { html } = renderComponent({
 			global: {
 				provide: {
 					...createCanvasNodeProvide({
@@ -23,6 +23,23 @@ describe('CanvasNodeStickyNote', () => {
 			},
 		});
 
-		expect(getByTestId('canvas-sticky-note-node')).toMatchSnapshot();
+		expect(html()).toMatchSnapshot();
+	});
+
+	it('should disable resizing when node is readonly', () => {
+		const { container } = renderComponent({
+			global: {
+				provide: {
+					...createCanvasNodeProvide({
+						id: 'sticky',
+						readOnly: true,
+					}),
+				},
+			},
+		});
+
+		const resizeControls = container.querySelectorAll('.vue-flow__resize-control');
+
+		expect(resizeControls).toHaveLength(0);
 	});
 });
diff --git a/...onents/canvas/elements/nodes/render-types/__snapshots__/CanvasNodeStickyNote.spec.ts.snap b/...onents/canvas/elements/nodes/render-types/__snapshots__/CanvasNodeStickyNote.spec.ts.snap
@@ -1,45 +1,27 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CanvasNodeStickyNote > should render node correctly 1`] = `
-<div
-  class="n8n-sticky sticky clickable color-1 sticky"
-  data-test-id="canvas-sticky-note-node"
-  style="height: 180px; width: 240px;"
->
-  <div
-    class="wrapper"
-  >
-    <div
-      class="n8n-markdown"
-    >
-      <div
-        class="sticky"
-      />
+"<div class="vue-flow__resize-control nodrag top line"></div>
+<div class="vue-flow__resize-control nodrag right line"></div>
+<div class="vue-flow__resize-control nodrag bottom line"></div>
+<div class="vue-flow__resize-control nodrag left line"></div>
+<div class="vue-flow__resize-control nodrag top left handle"></div>
+<div class="vue-flow__resize-control nodrag top right handle"></div>
+<div class="vue-flow__resize-control nodrag bottom left handle"></div>
+<div class="vue-flow__resize-control nodrag bottom right handle"></div>
+<div class="n8n-sticky sticky clickable color-1 sticky" style="height: 180px; width: 240px;" data-test-id="canvas-sticky-note-node">
+  <div class="wrapper">
+    <div class="n8n-markdown">
+      <div class="sticky"></div>
     </div>
   </div>
-  <div
-    class="sticky-textarea"
-    style="display: none;"
-  >
-    <div
-      class="el-textarea el-input--large n8n-input"
-    >
+  <div class="sticky-textarea" style="display: none;">
+    <div class="el-textarea el-input--large n8n-input">
       <!-- input -->
-      
-      <!-- textarea -->
-      <textarea
-        autocomplete="off"
-        class="el-textarea__inner"
-        name="sticky-input"
-        placeholder=""
-        rows="5"
-        tabindex="0"
-        title=""
-      />
+      <!-- textarea --><textarea class="el-textarea__inner" name="sticky-input" rows="5" title="" tabindex="0" autocomplete="off" placeholder=""></textarea>
       <!--v-if-->
-      
     </div>
   </div>
   <!--v-if-->
-</div>
+</div>"
 `;