Merge pull request #533 from upex-galaxy/GX3-132-tools-qa-interactions-dragabble

Merge GX3-132 into QA

Author: ZwitterKaneda

.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/GX3-449-Buttons.cy.js
+                      yarn file cypress/e2e/Tests/Interactions/GX3-132-Draggable.cy.js
 
             - name: ✅Import Test Results to Xray
               if: always()
@@ -65,7 +65,7 @@ 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: 'GX3-463' #EDITAR AQUÍ EL TEST EXECUTION A IMPORTAR LAS PRUEBAS.
+                  testExecKey: 'GX3-134' #EDITAR AQUÍ EL TEST EXECUTION A IMPORTAR LAS PRUEBAS.
                   projectKey: 'GX3' #EDITAR EN CASO DE TRABAJAR CON OTRO PROYECTO.
 
             - name: 🔔Slack Notification of Done

cypress/e2e/Tests/Interactions/GX3-132-Draggable.cy.js

@@ -0,0 +1,82 @@
+import { draggable } from '@pages/Interactions/GX3-132-Draggable.page';
+import { faker } from '@faker-js/faker';
+
+describe('US GX3-132 | ToolsQA | Interactions | Dragabble', () => {
+	const randomX = faker.datatype.number({ min: 0, max: 450 });
+	const randomY = faker.datatype.number({ min: 0, max: 450 });
+	beforeEach('', () => {
+		cy.visit('/dragabble');
+		cy.url().should('contain', 'dragabble');
+	});
+	it('132 | TC1: Validar que se muestren las pestañas “Simple”, “Axis Restricted”, “Container Restricted”, “Cursor Style”', () => {
+		draggable.get.simpleTab().should('be.visible');
+		draggable.get.axisRestrictedTab().should('be.visible');
+		draggable.get.containerRestrictedTab().should('be.visible');
+		draggable.get.cursorStyleTab().should('be.visible');
+		draggable.get.simpleTabVisible().should('be.visible');
+	});
+
+	it('132 | TC2:  Validar que "Drag me" se puede arrastrar de forma aleatoria en cualquier dirección de la pestaña “Simple”', () => {
+		draggable.get.simpleTab().click();
+		draggable.moveRandom(randomX, randomY);
+		draggable.get.buttonDragBox().should('have.css', 'left', `${randomX}px`);
+		draggable.get.buttonDragBox().should('have.css', 'top', `${randomY}px`);
+	});
+	it('132 | TC3:  Validar que "Only X"  y "Only Y" se pueden mover aleatoriamente en el eje correspondiente según su nombre X o Y de la pestaña “Axis Restricted”', () => {
+		draggable.get.axisRestrictedTab().click();
+		draggable.moveRandomX(randomX, 0);
+		draggable.get.buttonOnlyX().should('have.css', 'left', `${randomX}px`);
+		draggable.get.buttonOnlyX().should('have.css', 'top', `${0}px`);
+		draggable.moveRandomY(0, randomY);
+		draggable.get.buttonOnlyY().should('have.css', 'top', `${randomY}px`);
+		draggable.get.buttonOnlyY().should('have.css', 'left', `${0}px`);
+	});
+	it('132 | TC4: Validar que “I`m contained within the box” y “Im contained within my parent” se pueden mover aleatoriamente solo dentro del área de acción delimitada de la pestaña “Container Restricted”', () => {
+		const ramdomBoxX = faker.datatype.number({ min: 0, max: 280 });
+		const ramdomBoxY = faker.datatype.number({ min: 0, max: 106 });
+		const ramdomParentX = faker.datatype.number({ min: 0, max: 13 });
+		const ramdomParentY = faker.datatype.number({ min: 0, max: 86 });
+
+		draggable.get.containerRestrictedTab().click();
+		draggable.moveRandomDelimitedBox(ramdomBoxX, ramdomBoxY);
+		draggable.get.textContainedBox().should('have.css', 'left', `${ramdomBoxX}px`);
+		draggable.get.textContainedBox().should('have.css', 'top', `${ramdomBoxY}px`);
+
+		draggable.moveRandomDelimitedParent(ramdomParentX, ramdomParentY);
+		draggable.get.textContainedParent().should('have.css', 'left', `${ramdomParentX}px`);
+		draggable.get.textContainedParent().should('have.css', 'top', `${ramdomParentY}px`);
+	});
+	it('132 | TC5: Validar que el cursor permanece en el centro del cuadro "I will always stick to the center” de la pestaña Cursor Style”', () => {
+		draggable.get.cursorStyleTab().click();
+		const ramdomCenterX = faker.datatype.number({ min: 450, max: 1400 });
+		const ramdomCenterY = faker.datatype.number({ min: 450, max: 1000 });
+		cy.log(ramdomCenterX, ramdomCenterY);
+		draggable.get
+			.cursorCenter()
+			.trigger('mousedown', { which: 1 })
+			.trigger('mousemove', { which: 1, pageX: ramdomCenterX, pageY: ramdomCenterY });
+		draggable.get.body().should('have.css', 'cursor', 'move');
+	});
+	it('132 | TC6: Validar que el cursor permanece en la parte superior del cuadro "My cursor is at top left” de la pestaña Cursor Style”', () => {
+		draggable.get.cursorStyleTab().click();
+		const ramdomCenterX = faker.datatype.number({ min: 450, max: 1400 });
+		const ramdomCenterY = faker.datatype.number({ min: 450, max: 1000 });
+		cy.log(ramdomCenterX, ramdomCenterY);
+		draggable.get
+			.cursorTopLeft()
+			.trigger('mousedown', { which: 1 })
+			.trigger('mousemove', { which: 1, pageX: ramdomCenterX, pageY: ramdomCenterY });
+		draggable.get.body().should('have.css', 'cursor', 'crosshair');
+	});
+	it('132 |  TC7: Validar que el cursor permanece en en la parte inferior central del cuadro "My cursor is at bottom” de la pestaña Cursor Style”', () => {
+		draggable.get.cursorStyleTab().click();
+		const ramdomCenterX = faker.datatype.number({ min: 450, max: 1400 });
+		const ramdomCenterY = faker.datatype.number({ min: 450, max: 1000 });
+		cy.log(ramdomCenterX, ramdomCenterY);
+		draggable.get
+			.cursorBottom()
+			.trigger('mousedown', { which: 1 })
+			.trigger('mousemove', { which: 1, pageX: ramdomCenterX, pageY: ramdomCenterY });
+		draggable.get.body().should('have.css', 'cursor', 'auto');
+	});
+});

