From e2c403451b12d3b7003f39006694319d6fcfc8f1 Mon Sep 17 00:00:00 2001
From: Milorad Filipovic <milorad@n8n.io>
Date: Mon, 17 Feb 2025 10:50:07 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20Adding=20e2e=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cypress/e2e/1-workflows.cy.ts                 | 41 +++++++++++++++++++
 cypress/pages/workflows.ts                    | 12 ++++++
 .../layouts/ResourcesListLayout.vue           |  2 +
 3 files changed, 55 insertions(+)

diff --git a/cypress/e2e/1-workflows.cy.ts b/cypress/e2e/1-workflows.cy.ts
index a6683bbee485e..82d1b9b90bcf9 100644
--- a/cypress/e2e/1-workflows.cy.ts
+++ b/cypress/e2e/1-workflows.cy.ts
@@ -97,4 +97,45 @@ describe('Workflows', () => {
 
 		WorkflowsPage.getters.workflowCards().should('have.length', 1);
 	});
+
+	it('should preserve filters and pagination in URL', () => {
+		// Add a search query
+		WorkflowsPage.getters.searchBar().type('My');
+		// Add a tag filter
+		WorkflowsPage.getters.workflowFilterButton().click();
+		WorkflowsPage.getters.workflowTagsDropdown().click();
+		WorkflowsPage.getters.workflowTagItem('other-tag-1').click();
+		WorkflowsPage.getters.workflowsListContainer().click();
+		// Update sort order
+		WorkflowsPage.getters.workflowSortDropdown().click();
+		WorkflowsPage.getters.workflowSortItem('Sort by last created').click({ force: true });
+		// Update page size
+		WorkflowsPage.getters.workflowListPageSizeDropdown().click();
+		WorkflowsPage.getters.workflowListPageSizeItem('25').click();
+
+		// URL should contain all applied filters and pagination
+		cy.url().should('include', 'search=My');
+		// Cannot really know tag id, so just check if it contains 'tags='
+		cy.url().should('include', 'tags=');
+		cy.url().should('include', 'sort=lastCreated');
+		cy.url().should('include', 'pageSize=25');
+
+		// Reload the page
+		cy.reload();
+		// Check if filters and pagination are preserved
+		WorkflowsPage.getters.searchBar().should('have.value', 'My');
+		WorkflowsPage.getters.workflowFilterButton().click();
+		WorkflowsPage.getters.workflowTagsDropdown().should('contain.text', 'other-tag-1');
+		WorkflowsPage.getters
+			.workflowSortItem('Sort by last created')
+			.should('have.attr', 'aria-selected', 'true');
+		WorkflowsPage.getters
+			.workflowListPageSizeItem('25', false)
+			.should('have.attr', 'aria-selected', 'true');
+		// Aso, check if the URL is preserved
+		cy.url().should('include', 'search=My');
+		cy.url().should('include', 'tags=');
+		cy.url().should('include', 'sort=lastCreated');
+		cy.url().should('include', 'pageSize=25');
+	});
 });
diff --git a/cypress/pages/workflows.ts b/cypress/pages/workflows.ts
index 7441bfa2567a8..87507c80a1281 100644
--- a/cypress/pages/workflows.ts
+++ b/cypress/pages/workflows.ts
@@ -47,6 +47,18 @@ export class WorkflowsPage extends BasePage {
 		workflowOwnershipDropdown: () => cy.getByTestId('user-select-trigger'),
 		workflowOwner: (email: string) => cy.getByTestId('user-email').contains(email),
 		workflowResetFilters: () => cy.getByTestId('workflows-filter-reset'),
+		workflowSortDropdown: () => cy.getByTestId('resources-list-sort'),
+		workflowSortItem: (sort: string) =>
+			cy.getByTestId('resources-list-sort-item').contains(sort).parent(),
+		workflowPagination: () => cy.getByTestId('resources-list-pagination'),
+		workflowListPageSizeDropdown: () => this.getters.workflowPagination().find('.select-trigger'),
+		workflowListPageSizeItem: (pageSize: string, visible: boolean = true) => {
+			if (visible) {
+				return cy.get('[role=option]').filter(':visible').contains(`${pageSize}/page`);
+			}
+			return cy.get('[role=option]').contains(`${pageSize}/page`).parent();
+		},
+		workflowsListContainer: () => cy.getByTestId('resources-list-wrapper'),
 		// Not yet implemented
 		// myWorkflows: () => cy.getByTestId('my-workflows'),
 		// allWorkflows: () => cy.getByTestId('all-workflows'),
diff --git a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
index f0a1859de0294..db811c61e9f92 100644
--- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
+++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -557,6 +557,7 @@ const loadPaginationFromQueryString = async () => {
 				<div
 					v-else-if="filteredAndSortedResources.length > 0"
 					ref="listWrapperRef"
+					data-test-id="resources-list-wrapper"
 					:class="$style.listWrapper"
 				>
 					<!-- FULL SCROLLING LIST (Shows all resources, filtering and sorting is done in this component) -->
@@ -588,6 +589,7 @@ const loadPaginationFromQueryString = async () => {
 								:total="totalItems"
 								:page-sizes="availablePageSizeOptions"
 								layout="total, prev, pager, next, sizes"
+								data-test-id="resources-list-pagination"
 								@update:current-page="setCurrentPage"
 								@size-change="setRowsPerPage"
 							></el-pagination>