test(editor): Set 'data-test-id' in unit tests, so they match with Cypress (#5976)

This commit is contained in:
Csaba Tuncsik 2023-04-14 13:17:20 +02:00 committed by GitHub
parent dc0055fc5c
commit ee7d5a841e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 31 additions and 28 deletions

View file

@ -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;

View file

@ -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>

View file

@ -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>

View file

@ -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>',
},
},
},

View file

@ -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')"

View file

@ -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>',
},
},
},