From ee7d5a841eeb46be980ced24b1dd8ef5850ade0a Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Fri, 14 Apr 2023 13:17:20 +0200
Subject: [PATCH] test(editor): Set 'data-test-id' in unit tests, so they match
 with Cypress (#5976)

---
 packages/editor-ui/src/__tests__/setup.ts     |  3 +++
 .../src/components/ExecutionFilter.vue        | 24 +++++++++----------
 .../src/components/ExecutionsList.vue         | 20 ++++++++--------
 .../src/components/__tests__/SSOLogin.test.ts |  2 +-
 packages/editor-ui/src/views/SettingsSso.vue  |  8 +++----
 .../src/views/__tests__/AuthView.test.ts      |  2 +-
 6 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/packages/editor-ui/src/__tests__/setup.ts b/packages/editor-ui/src/__tests__/setup.ts
index 350dbc992..28fef7c5d 100644
--- a/packages/editor-ui/src/__tests__/setup.ts
+++ b/packages/editor-ui/src/__tests__/setup.ts
@@ -1,8 +1,11 @@
 import '@testing-library/jest-dom';
+import { configure } from '@testing-library/vue';
 import Vue from 'vue';
 import '../plugins';
 import { I18nPlugin } from '@/plugins/i18n';
 
+configure({ testIdAttribute: 'data-test-id' });
+
 Vue.config.productionTip = false;
 Vue.config.devtools = false;
 
diff --git a/packages/editor-ui/src/components/ExecutionFilter.vue b/packages/editor-ui/src/components/ExecutionFilter.vue
index 2b0e0dd87..371a5e43f 100644
--- a/packages/editor-ui/src/components/ExecutionFilter.vue
+++ b/packages/editor-ui/src/components/ExecutionFilter.vue
@@ -141,19 +141,19 @@ onBeforeMount(() => {
 					type="tertiary"
 					size="medium"
 					:active="!!countSelectedFilterProps"
-					data-testid="executions-filter-button"
+					data-test-id="executions-filter-button"
 				>
 					<n8n-badge
 						v-if="!!countSelectedFilterProps"
 						theme="primary"
 						class="mr-4xs"
-						data-testid="execution-filter-badge"
+						data-test-id="execution-filter-badge"
 						>{{ countSelectedFilterProps }}</n8n-badge
 					>
 					{{ $locale.baseText('executionsList.filters') }}
 				</n8n-button>
 			</template>
-			<div data-testid="execution-filter-form">
+			<div data-test-id="execution-filter-form">
 				<div v-if="workflows?.length" :class="$style.group">
 					<label for="execution-filter-workflows">{{
 						$locale.baseText('workflows.heading')
@@ -164,7 +164,7 @@ onBeforeMount(() => {
 						:placeholder="$locale.baseText('executionsFilter.selectWorkflow')"
 						size="medium"
 						filterable
-						data-testid="executions-filter-workflows-select"
+						data-test-id="executions-filter-workflows-select"
 					>
 						<div class="ph-no-capture">
 							<n8n-option
@@ -186,7 +186,7 @@ onBeforeMount(() => {
 						:currentTagIds="filter.tags"
 						:createEnabled="false"
 						@update="onTagsChange"
-						data-testid="executions-filter-tags-select"
+						data-test-id="executions-filter-tags-select"
 					/>
 				</div>
 				<div :class="$style.group">
@@ -199,7 +199,7 @@ onBeforeMount(() => {
 						:placeholder="$locale.baseText('executionsFilter.selectStatus')"
 						size="medium"
 						filterable
-						data-testid="executions-filter-status-select"
+						data-test-id="executions-filter-status-select"
 					>
 						<n8n-option
 							v-for="item in statuses"
@@ -220,7 +220,7 @@ onBeforeMount(() => {
 							v-model="vModel.startDate"
 							:format="DATE_TIME_MASK"
 							:placeholder="$locale.baseText('executionsFilter.startDate')"
-							data-testid="executions-filter-start-date-picker"
+							data-test-id="executions-filter-start-date-picker"
 						/>
 						<span :class="$style.divider">to</span>
 						<el-date-picker
@@ -229,7 +229,7 @@ onBeforeMount(() => {
 							v-model="vModel.endDate"
 							:format="DATE_TIME_MASK"
 							:placeholder="$locale.baseText('executionsFilter.endDate')"
-							data-testid="executions-filter-end-date-picker"
+							data-test-id="executions-filter-end-date-picker"
 						/>
 					</div>
 				</div>
@@ -263,7 +263,7 @@ onBeforeMount(() => {
 										<a
 											target="_blank"
 											:href="viewPlansLink"
-											data-testid="executions-filter-view-plans-link"
+											data-test-id="executions-filter-view-plans-link"
 											>{{ $locale.baseText('executionsFilter.customData.inputTooltip.link') }}</a
 										>
 									</template>
@@ -278,7 +278,7 @@ onBeforeMount(() => {
 								:placeholder="$locale.baseText('executionsFilter.savedDataKeyPlaceholder')"
 								:value="filter.metadata[0]?.key"
 								@input="onFilterMetaChange(0, 'key', $event)"
-								data-testid="execution-filter-saved-data-key-input"
+								data-test-id="execution-filter-saved-data-key-input"
 							/>
 						</n8n-tooltip>
 						<label for="execution-filter-saved-data-value">{{
@@ -303,7 +303,7 @@ onBeforeMount(() => {
 								:placeholder="$locale.baseText('executionsFilter.savedDataValuePlaceholder')"
 								:value="filter.metadata[0]?.value"
 								@input="onFilterMetaChange(0, 'value', $event)"
-								data-testid="execution-filter-saved-data-value-input"
+								data-test-id="execution-filter-saved-data-value-input"
 							/>
 						</n8n-tooltip>
 					</div>
@@ -314,7 +314,7 @@ onBeforeMount(() => {
 					@click="onFilterReset"
 					size="large"
 					text
-					data-testid="executions-filter-reset-button"
+					data-test-id="executions-filter-reset-button"
 				>
 					{{ $locale.baseText('executionsFilter.reset') }}
 				</n8n-button>
diff --git a/packages/editor-ui/src/components/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsList.vue
index 992a0f16b..7fb081d31 100644
--- a/packages/editor-ui/src/components/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsList.vue
@@ -8,7 +8,7 @@
 						class="mr-xl"
 						v-model="autoRefresh"
 						@change="handleAutoRefreshToggle"
-						data-testid="execution-auto-refresh-checkbox"
+						data-test-id="execution-auto-refresh-checkbox"
 					>
 						{{ $locale.baseText('executionsList.autoRefresh') }}
 					</el-checkbox>
@@ -27,7 +27,7 @@
 				"
 				:value="allExistingSelected"
 				@change="handleCheckAllExistingChange"
-				data-testid="select-all-executions-checkbox"
+				data-test-id="select-all-executions-checkbox"
 			/>
 
 			<table :class="$style.execTable">
@@ -39,7 +39,7 @@
 								@change="handleCheckAllVisibleChange"
 								:disabled="finishedExecutionsCount < 1"
 								label=""
-								data-testid="select-visible-executions-checkbox"
+								data-test-id="select-visible-executions-checkbox"
 							/>
 						</th>
 						<th>{{ $locale.baseText('executionsList.name') }}</th>
@@ -64,7 +64,7 @@
 								:value="selectedItems[execution.id] || allExistingSelected"
 								@change="handleCheckboxChanged(execution.id)"
 								label=""
-								data-testid="select-execution-checkbox"
+								data-test-id="select-execution-checkbox"
 							/>
 						</td>
 						<td>
@@ -212,7 +212,7 @@
 			<div
 				v-if="!combinedExecutions.length"
 				:class="$style.loadedAll"
-				data-testid="execution-list-empty"
+				data-test-id="execution-list-empty"
 			>
 				{{ $locale.baseText('executionsList.empty') }}
 			</div>
@@ -228,17 +228,17 @@
 					:label="$locale.baseText('executionsList.loadMore')"
 					@click="loadMore()"
 					:loading="isDataLoading"
-					data-testid="load-more-button"
+					data-test-id="load-more-button"
 				/>
 			</div>
-			<div v-else :class="$style.loadedAll" data-testid="execution-all-loaded">
+			<div v-else :class="$style.loadedAll" data-test-id="execution-all-loaded">
 				{{ $locale.baseText('executionsList.loadedAll') }}
 			</div>
 		</div>
 		<div
 			v-if="numSelected > 0"
 			:class="$style.selectionOptions"
-			data-testid="selected-executions-info"
+			data-test-id="selected-executions-info"
 		>
 			<span>
 				{{
@@ -252,13 +252,13 @@
 				:label="$locale.baseText('generic.delete')"
 				type="tertiary"
 				@click="handleDeleteSelected"
-				data-testid="delete-selected-button"
+				data-test-id="delete-selected-button"
 			/>
 			<n8n-button
 				:label="$locale.baseText('executionsList.clearSelection')"
 				type="tertiary"
 				@click="handleClearSelection"
-				data-testid="clear-selection-button"
+				data-test-id="clear-selection-button"
 			/>
 		</div>
 	</div>
diff --git a/packages/editor-ui/src/components/__tests__/SSOLogin.test.ts b/packages/editor-ui/src/components/__tests__/SSOLogin.test.ts
index fd09c860e..3c168c521 100644
--- a/packages/editor-ui/src/components/__tests__/SSOLogin.test.ts
+++ b/packages/editor-ui/src/components/__tests__/SSOLogin.test.ts
@@ -19,7 +19,7 @@ const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
 				pinia,
 				stubs: {
 					'n8n-button': {
-						template: '<button data-testid="sso-button"></button>',
+						template: '<button data-test-id="sso-button"></button>',
 					},
 				},
 			},
diff --git a/packages/editor-ui/src/views/SettingsSso.vue b/packages/editor-ui/src/views/SettingsSso.vue
index cd58958f3..ade350455 100644
--- a/packages/editor-ui/src/views/SettingsSso.vue
+++ b/packages/editor-ui/src/views/SettingsSso.vue
@@ -112,7 +112,7 @@ onBeforeMount(async () => {
 				</template>
 			</i18n>
 		</n8n-info-tip>
-		<div v-if="ssoStore.isEnterpriseSamlEnabled" data-testid="sso-content-licensed">
+		<div v-if="ssoStore.isEnterpriseSamlEnabled" data-test-id="sso-content-licensed">
 			<div :class="$style.group">
 				<label>{{ locale.baseText('settings.sso.settings.redirectUrl.label') }}</label>
 				<CopyInput
@@ -143,18 +143,18 @@ onBeforeMount(async () => {
 					:disabled="!ssoSettingsSaved"
 					type="tertiary"
 					@click="onTest"
-					data-testid="sso-test"
+					data-test-id="sso-test"
 				>
 					{{ locale.baseText('settings.sso.settings.test') }}
 				</n8n-button>
-				<n8n-button :disabled="!metadata" @click="onSave" data-testid="sso-save">
+				<n8n-button :disabled="!metadata" @click="onSave" data-test-id="sso-save">
 					{{ locale.baseText('settings.sso.settings.save') }}
 				</n8n-button>
 			</div>
 		</div>
 		<n8n-action-box
 			v-else
-			data-testid="sso-content-unlicensed"
+			data-test-id="sso-content-unlicensed"
 			:class="$style.actionBox"
 			:description="locale.baseText('settings.sso.actionBox.description')"
 			:buttonText="locale.baseText('settings.sso.actionBox.buttonText')"
diff --git a/packages/editor-ui/src/views/__tests__/AuthView.test.ts b/packages/editor-ui/src/views/__tests__/AuthView.test.ts
index 28d3accaf..2b23ed4c0 100644
--- a/packages/editor-ui/src/views/__tests__/AuthView.test.ts
+++ b/packages/editor-ui/src/views/__tests__/AuthView.test.ts
@@ -12,7 +12,7 @@ const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
 				pinia: createTestingPinia(),
 				stubs: {
 					SSOLogin: {
-						template: '<div data-testid="sso-login"></div>',
+						template: '<div data-test-id="sso-login"></div>',
 					},
 				},
 			},