test: Add e2e tests for node creator (#4714)

* test: Add basic e2e tests for node creator

* add spec to check if all nodes are rendered

* revert SearchBar.vue changes

* fixed manual key typo

Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>

* Add custom component tests

* Fix wrongly resolved merge conflcit

Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>

packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue

@@ -7,12 +7,13 @@
 			tabindex="0"
 			@keydown.capture="nodeFilterKeyDown"
 			:key="`${activeSubcategoryTitle}_transition`"
+			data-test-id="categorized-items"
 		>
 			<div class="header" v-if="$slots.header">
 				<slot name="header" />
 			</div>
 
-			<div :class="$style.subcategoryHeader" v-if="activeSubcategory">
+			<div :class="$style.subcategoryHeader" v-if="activeSubcategory" data-test-id="categorized-items-subcategory">
 				<button :class="$style.subcategoryBackButton" @click="onSubcategoryClose">
 					<font-awesome-icon :class="$style.subcategoryBackIcon" icon="arrow-left" size="2x" />
 				</button>
@@ -45,6 +46,7 @@
 			</div>
 			<no-results
 				v-else
+				data-test-id="categorized-no-results"
 				:showRequest="filteredAllNodeTypes.length === 0"
 				:show-icon="filteredAllNodeTypes.length === 0"
 			>

packages/editor-ui/src/components/Node/NodeCreator/ItemIterator.vue

@@ -13,6 +13,7 @@
 			:key="item.key"
 			:class="item.type"
 			:data-key="item.key"
+			data-test-id="item-iterator-item"
 		>
 			<creator-item
 				:item="item"

packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue

@@ -10,6 +10,7 @@
 			 	v-click-outside="onClickOutside"
 			 	@dragover="onDragOver"
 			 	@drop="onDrop"
+				data-test-id="node-creator"
 			>
 				<main-panel
 					@nodeTypeSelected="nodeTypeSelected"

packages/editor-ui/src/components/Node/NodeCreator/NodeItem.vue

@@ -18,7 +18,7 @@
 				<span v-if="isTrigger" :class="$style['trigger-icon']">
 					<trigger-icon />
 				</span>
-				<n8n-tooltip v-if="isCommunityNode" placement="top">
+				<n8n-tooltip v-if="isCommunityNode" placement="top" data-test-id="node-item-community-tooltip">
 					<template #content>
 						<div
 							:class="$style['community-node-icon']"

packages/editor-ui/src/components/Node/NodeCreator/SearchBar.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="$style.searchContainer">
+	<div :class="$style.searchContainer" data-test-id="search-bar">
 		<div :class="{ [$style.prefix]: true, [$style.active]: value.length > 0 }">
 			<font-awesome-icon icon="search" size="sm" />
 		</div>

packages/editor-ui/src/components/Node/NodeCreator/TypeSelector.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="type-selector" v-if="showTabs">
+	<div class="type-selector" v-if="showTabs" data-test-id="node-creator-type-selector">
 		<el-tabs stretch :value="selectedType" @input="setType">
 			<el-tab-pane :label="$locale.baseText('nodeCreator.mainPanel.all')" :name="ALL_NODE_FILTER"></el-tab-pane>
 			<el-tab-pane :label="$locale.baseText('nodeCreator.mainPanel.regular')" :name="REGULAR_NODE_FILTER"></el-tab-pane>