cypress/support/pages/Interactions/GX3-132-Draggable.page.js

@@ -0,0 +1,36 @@
+class Dragabble {
+	get = {
+		simpleTab: () => cy.get('#draggableExample-tab-simple'),
+		axisRestrictedTab: () => cy.get('#draggableExample-tab-axisRestriction'),
+		containerRestrictedTab: () => cy.get('#draggableExample-tab-containerRestriction'),
+		cursorStyleTab: () => cy.get('#draggableExample-tab-cursorStyle'),
+		simpleTabVisible: () => cy.get('.nav-item.active'),
+		buttonDragBox: () => cy.get('#dragBox'),
+		buttonOnlyX: () => cy.get('#restrictedX'),
+		buttonOnlyY: () => cy.get('#restrictedY'),
+		textContainedBox: () => cy.get('div.draggable.ui-widget-content.ui-draggable.ui-draggable-handle'),
+		textContainedParent: () => cy.get('span.ui-widget-header.ui-draggable.ui-draggable-handle'),
+		cursorCenter: () => cy.get('#cursorCenter'),
+		cursorTopLeft: () => cy.get('#cursorTopLeft'),
+		cursorBottom: () => cy.get('#cursorBottom'),
+		body: () => cy.get('body')
+	};
+
+	moveRandom(deltaX, deltaY) {
+		this.get.buttonDragBox().move({ deltaX, deltaY, force: true });
+	}
+	moveRandomX(deltaX, deltaY) {
+		this.get.buttonOnlyX().move({ deltaX, deltaY, force: true });
+	}
+	moveRandomY(deltaX, deltaY) {
+		this.get.buttonOnlyY().move({ deltaX, deltaY, force: true });
+	}
+
+	moveRandomDelimitedBox(deltaX, deltaY) {
+		this.get.textContainedBox().move({ deltaX, deltaY, force: true });
+	}
+	moveRandomDelimitedParent(deltaX, deltaY) {
+		this.get.textContainedParent().move({ deltaX, deltaY, force: true });
+	}
+}
+export const draggable = new Dragabble();

cypress/test-plan/in-sprint/sprint-30/GX3-132.md

@@ -0,0 +1,97 @@
+# ✅ToolsQA | Interactions | Dragabble
+
+[GX3-132](https://upexgalaxy30.atlassian.net/browse/GX3-132) Created: 31/10/23 Updated: 13/11/23
+
+**Challenge:**
+
+QA Deberá realizar pruebas e2e con el uso de POM (Page Object Model)  
+QA Deberá de usar la dependencia de [drag-and-drop](https://www.npmjs.com/package/@4tw/cypress-drag-drop) y deberá de usar coordenadas aleatorias.
+
+**Scope del challenge:**  
+Aprender a obtener elementos;  
+Aprender a mover elementos dentro del DOM;  
+Pulir nuestro uso de POM;  
+Aprender a usar scripts de números aleatorios;
+
+-   As a QA learner,
+-   I want to test:
+    -   **drag an area works as expected in different case scenarios.**
+-   So that I can improve my testing skills for this scenario.
+
+```
+BUSINESS RULES SPEC
+
+
+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.
+```