Merge pull request #18582 from gabriellpr/test-shape-options

test: Adds shape options tests

bigbluebutton-tests/playwright/core/elements.js

@@ -475,6 +475,12 @@ exports.wbColorRed = 'button[id="TD-Styles-Color-Swatch-red"]';
 exports.wbFillDrawing = 'button[id="TD-Styles-Fill"]';
 exports.wbDashDotted = 'div[id="TD-Styles-Dash-dotted"]';
 exports.wbSizeLarge = 'div[id="TD-Styles-Dash-large"]';
+exports.wbOptions = 'button[id="TD-Tools-Dots"]';
+exports.wbDuplicate = 'span[id="TD-Tools-Copy"]';
+exports.wbRotate = 'span[id="TD-Tools-Rotate"]';
+exports.wbMoveBackward = 'span[id="TD-Tools-ArrowDown"]';
+exports.wbMoveForward = 'span[id="TD-Tools-ArrowUp"]';
+exports.wbMoveToFront = 'span[id="TD-Tools-PinTop"]';
 exports.wbPaste = 'button[id="TD-ContextMenu-Paste"]';
 
 // About modal
@@ -483,7 +489,7 @@ exports.aboutModal = 'div[data-test="aboutModalTitleLabel"]';
 
 // Help button
 exports.helpButton = 'li[data-test="helpButton"]';
-exports.helpPageTitle = 'BigBlueButton Tutorials | Built For Teachers | BigBlueButton'
+exports.helpPageTitle = 'BigBlueButton Tutorials | Built For Teachers | BigBlueButton';
 
 // Dark mode
 exports.darkModeToggleBtn = 'input[data-test="darkModeToggleBtn"]';

bigbluebutton-tests/playwright/whiteboard/shapeOptions.js

