test: Increase/Decrease font-size

bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx

@@ -483,6 +483,7 @@ class ApplicationMenu extends BaseMenu {
                       label={intl.formatMessage(intlMessages.decreaseFontBtnLabel)}
                       aria-label={`${intl.formatMessage(intlMessages.decreaseFontBtnLabel)}, ${ariaValueLabel}`}
                       disabled={isSmallestFontSize}
+                      data-test="decreaseFontSize"
                     />
                   </Styled.Col>
                   <Styled.Col>
@@ -495,6 +496,7 @@ class ApplicationMenu extends BaseMenu {
                       label={intl.formatMessage(intlMessages.increaseFontBtnLabel)}
                       aria-label={`${intl.formatMessage(intlMessages.increaseFontBtnLabel)}, ${ariaValueLabel}`}
                       disabled={isLargestFontSize}
+                      data-test="increaseFontSize"
                     />
                   </Styled.Col>
                 </Styled.PullContentRight>

bigbluebutton-tests/playwright/core/elements.js

@@ -420,3 +420,7 @@ exports.fullscreenModal = 'div[id="fsmodal"]';
 exports.simpleModal = 'div[id="simpleModal"]';
 exports.sharedNotesBackground = 'div[data-test="notes"]';
 exports.whiteboardOptionsButton = 'button[data-test="whiteboardOptionsButton"]';
+
+// Font size
+exports.increaseFontSize = 'button[data-test="increaseFontSize"]';
+exports.descreaseFontSize = 'button[data-test="decreaseFontSize"]';

bigbluebutton-tests/playwright/core/page.js

@@ -314,14 +314,17 @@ class Page {
     await expect(locator).toHaveValue(value);
   }
 
-
   async backgroundColorTest(selector, color) {
     await expect(await this.page.$eval(selector, e => getComputedStyle(e).backgroundColor)).toBe(color);
   }
 
   async textColorTest(selector, color) {
     await expect(await this.page.$eval(selector, e => getComputedStyle(e).color)).toBe(color);
   }
+
+  async fontSizeCheck(selector, size) {
+    await expect(await this.page.$eval(selector, e => getComputedStyle(e).fontSize)).toBe(size);
+  }
 }
 
 module.exports = exports = Page;

bigbluebutton-tests/playwright/options/options.js

@@ -117,6 +117,37 @@ class Options extends Page {
     await this.waitAndClick(e.modalConfirmButton);
     await this.backgroundColorTest(e.presentationToolbarWrapper, 'rgb(39, 42, 42)');
   }
+
+  async fontSizeTest() {
+    // Increasing font size
+    await openSettings(this);
+    await this.waitAndClick(e.increaseFontSize);
+    await this.waitAndClick(e.modalConfirmButton);
+
+    await this.fontSizeCheck(e.chatButton, '16px');//text + icon
+    await this.fontSizeCheck(e.chatWelcomeMessageText, '16px');
+    await this.fontSizeCheck(e.chatMessages, '16px');
+    await this.fontSizeCheck(e.sharedNotes, '14px');
+    await this.fontSizeCheck(e.userslist, '16px');
+    await this.fontSizeCheck(e.currentUser, '16px');
+    await this.fontSizeCheck(e.actionsBarBackground, '16px');
+    await this.fontSizeCheck(e.navbarBackground, '24px');
+
+    // Decreasing font size
+    await openSettings(this);
+    await this.waitAndClick(e.descreaseFontSize);
+    await this.waitAndClick(e.descreaseFontSize);
+    await this.waitAndClick(e.modalConfirmButton);
+
+    await this.fontSizeCheck(e.chatButton, '12px');
+    await this.fontSizeCheck(e.chatWelcomeMessageText, '12px');
+    await this.fontSizeCheck(e.chatMessages, '12px')
+    await this.fontSizeCheck(e.sharedNotes, '10.5px');
+    await this.fontSizeCheck(e.userslist, '12px');
+    await this.fontSizeCheck(e.currentUser, '12px');
+    await this.fontSizeCheck(e.actionsBarBackground, '12px');
+    await this.fontSizeCheck(e.navbarBackground, '18px');
+  }
 }
 
 exports.Options = Options;

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

@@ -29,4 +29,10 @@ test.describe.parallel('Settings', () => {
     await darkModeTest.init(true, true);
     await darkModeTest.darkMode();
   });
+
+  test('Font size', async ({ browser, page }) => {
+    const fontSize = new Options(browser, page);
+    await fontSize.init(true, true);
+    await fontSize.fontSizeTest();
+  });
 });