mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/editor-ui/src/__tests__/setup.ts
View file

@ -1,8 +1,11 @@
import '@testing-library/jest-dom'; import '@testing-library/jest-dom';
import { configure } from '@testing-library/vue';
import Vue from 'vue'; import Vue from 'vue';
import '../plugins'; import '../plugins';
import { I18nPlugin } from '@/plugins/i18n'; import { I18nPlugin } from '@/plugins/i18n';
configure({ testIdAttribute: 'data-test-id' });
Vue.config.productionTip = false; Vue.config.productionTip = false;
Vue.config.devtools = false; Vue.config.devtools = false;

24
packages/editor-ui/src/components/ExecutionFilter.vue
View file

@ -141,19 +141,19 @@ onBeforeMount(() => {
type="tertiary" type="tertiary"
size="medium" size="medium"
:active="!!countSelectedFilterProps" :active="!!countSelectedFilterProps"
data-testid="executions-filter-button" data-test-id="executions-filter-button"
> >
<n8n-badge <n8n-badge
v-if="!!countSelectedFilterProps" v-if="!!countSelectedFilterProps"
theme="primary" theme="primary"
class="mr-4xs" class="mr-4xs"
data-testid="execution-filter-badge" data-test-id="execution-filter-badge"
>{{ countSelectedFilterProps }}</n8n-badge >{{ countSelectedFilterProps }}</n8n-badge
> >
{{ $locale.baseText('executionsList.filters') }} {{ $locale.baseText('executionsList.filters') }}
</n8n-button> </n8n-button>
</template> </template>
<div data-testid="execution-filter-form"> <div data-test-id="execution-filter-form">
<div v-if="workflows?.length" :class="$style.group"> <div v-if="workflows?.length" :class="$style.group">
<label for="execution-filter-workflows">{{ <label for="execution-filter-workflows">{{
$locale.baseText('workflows.heading') $locale.baseText('workflows.heading')
@ -164,7 +164,7 @@ onBeforeMount(() => {
:placeholder="$locale.baseText('executionsFilter.selectWorkflow')" :placeholder="$locale.baseText('executionsFilter.selectWorkflow')"
size="medium" size="medium"
filterable filterable
data-testid="executions-filter-workflows-select" data-test-id="executions-filter-workflows-select"
> >
<div class="ph-no-capture"> <div class="ph-no-capture">
<n8n-option <n8n-option
@ -186,7 +186,7 @@ onBeforeMount(() => {
:currentTagIds="filter.tags" :currentTagIds="filter.tags"
:createEnabled="false" :createEnabled="false"
@update="onTagsChange" @update="onTagsChange"
data-testid="executions-filter-tags-select" data-test-id="executions-filter-tags-select"
/> />
</div> </div>
<div :class="$style.group"> <div :class="$style.group">
@ -199,7 +199,7 @@ onBeforeMount(() => {
:placeholder="$locale.baseText('executionsFilter.selectStatus')" :placeholder="$locale.baseText('executionsFilter.selectStatus')"
size="medium" size="medium"
filterable filterable
data-testid="executions-filter-status-select" data-test-id="executions-filter-status-select"
> >
<n8n-option <n8n-option
v-for="item in statuses" v-for="item in statuses"
@ -220,7 +220,7 @@ onBeforeMount(() => {
v-model="vModel.startDate" v-model="vModel.startDate"
:format="DATE_TIME_MASK" :format="DATE_TIME_MASK"
:placeholder="$locale.baseText('executionsFilter.startDate')" :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> <span :class="$style.divider">to</span>
<el-date-picker <el-date-picker
@ -229,7 +229,7 @@ onBeforeMount(() => {
v-model="vModel.endDate" v-model="vModel.endDate"
:format="DATE_TIME_MASK" :format="DATE_TIME_MASK"
:placeholder="$locale.baseText('executionsFilter.endDate')" :placeholder="$locale.baseText('executionsFilter.endDate')"
data-testid="executions-filter-end-date-picker" data-test-id="executions-filter-end-date-picker"
/> />
</div> </div>
</div> </div>
@ -263,7 +263,7 @@ onBeforeMount(() => {
<a <a
target="_blank" target="_blank"
:href="viewPlansLink" :href="viewPlansLink"
data-testid="executions-filter-view-plans-link" data-test-id="executions-filter-view-plans-link"
>{{ $locale.baseText('executionsFilter.customData.inputTooltip.link') }}</a >{{ $locale.baseText('executionsFilter.customData.inputTooltip.link') }}</a
> >
</template> </template>
@ -278,7 +278,7 @@ onBeforeMount(() => {
:placeholder="$locale.baseText('executionsFilter.savedDataKeyPlaceholder')" :placeholder="$locale.baseText('executionsFilter.savedDataKeyPlaceholder')"
:value="filter.metadata[0]?.key" :value="filter.metadata[0]?.key"
@input="onFilterMetaChange(0, 'key', $event)" @input="onFilterMetaChange(0, 'key', $event)"
data-testid="execution-filter-saved-data-key-input" data-test-id="execution-filter-saved-data-key-input"
/> />
</n8n-tooltip> </n8n-tooltip>
<label for="execution-filter-saved-data-value">{{ <label for="execution-filter-saved-data-value">{{
@ -303,7 +303,7 @@ onBeforeMount(() => {
:placeholder="$locale.baseText('executionsFilter.savedDataValuePlaceholder')" :placeholder="$locale.baseText('executionsFilter.savedDataValuePlaceholder')"
:value="filter.metadata[0]?.value" :value="filter.metadata[0]?.value"
@input="onFilterMetaChange(0, 'value', $event)" @input="onFilterMetaChange(0, 'value', $event)"
data-testid="execution-filter-saved-data-value-input" data-test-id="execution-filter-saved-data-value-input"
/> />
</n8n-tooltip> </n8n-tooltip>
</div> </div>
@ -314,7 +314,7 @@ onBeforeMount(() => {
@click="onFilterReset" @click="onFilterReset"
size="large" size="large"
text text
data-testid="executions-filter-reset-button" data-test-id="executions-filter-reset-button"
> >
{{ $locale.baseText('executionsFilter.reset') }} {{ $locale.baseText('executionsFilter.reset') }}
</n8n-button> </n8n-button>

20
packages/editor-ui/src/components/ExecutionsList.vue
View file

@ -8,7 +8,7 @@
class="mr-xl" class="mr-xl"
v-model="autoRefresh" v-model="autoRefresh"
@change="handleAutoRefreshToggle" @change="handleAutoRefreshToggle"
data-testid="execution-auto-refresh-checkbox" data-test-id="execution-auto-refresh-checkbox"
> >
{{ $locale.baseText('executionsList.autoRefresh') }} {{ $locale.baseText('executionsList.autoRefresh') }}
</el-checkbox> </el-checkbox>
@ -27,7 +27,7 @@
" "
:value="allExistingSelected" :value="allExistingSelected"
@change="handleCheckAllExistingChange" @change="handleCheckAllExistingChange"
data-testid="select-all-executions-checkbox" data-test-id="select-all-executions-checkbox"
/> />
<table :class="$style.execTable"> <table :class="$style.execTable">
@ -39,7 +39,7 @@
@change="handleCheckAllVisibleChange" @change="handleCheckAllVisibleChange"
:disabled="finishedExecutionsCount < 1" :disabled="finishedExecutionsCount < 1"
label="" label=""
data-testid="select-visible-executions-checkbox" data-test-id="select-visible-executions-checkbox"
/> />
</th> </th>
<th>{{ $locale.baseText('executionsList.name') }}</th> <th>{{ $locale.baseText('executionsList.name') }}</th>
@ -64,7 +64,7 @@
:value="selectedItems[execution.id] || allExistingSelected" :value="selectedItems[execution.id] || allExistingSelected"
@change="handleCheckboxChanged(execution.id)" @change="handleCheckboxChanged(execution.id)"
label="" label=""
data-testid="select-execution-checkbox" data-test-id="select-execution-checkbox"
/> />
</td> </td>
<td> <td>
@ -212,7 +212,7 @@
<div <div
v-if="!combinedExecutions.length" v-if="!combinedExecutions.length"
:class="$style.loadedAll" :class="$style.loadedAll"
data-testid="execution-list-empty" data-test-id="execution-list-empty"
> >
{{ $locale.baseText('executionsList.empty') }} {{ $locale.baseText('executionsList.empty') }}
</div> </div>
@ -228,17 +228,17 @@
:label="$locale.baseText('executionsList.loadMore')" :label="$locale.baseText('executionsList.loadMore')"
@click="loadMore()" @click="loadMore()"
:loading="isDataLoading" :loading="isDataLoading"
data-testid="load-more-button" data-test-id="load-more-button"
/> />
</div> </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') }} {{ $locale.baseText('executionsList.loadedAll') }}
</div> </div>
</div> </div>
<div <div
v-if="numSelected > 0" v-if="numSelected > 0"
:class="$style.selectionOptions" :class="$style.selectionOptions"
data-testid="selected-executions-info" data-test-id="selected-executions-info"
> >
<span> <span>
{{ {{
@ -252,13 +252,13 @@
:label="$locale.baseText('generic.delete')" :label="$locale.baseText('generic.delete')"
type="tertiary" type="tertiary"
@click="handleDeleteSelected" @click="handleDeleteSelected"
data-testid="delete-selected-button" data-test-id="delete-selected-button"
/> />
<n8n-button <n8n-button
:label="$locale.baseText('executionsList.clearSelection')" :label="$locale.baseText('executionsList.clearSelection')"
type="tertiary" type="tertiary"
@click="handleClearSelection" @click="handleClearSelection"
data-testid="clear-selection-button" data-test-id="clear-selection-button"
/> />
</div> </div>
</div> </div>

2
packages/editor-ui/src/components/__tests__/SSOLogin.test.ts
View file

@ -19,7 +19,7 @@ const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
pinia, pinia,
stubs: { stubs: {
'n8n-button': { 'n8n-button': {
template: '<button data-testid="sso-button"></button>', template: '<button data-test-id="sso-button"></button>',
}, },
}, },
}, },

8
packages/editor-ui/src/views/SettingsSso.vue
View file

@ -112,7 +112,7 @@ onBeforeMount(async () => {
</template> </template>
</i18n> </i18n>
</n8n-info-tip> </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"> <div :class="$style.group">
<label>{{ locale.baseText('settings.sso.settings.redirectUrl.label') }}</label> <label>{{ locale.baseText('settings.sso.settings.redirectUrl.label') }}</label>
<CopyInput <CopyInput
@ -143,18 +143,18 @@ onBeforeMount(async () => {
:disabled="!ssoSettingsSaved" :disabled="!ssoSettingsSaved"
type="tertiary" type="tertiary"
@click="onTest" @click="onTest"
data-testid="sso-test" data-test-id="sso-test"
> >
{{ locale.baseText('settings.sso.settings.test') }} {{ locale.baseText('settings.sso.settings.test') }}
</n8n-button> </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') }} {{ locale.baseText('settings.sso.settings.save') }}
</n8n-button> </n8n-button>
</div> </div>
</div> </div>
<n8n-action-box <n8n-action-box
v-else v-else
data-testid="sso-content-unlicensed" data-test-id="sso-content-unlicensed"
:class="$style.actionBox" :class="$style.actionBox"
:description="locale.baseText('settings.sso.actionBox.description')" :description="locale.baseText('settings.sso.actionBox.description')"
:buttonText="locale.baseText('settings.sso.actionBox.buttonText')" :buttonText="locale.baseText('settings.sso.actionBox.buttonText')"

2
packages/editor-ui/src/views/__tests__/AuthView.test.ts
View file

@ -12,7 +12,7 @@ const renderComponent = (renderOptions: Parameters<typeof render>[1] = {}) =>
pinia: createTestingPinia(), pinia: createTestingPinia(),
stubs: { stubs: {
SSOLogin: { SSOLogin: {
template: '<div data-testid="sso-login"></div>', template: '<div data-test-id="sso-login"></div>',
}, },
}, },
}, },