Gx2 3865 ✅ tools qa interactions sortable

.github/workflows/CI-Suite.yml

@@ -54,7 +54,7 @@ jobs:
               with:
                   browser: chrome
                   command: | #EDITAR AQUÍ EL ARCHIVO SUITE A EJECUTAR:
-                      yarn file cypress/e2e/Tests/Suites/GX-22440-RadioButtons.cy.js
+                      yarn file cypress/e2e/Tests/Interactions/GX2-3865-sorteable.cy.js
 
             - name: ✅Import Test Results to Xray
               if: always()
@@ -64,8 +64,8 @@ jobs:
                   password: ${{secrets.XRAY_CLIENT_SECRET}}
                   testFormat: 'junit' #OPCIONES PARA CAMBIAR: 'junit' (para xml) o 'cucumber' (para json)
                   testPaths: 'reports/test-results.xml' #OPCIONES: '/test-results.xml' o 'cucumber-report.json'
-                  testExecKey: 'GX-22440' #EDITAR AQUÍ EL TEST EXECUTION A IMPORTAR LAS PRUEBAS.
-                  projectKey: 'GX' #EDITAR EN CASO DE TRABAJAR CON OTRO PROYECTO.
+                  testExecKey: 'GX2-3867' #EDITAR AQUÍ EL TEST EXECUTION A IMPORTAR LAS PRUEBAS.
+                  projectKey: 'GX2' #EDITAR EN CASO DE TRABAJAR CON OTRO PROYECTO.
 
             - name: 🔔Slack Notification of Done
               if: always()
@@ -75,4 +75,4 @@ jobs:
                   SLACK_USERNAME: Ari✨
                   SLACK_MESSAGE: ':test_tube: Tests run in ToolsQA: User Story Test Execution is Done and updated in Jira :rocket:'
                   SLACK_COLOR: ${{ job.status }}
-                  SLACK_ICON: https://i.imgur.com/q9kvQCp_d.webp?maxwidth=760&fidelity=grand
+                  SLACK_ICON: https://i.imgur.com/q9kvQCp_d.webp?maxwidth=760&fidelity=grand

cypress/e2e/Tests/Interactions/GX2-3865-sorteable.cy.js

@@ -0,0 +1,50 @@
+import { sortablePage } from '@pages/Interactions/GX3865-sortablePage';
+import data from '@data/GX2-3865-sorteable.json';
+
+describe('GX2-3865 | ToolsQA | Interactions | Sortable', () => {
+	before(() => {
+		// runs once before all tests
+	});
+	beforeEach(() => {
+		cy.visit('/sortable');
+	});
+	afterEach(() => {
+		// runs after every it() test block
+	});
+	after(() => {
+		// runs once after all tests
+	});
+	// -- Start: Cypress Tests --
+	it('3866 | TC1: Verify list order can be changed', () => {
+		// Verify defaul order is expected
+		sortablePage.getTextArrayItem().then(arrayItemsText => {
+			cy.wrap(data.listItems).should('deep.equal', arrayItemsText);
+		});
+
+		// Move random element to random position
+		sortablePage.triggerItem().then(({ startPosition, dropPosition, startTargetText, endTargetText }) => {
+			expect(startPosition).to.not.equal(dropPosition);
+			expect(startTargetText).to.not.equal(endTargetText);
+		});
+	});
+	it('3866 | TC2: Verify in List Only one tab can be displayed at once. ', () => {
+		sortablePage.getActiveTabs().then(activeTabs => {
+			expect(activeTabs).to.have.lengthOf(1);
+		});
+	});
+
+	it('3866 | TC3: Verify grid order can be changed', () => {
+		cy.log('GRID--------------------------------------------');
+		sortablePage.moveToGrid();
+		sortablePage.getTextArrayGrid().then(arrayTextGrid => {
+			// Verify defaul order is expected
+			cy.wrap(data.gridItems).should('deep.equal', arrayTextGrid);
+		});
+
+		// Move random element to random position
+		sortablePage.triggerGridItem().then(({ startPosition, dropPosition, startTargetText, endTargetText }) => {
+			expect(startPosition).to.not.equal(dropPosition);
+			expect(startTargetText).to.not.equal(endTargetText);
+		});
+	});
+});

