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)