✅[QA REGRESSION PASSED]: Ready to Merge into MAIN

.github/workflows/CI-Suite.yml

@@ -55,7 +55,7 @@ jobs:
               with:
                   browser: electron
                   command: | #EDITAR AQUÍ EL ARCHIVO SUITE A EJECUTAR:
-                      yarn file cypress/e2e/Tests/Elements/GX-39414-RadioButtons.cy.js
+                      yarn file cypress/e2e/Tests/Interactions/GX2-7669-Dragabble.cy.js
 
             - name: ✅Import Test Results to Xray
               if: always()
@@ -65,8 +65,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-39416' #EDITAR AQUÍ EL TEST EXECUTION A IMPORTAR LAS PRUEBAS.
-                  projectKey: 'GX' #EDITAR EN CASO DE TRABAJAR CON OTRO PROYECTO.
+                  testExecKey: 'GX2-7671' #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()

cypress/e2e/Tests/Interactions/GX2-7669-Dragabble.cy.js

@@ -0,0 +1,107 @@
+import { removeLogs } from '@helper/RemoveLogs';
+import { dragPage } from '@pages/Interactions/GX2-7669-dragabble.page';
+
+function randomCoordinate(val1, val2) {
+	const random = Cypress._.random(val1, val2);
+	return random;
+}
+
+describe('GX2-7669-tools-qa-interactions-dragabble', () => {
+	beforeEach(() => {
+		cy.intercept({ resourceType: /^(xhr|fetch)$/ }, { statusCode: 200, body: { data: 'fake data' } });
+		cy.visit('/dragabble');
+		cy.url().should('contain', '/dragabble');
+	});
+
+	it('7670 | TC1: Validar mover el recuadro “Drag me” de la pestaña Simple.', () => {
+		const xRandomCoordinate = randomCoordinate(0, 750);
+		const yRandomCoordinate = randomCoordinate(0, 550);
+		dragPage.drag({
+			X: xRandomCoordinate,
+			Y: yRandomCoordinate,
+		});
+		dragPage.get.simpleDrag().should('have.css', 'left', `${xRandomCoordinate}px`);
+		dragPage.get.simpleDrag().should('have.css', 'top', `${yRandomCoordinate}px`);
+	});
+	it('7670 | TC2: Validar mover en el eje X el recuadro Only X de la pestaña Axis Restricted.', () => {
+		const xRandomCoordinate = randomCoordinate(-200, 450);
+		dragPage.axisDrag({
+			X: xRandomCoordinate,
+		});
+		dragPage.get.xDrag().should('have.css', 'left', `${xRandomCoordinate}px`);
+	});
+	it('7670 | TC3: Validar mover en el eje Y el recuadro Only Y de la pestaña Axis Restricted.', () => {
+		const yRandomCoordinate = randomCoordinate(0, 500);
+		dragPage.axisDrag({
+			Y: yRandomCoordinate,
+		});
+		dragPage.get.yDrag().should('have.css', 'top', `${yRandomCoordinate}px`);
+	});
+	it('7670 | TC4: Validar mover el recuadro “Im contained within the box” dentro de su container de la pestaña “Container Restricted”.', () => {
+		const xRandomCoordinate = randomCoordinate(0, 533);
+		const yRandomCoordinate = randomCoordinate(0, 106);
+		dragPage.get.containerTab().click();
+		dragPage.containerDrag({ X: xRandomCoordinate, Y: yRandomCoordinate });
+		dragPage.get.dragContainer().should('have.css', 'left', `${xRandomCoordinate}px`);
+		dragPage.get.dragContainer().should('have.css', 'top', `${yRandomCoordinate}px`);
+	});
+	it('7670 | TC5: Validar mover el texto “Im contained within my parent” dentro de su container de la pestaña “Container Restricted”.', () => {
+		const xRandomCoordinate = randomCoordinate(0, 13);
+		const yRandomCoordinate = randomCoordinate(-1, 86);
+
+		dragPage.get.containerTab().click();
+		dragPage.textDrag({
+			X: xRandomCoordinate,
+			Y: yRandomCoordinate,
+		});
+		dragPage.get.dragText().should('have.css', 'left', `${xRandomCoordinate}px`);
+		dragPage.get.dragText().should('have.css', 'top', `${yRandomCoordinate}px`);
+	});
+	it('7670 | TC6: Validar mover el recuadro “I will always stick to the center” de la pestaña "Cursor Style".', () => {
+		const xRandomCoordinate = randomCoordinate(700, 1800);
+		cy.log(xRandomCoordinate);
+		const yRandomCoordinate = randomCoordinate(350, 1000);
+		cy.log('y', yRandomCoordinate);
+
+		dragPage.dragFromCenter({ X: xRandomCoordinate, Y: yRandomCoordinate }).then(data => {
+			const [xCoordinateCss, yCoordinateCss] = data;
+			// Se realiza esta resta para encontrar el punto exacto donde se hace click para luego poder validar con las aserciones
+			const x = xRandomCoordinate - (xRandomCoordinate - xCoordinateCss);
+			const y = yRandomCoordinate - (yRandomCoordinate - yCoordinateCss);
+			expect(xCoordinateCss).to.equal(x);
+			expect(yCoordinateCss).to.equal(y);
+		});
+	});
+	it('7670 | TC7: Validar mover el recuadro “My cursor is at top left” de la pestaña "Cursor Style".', () => {
+		const xRandomCoordinate = randomCoordinate(650, 1700);
+		const yRandomCoordinate = randomCoordinate(350, 900);
+		dragPage.get.cursorTab().click();
+		dragPage.dragFromTopLeft({ X: xRandomCoordinate, Y: yRandomCoordinate }).then(data => {
+			const [xCoordinateCss, yCoordinateCss] = data;
+			// Se realiza esta resta para encontrar el punto exacto donde se hace click para luego poder validar con las aserciones
+			const x = xRandomCoordinate - (xRandomCoordinate - xCoordinateCss);
+			const y = yRandomCoordinate - (yRandomCoordinate - yCoordinateCss);
+			expect(xCoordinateCss).to.equal(x);
+			expect(yCoordinateCss).to.equal(y);
+		});
+	});
+	it('7670 | TC8: Validar mover el recuadro “My cursor is at bottom” de la pestaña "Cursor Style".', () => {
+		const xRandomCoordinate = randomCoordinate(650, 1800);
+		const yRandomCoordinate = randomCoordinate(400, 1050);
+		dragPage
+			.dragFromBottom({
+				X: xRandomCoordinate,
+				Y: yRandomCoordinate,
+			})
+			.then(data => {
+				const [xCoordinateCss, yCoordinateCss] = data;
+				// Se realiza esta resta para encontrar el punto exacto donde se hace click para luego poder validar con las aserciones
+				const x = xRandomCoordinate - (xRandomCoordinate - xCoordinateCss);
+				const y = yRandomCoordinate - (yRandomCoordinate - yCoordinateCss);
+				expect(xCoordinateCss).to.equal(x);
+				expect(yCoordinateCss).to.equal(y);
+			});
+	});
+});
+
+removeLogs();

