test: Update getters, add search and sort tests for credentials (no-changelog) (#4716)

* test(e2e): Update getters, add search and sort tests for credentials

* fix: Refactor sortOptions getter

* fix: fix merge conflict

* fix: removed double key

* fix: Add db and session reset for every credentials suite run

cypress/e2e/2-credentials.cy.ts

@@ -1,7 +1,6 @@
 import { DEFAULT_USER_EMAIL, DEFAULT_USER_PASSWORD } from "../constants";
 import { randFirstName, randLastName } from "@ngneat/falso";
 import { CredentialsPage, CredentialsModal } from '../pages';
-// import { v4 as uuid } from 'uuid';
 
 const username = DEFAULT_USER_EMAIL;
 const password = DEFAULT_USER_PASSWORD;
@@ -11,6 +10,11 @@ const credentialsPage = new CredentialsPage();
 const credentialsModal = new CredentialsModal();
 
 describe('Credentials', () => {
+	before(() => {
+		cy.task('db:reset');
+		Cypress.session.clearAllSavedSessions();
+	});
+
 	beforeEach(() => {
 		cy.signup(username, firstName, lastName, password);
 
@@ -37,5 +41,48 @@ describe('Credentials', () => {
 
 		credentialsModal.actions.setName('My awesome Notion account');
 		credentialsModal.actions.save();
+		credentialsModal.actions.close();
+
+		credentialsPage.getters.credentialCards().should('have.length', 1);
+	});
+
+	it('should create a new credential using Add Credential button', () => {
+		credentialsPage.getters.createCredentialButton().click();
+
+		credentialsModal.getters.newCredentialModal().should('be.visible');
+		credentialsModal.getters.newCredentialTypeSelect().should('be.visible');
+		credentialsModal.getters.newCredentialTypeOption('Airtable API').click();
+
+		credentialsModal.getters.newCredentialTypeButton().click();
+
+		credentialsModal.getters.connectionParameter('API Key').type('1234567890');
+
+		credentialsModal.actions.setName('Airtable Account');
+		credentialsModal.actions.save();
+		credentialsModal.actions.close();
+
+		credentialsPage.getters.credentialCards().should('have.length', 2);
+	});
+
+	it('should search credentials', () => {
+		// Search by name
+		credentialsPage.actions.search('Notion');
+		credentialsPage.getters.credentialCards().should('have.length', 1);
+
+		// Search by Credential type
+		credentialsPage.actions.search('Airtable API');
+		credentialsPage.getters.credentialCards().should('have.length', 1);
+
+		// No results
+		credentialsPage.actions.search('Google');
+		credentialsPage.getters.credentialCards().should('have.length', 0);
+		credentialsPage.getters.emptyList().should('be.visible');
+	});
+
+	it('should sort credentials', () => {
+		credentialsPage.actions.search('');
+		credentialsPage.actions.sortBy('nameDesc');
+		credentialsPage.getters.credentialCards().eq(0).should('contain.text', 'Notion');
+		credentialsPage.actions.sortBy('nameAsc');
 	});
 });

cypress/pages/credentials.ts

@@ -5,13 +5,39 @@ export class CredentialsPage extends BasePage {
 	getters = {
 		emptyListCreateCredentialButton: () => cy.getByTestId('empty-resources-list').find('button'),
 		createCredentialButton: () => cy.getByTestId('resources-list-add'),
-		searchBar: () => cy.getByTestId('resources-list-search'),
-		credentialCards: () => cy.getByTestId('credential-card'),
-		credentialCard: (credentialName: string) => cy.getByTestId('credential-card')
+		searchInput: () => cy.getByTestId('resources-list-search'),
+		emptyList: () => cy.getByTestId('resources-list-empty'),
+		credentialCards: () => cy.getByTestId('resources-list-item'),
+		credentialCard: (credentialName: string) => this.getters.credentialCards()
 			.contains(credentialName)
-			.parents('[data-test-id="credential-card"]'),
+			.parents('[data-test-id="resources-list-item"]'),
 		credentialCardActions: (credentialName: string) => this.getters.credentialCard(credentialName)
 			.findChildByTestId('credential-card-actions'),
-		credentialDeleteButton: () => cy.getByTestId('action-toggle-dropdown').filter(':visible').contains('Delete')
+		credentialDeleteButton: () => cy.getByTestId('action-toggle-dropdown').filter(':visible').contains('Delete'),
+		sort: () => cy.getByTestId('resources-list-sort'),
+		sortOption: (label: string) => this.getters.sort().contains(label).first(),
+		filtersTrigger: () => cy.getByTestId('resources-list-filters-trigger'),
+		filtersDropdown: () => cy.getByTestId('resources-list-filters-dropdown'),
+	};
+	actions = {
+		search: (searchString: string) => {
+			const searchInput = this.getters.searchInput();
+			searchInput.clear();
+
+			if (searchString) {
+				searchInput.type(searchString);
+			}
+		},
+		sortBy: (type: 'nameAsc' | 'nameDesc' | 'lastUpdated' | 'lastCreated') => {
+			const sortTypes = {
+				nameAsc: 'Sort by name (A-Z)',
+				nameDesc: 'Sort by name (Z-A)',
+				lastUpdated: 'Sort by last updated',
+				lastCreated: 'Sort by last created',
+			};
+
+			this.getters.sort().click();
+			this.getters.sortOption(sortTypes[type]).click();
+		},
 	};
 }

cypress/pages/modals/credentials-modal.ts

@@ -3,10 +3,10 @@ import { BasePage } from "../base";
 export class CredentialsModal extends BasePage {
 	getters = {
 		newCredentialModal: () => cy.getByTestId('selectCredential-modal', { timeout: 5000 }),
+		editCredentialModal: () => cy.getByTestId('editCredential-modal', { timeout: 5000 }),
 		newCredentialTypeSelect: () => cy.getByTestId('new-credential-type-select'),
 		newCredentialTypeOption: (credentialType: string) => cy.getByTestId('new-credential-type-select-option').contains(credentialType),
 		newCredentialTypeButton: () => cy.getByTestId('new-credential-type-button'),
-		editCredentialModal: () => cy.getByTestId('editCredential-modal', { timeout: 5000 }),
 		connectionParameters: () => cy.getByTestId('credential-connection-parameter'),
 		connectionParameter: (fieldName: string) => this.getters.connectionParameters().contains(fieldName)
 			.parents('[data-test-id="credential-connection-parameter"]')
@@ -14,7 +14,7 @@ export class CredentialsModal extends BasePage {
 		name: () => cy.getByTestId('credential-name'),
 		nameInput: () => cy.getByTestId('credential-name').find('input'),
 		saveButton: () => cy.getByTestId('credential-save-button'),
-		closeButton: () => this.getters.editCredentialModal().find('.el-dialog__close'),
+		closeButton: () => this.getters.editCredentialModal().find('.el-dialog__close').first(),
 	};
 	actions = {
 		setName: (name: string) => {
@@ -23,6 +23,7 @@ export class CredentialsModal extends BasePage {
 		},
 		save: () => {
 			this.getters.saveButton().click();
+			this.getters.saveButton().should('contain.text', 'Saved');
 		},
 		close: () => {
 			this.getters.closeButton().click();

cypress/pages/workflows.ts

@@ -7,10 +7,10 @@ export class WorkflowsPage extends BasePage {
 		newWorkflowTemplateCard: () => cy.getByTestId('new-workflow-template-card'),
 		searchBar: () => cy.getByTestId('resources-list-search'),
 		createWorkflowButton: () => cy.getByTestId('resources-list-add'),
-		workflowCards: () => cy.getByTestId(`workflow-card`),
-		workflowCard: (workflowName: string) => cy.getByTestId(`workflow-card`)
+		workflowCards: () => cy.getByTestId('resources-list-item'),
+		workflowCard: (workflowName: string) => this.getters.workflowCards()
 			.contains(workflowName)
-			.parents('[data-test-id="workflow-card"]'),
+			.parents('[data-test-id="resources-list-item"]'),
 		workflowTags: (workflowName: string) => this.getters.workflowCard(workflowName)
 			.findChildByTestId('workflow-card-tags'),
 		workflowActivator: (workflowName: string) => this.getters.workflowCard(workflowName)

packages/editor-ui/src/components/CredentialCard.vue

@@ -2,7 +2,6 @@
 	<n8n-card
 		:class="$style['card-link']"
 		@click="onClick"
-		data-test-id="credential-card"
 	>
 			<template #prepend>
 				<credential-icon :credential-type-name="credentialType ? credentialType.name : ''" />

packages/editor-ui/src/components/WorkflowCard.vue

@@ -2,7 +2,6 @@
 	<n8n-card
 		:class="$style.cardLink"
 		@click="onClick"
-		data-test-id="workflow-card"
 	>
 			<template #header>
 				<n8n-heading tag="h2" bold class="ph-no-capture" :class="$style.cardHeading" data-test-id="workflow-card-name">

packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue

@@ -9,6 +9,7 @@
 				size="medium"
 				:active="hasFilters"
 				:class="[$style['filter-button'], 'ml-2xs']"
+				data-test-id="resources-list-filters-trigger"
 			>
 				<n8n-badge
 					v-show="filtersLength > 0"
@@ -20,7 +21,10 @@
 				{{ $locale.baseText('forms.resourceFiltersDropdown.filters') }}
 			</n8n-button>
 		</template>
-		<div :class="$style['filters-dropdown']">
+		<div
+			:class="$style['filters-dropdown']"
+			data-test-id="resources-list-filters-dropdown"
+		>
 			<slot :filters="value" :setKeyValue="setKeyValue" />
 			<enterprise-edition class="mb-s" :features="[EnterpriseEditionFeature.Sharing]" v-if="shareable">
 				<n8n-input-label

packages/editor-ui/src/components/layouts/ResourcesListLayout.vue

@@ -64,6 +64,7 @@
 								<n8n-select
 									v-model="sortBy"
 									size="medium"
+									data-test-id="resources-list-sort"
 								>
 									<n8n-option value="lastUpdated" :label="$locale.baseText(`${resourceKey}.sort.lastUpdated`)"/>
 									<n8n-option value="lastCreated" :label="$locale.baseText(`${resourceKey}.sort.lastCreated`)"/>
@@ -97,12 +98,12 @@
 				</div>
 
 				<div class="mt-xs mb-l">
-					<ul :class="[$style.list, 'list-style-none']" v-if="filteredAndSortedSubviewResources.length > 0">
-						<li v-for="resource in filteredAndSortedSubviewResources" :key="resource.id" class="mb-2xs">
+					<ul :class="[$style.list, 'list-style-none']" v-if="filteredAndSortedSubviewResources.length > 0" data-test-id="resources-list">
+						<li v-for="resource in filteredAndSortedSubviewResources" :key="resource.id" class="mb-2xs" data-test-id="resources-list-item">
 							<slot :data="resource" />
 						</li>
 					</ul>
-					<n8n-text color="text-base" size="medium" v-else>
+					<n8n-text color="text-base" size="medium" data-test-id="resources-list-empty" v-else>
 						{{ $locale.baseText(`${resourceKey}.noResults`) }}
 						<template v-if="shouldSwitchToAllSubview">
 							<span v-if="!filters.search">