From eac4bb28759f1d3a0b52e5d58b4fcd5151e18996 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Sun, 28 Nov 2021 16:43:12 +0100 Subject: [PATCH 1/2] Refactoring test cafe tests - Using "Roles" to log users - Adding seemingly useless import statement but important for code completion --- tests/tests/test.ts | 45 ++++++-------------------------------- tests/tests/utils/log.ts | 20 +++++++++++++++++ tests/tests/utils/roles.ts | 20 +++++++++++++++++ 3 files changed, 47 insertions(+), 38 deletions(-) create mode 100644 tests/tests/utils/log.ts create mode 100644 tests/tests/utils/roles.ts diff --git a/tests/tests/test.ts b/tests/tests/test.ts index eecafb13..c7747578 100644 --- a/tests/tests/test.ts +++ b/tests/tests/test.ts @@ -1,19 +1,17 @@ +import {assertLogMessage} from "./utils/log"; + const fs = require('fs') +import { Selector } from 'testcafe'; +import {userAlice} from "./utils/roles"; fixture `Variables` .page `http://play.workadventure.localhost/_/global/maps.workadventure.localhost/tests/Variables/Cache/variables_tmp.json`; -test("Test that variables cache in the back don't prevent setting a variable in case the map changes", async t => { +test("Test that variables cache in the back don't prevent setting a variable in case the map changes", async (t: TestController) => { // Let's start by visiting a map that DOES not have the variable. fs.copyFileSync('../maps/tests/Variables/Cache/variables_cache_1.json', '../maps/tests/Variables/Cache/variables_tmp.json'); - await t - .typeText('input[name="loginSceneName"]', 'foo') - .click('button.loginSceneFormSubmit') - .click('button.selectCharacterButtonRight') - .click('button.selectCharacterButtonRight') - .click('button.selectCharacterSceneFormSubmit') - .click('button.letsgo'); + await t.useRole(userAlice); //.takeScreenshot('before_switch.png'); // Let's REPLACE the map by a map that has a new variable @@ -23,19 +21,9 @@ test("Test that variables cache in the back don't prevent setting a variable in await t.resizeWindow(960, 800); - await t - .typeText('input[name="loginSceneName"]', 'foo') - .click('button.loginSceneFormSubmit') - .click('button.selectCharacterButtonRight') - .click('button.selectCharacterButtonRight') - .click('button.selectCharacterSceneFormSubmit') - .click('button.letsgo'); + await t.useRole(userAlice); //.takeScreenshot('after_switch.png'); - const messages = await t.getBrowserConsoleMessages(); - - const logs = messages['log']; - // Let's check we successfully manage to save the variable value. await assertLogMessage(t, 'SUCCESS!'); @@ -46,22 +34,3 @@ test("Test that variables cache in the back don't prevent setting a variable in console.log(await t.getBrowserConsoleMessages()); } }); - -/** - * Tries to find a given log message in the logs (for 10 seconds) - */ -async function assertLogMessage(t, message: string): Promise { - let i = 0; - let logs: string[]|undefined; - do { - const messages = await t.getBrowserConsoleMessages(); - logs = messages['log']; - if (logs.find((str) => str === message)) { - break; - } - await t.wait(1000); - i++; - } while (i < 10); - - await t.expect(logs).contains(message); -} diff --git a/tests/tests/utils/log.ts b/tests/tests/utils/log.ts new file mode 100644 index 00000000..2c5980b1 --- /dev/null +++ b/tests/tests/utils/log.ts @@ -0,0 +1,20 @@ +import { Selector } from 'testcafe'; + +/** + * Tries to find a given log message in the logs (for 10 seconds) + */ +export async function assertLogMessage(t: TestController, message: string): Promise { + let i = 0; + let logs: string[]|undefined; + do { + const messages = await t.getBrowserConsoleMessages(); + logs = messages['log']; + if (logs.find((str) => str === message)) { + break; + } + await t.wait(1000); + i++; + } while (i < 10); + + await t.expect(logs).contains(message); +} diff --git a/tests/tests/utils/roles.ts b/tests/tests/utils/roles.ts new file mode 100644 index 00000000..7ed4cad7 --- /dev/null +++ b/tests/tests/utils/roles.ts @@ -0,0 +1,20 @@ +import { Role } from 'testcafe'; + +export const userAlice = Role('http://play.workadventure.localhost/', async t => { + await t + .typeText('input[name="loginSceneName"]', 'Alice') + .click('button.loginSceneFormSubmit') + .click('button.selectCharacterButtonRight') + .click('button.selectCharacterButtonRight') + .click('button.selectCharacterSceneFormSubmit') + .click('button.letsgo'); +}); + +export const userBob = Role('http://play.workadventure.localhost/', async t => { + await t + .typeText('input[name="loginSceneName"]', 'Bob') + .click('button.loginSceneFormSubmit') + .click('button.selectCharacterButtonRight') + .click('button.selectCharacterSceneFormSubmit') + .click('button.letsgo'); +}); From 812485f8633d7b28c2a7d1b707a9f7996afccada Mon Sep 17 00:00:00 2001 From: Alexis Faizeau Date: Mon, 29 Nov 2021 15:54:34 +0100 Subject: [PATCH 2/2] Cannot rezise main cowebsite when fullscreen is enable --- front/src/WebRtc/CoWebsiteManager.ts | 26 ++++++++++++++++++-------- front/style/cowebsite.scss | 9 ++++++--- 2 files changed, 24 insertions(+), 11 deletions(-) diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts index 3bfaa5f7..09de4b41 100644 --- a/front/src/WebRtc/CoWebsiteManager.ts +++ b/front/src/WebRtc/CoWebsiteManager.ts @@ -15,6 +15,7 @@ const cowebsiteContainerDomId = "cowebsite-container"; // the id of the whole co const cowebsiteMainDomId = "cowebsite-slot-0"; // the id of the parent div of the iframe. const cowebsiteBufferDomId = "cowebsite-buffer"; // the id of the container who contains cowebsite iframes. const cowebsiteAsideDomId = "cowebsite-aside"; // the id of the parent div of the iframe. +const cowebsiteAsideHolderDomId = "cowebsite-aside-holder"; const cowebsiteSubIconsDomId = "cowebsite-sub-icons"; export const cowebsiteCloseButtonId = "cowebsite-close"; const cowebsiteFullScreenButtonId = "cowebsite-fullscreen"; @@ -54,6 +55,7 @@ class CoWebsiteManager { private cowebsiteMainDom: HTMLDivElement; private cowebsiteBufferDom: HTMLDivElement; private cowebsiteAsideDom: HTMLDivElement; + private cowebsiteAsideHolderDom: HTMLDivElement; private cowebsiteSubIconsDom: HTMLDivElement; private previousTouchMoveCoordinates: TouchMoveCoordinates | null = null; //only use on touchscreens to track touch movement @@ -99,6 +101,7 @@ class CoWebsiteManager { this.cowebsiteMainDom = HtmlUtils.getElementByIdOrFail(cowebsiteMainDomId); this.cowebsiteBufferDom = HtmlUtils.getElementByIdOrFail(cowebsiteBufferDomId); this.cowebsiteAsideDom = HtmlUtils.getElementByIdOrFail(cowebsiteAsideDomId); + this.cowebsiteAsideHolderDom = HtmlUtils.getElementByIdOrFail(cowebsiteAsideHolderDomId); this.cowebsiteSubIconsDom = HtmlUtils.getElementByIdOrFail(cowebsiteSubIconsDomId); this.initResizeListeners(); @@ -188,21 +191,23 @@ class CoWebsiteManager { this.fire(); }; - this.cowebsiteAsideDom.addEventListener("mousedown", (event) => { + this.cowebsiteAsideHolderDom.addEventListener("mousedown", (event) => { + if (this.isFullScreen) return; this.cowebsiteMainDom.style.display = "none"; this.resizing = true; document.addEventListener("mousemove", movecallback); }); document.addEventListener("mouseup", (event) => { - if (!this.resizing) return; + if (!this.resizing || this.isFullScreen) return; document.removeEventListener("mousemove", movecallback); this.cowebsiteMainDom.style.display = "block"; this.resizing = false; this.cowebsiteMainDom.style.display = "flex"; }); - this.cowebsiteAsideDom.addEventListener("touchstart", (event) => { + this.cowebsiteAsideHolderDom.addEventListener("touchstart", (event) => { + if (this.isFullScreen) return; this.cowebsiteMainDom.style.display = "none"; this.resizing = true; const touchEvent = event.touches[0]; @@ -211,7 +216,7 @@ class CoWebsiteManager { }); document.addEventListener("touchend", (event) => { - if (!this.resizing) return; + if (!this.resizing || this.isFullScreen) return; this.previousTouchMoveCoordinates = null; document.removeEventListener("touchmove", movecallback); this.cowebsiteMainDom.style.display = "block"; @@ -640,17 +645,22 @@ class CoWebsiteManager { } private fullscreen(): void { + const openFullscreenImage = HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId); + const closeFullScreenImage = HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId); + if (this.isFullScreen) { this.resetStyleMain(); this.fire(); //we don't trigger a resize of the phaser game since it won't be visible anyway. - HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = "inline"; - HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = "none"; + this.cowebsiteAsideHolderDom.style.visibility = "visible"; + openFullscreenImage.style.display = "inline"; + closeFullScreenImage.style.display = "none"; } else { this.verticalMode ? (this.height = window.innerHeight) : (this.width = window.innerWidth); //we don't trigger a resize of the phaser game since it won't be visible anyway. - HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = "none"; - HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = "inline"; + this.cowebsiteAsideHolderDom.style.visibility = "hidden"; + openFullscreenImage.style.display = "none"; + closeFullScreenImage.style.display = "inline"; } } } diff --git a/front/style/cowebsite.scss b/front/style/cowebsite.scss index 69085cc1..a6af21ee 100644 --- a/front/style/cowebsite.scss +++ b/front/style/cowebsite.scss @@ -28,7 +28,7 @@ justify-content: space-between; #cowebsite-aside-holder { - pointer-events: none; + background: gray; height: 20px; flex: 1; display: flex; @@ -38,6 +38,7 @@ img { width: 80%; + pointer-events: none; } } @@ -206,12 +207,14 @@ aside { width: 30px; - cursor: ew-resize; img { - cursor: ew-resize; transform: rotate(90deg); } } + + &-aside-holder { + cursor: ew-resize; + } } }