cypress/support/pages/Interactions/GX2-7669-dragabble.page.js

@@ -0,0 +1,135 @@
+class Drag {
+	get = {
+		//tab panel
+		simpleTab: () => cy.get('[id=draggableExample-tab-simple]'),
+		axisTab: () => cy.get('[id=draggableExample-tab-axisRestriction]'),
+		containerTab: () => cy.get('[id=draggableExample-tab-containerRestriction]'),
+		cursorTab: () => cy.get('[id=draggableExample-tab-cursorStyle]'),
+		containerPanel: () => cy.get('[id=containmentWrapper]'),
+
+		//Drags
+		simpleDrag: () => cy.get('[id=dragBox]'),
+		xDrag: () => cy.get('[id=restrictedX]'),
+		yDrag: () => cy.get('[id=restrictedY]'),
+		dragContainer: () => cy.get('[id=containmentWrapper] div'),
+		dragText: () => cy.get('.ui-widget-header'),
+		dragCenter: () => cy.get('[id=cursorCenter]'),
+		dragTopLeft: () => cy.get('[id=cursorTopLeft]'),
+		dragBottomContainer: () => cy.get('[id=cursorBottom]'),
+	};
+
+	drag({ X: x, Y: y }) {
+		this.get.simpleDrag().should('be.visible');
+		this.get.simpleDrag().move({
+			deltaX: x,
+			deltaY: y,
+		});
+	}
+
+	axisDrag({ X = '', Y = '' }) {
+		if (X !== '') {
+			this.get.axisTab().click();
+			this.get.xDrag().should('be.visible');
+			this.get.xDrag().move({
+				deltaX: X,
+				deltaY: 0,
+			});
+		} else {
+			this.get.axisTab().click();
+			this.get.yDrag().should('be.visible');
+			this.get.yDrag().move({
+				deltaX: 0,
+				deltaY: Y,
+			});
+		}
+	}
+
+	containerDrag({ X, Y }) {
+		this.get.containerTab().click();
+		this.get.dragContainer().should('be.visible');
+		this.get.dragContainer().move({
+			deltaX: X,
+			deltaY: Y,
+		});
+	}
+
+	textDrag({ X, Y }) {
+		this.get.containerTab().click();
+		this.get.dragText().should('be.visible');
+		this.get.dragText().move({
+			deltaX: X,
+			deltaY: Y,
+		});
+	}
+
+	dragFromCenter({ X, Y }) {
+		let yCoordinateCss, xCoordinateCss;
+		this.get.cursorTab().click();
+		this.get.dragCenter().should('be.visible');
+		this.get
+			.dragCenter()
+			.trigger('mousedown', { which: 1 })
+			.trigger('mousemove', { which: 1, pageX: X, pageY: Y })
+			.trigger('mouseup', { force: true });
+		return this.get
+			.dragCenter()
+			.then(() => {
+				this.get.dragCenter().then(data => {
+					//Se tomaron los valores de las coordenadas X y Y de la etiqueta HTML, se lo redondeo al valor entero y se lo convirtió a un valor Number
+					yCoordinateCss = Math.floor(parseInt(data[0].style.top));
+					xCoordinateCss = Math.floor(parseInt(data[0].style.left));
+				});
+			})
+			.then(() => {
+				return [xCoordinateCss, yCoordinateCss];
+			});
+	}
+
+	dragFromTopLeft({ X, Y }) {
+		let yCoordinateCss, xCoordinateCss;
+		this.get.cursorTab().click();
+		this.get.dragTopLeft().should('be.visible');
+		this.get
+			.dragTopLeft()
+			.trigger('mousedown', 'topLeft', { which: 1 })
+			.trigger('mousemove', 'topLeft', { which: 1, pageX: X, pageY: Y })
+			.trigger('mouseup', 'topLeft', { force: true });
+		return this.get
+			.dragTopLeft()
+			.then(() => {
+				this.get.dragTopLeft().then(data => {
+					//Se tomaron los valores de las coordenadas X y Y de la etiqueta HTML, se lo redondeo al valor entero y se lo convirtió a un valor Number
+					yCoordinateCss = Math.floor(parseInt(data[0].style.top));
+					xCoordinateCss = Math.floor(parseInt(data[0].style.left));
+				});
+			})
+			.then(() => {
+				return [xCoordinateCss, yCoordinateCss];
+			});
+	}
+
+	dragFromBottom({ X, Y }) {
+		let yCoordinateCss, xCoordinateCss;
+		this.get.cursorTab().click();
+		this.get.dragBottomContainer().should('be.visible');
+		this.get
+			.dragBottomContainer()
+			.trigger('mousedown', 'bottom', { which: 1 })
+			.trigger('mousemove', 'bottom', { which: 1, pageX: X, pageY: Y })
+			.trigger('mouseup', 'bottom', { force: true });
+		return this.get
+			.dragBottomContainer()
+			.then(() => {
+				this.get.dragBottomContainer().then(data => {
+					//Se tomaron los valores de las coordenadas X y Y de la etiqueta HTML, se lo redondeo al valor entero y se lo convirtió a un valor Number
+					yCoordinateCss = Math.floor(parseInt(data[0].style.top));
+					xCoordinateCss = Math.floor(parseInt(data[0].style.left));
+				});
+			})
+			.then(() => {
+				return [xCoordinateCss, yCoordinateCss];
+			});
+	}
+}
+
+export const dragPage = new Drag();