@@ -0,0 +1,108 @@
+const { expect } = require('@playwright/test');
+const e = require('../core/elements');
+const { ELEMENT_WAIT_LONGER_TIME } = require('../core/constants');
+const { MultiUsers } = require('../user/multiusers');
+const { sleep } = require('../core/helpers');
+
+class ShapeOptions extends MultiUsers {
+  constructor(browser, context) {
+    super(browser, context);
+  }
+
+  async duplicate() {
+    await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+
+    const modWbLocator = this.modPage.getLocator(e.whiteboard);
+    const wbBox = await modWbLocator.boundingBox();
+    const screenshotOptions = {
+      maxDiffPixels: 1000,
+    };
+
+    await this.modPage.waitAndClick(e.wbShapesButton);
+    await this.modPage.waitAndClick(e.wbRectangleShape);
+
+    await this.modPage.page.mouse.move(wbBox.x + 0.3 * wbBox.width, wbBox.y + 0.3 * wbBox.height);
+    await this.modPage.page.mouse.down();
+    await this.modPage.page.mouse.move(wbBox.x + 0.7 * wbBox.width, wbBox.y + 0.7 * wbBox.height);
+    await this.modPage.page.mouse.up();
+
+    await this.modPage.page.mouse.click(wbBox.x + 0.7 * wbBox.width, wbBox.y + 0.7 * wbBox.height);
+    await this.modPage.waitAndClick(e.wbOptions);
+    await this.modPage.waitAndClick(e.wbDuplicate);
+    await this.modPage.waitAndClick(e.wbOptions);
+
+    await expect(modWbLocator).toHaveScreenshot('moderator-duplicate.png', screenshotOptions);
+    const userWbLocator = this.userPage.getLocator(e.whiteboard);
+    await expect(userWbLocator).toHaveScreenshot('viewer-duplicate.png', screenshotOptions);
+  }
+
+  async rotate() {
+    await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+
+    const modWbLocator = this.modPage.getLocator(e.whiteboard);
+    const wbBox = await modWbLocator.boundingBox();
+    const screenshotOptions = {
+      maxDiffPixels: 1000,
+    };
+
+    await this.modPage.waitAndClick(e.wbShapesButton);
+    await this.modPage.waitAndClick(e.wbRectangleShape);
+
+    await this.modPage.page.mouse.move(wbBox.x + 0.3 * wbBox.width, wbBox.y + 0.3 * wbBox.height);
+    await this.modPage.page.mouse.down();
+    await this.modPage.page.mouse.move(wbBox.x + 0.7 * wbBox.width, wbBox.y + 0.7 * wbBox.height);
+    await this.modPage.page.mouse.up();
+
+    await this.modPage.page.mouse.click(wbBox.x + 0.7 * wbBox.width, wbBox.y + 0.7 * wbBox.height);
+    await this.modPage.waitAndClick(e.wbOptions);
+    await this.modPage.waitAndClick(e.wbRotate);
+    await this.modPage.waitAndClick(e.wbOptions);
+
+    await expect(modWbLocator).toHaveScreenshot('moderator-rotate.png', screenshotOptions);
+    const userWbLocator = this.userPage.getLocator(e.whiteboard);
+    await expect(userWbLocator).toHaveScreenshot('viewer-rotate.png', screenshotOptions);
+  }
+
+  async movingShape() {
+    await this.modPage.waitForSelector(e.whiteboard, ELEMENT_WAIT_LONGER_TIME);
+
+    const modWbLocator = this.modPage.getLocator(e.whiteboard);
+    const wbBox = await modWbLocator.boundingBox();
+    const screenshotOptions = {
+      maxDiffPixels: 1000,
+    };
+
+    await this.modPage.waitAndClick(e.wbShapesButton);
+    await this.modPage.waitAndClick(e.wbRectangleShape);
+
+    await this.modPage.page.mouse.move(wbBox.x + 0.3 * wbBox.width, wbBox.y + 0.3 * wbBox.height);
+    await this.modPage.page.mouse.down();
+    await this.modPage.page.mouse.move(wbBox.x + 0.7 * wbBox.width, wbBox.y + 0.7 * wbBox.height);
+    await this.modPage.page.mouse.up();
+
+    await this.modPage.page.mouse.click(wbBox.x + 0.7 * wbBox.width, wbBox.y + 0.7 * wbBox.height);
+    await this.modPage.waitAndClick(e.wbStyles);
+    await this.modPage.waitAndClick(e.wbFillDrawing);
+    await this.modPage.waitAndClick(e.wbStyles);
+    await this.modPage.waitAndClick(e.wbOptions);
+    await this.modPage.waitAndClick(e.wbDuplicate);
+    await this.modPage.waitAndClick(e.wbMoveBackward);
+
+    await expect(modWbLocator).toHaveScreenshot('moderator-move-backward.png', screenshotOptions);
+    const userWbLocator = this.userPage.getLocator(e.whiteboard);
+    await expect(userWbLocator).toHaveScreenshot('viewer-move-backward.png', screenshotOptions);
+
+    await this.modPage.waitAndClick(e.wbMoveForward);
+
+    await expect(modWbLocator).toHaveScreenshot('moderator-move-forward.png', screenshotOptions);
+    await expect(userWbLocator).toHaveScreenshot('viewer-move-forward.png', screenshotOptions);
+
+    await this.modPage.waitAndClick(e.wbMoveBackward);
+    await this.modPage.waitAndClick(e.wbMoveToFront);
+
+    await expect(modWbLocator).toHaveScreenshot('moderator-move-to-front.png', screenshotOptions);
+    await expect(userWbLocator).toHaveScreenshot('viewer-move-to-front.png', screenshotOptions);
+  }  
+}
+
+exports.ShapeOptions = ShapeOptions;

bigbluebutton-tests/playwright/whiteboard/whiteboard.spec.js

@@ -18,6 +18,7 @@ const { UndoDrawing } = require('./undoDraw');
 const { RedoDrawing } = require('./redoDraw');
 const { ChangeStyles } = require('./changeStyles');
 const { RealTimeText } = require('./realTimeText');
+const { ShapeOptions } = require('./shapeOptions');
 
 const hidePresentationToast = encodeCustomParams(PARAMETER_HIDE_PRESENTATION_TOAST);
 
@@ -166,4 +167,27 @@ test.describe.parallel('Whiteboard tools - visual regression', () => {
     await realTimeText.initUserPage(true, context, { createParameter: hidePresentationToast });
     await realTimeText.realTimeTextTyping();
   });
+
+  test.describe.parallel('Shape Options', () => {
+    test('Duplicate', async ({ browser, context, page }) => {
+      const shapeOptions = new ShapeOptions(browser, context);
+      await shapeOptions.initModPage(page, true);
+      await shapeOptions.initUserPage(true, context);
+      await shapeOptions.duplicate();
+    });
+
+    test('Rotate', async ({ browser, context, page }) => {
+      const shapeOptions = new ShapeOptions(browser, context);
+      await shapeOptions.initModPage(page, true);
+      await shapeOptions.initUserPage(true, context);
+      await shapeOptions.rotate();
+    });
+
+    test('Move Shape Backward/Forward', async ({ browser, context, page }) => {
+      const shapeOptions = new ShapeOptions(browser, context);
+      await shapeOptions.initModPage(page, true);
+      await shapeOptions.initUserPage(true, context);
+      await shapeOptions.movingShape();
+    });
+  });
 });