fix(video-preview): update tests to new design + fix missing prop

bigbluebutton-html5/imports/ui/components/video-preview/component.jsx

@@ -924,6 +924,7 @@ class VideoPreview extends Component {
   }
 
   renderVirtualBgSelector() {
+    const { isCustomVirtualBackgroundsEnabled } = this.props;
     const { isStartSharingDisabled, webcamDeviceId } = this.state;
     const initialVirtualBgState = this.currentVideoStream ? {
       type: this.currentVideoStream.virtualBgType,
@@ -940,6 +941,7 @@ class VideoPreview extends Component {
         locked={isStartSharingDisabled}
         showThumbnails={SHOW_THUMBNAILS}
         initialVirtualBgState={initialVirtualBgState}
+        isCustomVirtualBackgroundsEnabled={isCustomVirtualBackgroundsEnabled}
       />
     );
   }
@@ -1138,6 +1140,7 @@ class VideoPreview extends Component {
       isOpen,
       priority,
       cameraAsContent,
+      isVirtualBackgroundsEnabled,
     } = this.props;
 
     const { selectedTab } = this.state;
@@ -1192,10 +1195,10 @@ class VideoPreview extends Component {
                     darkThemeState={darkThemeState}
                   />
                   <span 
-                    id="backgrounds-title">{intl.formatMessage(intlMessages.webcamSettingsTitle)}
+                    id="webcam-settings-title">{intl.formatMessage(intlMessages.webcamSettingsTitle)}
                   </span>
                 </Styled.WebcamTabSelector>
-                {!cameraAsContent && (
+                {(isVirtualBackgroundsEnabled && !cameraAsContent) && (
                 <>
                   <Styled.HeaderSeparator />
                   <Styled.WebcamTabSelector selectedClassName="is-selected">
@@ -1203,7 +1206,7 @@ class VideoPreview extends Component {
                       src={WebcamBackgroundImg}
                       darkThemeState={darkThemeState}
                     />
-                    <span id="webcam-settings-title">{intl.formatMessage(intlMessages.webcamVirtualBackgroundTitle)}</span>
+                    <span id="backgrounds-title">{intl.formatMessage(intlMessages.webcamVirtualBackgroundTitle)}</span>
                   </Styled.WebcamTabSelector>
                 </>
               )}

bigbluebutton-tests/playwright/core/elements.js

@@ -429,7 +429,9 @@ exports.advancedVideoSettingsBtn = 'li[data-test="advancedVideoSettingsButton"]'
 exports.mirrorWebcamBtn = 'li[data-test="mirrorWebcamBtn"]';
 exports.focusWebcamBtn = 'li[data-test="focusWebcamBtn"]';
 exports.pinWebcamBtn = 'li[data-test="pinWebcamBtn"]';
-exports.webcamFullscreenButton = 'button[data-test="webcamFullscreenButton"]';
+exports.webcamsFullscreenButton = 'li[data-test="webcamsFullscreenButton"]';
+exports.webcamSettingsTitle = 'span[id="webcam-settings-title"]';
+exports.backgroundSettingsTitle = 'span[id="backgrounds-title"]';
 exports.selectDefaultBackground = 'button[data-test="selectDefaultBackground"]';
 exports.selectCustomBackground = 'button[data-test="selectCustomBackground"]';
 exports.removeCustomBackground = 'button[data-test="removeCustomBackground"]';

bigbluebutton-tests/playwright/parameters/disabledFeatures.js

@@ -18,7 +18,7 @@ class DisabledFeatures extends MultiUsers {
 
     await this.modPage.waitForSelector(e.audioModal, ELEMENT_WAIT_LONGER_TIME);
 
-    if(speechRecognitionEnabled) {
+    if (speechRecognitionEnabled) {
       await this.modPage.wasRemoved(e.speechRecognition);
     } else {
       await this.modPage.wasRemoved(e.speechRecognitionUnsupported);
@@ -64,7 +64,7 @@ class DisabledFeatures extends MultiUsers {
 
   async virtualBackgrounds() {
     await this.modPage.waitAndClick(e.joinVideo);
-    await this.modPage.wasRemoved(e.virtualBackgrounds);
+    await this.modPage.wasRemoved(e.backgroundSettingsTitle);
   }
 
   async downloadPresentationWithAnnotations() {
@@ -93,8 +93,8 @@ class DisabledFeatures extends MultiUsers {
   }
 
   async customVirtualBackground() {
-    await this.modPage.waitAndClick (e.joinVideo);
-    await this.modPage.waitForSelector(e.webcamSettingsModal);
+    await this.modPage.waitAndClick(e.joinVideo);
+    await this.modPage.waitAndClick(e.backgroundSettingsTitle);
     await this.modPage.wasRemoved(e.inputBackgroundButton);
   }
 
@@ -123,7 +123,7 @@ class DisabledFeatures extends MultiUsers {
 
     await this.modPage.waitForSelector(e.audioModal, ELEMENT_WAIT_LONGER_TIME);
 
-    if(speechRecognitionEnabled) {
+    if (speechRecognitionEnabled) {
       await this.modPage.wasRemoved(e.speechRecognition);
     } else {
       await this.modPage.wasRemoved(e.speechRecognitionUnsupported);
@@ -169,6 +169,7 @@ class DisabledFeatures extends MultiUsers {
 
   async virtualBackgroundsExclude() {
     await this.modPage.waitAndClick(e.joinVideo);
+    await this.modPage.waitAndClick(e.backgroundSettingsTitle);
     await this.modPage.hasElement(e.virtualBackgrounds);
   }
 
@@ -199,8 +200,8 @@ class DisabledFeatures extends MultiUsers {
   }
 
   async customVirtualBackgroundExclude() {
-    await this.modPage.waitAndClick (e.joinVideo);
-    await this.modPage.waitForSelector(e.webcamSettingsModal);
+    await this.modPage.waitAndClick(e.joinVideo);
+    await this.modPage.waitAndClick(e.backgroundSettingsTitle);
     await this.modPage.hasElement(e.inputBackgroundButton);
   }
 

bigbluebutton-tests/playwright/webcam/webcam.js

@@ -63,6 +63,7 @@ class Webcam extends Page {
 
   async applyBackground() {
     await this.waitAndClick(e.joinVideo);
+    await this.waitAndClick(e.backgroundSettingsTitle);
     await this.waitForSelector(e.noneBackgroundButton);
     await this.waitAndClick(`${e.selectDefaultBackground}[aria-label="Home"]`);
     await sleep(1000);
@@ -75,11 +76,14 @@ class Webcam extends Page {
   async webcamFullscreen() {
     await this.shareWebcam();
     // get default viewport sizes
-    const { windowWidth, windowHeight } = await this.page.evaluate(() => { return {
-      windowWidth: window.innerWidth,
-      windowHeight: window.innerHeight,
-    }});
-    await this.waitAndClick(e.webcamFullscreenButton);
+    const { windowWidth, windowHeight } = await this.page.evaluate(() => {
+      return {
+        windowWidth: window.innerWidth,
+        windowHeight: window.innerHeight,
+      }
+    });
+    await this.waitAndClick(e.dropdownWebcamButton);
+    await this.waitAndClick(e.webcamsFullscreenButton);
     // get fullscreen webcam size
     const { width, height } = await this.getLocator('video').boundingBox();
     await expect(width + 1).toBe(windowWidth);  // not sure why there is a difference of 1 pixel
@@ -88,6 +92,7 @@ class Webcam extends Page {
 
   async disableSelfView() {
     await this.waitAndClick(e.joinVideo);
+    await this.waitAndClick(e.backgroundSettingsTitle);
     await this.waitForSelector(e.noneBackgroundButton);
 
     await uploadBackgroundVideoImage(this);
@@ -105,6 +110,7 @@ class Webcam extends Page {
 
   async managingNewBackground() {
     await this.waitAndClick(e.joinVideo);
+    await this.waitAndClick(e.backgroundSettingsTitle);
     await this.waitForSelector(e.noneBackgroundButton);
 
     // Upload
@@ -121,12 +127,14 @@ class Webcam extends Page {
     // Remove
     await this.waitAndClick(e.videoDropdownMenu);
     await this.waitAndClick(e.advancedVideoSettingsBtn);
+    await this.waitAndClick(e.backgroundSettingsTitle);
     await this.waitAndClick(e.removeCustomBackground);
     await this.wasRemoved(e.selectCustomBackground);
   }
 
   async keepBackgroundWhenRejoin(context) {
     await this.waitAndClick(e.joinVideo);
+    await this.waitAndClick(e.backgroundSettingsTitle);
     await this.waitForSelector(e.noneBackgroundButton);
     await uploadBackgroundVideoImage(this);
     // Create a new page before closing the previous to not close the current context
@@ -135,6 +143,7 @@ class Webcam extends Page {
     const openedPage = await this.getLastTargetPage(context);
     await openedPage.init(true, true, { meetingId: this.meetingId });
     await openedPage.waitAndClick(e.joinVideo);
+    await openedPage.waitAndClick(e.backgroundSettingsTitle);
     await openedPage.hasElement(e.selectCustomBackground);
   }