cypress/fixtures/data/GX2-3865-sorteable.json

@@ -0,0 +1,4 @@
+{
+	"listItems": ["One", "Two", "Three", "Four", "Five", "Six"],
+	"gridItems": ["One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine"]
+}

cypress/support/pages/Interactions/GX3865-sortablePage.js

@@ -0,0 +1,158 @@
+class SorteablePage {
+	get = {
+		listContainer: () => cy.get('.vertical-list-container'),
+		childrenListContainer: () => cy.get('.vertical-list-container').children(),
+		gridContainer: () => cy.get('.create-grid'),
+		childrenGridContainer: () => cy.get('.create-grid').children(),
+		gridTab: () => cy.get('#demo-tab-grid'),
+		navTab: () => cy.get('.nav-tabs'),
+		childrenTabs: () => cy.get('.nav-tabs').children(),
+		tabList: () => cy.get('[id="demo-tab-list"]'),
+	};
+
+	//About Tabs
+	getActiveTabs() {
+		return this.get.tabList().filter((index, tab) => {
+			return Cypress.$(tab).attr('aria-selected') === 'true' && Cypress.$(tab).hasClass('active');
+		});
+	}
+	//About List----------------------------
+	// Obtain arrayItems of the DOM
+	getArrayItem() {
+		return new Cypress.Promise(resolve => {
+			const arrayItems = [];
+			this.get
+				.childrenListContainer()
+				.each(item => {
+					arrayItems.push(item);
+				})
+				.then(() => {
+					resolve(arrayItems); // Array[6]<div....
+				});
+		});
+	}
+
+	// Obtain text arrayItems
+	getTextArrayItem() {
+		return new Cypress.Promise(resolve => {
+			const arrayItemsText = [];
+			this.get
+				.childrenListContainer()
+				.each(item => {
+					arrayItemsText.push(item.text());
+				})
+				.then(() => {
+					resolve(arrayItemsText); // ["One", "Two", "Three", "Four", "Five", "Six"],
+				});
+		});
+	}
+
+	// Create random of the arrayItems
+	async getRandomItem() {
+		const arrayItems = await this.getArrayItem();
+		const randomIndex = Cypress._.random(1, arrayItems.length);
+		cy.log(randomIndex);
+		return randomIndex; // 1,2,3,4,5,6
+	}
+
+	// Move Random Item
+	async triggerItem() {
+		const arrayItems = await this.getArrayItem();
+		// Indice aleatorio para el valor inicial correspondiente al array
+		const startRandomValue = await this.getRandomItem();
+		const startTarget = arrayItems[startRandomValue];
+		// Obtener el texto de startTarget
+		const startTargetText = await startTarget.text();
+
+		// Indice aleatorio para el valor final correspondiente al array
+		const endRandomValue = await this.getRandomItem();
+		const endTarget = arrayItems[endRandomValue];
+		// Obtener el texto de endTarget
+		const endTargetText = await endTarget.text();
+
+		// Start position. .offset se obtiene la posicion de un elemento. objeto con top y left. coordenadas x e y
+		const startPosition = startTarget.offset();
+		// Posicion final
+		const dropPosition = endTarget.offset();
+
+		// Simular arrastre
+		cy.get(startTarget)
+			.trigger('mousedown', { which: 1, pageX: startPosition.left, pageY: startPosition.top, force: true })
+			.trigger('mousemove', { which: 1, pageX: dropPosition.left, pageY: dropPosition.top, force: true })
+			.trigger('mouseup', { force: true });
+
+		return { startPosition, dropPosition, startTargetText, endTargetText }; // top: 638, left: 500.765625 //{ top: 589, left: 500.765625 } //"One" // "Two"
+	}
+
+	//About Grid----------------------------
+	moveToGrid() {
+		this.get.gridTab().click();
+	}
+	// Obtain text arrayItems
+	getTextArrayGrid() {
+		return new Cypress.Promise(resolve => {
+			const arrayTextGrid = [];
+			this.get
+				.childrenGridContainer()
+				.each(item => {
+					arrayTextGrid.push(item.text());
+				})
+				.then(() => {
+					resolve(arrayTextGrid); // ["One", "Two", "Three", "Four", "Five", "Six"],
+				});
+		});
+	}
+
+	getGridArrayItems() {
+		return new Cypress.Promise(resolve => {
+			const arrayGridItems = [];
+			this.get
+				.childrenGridContainer()
+				.each(item => {
+					arrayGridItems.push(item);
+				})
+				.then(() => {
+					resolve(arrayGridItems); // Array[6]<div....
+				});
+		});
+	}
+
+	async getRandomGridItem() {
+		const arrayItems = await this.getGridArrayItems();
+		const randomIndex = Cypress._.random(1, arrayItems.length);
+		return randomIndex; // 1,2,3,4,5,6,7,8,9
+	}
+
+	// Move Random Grind Item
+	async triggerGridItem() {
+		const arrayItems = await this.getGridArrayItems();
+		// Indice aleatorio para el valor inicial correspondiente al array
+		const startRandomValue = await this.getRandomGridItem();
+		const startTarget = arrayItems[startRandomValue];
+		// Obtener el texto de startTarget
+		const startTargetText = await startTarget.text();
+
+		// Indice aleatorio para el valor final correspondiente al array
+		const endRandomValue = await this.getRandomGridItem();
+		const endTarget = arrayItems[endRandomValue];
+		// Obtener el texto de endTarget
+		const endTargetText = await endTarget.text();
+
+		// Start position. .offset se obtiene la posicion de un elemento. objeto con top y left. coordenadas x e y
+		const startPosition = startTarget.offset();
+		// Posicion final
+		const dropPosition = endTarget.offset();
+
+		// Simular arrastre
+		cy.get(startTarget)
+			.trigger('mousedown', { which: 1, pageX: startPosition.left, pageY: startPosition.top, force: true })
+			.trigger('mousemove', { which: 1, pageX: dropPosition.left, pageY: dropPosition.top, force: true })
+			.trigger('mouseup', { force: true });
+
+		return { startPosition, dropPosition, startTargetText, endTargetText }; // top: 638, left: 500.765625 //{ top: 589, left: 500.765625 } //"One" // "Two"
+	}
+}
+
+export const sortablePage = new SorteablePage();
+import { removeLogs } from '@helper/RemoveLogs';
+removeLogs();

cypress/test-plan/in-sprint/sprint-19/GX2-3865.md

@@ -0,0 +1,63 @@
+## For the component:
+
+The tabs “List” and “Gird” must be showing by default.
+
+The tab “List” must be opened by default showing the contained list of items.
+
+Expected behavior:
+
+Only one tab can be displayed at once.
+
+“List” and “Grid” items have to be able to be ordered in any possible order.
+
+## For the “List” tab:
+
+Default order and List items:
+
+-   One
+
+-   Two
+
+-   Three
+
+-   Four
+
+-   Five
+
+-   Six
+
+WHEN: any list item is dragged between other list items
+
+THEN: it must stay in the selected order in the list where it's dropped
+
+Expected behavior: List items have to be able to be stacked in any order.
+
+For the “Grid” tab:
+
+## Default Grid items:
+
+-   One
+
+-   Two
+
+-   Three
+
+-   Four
+
+-   Five
+
+-   Six
+
+-   Seven
+
+-   Eight
+
+-   Nine
+
+Expected display: 3 x 3 grid.
+
+Expected behavior: List items have to be able to be stacked in any order.
+
+WHEN: any grid item is dragged between other grid items
+
+THEN: it must stay in the order in the grid where it's dropped.