cypress/test-plan/in-sprint/sprint-27/GX2-7669.md

@@ -0,0 +1,70 @@
+## Test Analysis
+
+-For the component:
+
+Tabs “Simple”, “Axis Restricted”, “Container Restricted”, “Cursor Style” must be shown.
+
+Expected:
+
+Tab “Simple” is displayed by default.
+
+Only one tab is displayed at once.
+
+-For the “Simple” tab:
+
+“Drag me” dashed area must be displayed.
+
+Expected behavior:
+
+“Drag me” area can be dragged as desired in any direction.
+
+-For the “Axis Restricted” tab:
+
+“Only X” dashed area must be displayed.
+
+Expected behavior of the “Only X” area:
+
+“Only X” area only can be dragged on the X axis.
+
+“Only Y” dashed area must be displayed.
+
+Expected behavior of the “Only Y” area:
+
+“Only Y” area only can be dragged on the Y axis.
+
+-For the “Container Restricted” tab:
+
+Bordered box with the text “I'm contained within the box” in a bordered area of action must be displayed.
+
+Expected behavior of “I'm contained within the box” box:
+
+the box can't be dragged out of the delimited area of action.
+
+Bordered box with the text “I'm contained within my parent” must be displayed.
+
+Expected behavior of “I'm contained within my parent” text:
+
+the text can't be dragged out of the delimited area of action.
+
+-For the “Cursor Style” tab:
+
+A cursor icon will appear on boxes when hovering over.
+
+“I will always stick to the center” dashed box must be displayed.
+
+Expected behavior:
+
+IF: “I will always stick to the center” box is dragged THEN: the cursor must stick to the center of the box.
+
+“My cursor is at top left” dashed box must be displayed.
+
+Expected behavior:
+
+IF: “My cursor is at top left” box is dragged THEN: the cursor must stick to the outside top left of the box. AND: the cursor icon changes to a “+”.
+
+“My cursor is at bottom” dashed box must be displayed.
+
+Expected behavior:
+
+IF: “My cursor is at bottom” box is dragged THEN: the cursor must stick to the bottom center of the box. AND: the cursor hovering icon changes back to
+the default cursor icon.